CopilotKit Showcase

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

CopilotKit's Built-in Agent

Headless Interrupt (Frontend Tool)

Time-picker popup rendered outside the chat in the app surface — headless variant of the Strategy B interrupt adaptation

MastraMastra Cloud

CLI Start Command

Copy-paste command to scaffold the canonical Mastra starter

MastraMastra Cloud

Agentic Chat

Natural conversation with frontend tool execution

MastraMastra Cloud

In-Chat HITL (useHumanInTheLoop — ergonomic API)

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

MastraMastra Cloud

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

MastraMastra Cloud

Tool Rendering

Custom per-tool renderers plus a wildcard catch-all for every other tool

MastraMastra Cloud

Tool Rendering (Default Catch-all)

Out-of-the-box tool rendering — backend defines tools; frontend adds zero custom renderers

MastraMastra Cloud

Tool Rendering (Custom Catch-all)

Single branded wildcard renderer via useDefaultRenderTool

MastraMastra Cloud

Agentic Generative UI

Long-running agent tasks with generated UI

MastraMastra Cloud

State Streaming

Per-token state delta streaming from agent to UI

MastraMastra Cloud

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

MastraMastra Cloud

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

MastraMastra Cloud

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

MastraMastra Cloud

Chat Customization (Slots)

Customize CopilotChat via its slot system

MastraMastra Cloud

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

MastraMastra Cloud

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

MastraMastra Cloud

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

MastraMastra Cloud

Frontend Tools (Async)

useFrontendTool with an async handler — agent awaits a client-side async operation and uses the returned result

MastraMastra Cloud

Agent Config Object

Forward a typed config object (tone / expertise / response length) from the provider to the agent via useAgentContext

MastraMastra Cloud

Declarative Generative UI (A2UI — Dynamic Schema)

Dynamic A2UI surfaces generated by the `generate_a2ui` tool; frontend supplies a typed catalog (Card, Metric, PieChart, BarChart, …)

MastraMastra Cloud

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)

MastraMastra Cloud

Headless Chat (Complete)

Full chat-from-scratch on useAgent — custom bubbles, manual generative-UI composition via useRenderToolCall / useRenderActivityMessage / useRenderCustomMessages

MastraMastra Cloud

Authentication

Bearer-token gate enforced by the V2 runtime's onRequest hook — unauthenticated requests 401 before reaching the agent

MastraMastra Cloud

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

MastraMastra Cloud

Sub-Agents

Supervisor Mastra Agent delegates to research / writing / critique sub-agents; every delegation appended to a live UI log via shared state

MastraMastra Cloud

Beautiful Chat (Flagship)

Flagship CopilotKit showcase combining A2UI, Open Generative UI, and MCP Apps in one cell

MastraMastra Cloud

Multimodal Attachments

Image + PDF uploads forwarded to a vision-capable Mastra agent (gpt-4o)

MastraMastra Cloud

Open Generative UI

Agent-authored HTML + CSS streamed into a sandboxed iframe via the runtime's openGenerativeUI flag

MastraMastra Cloud

Open Generative UI (Advanced)

Open Generative UI with host-side sandbox functions wired through the iframe bridge

MastraMastra Cloud

Voice Input

Mic-to-text input via OpenAI Whisper, streamed into the chat composer

MastraMastra Cloud

Tool-Based Generative UI

Agent uses a frontend tool to trigger rich generative UI inline in the chat

MastraMastra Cloud

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)

MastraMastra Cloud

In-Chat HITL (Booking)

Time-picker card rendered inline via useHumanInTheLoop for a booking flow (alias of hitl-in-chat)

MastraMastra Cloud

MCP Apps

MCP server-driven UI rendered inline via the runtime's mcpApps config and the built-in activity renderer

MastraMastra Cloud

Tool Rendering + Reasoning Chain

Sequential tool calls rendered with per-tool components plus a reasoning chain rendered inline via a custom reasoningMessage slot

MastraMastra Cloud

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

MastraMastra Cloud

Headless Interrupt (Frontend Tool)

Time-picker popup rendered outside the chat in the app surface — headless variant of the Strategy B interrupt adaptation

CrewAI (Crews)CrewAI Enterprise

CLI Start Command

Copy-paste command to clone the canonical starter

CrewAI (Crews)CrewAI Enterprise

Agentic Chat

