Agentic Chat Natural conversation with frontend tool execution
chat-ui
In-Chat HITL (useHumanInTheLoop — ergonomic API) Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook
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
Tool Rendering Custom per-tool renderers plus a wildcard catch-all for every other tool
agent-capabilities
Tool Rendering (Default Catch-all) Out-of-the-box tool rendering — backend defines tools; frontend adds zero custom renderers
generative-ui
Tool Rendering (Custom Catch-all) Single branded wildcard renderer via useDefaultRenderTool
generative-ui
Agentic Generative UI Long-running agent tasks with generated UI
generative-ui
State Streaming Per-token state delta streaming from agent to UI
agent-state
Readonly State (Agent Context) Frontend provides read-only context to the agent via useAgentContext
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
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
Reasoning Visible reasoning/thinking chain alongside the final answer (via custom reasoningMessage slot)
generative-ui
Reasoning (Default Render) Built-in CopilotChatReasoningMessage renders without a custom slot
generative-ui
Agent Config Object Forward a typed config object (tone / expertise / response length) from the provider to the agent via useAgentContext
platform
Declarative Generative UI (A2UI — Dynamic Schema) Dynamic A2UI surfaces generated by the `generate_a2ui` tool; frontend supplies a typed catalog (Card, Metric, PieChart, BarChart, …)
generative-ui
A2UI Fixed Schema Frontend-owned component tree; agent streams data into the data model (flight card built from Card > Column > Title/Airport/Arrow/AirlineBadge/PriceTag/Button)
generative-ui
Headless Chat (Complete) Full chat-from-scratch on useAgent — custom bubbles, manual generative-UI composition via useRenderToolCall / useRenderActivityMessage / useRenderCustomMessages
chat-ui
Authentication Bearer-token gate enforced by the V2 runtime's onRequest hook — unauthenticated requests 401 before reaching the agent
platform
Shared State (Read + Write) Bidirectional shared state — UI writes preferences via agent.setState; backend reads them every turn and writes notes back via the set_notes tool
agent-state
Sub-Agents Supervisor Mastra Agent delegates to research / writing / critique sub-agents; every delegation appended to a live UI log via shared state
agent-capabilities
Beautiful Chat (Flagship) Flagship CopilotKit showcase combining A2UI, Open Generative UI, and MCP Apps in one cell
chat-ui generative-ui
BYOC — Hashbrown Bring-your-own-component dashboard rendered via @hashbrownai/react useUiKit + useJsonParser
generative-ui
BYOC — JSON Render Bring-your-own-component dashboard rendered from a streamed JSON envelope into a frontend-owned catalog
generative-ui
Multimodal Attachments Image + PDF uploads forwarded to a vision-capable Mastra agent (gpt-4o)
chat-ui
Open Generative UI Agent-authored HTML + CSS streamed into a sandboxed iframe via the runtime's openGenerativeUI flag
generative-ui
Open Generative UI (Advanced) Open Generative UI with host-side sandbox functions wired through the iframe bridge
generative-ui
Voice Input Mic-to-text input via OpenAI Whisper, streamed into the chat composer
chat-ui
Tool-Based Generative UI Agent uses a frontend tool to trigger rich generative UI inline in the chat
generative-ui
Human in the Loop (Step Selection) Step-selection HITL surface rendered inline via `useHumanInTheLoop` (the LangGraph-specific `useLangGraphInterrupt` branch is a no-op on Mastra)
interactivity
In-Chat HITL (Booking) Time-picker card rendered inline via useHumanInTheLoop for a booking flow (alias of hitl-in-chat)
interactivity
MCP Apps MCP server-driven UI rendered inline via the runtime's mcpApps config and the built-in activity renderer
generative-ui
Tool Rendering + Reasoning Chain Sequential tool calls rendered with per-tool components plus a reasoning chain rendered inline via a custom reasoningMessage slot
generative-ui
Gen UI Interrupt (Frontend Tool) In-chat time-picker via useFrontendTool with an async handler that blocks until the user picks a slot — Strategy B adaptation of the LangGraph interrupt primitive
interactivity
Headless Interrupt (Frontend Tool) Time-picker popup rendered outside the chat in the app surface — headless variant of the Strategy B interrupt adaptation
interactivity
