showcase/shell/public/designs/model-c-v2.html
Ask anything, explore the stack, or jump straight to what you need.
CopilotKit Welcome! I can help you find the right integration, explore features, or get started with a quickstart guide. What are you working on?
🚀 Get started with a framework 🎨 Explore Generative UI 💬 Try a live demo 📊 Feature comparison 🤔 Help me choose a stack
↑
Frontend Platform
ReactAngularVueTanStackReact NativeSwiftUI
↓
Chat UI
CopilotChatSidebarPopupHeadless
↓
Generative UI
ControlledDeclarativeOpen
↓
Interaction
HITLToolsVoice
↓
CopilotKit
↓
AG-UI Protocol
↓
Agent Frameworks
LangGraphMastraCrewAIPydanticAIAgno+8
↓
Platforms
Google ADKAWSAzureVercel
↓
LLM Providers
OpenAIAnthropicGoogle+5
Home / LangGraph / Features / Generative UI
Let your agent generate interactive React components on the fly. Tool-based, controlled, or fully agent-driven.
▶ Try Live Demo
Register a frontend tool with useFrontendTool and the agent calls it to render components in the chat.
useFrontendTool({ name: "render_chart", parameters: z.object({ data: z.array(...), type: z.enum(["bar", "pie"]) }), handler: async ({ data, type }) => { return { rendered: true }; }, });
When the agent calls this tool, CopilotKit renders your component inline. The user sees an interactive chart appear in the chat.
For long-running tasks, the agent orchestrates multi-step workflows and renders progress UI along the way. Try the demo →
Use A2UI, Hashbrown, JSON Render, or other declarative renderers. The agent sends a schema, your renderer turns it into components.
Key hooks: useFrontendTool, useRenderTool, useComponent. Full reference →
47 features across 30 integrations. Click any checkmark to try the live demo.
| Integration | Chat | Gen UI | HITL | State | Streaming | Sub-Agents | MCP | Voice |
|---|---|---|---|---|---|---|---|---|
| LangGraph (Python) | ||||||||
| Agent Framework | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | — | — |
| Mastra | ||||||||
| Agent Framework | ○ | ○ | ○ | — | — | — | — | — |
| Google ADK | ||||||||
| Enterprise | ○ | ○ | ○ | — | — | — | — | — |
Tool-Based Generative UI● Live PreviewCode Guide
✕
💬
Live demo slides in here
Click "Guide" tab to return to docs
View Home (Conversational) Guide + Drawer Matrix