Overview
How might we design generative ui so people can trust and act on AI output?
When this pattern fits
- Perfect for rapid prototyping tools, design systems, dashboard builders, and low-code platforms where speed from concept to UI is critical.
When to skip or lighten it
- Simple Q&A where text is enough and generated widgets add noise.
- Strict design-system products that cannot safely render arbitrary generated components.
- High-security forms where model-authored fields would be unpredictable or unsafe.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Generating non-interactive mock UI that looks clickable but does nothing.
Inconsistent components that break layout or accessibility every turn.
No way to fall back to text or copy structured results out of the widget.
Regenerating the whole UI on every keystroke with no stable state.
How products use it
| Product | Implementation |
|---|---|
| ChatGPT | Can render interactive canvases, tables, and app-like blocks inside chat. |
| Gemini | Produces structured maps, tables, and actionable layouts for research and planning. |
| Vercel / AI SDK demos | Streams generative UI components tied to tool results. |
| Cursor | Surfaces interactive diffs, plans, and structured agent artifacts beyond plain chat. |
Real-world examples
How shipped products implement generative ui, from our teardown guides.
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Generative UI" AI interface design pattern.
Pattern Definition:Frequently asked questions
What is generative UI?
Generative UI means the AI outputs interactive interface pieces (forms, cards, tables, charts, or controls) so users can act on results in the product instead of only reading prose.
When should I use GenUI instead of markdown?
Use GenUI when the next user action is clearer as a control (pick an option, edit a field, sort a table) than as copied text. Prefer markdown for explanations, narratives, and copy-out answers.
What are the main GenUI risks?
Unstable layouts, inaccessible controls, unsafe generated actions, and widgets that look interactive but are not. Constrain components to a trusted design system and keep a text fallback.