Agent Frameworks
CopilotKit integration with Anthropic's Claude via the Claude SDK for TypeScript
Copy-paste command to clone the canonical starter
npx copilotkit@latest init --framework claude-sdk-typescript
Natural conversation with frontend tool execution
Docked sidebar chat via <CopilotSidebar />
Floating popup chat via <CopilotPopup />
Customize CopilotChat via its slot system
Default CopilotChat re-themed via CopilotKitCSSProperties
Minimal custom chat surface built on useAgent
Agent invokes client-side handlers registered with useFrontendTool
useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result
User approves agent actions before execution
Agent requests approval via useFrontendTool with an async handler; the approval UI pops up as an app-level modal OUTSIDE the chat, and a completion callback resolves the pending tool Promise with the user's decision
Backend agent tools rendered as UI components
Canonical A2UI BYOC — custom catalog wired via a2ui.catalog on the provider; runtime injects the render_a2ui tool automatically
Long-running agent tasks with generated UI
Agent uses frontend tools to trigger UI generation — useFrontendTool with a render function paints structured haiku output as a styled card alongside the chat
Per-token state delta streaming from agent to UI
Bidirectional shared state — UI writes preferences via agent.setState, agent reads them every turn and writes notes back via a set_notes tool
Supervisor delegates to research / writing / critique sub-agents (each a single secondary Anthropic Messages call); every delegation appears in a live log via shared state
Frontend provides read-only context to the agent via useAgentContext
Agent generates UI from an arbitrary component library
Agent-authored UI that can invoke frontend sandbox functions from inside the iframe
Bring-your-own-catalog generative UI via @json-render/react
Bring-your-own-catalog streaming UI via @hashbrownai/react useJsonParser
MCP server-driven UI via activity renderers — runtime auto-applies the MCP Apps middleware and the built-in MCPAppsActivityRenderer paints sandboxed iframes inline in the chat
Image and PDF attachments forwarded to Claude's vision-capable model
Mic + sample audio transcription via a guarded OpenAI Whisper service
forwardedProps route provider-configured tone/expertise/length into the Claude system prompt per turn
Bearer-token gate via the V2 runtime onRequest hook with typed 401 surface
Zero-config wildcard renderer via useDefaultRenderTool — built-in tool-call card paints every tool
Single branded wildcard renderer registered via useDefaultRenderTool({ render })
Custom reasoningMessage slot renders Claude extended-thinking deltas as AG-UI REASONING_MESSAGE_* events
Built-in CopilotChatReasoningMessage card paints Claude extended-thinking output — zero custom slots
Reasoning slot + per-tool renderers + wildcard catch-all in one cell
Polished brand-themed chat surface over the shared Claude SDK agent with seeded suggestion pills
Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook
Time-picker card rendered inline via useHumanInTheLoop for a booking flow
Interactive time-picker component rendered inline in the chat via useFrontendTool with an async handler — the Promise resolves only when the user picks a slot or cancels
Resolve interrupts from a plain button grid — no chat, no useInterrupt render prop; the time-picker popup appears in the app surface outside the chat
Full custom chat surface built on `useAgent` — exercises the full rendering stack (text, per-tool renderers, frontend components) with backend get_weather / get_stock_price tools and a frontend highlight_note tool
Fixed-schema A2UI — backend display_flight tool emits an a2ui_operations container that ships a JSON component tree plus per-call data; frontend catalog binds component names to React renderers