Natural conversation with frontend tool execution

CrewAI (Crews)CrewAI Enterprise

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

CrewAI (Crews)CrewAI Enterprise

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

CrewAI (Crews)CrewAI Enterprise

Chat Customization (Slots)

Customize CopilotChat via its slot system

CrewAI (Crews)CrewAI Enterprise

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

CrewAI (Crews)CrewAI Enterprise

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

CrewAI (Crews)CrewAI Enterprise

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

CrewAI (Crews)CrewAI Enterprise

In-Chat Human in the Loop

User approves agent actions before execution

CrewAI (Crews)CrewAI Enterprise

In-Chat HITL (Booking)

Time-picker card rendered inline via useHumanInTheLoop for a booking flow

CrewAI (Crews)CrewAI Enterprise

In-App Human in the Loop

Agent requests approval via useFrontendTool; the approval UI pops up as an app-level modal OUTSIDE the chat

CrewAI (Crews)CrewAI Enterprise

In-Chat Human in the Loop (original)

Original CrewAI HITL demo — kept for backwards-compat

CrewAI (Crews)CrewAI Enterprise

Tool Rendering

Custom per-tool renderers plus a wildcard catch-all for every other tool

CrewAI (Crews)CrewAI Enterprise

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

CrewAI (Crews)CrewAI Enterprise

Tool Rendering (Custom Catch-all)

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

CrewAI (Crews)CrewAI Enterprise

Tool Rendering + Reasoning Chain

Sequential tool calls with reasoning tokens side-by-side

CrewAI (Crews)CrewAI Enterprise

Agentic Generative UI

Long-running agent tasks with generated UI

CrewAI (Crews)CrewAI Enterprise

Tool-Based Generative UI

Agent uses tools to trigger UI generation

CrewAI (Crews)CrewAI Enterprise

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

CrewAI (Crews)CrewAI Enterprise

Frontend Tools (Async)

useFrontendTool with an async handler

CrewAI (Crews)CrewAI Enterprise

State Streaming

Per-token state delta streaming from agent to UI

CrewAI (Crews)CrewAI Enterprise

Shared State (Read + Write)

Bidirectional shared state - UI writes preferences, agent writes notes

CrewAI (Crews)CrewAI Enterprise

Sub-Agents

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

CrewAI (Crews)CrewAI Enterprise

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

CrewAI (Crews)CrewAI Enterprise

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

CrewAI (Crews)CrewAI Enterprise

Open-Ended Gen UI (Advanced)

Agent-authored UI that invokes host sandbox functions from inside the iframe

CrewAI (Crews)CrewAI Enterprise

Agent Config Object

Forward a typed config object (tone / expertise / response length) from the provider to the agent

CrewAI (Crews)CrewAI Enterprise

Authentication

Runtime-level bearer-token auth via the V2 onRequest hook

CrewAI (Crews)CrewAI Enterprise

Voice Input

Speech-to-text transcription via @copilotkit/voice mounted on a per-demo runtime

CrewAI (Crews)CrewAI Enterprise

Multimodal Attachments

Image and PDF uploads routed through the AG-UI attachment pipeline

CrewAI (Crews)CrewAI Enterprise

Declarative Generative UI (A2UI - Dynamic Schema)

Branded A2UI components generated by a secondary LLM against a custom catalog

CrewAI (Crews)CrewAI Enterprise

A2UI Fixed-Schema

Pre-authored component tree; the agent streams only data into the data model

CrewAI (Crews)CrewAI Enterprise

Beautiful Chat

Flagship showcase - polished brand-styled chat with A2UI, Open Generative UI, and shared-state todos

CrewAI (Crews)CrewAI Enterprise

MCP Apps

MCP server-driven UI via activity renderers

CrewAI (Crews)CrewAI Enterprise

Gen UI Interrupt (Strategy B)

Interrupt-style scheduling via useFrontendTool with an async Promise — time-picker card rendered inline in chat

CrewAI (Crews)CrewAI Enterprise

Headless Interrupt (Strategy B)

Headless interrupt via useFrontendTool — time-picker popup appears in the app surface outside the chat

Agent Frameworks

Claude Agent SDK (Python)

CLI Start Command

Copy-paste command to clone the canonical starter

Claude Agent SDK (Python)

Agentic Chat

Natural conversation with frontend tool execution

