Generative UI
Interactive Components Instead of Text Walls
Ask a model to analyze data in chat and you get prose about the data — a paragraph asserting trends you cannot check, sort, or filter, where every follow-up costs another turn. Generative UI makes the response itself the interface: stat cards with deltas, a chart with switchable encodings, a sortable and filterable table — so follow-up questions become clicks on the answer instead of new prompts about it.
Framing
The problem
Analytical tasks are often answered with prose instead of manipulable structure.
The pattern
Render the answer itself as an interactive interface with controls and views.
Why chat breaks here
Text summaries hide the data model and block real exploration.
Risks
Generated visuals can overstate certainty or choose misleading encodings.
Avoid when
A short textual answer is clearer than an interface for the task at hand.
Use when
The answer is a working surface — a chart, a board, a config — rather than a paragraph.
DOPE evaluation
- Directability
- Click a category to filter every view at once, sort any column, toggle chart types — follow-up questions become direct manipulation instead of new prompts
- Observability
- The data model sits on the surface — stat cards with deltas, hoverable charts, a sortable table — instead of trapped inside a paragraph of prose
- Predictability
- Switching bar to line to pie re-encodes the same numbers; exploration changes the view, never the answer underneath it
- Explainability
- Every claim is checkable against the marks that render it — hover a bar for the exact figure, the legend names each category — no "trust my summary" step
In the wild
- v0 by Vercel (Vercel) — Prompt produces React/Tailwind components rendered live in a sandbox runtime — the answer IS the interface, not a description of one.
- Claude Artifacts (Anthropic) — Fully interactive React/Recharts components render live in a side panel. The cleanest hero — Anthropic explicitly framed this as on-demand generative UI.
- Gemini Deep Research (Google) — Reports natively render charts, infographics, and HTML visualizations inline instead of describing data in prose. The Apr 2026 launch on Gemini 3.1 Pro made this the hero UX.
FAQ
When should I use the Generative UI pattern?
The answer is a working surface — a chart, a board, a config — rather than a paragraph.
When should I avoid the Generative UI pattern?
A short textual answer is clearer than an interface for the task at hand.
What problem does Generative UI solve?
Analytical tasks are often answered with prose instead of manipulable structure.
Why is chat the wrong fit for this?
Text summaries hide the data model and block real exploration.
Related patterns
- Alternative to: Spatial Canvas — One generated artifact vs many co-existing AI contexts on an infinite surface.
- Often paired with: Semantic Zoom — A generated dashboard becomes navigable across abstraction levels.
- Extends: Progressive Disclosure — Generated UIs gain layered reveal so they do not overwhelm by default.