CopilotKit Showcase

CLI Start Command

Copy-paste command to clone the canonical starter

Pre-Built: CopilotChat

Vanilla CopilotChat with three starter-prompt suggestions — the minimum-viable surface for free-form chat

Chat Customization: CSS

Default CopilotChat re-themed via CopilotKitCSSProperties

Generative UI: Tool Rendering (Default)

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

Generative UI: Tool Rendering (Catch-all)

Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call

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

Human In the Loop: In-chat

Time-slot picker rendered inline in the chat via `useHumanInTheLoop` — the agent requests user input, the frontend renders a TimePickerCard, and the user's choice resumes the agent.

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

Generative UI: Tool Rendering (Custom)

Custom per-tool renderers (WeatherCard, FlightListCard) plus a wildcard catch-all for every other tool

Generative UI: Tool calls + reasoning

Per-tool renderers (WeatherCard, FlightListCard, custom catchall) interleaved with a reasoningMessage slot rendering the agent's reasoning tokens — combines reasoning-display + tool-rendering in one chat surface.

Generative UI: useComponent

Agent uses tools to trigger UI generation

Generative UI: Agent State

Agent-state-driven Gen UI — the agent plans a live step list via Command(update={steps}); the frontend subscribes through useAgent and renders the steps inside CopilotChat's messageView.children slot.

Shared State: Streaming

Per-token state delta streaming from agent to UI

Shared State: Read + Write

Bidirectional shared state — UI writes preferences via agent.setState; agent writes notes via a Command-returning tool

Shared State: Read-only

Recipe editor publishes form state via agent.setState; the agent reads the recipe context but does not mutate it (no backend tool — neutral default agent).

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

Headless UI: Simple

Minimum viable headless chat — useAgent + useCopilotKit dressed in shadcn/ui primitives. No tool rendering, no generative UI, just text in / text out.

Headless UI: Complete

Full headless surface — hand-rolled CopilotChat replacement that wires every render hook (useRenderTool, useDefaultRenderTool, useComponent, useRenderToolCall, useRenderActivityMessage, useSuggestions, useAttachments) on top of shadcn primitives.

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override.

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer

Human in the Loop: Interrupts

Interactive component rendered inline in the chat via the lower-level `useInterrupt` primitive — direct control over the LangGraph interrupt lifecycle

Human in the Loop: Headless Interrupts

Same interrupt(...) backend pattern as gen-ui-interrupt, but the time-picker mounts in a separate app-surface pane (left) instead of inline inside the chat — uses useHeadlessInterrupt (custom-event subscribe + manual runAgent forwardedProps.command.resume).

Declarative UI: Dynamic A2UI

Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider

Declarative UI: Fixed A2UI

Render an A2UI tree from a fixed, server-side schema — the agent streams data into a pre-authored component tree

A2UI Error Recovery

Makes the A2UI validate->retry recovery loop visible — an invalid first render heals to a valid one, and an always-invalid render shows a graceful recovery-exhausted fallback. Backend-owned via get_a2ui_tools (injectA2UITool=false); reuses the declarative-gen-ui catalog.

MCP Apps

MCP server-driven UI via activity renderers

Shared State: Frontend Context

Frontend provides read-only context to the agent via useAgentContext

Declarative UI: json-render

Streaming hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)

Beautiful Chat

Canonical polished starter chat — brand fonts, theme tokens, suggestion pills

Attachments

Image and PDF uploads via CopilotChat attachments, processed by a vision-capable agent

Authentication

Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states

Declarative UI: Hashbrown

Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)

Open Generative UI: Default

Agent composes UI from a registered component library — distinct from Tool Rendering, which attaches a custom renderer to a *named* backend tool. Use Open Generative UI when you want the agent to assemble UI freely from a palette you control.

Open Generative UI: Custom

Same Open Generative UI surface, with the iframe-rendered components able to call back into frontend sandbox functions (e.g., a Calculator app whose buttons trigger handlers in the host page).

Voice