Claude Agent SDK (Python)

Tool Rendering

Backend agent tools rendered as UI components

Claude Agent SDK (Python)

Agentic Generative UI

Long-running agent tasks with generated UI

Claude Agent SDK (Python)

State Streaming

Per-token state delta streaming from agent to UI

Claude Agent SDK (Python)

Shared State (Read + Write)

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

Claude Agent SDK (Python)

Sub-Agents

Multiple agents with visible task delegation

Claude Agent SDK (Python)

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

Claude Agent SDK (Python)

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

Claude Agent SDK (Python)

Chat Customization (Slots)

Customize CopilotChat via its slot system

Claude Agent SDK (Python)

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

Claude Agent SDK (Python)

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

Claude Agent SDK (Python)

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

Claude Agent SDK (Python)

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

Claude Agent SDK (Python)

Frontend Tools (Async)

useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result

Claude Agent SDK (Python)

In-Chat Human in the Loop

User approves agent actions before execution

Claude Agent SDK (Python)

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, and a completion callback resolves the pending tool Promise with the user's decision

Claude Agent SDK (Python)

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

Claude Agent SDK (Python)

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

Claude Agent SDK (Python)

Tool Rendering (Custom Catch-all)

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

Claude Agent SDK (Python)

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

Claude Agent SDK (Python)

Open-Ended Gen UI (Advanced: with frontend function calling)

Agent-authored UI that can invoke frontend sandbox functions from inside the iframe

Claude Agent SDK (Python)

BYOC: json-render

Agent emits a JSON spec; `@json-render/react` renders it against a Zod catalog of MetricCard, BarChart, PieChart

Claude Agent SDK (Python)

BYOC: Hashbrown

Streaming structured output via `@hashbrownai/react` — agent emits a catalog-constrained JSON envelope that renders progressively

Claude Agent SDK (Python)

Multimodal Attachments

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

Claude Agent SDK (Python)

Voice Input

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

Claude Agent SDK (Python)

Agent Config Object

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

Claude Agent SDK (Python)

Agentic Chat (Reasoning)

Visible reasoning / thinking chain rendered via a custom messageView slot

Claude Agent SDK (Python)

Reasoning (Default Render)

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

Claude Agent SDK (Python)

Tool Rendering (Reasoning Chain)

Sequential tool calls combined with visible reasoning steps

Claude Agent SDK (Python)

Authentication

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

Claude Agent SDK (Python)

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

Claude Agent SDK (Python)

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

Claude Agent SDK (Python)

Tool-Based Generative UI

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

Claude Agent SDK (Python)

In-Chat HITL (useHumanInTheLoop — ergonomic API)

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

Claude Agent SDK (Python)

In-Chat HITL (Booking)

Time-picker card rendered inline via useHumanInTheLoop for a booking flow

Claude Agent SDK (Python)

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

Claude Agent SDK (Python)

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

Claude Agent SDK (Python)

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

Claude Agent SDK (Python)

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

Emerging

LangGraph (FastAPI)LangGraph Platform

CLI Start Command

Copy-paste command to clone the canonical starter

LangGraph (FastAPI)LangGraph Platform

Agentic Chat

Natural conversation with frontend tool execution

LangGraph (FastAPI)LangGraph Platform

Tool Rendering

Backend agent tools rendered as UI components

LangGraph (FastAPI)LangGraph Platform

In-Chat Human in the Loop (Original)

User approves agent actions before execution

LangGraph (FastAPI)LangGraph Platform

Agentic Generative UI

Long-running agent tasks with generated UI

LangGraph (FastAPI)LangGraph Platform

Tool-Based Generative UI

Agent uses tools to trigger UI generation

LangGraph (FastAPI)LangGraph Platform

State Streaming

Per-token state delta streaming from agent to UI

LangGraph (FastAPI)LangGraph Platform

Shared State (Read + Write)

Bidirectional shared state — UI writes preferences, agent writes notes

LangGraph (FastAPI)LangGraph Platform

Sub-Agents

Multiple agents with visible task delegation

LangGraph (FastAPI)LangGraph Platform

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

LangGraph (FastAPI)LangGraph Platform

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

LangGraph (FastAPI)LangGraph Platform

Chat Customization (Slots)

Customize CopilotChat via its slot system

LangGraph (FastAPI)LangGraph Platform

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

