Generative UI
Three paradigms for rendering agent output as interactive UI: Static component registries, Declarative agent-described interfaces (A2UI), and Open-Ended agent-generated surfaces. Covers Vercel AI SDK and LangGraph integration, security trust boundaries, error recovery, and testing strategies.
Quick Reference
- →Three paradigms: Static (component registry, agent selects pre-built components), Declarative (A2UI protocol, agent describes UI in JSON), Open-Ended (MCP Apps / LangGraph, agent generates full surfaces)
- →Static paradigm: map tool names to typed React components; use Zod to validate props before rendering — not Record<string, React.FC<{ data: any }>>
- →Vercel AI SDK: useChat exposes toolInvocations on each message — the production-recommended path; avoid the RSC module (createStreamableUI) which is experimental
- →LangGraph: register React components in langgraph.json, emit with typedUi / push_ui_message, render via LoadExternalComponent with shadow DOM isolation
- →A2UI protocol (Google, v0.8 stable) — agent returns structured JSON describing component type + data; a renderer interprets it without executing agent code
- →Agent output is untrusted input — sanitize all strings with DOMPurify before rendering as HTML, validate component props with Zod, never dangerouslySetInnerHTML from agent data
- →Wrap every dynamically rendered tool component in a React Error Boundary — one failing component must not crash the entire interface
- →Test with visual snapshots for the registry, contract tests for the agent-to-UI schema boundary, and ARIA audits for dynamic content
Three Paradigms of Generative UI
Most agent UIs are chat bubbles. Generative UI goes further: agent output drives interactive components — data tables, charts, forms, order cards, and custom widgets. But generative UI is not one pattern. Three distinct paradigms have emerged, and choosing the wrong one creates security problems or unmaintainable complexity.
Three generative UI paradigms — Static covers most use cases at the lowest risk
| Paradigm | How it works | Security risk | Best for |
|---|---|---|---|
| Static | Agent selects from pre-built components + fills typed props | Low — agent can't inject UI | ≤ 20 tool types, predictable formats |
| Declarative | Agent returns JSON schema describing layout + data (A2UI) | Medium — schema validation required | Many tools, variable layouts |
| Open-Ended | Agent generates full UI surfaces (HTML/JS/CSS) | High — requires sandbox isolation | Full interactive apps, MCP Apps |
The Static paradigm covers most production use cases and carries the lowest security and complexity burden. Adopt Declarative only when you have more than 20 distinct tool output types or need layouts the agent must vary at runtime. Treat Open-Ended as a research preview — it requires a security review before shipping.
| Agent output type | Traditional UI | Generative UI (Static) |
|---|---|---|
| Search results | Plain text list | Clickable result cards with thumbnails |
| Order status | 'Your order shipped on Jan 10' | Order tracking card with timeline |
| Data analysis | Paragraph of text | Interactive chart + summary card |
| Form collection | 'What is your email?' | Inline form with validation |
| Agent reasoning | Hidden | Collapsible step-by-step panel |