AI Chatbot létrehozása Together AI segítségével

A Together AI egy gyors és megfizethető felhő API-t biztosít különböző LLM modellekhez. Ebben a cikkben bemutatjuk, hogyan építs chatbotot Flask backenddel és React frontenddel a Together API segítségével.

🔑 API kulcs beszerzése

• Lépj a https://together.ai/ oldalra és regisztrálj.
• A dashboardon menj a „Settings” > „API Keys” menüpontra.
• Generálj egy új API kulcsot és másold ki.

Hozz létre egy `.env` fájlt a backend mappádban és helyezd el benne:

TOGETHER_API_KEY=your-key-here

⚙️ Backend kód (Flask + Together API)

from flask import Flask, request, jsonify
import requests
import os
from dotenv import load_dotenv

load_dotenv()
app = Flask(__name__)

@app.route('/api/chat', methods=['POST'])
def chat():
    data = request.get_json()
    user_input = data.get('message')

    response = requests.post(
        'https://api.together.xyz/v1/chat/completions',
        headers={
            'Authorization': f"Bearer {os.getenv('TOGETHER_API_KEY')}",
            'Content-Type': 'application/json'
        },
        json={
            'model': 'meta-llama-3-8b-instruct',
            'messages': [
                { 'role': 'system', 'content': 'Segítőkész magyar nyelvű chatbot vagy.' },
                { 'role': 'user', 'content': user_input }
            ],
            'temperature': 0.7
        }
    )
    return jsonify(response.json())

🌐 Frontend kód (React példa)

import React, { useState } from 'react';

const Chat = () => {
  const [input, setInput] = useState('');
  const [response, setResponse] = useState('');

  const sendMessage = async () => {
    const res = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: input })
    });
    const data = await res.json();
    setResponse(data.choices?.[0]?.message?.content || 'Nincs válasz.');
  };

  return (
    <div>
      <h2>Chatbot</h2>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={sendMessage}>Küldés</button>
      <pre>{response}</pre>
    </div>
  );
};

export default Chat;

📦 Fontos csomagok telepítése

pip install flask python-dotenv requests
npm install

🧠 Mi történik a háttérben?

• A React beküldi az üzenetet a Flask szervernek.
• A Flask API továbbítja a Together API-nak a promptot.
• A kapott választ visszaküldi a React kliensnek.

Kapcsolódó letöltés megtekintése