Verwandeln Sie Ihre Website in einen KI-Assistenten: ChatGPT API mit JavaScript

Warum Ihre Website ein Gehirn braucht? ChatGPT API + JavaScript

Stellen Sie sich vor: Ein Benutzer besucht Ihre Website und dort gibt es nicht nur eine statische Seite, sondern einen lebendigen Assistenten. Er schreibt Code, übersetzt Text, generiert Ideen oder führt einfach ein Gespräch. Klingt nach Science-Fiction? In Wirklichkeit sind es nur ein paar Dutzend Zeilen JavaScript und eine einzige API-Anfrage an ChatGPT.

In diesem Artikel werden wir uns ansehen, wie Sie die ChatGPT API mit JavaScript einbinden – von der Registrierung des Schlüssels bis hin zu einem vollwertigen Chatbot. Sie erfahren, wie Sie Anfragen senden, Fehler behandeln und das Maximum aus dem neuronalen Netz herausholen. Los geht's!

Was ist die ChatGPT API und wozu brauchen Sie sie?

OpenAI API ist die Brücke zwischen Ihrem Code und dem riesigen Sprachmodell (GPT-4, GPT-3.5). Sie senden Text (Prompt) und das Modell gibt eine generierte Antwort zurück. Ganz einfach, aber die Möglichkeiten sind grenzenlos.

Die Integration mit JavaScript ist besonders praktisch: Sie können fetch im Browser oder axios / node-fetch auf dem Server (Node.js) verwenden. Keine komplexen Bibliotheken – nur HTTP und JSON.

Wo kann dies auf einer Bildungsseite wie PythonLib nützlich sein:

\n
• Interaktiver Assistent – beantwortet Fragen zu Python.
\n
• Code-Generator – schreibt Beispiele auf Anfrage des Benutzers.
\n
• Hausaufgabenkontrolle – analysiert den Code des Schülers.
\n
• Chatbot für den technischen Support – antwortet rund um die Uhr.
\n

Schritt 1: OpenAI-API-Schlüssel abrufen

Ohne Schlüssel geht nichts. Gehen Sie auf platform.openai.com, registrieren Sie sich und wechseln Sie zum Bereich API Keys. Klicken Sie auf Create new secret key – kopieren Sie ihn sofort. Bewahren Sie den Schlüssel geheim auf, fügen Sie ihn nicht in den Client-Code ein!

Für Tests reicht das kostenlose Guthaben (normalerweise $5-18). Aber denken Sie daran: Anfragen an das Modell kosten Geld, wenn auch nur Centbeträge.

Schritt 2: Einfachste Anfrage mit JavaScript (Node.js)

Der schnellste Weg, es auszuprobieren, ist ein Skript mit Node.js zu schreiben. Installieren Sie node-fetch (oder verwenden Sie das integrierte fetch in Node 18+).

// chatgpt.js\nimport fetch from 'node-fetch';\n\nconst API_KEY = 'ihr_geheimer_schluessel';\nconst API_URL = 'https://api.openai.com/v1/chat/completions';\n\nasync function askChatGPT(prompt) {\n  const response = await fetch(API_URL, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      'Authorization': `Bearer ${API_KEY}`\n    },\n    body: JSON.stringify({\n      model: 'gpt-3.5-turbo', // oder gpt-4\n      messages: [\n        { role: 'user', content: prompt }\n      ],\n      temperature: 0.7,\n      max_tokens: 500\n    })\n  });\n\n  const data = await response.json();\n  return data.choices[0].message.content;\n}\n\n// Verwendung\nconst answer = await askChatGPT('Schreibe eine Funktion in Python zum Sortieren einer Liste');\nconsole.log(answer);

Führen Sie node chatgpt.js aus – und das neuronale Netz antwortet Ihnen mit Code. Magie!

Die Struktur der Anfrage verstehen

Im Anfragetext übergeben wir:

\n
• model – welche Version von GPT (gpt-3.5-turbo ist schneller und günstiger, gpt-4 ist intelligenter).
\n
• messages – ein Array von Nachrichten. Sie können system (Anweisung an das Modell), assistant (Kontext) und user hinzufügen.
\n
• temperature – Kreativität der Antwort (0 – strikte Fakten, 1 – Kreativität).
\n
• max_tokens – maximale Länge der Antwort in Tokens (1 Token ≈ 0,75 Wörter).
\n

Schritt 3: Integration der ChatGPT API mit JavaScript im Browser

Hier gibt es einen Haken: Senden Sie niemals den API-Schlüssel aus dem Client-Code – er wird gestohlen. Verwenden Sie einen Server-Proxy (Node.js, Python) oder Edge Functions.

Aber für eine Demo