Generative UI
How CopilotKit lets agents drive UI — the primitives it ships, what each one is for, and how to pick the right one.
Generative UI in CopilotKit is the set of primitives that let an agent decide what appears on the screen — from rendering a specific React component you've built, to composing layouts from a catalog, to embedding sandboxed UI shipped by an MCP server.
What CopilotKit ships#
Six primitives. Each one solves a different problem.
| Primitive | What it does |
|---|---|
| Components as Tools | Register a React component with useComponent; the agent calls it as a tool and CopilotKit renders it inline with typed props. |
| Tool Call Rendering | Wrap your agent's existing backend tool calls in custom UI cards with useRenderTool (live status, arguments, results). |
| State Rendering | Subscribe to the agent's streamed state and re-render UI as values arrive. |
| Reasoning | Render the model's reasoning tokens inline as a first-class message type (default card, or fully custom). |
| A2UI | Render UI from a declarative schema the agent emits, composed against a catalog you register. Two flavors: Dynamic Schema (LLM generates the schema) and Fixed Schema (you author the schema, agent supplies data). |
| MCP Apps | Embed UI that an MCP server ships alongside its tools, rendered in a sandboxed iframe. No frontend renderer required. |
Prefer to learn by building? Build Interactive Agents with Generative UI is a free DeepLearning.AI short course taught by CopilotKit's CEO. It walks through the Generative UI patterns end-to-end with React, LangChain, and AG-UI.
Pick one#
Match the row that sounds like your situation:
| You want to… | Use |
|---|---|
| Let the agent render a specific React component you've already built | Components as Tools |
| Brand the cards CopilotKit draws for your agent's existing backend tools | Tool Call Rendering |
| Update UI as the agent's state changes (progress, drafts, dashboards) | State Rendering |
| Surface the model's thinking chain in the chat | Reasoning |
| Let the agent compose layouts from a catalog you define | A2UI — Fixed Schema if the surface is known, Dynamic Schema if it isn't |
| Embed someone else's MCP-hosted UI in the chat | MCP Apps |
How the primitives compare#
These primitives sit along a spectrum from author-controlled to agent-invented. Same React app, same runtime, same AG-UI protocol — the choice is per-feature, not per-product.
- Controlled — you wrote the component; the agent only picks which one to render and what data to pass. Highest predictability, highest engineering cost per capability. Components as Tools, Tool Call Rendering, State Rendering, Reasoning.
- Declarative — the agent emits a structured spec; the frontend composes from a catalog you registered. Creativity inside a guardrail. A2UI (Dynamic and Fixed Schema).
- Open-Ended — the UI is invented elsewhere (an MCP server) and you sandbox it. Highest expressive range, hardest to guarantee accessibility / brand / security. MCP Apps.
