AI-Antworten in der Benutzeroberfläche streamen
Lernen Sie, AI-Ausgaben Token für Token an das Frontend zu streamen, damit sich Ihre AI-SaaS-Anwendung bei langen Generierungen schnell und reaktionsfähig statt eingefroren anfühlt.
AI-Antworten in der Benutzeroberfläche streamen ist eine kostenlose AI SaaS Builder-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des AI SaaS Builder-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der AI SaaS Builder-Kurs umfasst insgesamt 4 Lektionen.
Warum Streaming die UX verbessert
10 Sekunden auf eine vollständige Antwort zu warten, fühlt sich wie ein Fehler an. Streaming zeigt den Text während der Generierung an, sodass sich die App schnell und lebendig anfühlt.
So funktioniert Streaming
Das Modell gibt Tokens schrittweise aus. Der Server leitet jeden Abschnitt an den Browser weiter, der ihn an den Bildschirminhalt anhängt.
Server-Sent Events
SSE ist ein einfacher, unidirektionaler Stream vom Server zum Client über HTTP und eignet sich ideal für Token-Streaming.
res.setHeader('Content-Type', 'text/event-stream')
res.write('data: Hello\n\n')
res.write('data: world\n\n')Einen Stream auf dem Client verarbeiten
Verwenden Sie den Streaming-Reader von Fetch (oder EventSource), um Abschnitte zu lesen und den Status bei ihrem Eintreffen zu aktualisieren.
const reader = res.body.getReader()
while (true) {
const { value, done } = await reader.read()
if (done) break
appendText(new TextDecoder().decode(value))
}Schrittweise rendern
Fügen Sie die Abschnitte einem Statuspuffer hinzu und rendern Sie sie. Vermeiden Sie es, die gesamte Seite für jedes Token neu zu rendern, damit die Benutzeroberfläche flüssig bleibt.
setText(prev => prev + chunk)Eine Schreibanzeige anzeigen
Zeigen Sie vor dem Eintreffen des ersten Tokens eine Ladeanzeige oder Cursor-Animation an, damit Nutzer wissen, dass die Verarbeitung begonnen hat.
Abbrechen ermöglichen
Ermöglichen Sie Nutzern, eine lange Generierung zu stoppen. Brechen Sie die Anfrage ab, um Tokens und Kosten zu sparen.
const controller = new AbortController()
fetch('/generate', { signal: controller.signal })
// stop button:
controller.abort()Markdown beim Streaming sicher verarbeiten
Unvollständiges Markdown kann während des Streams merkwürdig dargestellt werden. Rendern Sie schrittweise, aber bereinigen Sie das fertige HTML, um Injection zu verhindern.
Fehler während des Streams behandeln
Streams können mittendrin fehlschlagen. Erkennen Sie einen unterbrochenen Stream und zeigen Sie eine klare Möglichkeit zum erneuten Versuch an, statt abgeschnittenen Text stehen zu lassen.
Barrierefreiheit berücksichtigen
Sich schnell aktualisierender Text kann Screenreader überfordern. Verwenden Sie höfliche Live-Regionen und geben Sie den Abschluss bekannt, nicht jedes einzelne Token.
<div aria-live="polite">{streamedText}</div>Wann Sie kein Streaming verwenden sollten
Bei kurzen strukturierten Ausgaben (z. B. einem einzelnen JSON-Objekt) bringt Streaming bei zusätzlicher Komplexität nur wenig Nutzen. Reservieren Sie es für lange, menschenlesbare Texte.
Kurzer Test
Überprüfen Sie Ihr Wissen über Streaming.
Zusammenfassung
Sie haben gelernt, wie Token-Streaming funktioniert, wie Sie es mit SSE bereitstellen, auf dem Client konsumieren, schrittweise rendern, Tippindikatoren anzeigen, Abbruch unterstützen, Fehler während des Streamings behandeln, Barrierefreiheit gewährleisten und erkennen, wann sich Streaming nicht lohnt.
Lerne AI SaaS Builder mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 12
- Lektionen
- 47
Häufig gestellte Fragen
Ist die Lektion „AI-Antworten in der Benutzeroberfläche streamen“ kostenlos?
Ja — der vollständige Text von „AI-Antworten in der Benutzeroberfläche streamen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des AI SaaS Builder-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der AI SaaS Builder-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „AI-Antworten in der Benutzeroberfläche streamen“?
Lernen Sie, AI-Ausgaben Token für Token an das Frontend zu streamen, damit sich Ihre AI-SaaS-Anwendung bei langen Generierungen schnell und reaktionsfähig statt eingefroren anfühlt. Du übst AI SaaS Builder mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um AI SaaS Builder zu starten?
Keine Vorkenntnisse erforderlich. AI SaaS Builder auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „AI-Antworten in der Benutzeroberfläche streamen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser AI SaaS Builder-Lektion Code schreiben und ausführen?
Ja. Jede AI SaaS Builder-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Frontend-Frameworks für SaaS
- KI-Ausgaben visualisieren
- Bewährte UX-Praktiken
- AI-Antworten in der Benutzeroberfläche streamen