Speech-to-text via @copilotkit/voice with a bundled sample audio button

Agent Config Object

Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt

Agent Frameworks

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

Agentic Generative UI

Long-running agent tasks with generated UI

State Streaming

Per-token state delta streaming from agent to UI

Shared State (Read + Write)

Bidirectional agent state — UI writes preferences, agent writes notes back

Shared State (Read)

Agent reads frontend-provided state as context

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

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

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)

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

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

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

Declarative UI: json-render

Declarative generative UI via @json-render/react — Claude emits a flat element-tree spec the renderer consumes

Declarative UI: Hashbrown

Declarative streaming UI via @hashbrownai/react useJsonParser — Claude emits a catalog-constrained UI envelope

Multimodal Attachments

Image + PDF attachments routed through Claude's native vision + pypdf text flattening

Voice Input

Audio transcription wired on a per-demo runtime with a guarded OpenAI Whisper service that maps missing keys to 401

Agent Config Object

Forwarded props (tone / expertise / responseLength) flow from the provider into the agent's system prompt via `forwardedProps.config.configurable.properties`

Agentic Chat (Reasoning)

Visible reasoning / thinking chain rendered via a custom messageView slot

Reasoning (Default Render)

Reasoning rendered via CopilotKit's built-in collapsible card with zero custom config

Tool Rendering (Reasoning Chain)

Sequential tool calls combined with visible reasoning steps

Authentication

Framework-native request auth via the V2 runtime's `onRequest` hook; missing bearer token returns 401

MCP Apps

MCP server-driven UI via activity renderers — the agent calls a tool on a remote MCP server (Excalidraw) and the runtime middleware renders the returned UI resource as a sandboxed iframe inline in the chat

Beautiful Chat

Polished brand-themed chat surface over the Claude Agent SDK backend with seeded suggestion pills and a glanceable decorative side panel — pure frontend dressing, no extra runtime config

Tool-Based Generative UI

Agent uses tools to trigger UI generation (haiku generator via useFrontendTool + useRenderTool)

In-Chat HITL (useHumanInTheLoop — ergonomic API)

Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook

In-Chat HITL (useInterrupt — low-level primitive)

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

Headless Interrupt (testing)

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

Declarative Generative UI (A2UI)

Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton/PieChart/BarChart) wired via a2ui.catalog on the provider; backend agent owns the `generate_a2ui` tool with injectA2UITool false

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema; the backend ships flight_schema.json and only streams data via display_flight

CLI Start Command

Copy-paste command to clone the canonical starter

Agentic Chat

Natural conversation with frontend tool execution

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

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

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)

Tool Rendering

Backend agent tools rendered as UI components

Declarative Generative UI (A2UI)

Canonical A2UI BYOC — custom catalog wired via a2ui.catalog on the provider; backend agent owns the generate_a2ui tool with injectA2UITool false

Agentic Generative UI

Long-running agent tasks with generated UI

Tool-Based Generative 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

State Streaming

Per-token state delta streaming from agent to UI

Shared State (Read + Write)

Bidirectional shared state — UI writes preferences via agent.setState, agent reads them every turn and writes notes back via a set_notes tool

Shared State (Read)

Agent reads frontend-provided state as context

Sub-Agents

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

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

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

Declarative UI: json-render

Declarative generative UI via @json-render/react — Claude emits a flat element-tree spec the renderer consumes

Declarative UI: Hashbrown

Declarative streaming UI via @hashbrownai/react useJsonParser — Claude emits a catalog-constrained UI envelope

MCP Apps

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

Multimodal Attachments

Image and PDF attachments forwarded to Claude's vision-capable model

Voice Input

Mic + sample audio transcription via a guarded OpenAI Whisper service

Agent Config Object

forwardedProps route provider-configured tone/expertise/length into the Claude system prompt per turn

Authentication

Bearer-token gate via the V2 runtime onRequest hook with typed 401 surface

Tool Rendering: Default Catch-all

Zero-config wildcard renderer via useDefaultRenderTool — built-in tool-call card paints every tool