LangGraph (FastAPI)LangGraph Platform

Beautiful Chat

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

LangGraph (FastAPI)LangGraph Platform

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

LangGraph (FastAPI)LangGraph Platform

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

LangGraph (FastAPI)LangGraph Platform

Authentication

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

LangGraph (FastAPI)LangGraph Platform

Multimodal Attachments

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

LangGraph (FastAPI)LangGraph Platform

Agent Config Object

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

LangGraph (FastAPI)LangGraph Platform

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

LangGraph (FastAPI)LangGraph Platform

Tool Rendering (Custom Catch-all)

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

LangGraph (FastAPI)LangGraph Platform

Tool Rendering + Reasoning Chain (testing)

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

LangGraph (FastAPI)LangGraph Platform

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

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

LangGraph (FastAPI)LangGraph Platform

Headless Interrupt (testing)

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

LangGraph (FastAPI)LangGraph Platform

Declarative Generative UI (A2UI)

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

LangGraph (FastAPI)LangGraph Platform

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema

LangGraph (FastAPI)LangGraph Platform

MCP Apps

MCP server-driven UI via activity renderers

LangGraph (FastAPI)LangGraph Platform

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

LangGraph (FastAPI)LangGraph Platform

Frontend Tools (Async)

useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result

LangGraph (FastAPI)LangGraph Platform

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

LangGraph (FastAPI)LangGraph Platform

In-Chat HITL (useHumanInTheLoop — ergonomic API)

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

LangGraph (FastAPI)LangGraph Platform

In-Chat HITL (Booking)

Time-picker card rendered inline via useHumanInTheLoop for a booking flow

LangGraph (FastAPI)LangGraph Platform

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

LangGraph (FastAPI)LangGraph Platform

Voice Input

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

LangGraph (FastAPI)LangGraph Platform

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

LangGraph (FastAPI)LangGraph Platform

Open-Ended Gen UI (Advanced: with frontend function calling)

Agent-authored UI that can invoke frontend sandbox functions from inside the iframe

AgnoAgent OS

CLI Start Command

Copy-paste command to clone the canonical starter

AgnoAgent OS

Agentic Chat

Natural conversation with frontend tool execution

AgnoAgent OS

Tool Rendering

Backend agent tools rendered as UI components

AgnoAgent OS

Agentic Generative UI

Long-running agent tasks with generated UI

AgnoAgent OS

State Streaming

Per-token state delta streaming from agent to UI

AgnoAgent OS

Shared State (Read + Write)

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

AgnoAgent OS

Sub-Agents

Multiple agents with visible task delegation

AgnoAgent OS

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

AgnoAgent OS

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

AgnoAgent OS

Chat Customization (Slots)

Customize CopilotChat via its slot system

AgnoAgent OS

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKit CSS variables

AgnoAgent OS

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

AgnoAgent OS

In-Chat Human in the Loop

User approves agent actions before execution

AgnoAgent OS

In-Chat Human in the Loop (Time Picker)

Agent proposes a meeting time; user confirms or adjusts via an in-chat card before the agent proceeds

AgnoAgent OS

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

AgnoAgent OS

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

AgnoAgent OS

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

AgnoAgent OS

Tool Rendering (Default Catch-all)

Out-of-the-box default tool-call card via useDefaultRenderTool()

AgnoAgent OS

Tool Rendering (Custom Catch-all)

Single branded wildcard renderer via useDefaultRenderTool

AgnoAgent OS

Frontend Tools (Async)

useFrontendTool with an async handler — agent awaits a client-side notes-DB query and uses the returned result

AgnoAgent OS

Agentic Chat (Reasoning)

Visible reasoning / thinking chain rendered via a custom reasoningMessage slot on the reasoning-enabled Agno agent

AgnoAgent OS

Reasoning (Default Render)

Zero-config rendering of the agent's reasoning chain via CopilotKit's built-in reasoning message

AgnoAgent OS

Tool Rendering (Reasoning Chain)

Reasoning card + sequential tool-call renderers (per-tool + catch-all) on the same reasoning-enabled Agno agent

AgnoAgent OS

Headless Chat (Complete)

Full chat built from scratch on useAgent — custom bubbles, input bar, and manual generative-UI composition via useRenderToolCall

AgnoAgent OS

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 — Agno adaptation of the LangGraph interrupt() primitive

