Agentic Chat Natural conversation with frontend tool execution
chat-ui
In-Chat HITL (useHumanInTheLoop) Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook
interactivity
In-Chat HITL (Booking) Time-picker card rendered inline via useHumanInTheLoop for a booking flow — same surface as hitl-in-chat with a booking-focused framing
interactivity
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
interactivity
In-Chat Human in the Loop (Original) User approves agent actions before execution
interactivity
Tool Rendering Backend agent tools rendered as UI components
agent-capabilities
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
generative-ui
Tool Rendering (Custom Catch-all) Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call
generative-ui
Agentic Generative UI Long-running agent tasks with generated UI
generative-ui
Tool-Based Generative UI Agent uses tools to trigger UI generation
generative-ui
State Streaming Per-token state delta streaming from agent to UI
agent-state
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 Chat (Simple) Minimal custom chat surface built on useAgent
chat-ui
Headless Chat (Complete) Full chat implementation built from scratch on useAgent
chat-ui
Readonly State (Agent Context) Frontend provides read-only context to the agent via useAgentContext
agent-state
Reasoning (Default Render) Built-in CopilotChatReasoningMessage renders without a custom slot
generative-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 and uses the returned result
interactivity
Shared State (Read + Write) Bidirectional agent state — UI writes preferences, agent writes notes back via AG2 ContextVariables
agent-state
Sub-Agents Supervisor delegates tasks to research, writing, and critique sub-agents with a live delegation log
multi-agent
Gen UI Interrupt (Frontend Tool + async Promise) In-chat time-picker card via useFrontendTool with an async handler that blocks until the user picks a slot — AG2 adaptation of the LangGraph interrupt() primitive
interactivity
Headless Interrupt (Frontend Tool + async Promise) Time-picker popup rendered outside the chat in the app surface via useFrontendTool with an async handler — AG2 adaptation of the LangGraph headless interrupt pattern
interactivity
Declarative Generative UI (A2UI Dynamic Schema) Agent dynamically composes UI from a registered catalog of branded components via the A2UI middleware
generative-ui
A2UI (Fixed Schema) Agent streams data into a frontend-authored fixed component schema; backend ships JSON, agent fills in values
generative-ui
MCP Apps Runtime mcpApps middleware injects an MCP server's tools and renders associated UI resources inline
generative-ui
Open Generative UI (Minimal) Agent streams a single generateSandboxedUi tool call; the runtime renders agent-authored HTML/CSS in a sandboxed iframe
generative-ui
Open Generative UI (Advanced) Sandboxed iframe UIs invoke host-page sandbox functions via Websandbox.connection.remote
generative-ui
Agentic Chat (Reasoning) Custom reasoningMessage slot renders the agent's thinking chain visibly above each answer
generative-ui
Tool Rendering (Reasoning Chain) Sequential tool calls combined with a custom reasoningMessage slot — weather, flights, custom catch-all
generative-ui
Authentication Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states
chat-ui
Agent Config Object Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt
platform
Voice Input Speech-to-text via @copilotkit/voice with a bundled sample audio button
chat-ui
Multimodal Attachments Image and PDF uploads via CopilotChat attachments, processed by a vision-capable agent
chat-ui
BYOC Hashbrown Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)
generative-ui
BYOC json-render Streaming hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)
generative-ui
Beautiful Chat Simplified flagship cell that combines A2UI Dynamic + Open Generative UI on a single dedicated runtime — agent picks branded catalog components for structured visuals and free-form sandboxed UI for everything else
chat-ui generative-ui