Tool Rendering: Custom Catch-all

Single branded wildcard renderer registered via useDefaultRenderTool({ render })

Reasoning (Default)

Built-in CopilotChatReasoningMessage card paints Claude extended-thinking output — zero custom slots

Reasoning (Custom)

Custom reasoningMessage slot renders Claude extended-thinking deltas as a tagged amber banner

Tool Rendering: Reasoning Chain

Reasoning slot + per-tool renderers + wildcard catch-all in one cell

Beautiful Chat

Polished brand-themed chat surface over the shared Claude SDK agent with seeded suggestion pills

In-Chat HITL (useHumanInTheLoop — ergonomic API)

Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook

In-Chat HITL (useInterrupt — low-level primitive)

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

Headless Interrupt (testing)

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

Headless Chat (Complete)

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

A2UI (Fixed Schema)

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

Enterprise

CLI Start Command

Copy-paste command to clone the canonical starter

Agentic Chat

Natural conversation with frontend tool execution

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

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

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-Chat Human in the Loop (Original)

User approves agent actions before execution

In-App Human in the Loop (Frontend Tools + async HITL)

In-Chat HITL (useHumanInTheLoop — ergonomic API)

Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook

Tool-Based Generative UI

Agent uses tools to trigger UI generation

Tool Rendering

Backend agent tools rendered as UI components

Agentic Generative UI

Long-running agent tasks with generated UI

State Streaming

Per-token state delta streaming from agent to UI

Shared State (Read + Write)

Bidirectional agent state — UI writes preferences, agent writes notes back via a set_notes tool

Sub-Agents

Supervisor delegates to research / writing / critique sub-agents with a live delegation log

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

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

In-Chat HITL (useInterrupt — low-level primitive)

Interactive component rendered inline in the chat via the lower-level `useInterrupt` primitive — direct control over the interrupt lifecycle

Declarative Generative UI (A2UI)

Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider; runtime injects the render_a2ui tool automatically

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema

MCP Apps

MCP server-driven UI via activity renderers

Headless Interrupt (testing)

Resolve interrupts from a plain button grid — no chat, no useInterrupt render prop

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

Reasoning (Default Render)

Built-in CopilotChatReasoningMessage renders without a custom slot

Reasoning (Custom Render)

Custom reasoning slot renders the model's visible thinking chain

Tool Rendering + Reasoning Chain (testing)

Sequential tool calls with reasoning tokens rendered side-by-side

BYOC json-render

Streaming hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)

Beautiful Chat

Canonical polished starter chat — brand fonts, theme tokens, suggestion pills

Multimodal Attachments

Image and PDF uploads via CopilotChat attachments, processed by a vision-capable agent

Authentication

Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states

BYOC Hashbrown

Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)

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

Voice Input

Speech-to-text via @copilotkit/voice with a bundled sample audio button

Agent Config Object

Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt

CLI Start Command

Copy-paste command to clone the canonical starter

Agentic Chat

Natural conversation with frontend tool execution

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

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

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-Chat Human in the Loop (Original)

User approves agent actions before execution

In-App Human in the Loop (Frontend Tools + async HITL)

In-Chat HITL (useHumanInTheLoop — ergonomic API)

Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook

Tool-Based Generative UI

Agent uses tools to trigger UI generation

Tool Rendering

Backend agent tools rendered as UI components

Agentic Generative UI

Long-running agent tasks with generated UI

State Streaming

Per-token state delta streaming from agent to UI

Shared State (Read + Write)

Bidirectional agent state — UI writes preferences, agent writes notes back via a set_notes tool

Sub-Agents

Supervisor delegates to research / writing / critique sub-agents with a live delegation log

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

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

In-Chat HITL (useInterrupt — low-level primitive)

Interactive component rendered inline in the chat via the lower-level `useInterrupt` primitive — direct control over the interrupt lifecycle

Declarative Generative UI (A2UI)

Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider; runtime injects the render_a2ui tool automatically