AI responses take time. To avoid making the user wait, we use Real-time Content Rendering—also known as Streaming.

A large language model doesn't generate its full answer instantly — it produces output token by token, and a multi-paragraph response can genuinely take several seconds to finish generating in full. If your UI waits for the entire response before showing anything, the user stares at a blank loading state for that entire duration.

Streaming changes what the user experiences without changing how long the model actually takes to finish: instead of one long wait followed by a wall of text, the response appears progressively as each chunk arrives, so the user starts reading within a fraction of a second. This is a perceived-performance technique, not a raw-speed one — the total generation time is the same, but it no longer feels like dead time.

Streaming sends data piece by piece as the model generates it. In React, we can capture these chunks using the Fetch API's body stream.

response.body is a ReadableStream, and calling .getReader() gives you direct control over consuming it chunk by chunk instead of waiting for response.json() or response.text() to resolve only once the entire body has arrived. The while (true) loop calls reader.read() repeatedly, each call resolving with the next available chunk (or done: true once the stream ends).

Each chunk arrives as a Uint8Array of raw bytes, not text — that's what new TextDecoder().decode(value) is for, converting the binary chunk into a readable string. Appending each decoded chunk onto the previous result via setResult(prev => prev + chunk) is what produces the incremental, typewriter-like rendering the user sees.

Markdown rendering is essential for AI outputs. Since text arrives in chunks, we need a renderer that can handle partial markdown safely.

LLMs commonly format their answers with markdown — headings, bold text, code blocks, lists — and users expect that formatting to render, not show up as raw asterisks and backticks. But mid-stream, the text is frequently in an incomplete state: a bold marker (**) might have opened without its closing pair yet, or a code fence might be mid-block. Naively rendering that incomplete markdown as HTML can produce broken or flickering output.

ReactMarkdown handles this gracefully by re-parsing the full accumulated text on every update rather than trying to patch previous output — since it always works from the complete string received so far, an unterminated markdown construct just renders as plain text until its closing marker arrives, instead of corrupting the whole render.

Auto-scrolling: When text streams down the page, you should automatically scroll to keep the newest content in view.

As a streaming response grows, it can push past the visible viewport well before the model finishes generating — without auto-scroll, the user would need to manually scroll down repeatedly just to keep reading new text as it appears, which defeats the point of a smooth streaming experience.

The useEffect here re-runs on every change to streamingText, scrolling a sentinel element at the bottom of the response into view each time new text arrives. In a real chat interface, this needs a small refinement beyond what's shown: if the user manually scrolls up to re-read earlier text, auto-scroll should pause until they scroll back to the bottom, or it will fight the user's own scroll input.

Real-time rendering mastered! Your AI responses now feel fast and alive.

With chunked reading, incremental markdown rendering, and auto-scroll working together, an AI feature that technically takes several seconds to fully generate now feels responsive from the very first moment content appears — the perceived latency, which is what users actually judge an app by, has dropped dramatically even though the underlying model speed hasn't changed at all.

This combination — stream, render incrementally, keep the latest content visible — is the standard pattern behind essentially every modern AI chat interface, and it transfers directly to any future provider or model you integrate, since it depends only on the response being deliverable as a stream.

Next, we'll refine the experience with Loading States and optimized UX for AI.

Streaming solves the 'is anything happening' problem once tokens start arriving, but there's still a gap before the very first chunk shows up — the time spent waiting on the network request and the model's initial response.

The next lesson covers designing that pre-stream loading state (and other AI-specific UX details, like disabling input during generation and showing clear error states) so the experience feels considered and intentional from the first click, not just once streaming is underway.

AI responses take time. To avoid making the user wait, we use Real-time Content Rendering—also known as Streaming.

Streaming sends data piece by piece as the model generates it. In React, we can capture these chunks using the Fetch API's body stream.

Markdown rendering is essential for AI outputs. Since text arrives in chunks, we need a renderer that can handle partial markdown safely.

Checkpoint: Why is streaming preferred over waiting for the full response in AI apps?

• →It uses less data
• →It drastically reduces 'Perceived Latency' by showing text immediately

Auto-scrolling: When text streams down the page, you should automatically scroll to keep the newest content in view.

Real-time rendering mastered! Your AI responses now feel fast and alive.

Next, we'll refine the experience with Loading States and optimized UX for AI.

Check Real Streaming Render Safety. Finish checking whether it's safe to render a partial streamed response, or if it's mid-way through an unclosed code block.