AgnoAgent OS

Headless Interrupt (Frontend Tool + async Promise)

Time-picker popup rendered outside the chat in the app surface via useFrontendTool with an async handler — Agno adaptation of the LangGraph headless interrupt pattern

AgnoAgent OS

Authentication

Bearer-token gate via the V2 runtime onRequest hook — dedicated /api/copilotkit-auth route rejects unauthenticated requests

AgnoAgent OS

Tool-Based Generative UI

Agent uses tools to trigger UI generation — frontend renders a haiku card from a generate_haiku tool call

AgnoAgent OS

In-Chat HITL (Booking)

Time-picker card rendered inline via useHumanInTheLoop for a booking flow — same surface as hitl-in-chat, branded for the booking scenario

AgnoAgent OS

MCP Apps

MCP-provided tools rendered inline as sandboxed UI via the runtime's mcpApps middleware

AgnoAgent OS

Open Generative UI

Agent-authored HTML + CSS streamed into a sandboxed iframe via the runtime's openGenerativeUI middleware

AgnoAgent OS

Open Generative UI (Advanced)

Sandboxed iframe with host-side sandbox functions the agent's UI can call back into via Websandbox.connection.remote

AgnoAgent OS

Agent Config Object

Frontend forwards a typed config object (tone, expertise, response length) the Agno agent reads per turn to compose its system prompt

AgnoAgent OS

Voice Input

Microphone + sample-audio button → /transcribe endpoint → text injected into the chat composer

AgnoAgent OS

Multimodal Attachments

Image + PDF attachments forwarded to a vision-capable Agno agent via CopilotChat's attachments config

AgnoAgent OS

Beautiful Chat

Polished landing-style chat shell over the shared Agno agent — gradient background, suggestion pills, and an example dashboard surface

AgnoAgent OS

Declarative Generative UI (A2UI Dynamic)

Agent dynamically composes UI per turn from a registered frontend catalog — secondary LLM call inside the backend `generate_a2ui` tool emits an a2ui_operations container that the A2UI middleware forwards to the catalog renderer

AgnoAgent OS

A2UI Fixed Schema

Schema is authored ahead of time as JSON; the agent only streams data into the data model. `display_flight` emits an a2ui_operations container directly with no secondary LLM call

LlamaIndex

CLI Start Command

Copy-paste command to clone the canonical starter

LlamaIndex

Beautiful Chat

Polished starter chat with brand-styled CopilotChat surface

LlamaIndex

Tool-Based Generative UI

Agent uses tools to trigger UI generation (bar / pie chart components)

LlamaIndex

MCP Apps

MCP server-driven UI via activity renderers

LlamaIndex

Agentic Chat

Natural conversation with frontend tool execution

LlamaIndex

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

LlamaIndex

Frontend Tools (Async)

useFrontendTool with an async handler — agent awaits a simulated client-side notes DB query and uses the returned result

LlamaIndex

In-Chat HITL (useHumanInTheLoop)

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

LlamaIndex

In-Chat HITL (Booking)

Time-picker card rendered inline via useHumanInTheLoop for a booking flow

LlamaIndex

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

LlamaIndex

In-Chat Human in the Loop (Original)

User approves agent actions before execution

LlamaIndex

Tool Rendering

Backend agent tools rendered as UI components

LlamaIndex

Tool Rendering (Default Catch-all)

Out-of-the-box tool rendering — backend defines tools; frontend adds zero custom renderers and uses CopilotKit's built-in default UI

LlamaIndex

Tool Rendering (Custom Catch-all)

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

LlamaIndex

Agentic Generative UI

Long-running agent tasks with generated UI

LlamaIndex

State Streaming

Per-token state delta streaming from agent to UI

LlamaIndex

Shared State (Read + Write)

Bidirectional shared state — UI writes preferences via agent.setState; agent writes notes via the set_notes tool. Backend reads preferences from state every turn through LlamaIndex's <state> prelude

LlamaIndex

Sub-Agents

Supervisor delegates to research / writing / critique sub-agents (each a stand-alone LlamaIndex FunctionAgent). Every delegation appends to a live log in shared agent state

LlamaIndex

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

LlamaIndex

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

LlamaIndex

Chat Customization (Slots)

Customize CopilotChat via its slot system

LlamaIndex

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

LlamaIndex

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

