KI-Antworten streamen
Lernen Sie, Tokens eines KI-Modells in Echtzeit zu streamen, damit Nutzer Antworten schrittweise sehen, statt auf die vollständige Antwort zu warten
KI-Antworten streamen ist eine kostenlose AI Powered SaaS: Stripe + Auth + Billing + Deploy-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 Powered SaaS: Stripe + Auth + Billing + Deploy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der AI Powered SaaS: Stripe + Auth + Billing + Deploy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Why Stream Responses?
Large language models can take several seconds to produce a full answer. Streaming sends tokens to the client as they are generated, so the user sees text appear word by word.
- Lower perceived latency
- Users can start reading immediately
- Feels conversational, like a chat
How Streaming Works
Streaming relies on a long-lived HTTP connection. The server keeps the response open and pushes chunks as they arrive from the model provider.
Two common transports are Server-Sent Events and chunked HTTP responses. Most AI SDKs default to SSE.
Enabling Stream Mode
Most AI APIs accept a stream: true flag. Instead of a single JSON object you receive a sequence of small JSON events, each containing a piece of the answer.
const response = await client.chat.completions.create({
model: "gpt-4o-mini",
stream: true,
messages: [{ role: "user", content: "Explain streaming." }],
});Reading the Stream on the Server
The SDK returns an async iterable. You loop over it and forward each delta to your client.
for await (const chunk of response) {
const token = chunk.choices[0].delta.content || "";
process.stdout.write(token);
}Forwarding to the Browser with SSE
Wrap each token in an SSE data: frame. Set the right headers so the browser keeps the connection open.
res.setHeader("Content-Type", "text/event-stream");
res.setHeader("Cache-Control", "no-cache");
for await (const chunk of aiStream) {
const t = chunk.choices[0].delta.content || "";
res.write("data: " + JSON.stringify({ t }) + "\n\n");
}
res.end();Consuming the Stream in the UI
On the client, use the EventSource API or fetch with a reader. Append each token to your displayed message state.
const es = new EventSource("/api/chat");
es.onmessage = (e) => {
const { t } = JSON.parse(e.data);
setMessage((prev) => prev + t);
};Showing a Typing Indicator
While tokens stream in, show a blinking cursor or animated dots. Remove it once the stream closes. This reinforces the feeling that the AI is actively responding.
Handling Stream Errors
Connections can drop mid-stream. Always handle the error event and close the source. Offer a retry button and keep whatever partial text was already received.
es.onerror = () => {
es.close();
showRetry();
};Cancelling a Stream
Let users stop a long answer. With fetch you abort via an AbortController; with EventSource you call close(). Cancelling also saves token cost.
const controller = new AbortController();
fetch("/api/chat", { signal: controller.signal });
// later:
controller.abort();Cost and Token Accounting
Streaming does not change billing: you still pay for total tokens generated. Count tokens as they arrive, or read the final usage event some providers send when the stream ends.
Backpressure and Buffering
If the client reads slower than the model produces, tokens queue up. Most runtimes handle this automatically, but for very high throughput consider buffering small batches of tokens before flushing to reduce write overhead.
Quick Check
Test your understanding of streaming AI responses.
Recap
You learned to stream AI responses end to end:
- Enable
stream: trueon the API call - Iterate over chunks server-side and forward via SSE
- Append tokens in the UI with a typing indicator
- Handle errors, cancellation, and token accounting
Streaming makes AI features feel fast and conversational.
Lerne AI Powered SaaS: Stripe + Auth + Billing + Deploy 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
- 48
Häufig gestellte Fragen
Ist die Lektion „KI-Antworten streamen“ kostenlos?
Ja — der vollständige Text von „KI-Antworten 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 Powered SaaS: Stripe + Auth + Billing + Deploy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der AI Powered SaaS: Stripe + Auth + Billing + Deploy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „KI-Antworten streamen“?
Lernen Sie, Tokens eines KI-Modells in Echtzeit zu streamen, damit Nutzer Antworten schrittweise sehen, statt auf die vollständige Antwort zu warten Du übst AI Powered SaaS: Stripe + Auth + Billing + Deploy 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 Powered SaaS: Stripe + Auth + Billing + Deploy zu starten?
Keine Vorkenntnisse erforderlich. AI Powered SaaS: Stripe + Auth + Billing + Deploy 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 „KI-Antworten 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 Powered SaaS: Stripe + Auth + Billing + Deploy-Lektion Code schreiben und ausführen?
Ja. Jede AI Powered SaaS: Stripe + Auth + Billing + Deploy-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
- Integration von KI-Service-APIs
- Grundlagen des Prompt Engineering
- KI in Benutzeroberflächen integrieren
- KI-Antworten streamen