Back to Glossary
Streaming UI
Synonyms: streamed responses, token streaming, typewriter effect, progressive rendering, live output
Do not index
Definition
Streaming UI shows an AI response piece by piece while the model is still writing it. The design work covers the wait before the first words, how new text gets added, what the scroll does, how users stop a bad answer, and what changes when it's done. It exists because language models produce text a few characters at a time. Early words show the system is working well before the answer is done.
Use cases
Done badly, streaming feels worse than a plain spinner.
- Scroll hijack: The chat jumps down with every new line while the user is still reading paragraph 1.
- Markdown flicker: A half-written table shows up as raw pipes and asterisks, then snaps into shape and shifts the whole layout.
- No way out: The answer goes the wrong way in line 2, and the only option is to sit through the rest.
How it's used in practice
- Cover the gap before the first token: Show a "Generating" state on the avatar until text starts.
- Add each chunk to the end: Use a streaming Markdown renderer that holds back half-finished syntax until it's complete.
- Follow only at the bottom: Auto-scroll if the user is already at the bottom. If they scrolled up, show "Jump to latest".
- Put Stop where Send was: One tap, no confirm, then offer Regenerate.
- Mark the finish: Swap in Copy and Regenerate, and announce completion once through a polite live region.
Sanitize the full text received so far, not each chunk on its own. Malicious HTML can be split across 2 chunks, so neither looks harmful. Chrome's guidance: if the sanitizer strips anything, stop rendering the response.
Challenges & limitations
- Moderation lags behind: Partial text reaches users before safety checks on the full output can run.
- Structured output can't stream cleanly: Tables, charts, and tool inputs only make sense once complete.
- Speed is uneven: Output can pause mid-sentence while the model calls a tool, which reads as a freeze unless the UI says what's happening.
Free resources
- Chrome for Developers: Best practices to render streamed LLM responses — why to append chunks, use a streaming Markdown parser, and sanitize the combined output.
- OpenAI: Streaming API responses — server-sent events, plus a note on the moderation risk of partial output.