LlamaIndex

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

LlamaIndex

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

LlamaIndex

Agentic Chat (Reasoning)

Visible reasoning / thinking chain rendered via a custom messageView slot

LlamaIndex

Reasoning (Default Render)

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

LlamaIndex

Tool Rendering + Reasoning Chain (testing)

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

LlamaIndex

Declarative Generative UI (A2UI)

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

LlamaIndex

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema; the agent streams flight data into a pre-authored component tree

LlamaIndex

Authentication

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

LlamaIndex

Voice Input

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

LlamaIndex

Agent Config Object

Forward a typed config object (tone / expertise / response length) from the provider to the agent

LlamaIndex

Multimodal Attachments

Image and PDF uploads via CopilotChat attachments, processed by a vision-capable agent (gpt-4o)

LlamaIndex

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library inside a sandboxed iframe

LlamaIndex

Open-Ended Gen UI (Advanced: with frontend function calling)

Agent-authored UI that can invoke frontend sandbox functions from inside the iframe

LlamaIndex

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

LlamaIndex

Headless Interrupt (testing)

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

Langroid

CLI Start Command

Copy-paste command to clone the canonical starter

Langroid

Agentic Chat

Natural conversation with frontend tool execution

Langroid

In-Chat Human in the Loop

User approves agent actions before execution

Langroid

In-Chat HITL (useHumanInTheLoop — ergonomic API)

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

Langroid

In-Chat HITL (Booking)

Time-picker card rendered inline via useHumanInTheLoop for a booking flow

Langroid

In-App Human in the Loop

Agent requests approval via async useFrontendTool; UI pops as an app-level modal

Langroid

Tool Rendering

Custom render for tool calls inline in the chat stream

Langroid

Tool-Based Generative UI

Agent uses tools to trigger UI generation

Langroid

Agentic Generative UI

Long-running agent tasks with generated UI

Langroid

State Streaming

Per-token state delta streaming from agent to UI

Langroid

Shared State (Read + Write)

Bidirectional shared state — UI writes preferences via agent.setState, agent writes notes via the set_notes tool

Langroid

Sub-Agents

Supervisor LLM delegates to research / writing / critique sub-agents; live delegation log streams running -> completed transitions

Langroid

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

Langroid

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

Langroid

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

Langroid

Chat Customization (Slots)

Customize CopilotChat via its slot system (welcomeScreen, disclaimer, assistantMessage)

Langroid

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

Langroid

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

Langroid

Frontend Tools (Async)

useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result

Langroid

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

Langroid

Declarative Generative UI

A2UI dynamic-schema rendering — agent emits operations against a client-declared catalog

Langroid

Authentication

Bearer-token gate via the V2 runtime's onRequest hook; unauth requests are rejected with 401

Langroid

Headless Chat (Complete)

A full chat surface built from scratch on useAgent — no CopilotChat, hand-rolled message list + bubbles

Langroid

Agent Config Object

Typed config forwarded via CopilotKit provider properties; the agent reads tone/expertise/responseLength per turn

Langroid

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

Langroid

Tool Rendering (Custom Catch-all)

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

Langroid

Tool Rendering + Reasoning Chain (testing)

Sequential tool calls with reasoning tokens rendered side-by-side. NOTE — Langroid does not yet emit native reasoning AG-UI events; the slot wires up only when reasoning content arrives over the wire

Langroid

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library via the runtime's openGenerativeUI middleware

Langroid

Open-Ended Gen UI (Advanced: with frontend function calling)

Agent-authored UI that can invoke frontend sandbox functions from inside the iframe

Langroid

Voice Input

Speech-to-text via @copilotkit/voice — mic button or sample audio populates the chat composer

Langroid

Multimodal Attachments

Image + PDF uploads forwarded to a vision-capable agent (gpt-4o); PDFs are flattened to text server-side

Langroid

MCP Apps

MCP servers with UI resources rendered inline as sandboxed iframes via the runtime's mcpApps middleware

Langroid

Beautiful Chat

Polished landing-style chat shell over the shared Langroid agent — gradient background, suggestion pills, and an example dashboard surface

Langroid

A2UI (Fixed Schema)

Agent streams data into a frontend-authored fixed component schema; backend ships JSON, agent fills in values

Langroid

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

Langroid

Headless Interrupt (testing)

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