CopilotKit Docs

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?

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

Home / LangGraph / Features / Generative UI

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	○	○	○	—	—	—	—	—