CopilotKit Docs
Ask anything, explore the stack, or jump straight to what you need.
The Stack
Frontend Platform
React
Angular
Vue
TanStack
React Native
SwiftUI
↓
Chat UI
CopilotChat
Sidebar
Popup
Headless
↓
Generative UI
Controlled
Declarative
Open
↓
Interaction
HITL
Tools
Voice
↓
CopilotKit
↓
AG-UI Protocol
↓
Agent Frameworks
LangGraph
Mastra
CrewAI
PydanticAI
Agno
+8
↓
Platforms
Google ADK
AWS
Azure
Vercel
↓
LLM Providers
OpenAI
Anthropic
Google
+5
Generative UI
Let your agent generate interactive React components on the fly. Tool-based, controlled, or fully agent-driven.
▶ Try Live Demo
Tool-Based Approach
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.
Agentic Approach
For long-running tasks, the agent orchestrates multi-step workflows and renders progress UI along the way. Try the demo →
Declarative (BYOC)
Use A2UI, Hashbrown, JSON Render, or other declarative renderers. The agent sends a schema, your renderer turns it into components.
API Reference
Key hooks: useFrontendTool, useRenderTool, useComponent. Full reference →
Feature Matrix
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 |
○ | ○ | ○ | — | — | — | — | — |