Demos
36 resultsEmerging
CLI Start Command
Copy-paste command to clone the canonical starter
Agentic Chat
Natural conversation with frontend tool execution
Tool Rendering
Backend agent tools rendered as UI components
In-Chat Human in the Loop (Original)
User approves agent actions before execution
Agentic Generative UI
Long-running agent tasks with generated UI
Tool-Based Generative UI
Agent uses tools to trigger UI generation
State Streaming
Per-token state delta streaming from agent to UI
Shared State (Read + Write)
Bidirectional shared state — UI writes preferences, agent writes notes
Sub-Agents
Multiple agents with visible task delegation
Pre-Built: Sidebar
Docked sidebar chat via <CopilotSidebar />
Pre-Built: Popup
Floating popup chat via <CopilotPopup />
Chat Customization (Slots)
Customize CopilotChat via its slot system
Chat Customization (CSS)
Default CopilotChat re-themed via CopilotKitCSSProperties
Beautiful Chat
Canonical polished starter chat — brand fonts, theme tokens, suggestion pills
Headless Chat (Simple)
Minimal custom chat surface built on useAgent
Headless Chat (Complete)
Full chat implementation built from scratch on useAgent
Authentication
Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states
Multimodal Attachments
Image and PDF uploads via CopilotChat attachments, processed by a vision-capable agent
Agent Config Object
Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt
Tool Rendering (Default Catch-all)
Out-of-the-box tool rendering — backend defines the tools; the frontend adds zero custom renderers and relies on CopilotKit's built-in default UI
Tool Rendering (Custom Catch-all)
Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call
Tool Rendering + Reasoning Chain (testing)
Sequential tool calls with reasoning tokens rendered side-by-side
In-Chat HITL (useInterrupt — low-level primitive)
Interactive component rendered inline in the chat via the lower-level `useInterrupt` primitive — direct control over the LangGraph interrupt lifecycle
Headless Interrupt (testing)
Resolve langgraph interrupts from a plain button grid — no chat, no useInterrupt render prop
Declarative Generative UI (A2UI)
Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider
Declarative Generative UI (A2UI — Fixed Schema)
A2UI rendering against a known client-side schema
MCP Apps
MCP server-driven UI via activity renderers
Frontend Tools (In-App Actions)
Agent invokes client-side handlers registered with useFrontendTool
Frontend Tools (Async)
useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result
In-App Human in the Loop (Frontend Tools + async HITL)
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
In-Chat HITL (useHumanInTheLoop — ergonomic API)
Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook
In-Chat HITL (Booking)
Time-picker card rendered inline via useHumanInTheLoop for a booking flow
Readonly State (Agent Context)
Frontend provides read-only context to the agent via useAgentContext
Voice Input
Speech-to-text via @copilotkit/voice with a bundled sample audio button
Fully Open-Ended Generative UI
Agent generates UI from an arbitrary component library
Open-Ended Gen UI (Advanced: with frontend function calling)
Agent-authored UI that can invoke frontend sandbox functions from inside the iframe