Advanced11 min
Generative UI
Building dynamic frontend components driven by agent output. Streaming UI updates, tool result rendering, and real-time state visualization.
Quick Reference
- →Generative UI renders dynamic React components based on structured agent output — not just text, but interactive widgets
- →Stream UI updates token-by-token using LangGraph's streaming API paired with React Server Components or client-side state
- →Map tool results to specialized UI components: a search tool renders a results card, a chart tool renders a live visualization
- →Use the agent's state to drive real-time progress indicators showing which node is executing and what tools are being called
- →Implement optimistic UI updates for tool calls — show a loading skeleton immediately, then swap in the real result when it arrives
Beyond the Chat Interface
Generative UI: the agent decides what to show, not just what to say
Most agent UIs are chat bubbles. Generative UI transforms agent output into rich, interactive components: data tables, charts, forms, cards, and custom widgets. The agent's structured output determines which component to render.
| Agent output type | Traditional UI | Generative UI |
|---|---|---|
| Search results | Plain text list | Clickable result cards with thumbnails |
| Order status | 'Your order shipped on Jan 10' | Order tracking card with timeline and map |
| 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 |