Beautiful Chat Canonical polished starter chat — brand fonts, theme tokens, suggestion pills
chat-ui
Pre-Built: CopilotChat Vanilla CopilotChat with three starter-prompt suggestions — the minimum-viable surface for free-form chat
chat-ui
Pre-Built: Sidebar Docked sidebar chat via <CopilotSidebar />
chat-ui
Pre-Built: Popup Floating popup chat via <CopilotPopup />
chat-ui
Chat Customization: Slots Customize CopilotChat via its slot system
chat-ui
Chat Customization: CSS Default CopilotChat re-themed via CopilotKitCSSProperties
chat-ui
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.
chat-ui
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.
chat-ui
Voice Speech-to-text via @copilotkit/voice with a bundled sample audio button
chat-ui
Frontend Tools: In-app Actions Agent invokes client-side handlers registered with useFrontendTool
interactivity
Frontend Tools: Async useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result
interactivity
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.
interactivity
Human in the Loop: In-app 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
interactivity
Human in the Loop: Interrupts Interactive time-picker rendered inline in the chat via the lower-level `useInterrupt` primitive. The backend tool is marked `needs_approval`, so the Agents SDK pauses the run and the adapter ends it with an AG-UI interrupt; the pick resumes it from the conversation alone, with nothing kept on the server
interactivity
Human in the Loop: Headless Interrupts Same paused `schedule_meeting` tool as gen-ui-interrupt, but the time-picker mounts in a separate app-surface pane instead of inside the chat (`useInterrupt` with `renderInChat: false`)
interactivity
Generative UI: useComponent Agent uses tools to trigger UI generation
controlled-generative-ui
Generative UI: Tool Rendering (Custom) Custom per-tool renderers (WeatherCard, FlightListCard) plus a wildcard catch-all for every other tool
generative-ui
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
Generative UI: Tool Rendering (Catch-all) Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call
generative-ui
Authentication Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states
platform
Sub-Agents Multiple agents with visible task delegation
multi-agent
MCP Apps MCP server-driven UI via activity renderers
generative-ui
Declarative UI: Fixed A2UI Render an A2UI tree from a fixed, server-side schema — the agent streams data into a pre-authored component tree
generative-ui
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.
generative-ui
Generative UI: Agent State Agent-state-driven Gen UI — the agent plans a live step list through a set_steps server tool that writes shared state; the frontend subscribes through useAgent and renders the steps inside CopilotChat's messageView.children slot.
generative-ui
Shared State: Read-only Recipe editor publishes form state via agent.setState; the agent's dynamic instructions show the model the recipe, and it has no tool that mutates it.
agent-state
Shared State: Read + Write Bidirectional shared state — the UI writes preferences via agent.setState and the agent's dynamic instructions show them to the model; the agent writes notes with a set_notes function tool.
agent-state
Shared State: Streaming Per-token state delta streaming from agent to UI
agent-state
Shared State: Frontend Context Frontend provides read-only context via useAgentContext; the agent's dynamic instructions fold it into the prompt
agent-state
Agent Config Object Forward a typed config object (tone / expertise / response length) through useAgentContext; the agent's dynamic instructions apply it on every turn
platform
Attachments Image and PDF uploads via CopilotChat attachments, forwarded to the model as input_image / input_file items
chat-ui
Reasoning: Default Built-in CopilotChatReasoningMessage rendering with no slot override.
chat-ui
Reasoning: Custom Visible reasoning/thinking chain alongside the final answer
chat-ui
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
Declarative UI: Dynamic A2UI Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider; a generate_a2ui server tool renders the surface.
generative-ui
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 generate_a2ui server tool (injectA2UITool=false); reuses the declarative-gen-ui catalog.
generative-ui
Declarative UI: json-render Hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)
generative-ui
Declarative UI: Hashbrown Structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)
generative-ui
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).
generative-ui
