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

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

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