Integration von KI-Chatbots in Web-Apps: Von der Basis-API bis zum Streaming von Antworten in Next.js

KI in Web-Apps zu legen ist heute eine der meistgefragten Features. Support-Bots, Assistenten: Chat ist Standard. Aber 10-30 Sekunden auf die volle LLM-Antwort zu warten, tötet UX. Streaming zeigt Wörter, während sie entstehen.

Hier: einfaches JSON vs. Streaming - und wie Sie eine Echtzeit-Chat-UI in Next.js mit Server-Sent Events (SSE) und dem OpenAI SDK bauen.

1. Standard-JSON-API-Aufrufe vs. Echtzeit-Streaming

Wenn ein Benutzer eine KI-Anfrage auslöst, können zwei Hauptansätze verwendet werden, um die Antwort zu liefern:

• Standard-JSON-Abruf: Der Client sendet eine Anfrage und wartet. Der Server kommuniziert mit OpenAI, wartet auf die Vervollständigung des gesamten Satzes, kompiliert ihn in einen JSON-Block und sendet ihn zurück. Dies führt zu einer langen Ladeanzeige und hohen Absprungraten.
• Streaming mit vom Server gesendeten Ereignissen (SSE): Der Server öffnet eine dauerhafte HTTP-Verbindung. Sobald das KI-Modell ein neues Token (ein Wort oder einen Teil davon) generiert, überträgt der Server es an den Browser. Der Benutzer sieht den Text sofort angezeigt, wodurch die wahrgenommene Ladezeit auf Millisekunden reduziert wird.

2. Backend-Implementierung in Next.js-Routenhandlern

Next.js App Router unterstützt das native Streamen von Antworten mithilfe von Web Streams. So sieht ein vereinfachter Routenhandler für Streaming aus:

Zuerst konfigurieren wir den OpenAI-Client und lösen den Chat-Abschluss mit dem Flag „stream: true“ aus. Anschließend wandeln wir den von OpenAI lesbaren Stream in einen Standard-HTTP-Antwortstream um. Der Browser liest die Chunks und verarbeitet sie im laufenden Betrieb.

3. Erstellen der Chat-Benutzeroberfläche und des Verarbeitungsstreams auf dem Client

Im Frontend verwenden wir den React-Status, um die Nachrichten zu speichern und den Antwortstream zu verwalten. Die standardmäßige „Fetch“-API ist in der Lage, Streaming-Daten mit dem „ReadableStream“-Reader zu lesen:

• Lesen Sie den Antworttext-Reader. Lesen Sie mithilfe einer „while(true)“-Schleife eingehende Blöcke mit „reader.read()“. Dekodieren Sie diese binären Blöcke mit „TextDecoder“ in Textzeichenfolgen.
• Aktualisieren Sie den Nachrichtenstatus in Echtzeit, indem Sie die neuen Token bei ihrem Eintreffen an die letzte Nachricht anhängen, was dazu führt, dass React den Wortstrom neu rendert und dynamisch anzeigt.
• Scrollen Sie beim Drucken neuer Inhalte automatisch zum Ende des Chat-Containers, sodass die neuesten Zeilen für den Benutzer immer sichtbar sind.

4. Umgang mit Grenzfällen und Fehlermanagement

Die Erstellung von Chat-Anwendungen in Produktionsqualität erfordert besondere Liebe zum Detail:

• Verbindungsunterbrechungen: Implementieren Sie Wiederverbindungslogik und Warnzustände, wenn der HTTP-Stream während der Generierung unerwartet unterbrochen wird.
• Abbruchanfragen: Stellen Sie auf der Benutzeroberfläche eine Schaltfläche „Generierung stoppen“ bereit. Verwenden Sie „AbortController“ in Ihren Abrufanfragen, um den Server anzuweisen, die LLM-Anfrage abzubrechen und keine API-Kosten mehr zu verschwenden.
• Markdown und Code-Rendering: LLM-Antworten enthalten häufig Markdown-Tabellen oder formatierte Codeblöcke. Verwenden Sie Komponenten wie „react-markdown“ und Syntax-Highlighter, um strukturierte Layouts darzustellen.

Fazit: Rüsten Sie Ihre UX mit Streaming AI auf

Antwortstreaming in Echtzeit ist eine Notwendigkeit für moderne KI-gesteuerte Web-Apps. Durch die Verwendung von vom Server gesendeten Ereignissen, Next.js-Routenstreaming und responsiven React-Chat-Containern können Sie interaktive Schnittstellen erstellen, die sich schnell, lebendig und ausgefeilt anfühlen.

Wollen Sie OpenAI, Anthropic oder ein lokales LLM mit Streaming in Ihre Business-App legen? Schreiben Sie mir über das Formular - wir bauen das sauber.