KI mit JavaScript und Node.js: Sprachmodelle in Web-Apps einbauen

KI mit JavaScript einzubauen liegt nahe, wenn die Anwendung ohnehin im Browser oder auf Node.js läuft. Alle großen Anbieter haben offizielle SDKs für JavaScript und TypeScript. Die wichtigste Regel dabei: Der API-Schlüssel gehört auf den Server, niemals in den Browser.

Die richtige Architektur

Ein häufiger Fehler ist, die Modell-API direkt aus dem Frontend aufzurufen. Dann steckt der Schlüssel im ausgelieferten Code, und jeder kann ihn auslesen. Richtig ist ein kleiner Server-Endpunkt dazwischen:

1. Der Browser schickt die Nutzereingabe an Ihren eigenen Endpunkt.
2. Der Server prüft Anmeldung, Eingabelänge und Limits.
3. Der Server ruft die Modell-API mit dem geheimen Schlüssel auf.
4. Die Antwort wird an den Browser zurückgegeben, gern als Stream.

Das funktioniert mit Node.js, Serverless-Funktionen oder Edge-Workern gleichermaßen.

Minimalbeispiel mit Node.js

import OpenAI from "openai";

const client = new OpenAI(); // liest OPENAI_API_KEY

const antwort = await client.responses.create({
  model: "MODELL-ID",
  input: "Schreibe einen Alt-Text für ein Foto eines Fahrradladens.",
});
console.log(antwort.output_text);

Für Claude heißt das Paket @anthropic-ai/sdk, für Gemini @google/genai. Der Aufbau ist jeweils ähnlich. Wer mit TypeScript arbeitet, profitiert von den mitgelieferten Typen; eigene Typen für JSON-Antworten erzeugt das Werkzeug JSON zu Typen.

Streaming für bessere Nutzererfahrung

Lange Antworten wirken deutlich schneller, wenn der Text Stück für Stück erscheint. Die SDKs liefern dazu Ereignisse, die Ihr Server per Server-Sent Events oder einem lesbaren Stream an den Browser weiterreicht. Beim Debuggen hilft der Streaming-Antwort-Zusammensetzer, der rohe Stream-Ereignisse wieder zu einem Text zusammenfügt. Grundlagen erklärt Streaming erklärt.

Schutz vor Missbrauch

• Anmeldung oder Ratenbegrenzung: Ein offener Endpunkt wird schnell zur kostenlosen KI für Fremde.
• Eingaben begrenzen: Maximale Länge prüfen, bevor Sie Tokens bezahlen. Der Token-Zähler zeigt, wie viele Tokens ein Text ungefähr hat.
• Ausgaben begrenzen: Ein Limit für die Ausgabelänge setzen.
• Prompt Injection bedenken: Nutzereingaben können versuchen, Ihre Anweisungen auszuhebeln; siehe Prompt Injection.
• Ausgabenlimit beim Anbieter: Zusätzlich zur eigenen Logik ein Budget im Konto festlegen.

Strukturierte Antworten im Frontend

Soll die Oberfläche nicht nur Fließtext anzeigen, sondern etwa Karten, Listen oder Formularvorschläge, lassen Sie das Modell JSON nach einem festen Schema liefern. Validieren Sie das Ergebnis auf dem Server, bevor es an den Browser geht. Kaputte Antworten lassen sich mit dem JSON-Reparierer untersuchen.

Frameworks im JavaScript-Umfeld

Es gibt Bibliotheken, die mehrere Anbieter hinter einer einheitlichen Schnittstelle bündeln und fertige Bausteine für Chat-Oberflächen und Streaming mitbringen. Das spart Zeit, bindet Sie aber an deren Abstraktion. Für einfache Anwendungen reicht das offizielle SDK. Welche Kriterien bei der Wahl helfen, beschreibt Agenten-Frameworks im Überblick.

Fehlerbehandlung

Netzwerkabbrüche, Zeitüberschreitungen und Rate-Limits gehören zum Alltag. Fangen Sie Fehler gezielt ab, zeigen Sie Nutzern eine verständliche Meldung und wiederholen Sie nur Fehler, bei denen ein erneuter Versuch sinnvoll ist. Welche Statuscodes was bedeuten, listet die Übersicht API-Fehlercodes. Wer parallel ein Backend in Python betreibt, findet Muster dafür unter KI mit Python nutzen.