CopilotKit Showcase

Dynamic A2UI where the toolkit's validate→retry recovery loop is made visible — a malformed first render self-heals into a valid surface; an always-invalid render exhausts the attempt cap and shows a tasteful fallback instead of a broken surface. Backend-owned via getA2UITools.

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-6-luna)

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

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override — the v1 bridge emits reasoning start/content/end events straight into the default renderer.

MastraMastra Cloud

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer 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

MastraMastra Cloud

Background Agents

A long-running deep-research tool dispatched as a Mastra background task, surfaced inline as a live "working" activity card

MastraMastra Cloud

Browser Use (Local Browser)

Mastra-only, real-LLM demo — the agent drives a real LOCAL headless browser (Playwright Chromium, no hosted-browser API key) to fetch top Hacker News stories or read a page, and renders the results inline in chat. Non-deterministic, so no aimock replay — requires `npx playwright install chromium` at runtime.

MastraMastra Cloud

Observational Memory

Mastra Observational Memory compresses and activates conversation context out of band; the background work surfaces inline as activity cards via the runtime's observationalMemory surfacing toggle

CrewAI FlowsCrewAI Enterprise

CLI Start Command

Copy-paste command to clone the canonical starter

CrewAI FlowsCrewAI Enterprise

Agentic Chat

Natural conversation with frontend tool execution

CrewAI FlowsCrewAI Enterprise

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

CrewAI FlowsCrewAI Enterprise

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

CrewAI FlowsCrewAI Enterprise

Chat Customization (Slots)

Customize CopilotChat via its slot system

CrewAI FlowsCrewAI Enterprise

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

CrewAI FlowsCrewAI Enterprise

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

CrewAI FlowsCrewAI Enterprise

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

CrewAI FlowsCrewAI Enterprise

Reasoning: Default

Built-in CopilotChat reasoning rendering backed by native CrewAI Flow reasoning events

CrewAI FlowsCrewAI Enterprise

Reasoning: Custom

Native CrewAI reasoning tokens rendered through a custom reasoning message slot

CrewAI FlowsCrewAI Enterprise

In-Chat Human in the Loop

User approves agent actions before execution

CrewAI FlowsCrewAI Enterprise

In-Chat HITL (Booking)

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

CrewAI FlowsCrewAI 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 FlowsCrewAI Enterprise

In-Chat Human in the Loop (original)

Original CrewAI HITL demo — kept for backwards-compat

CrewAI FlowsCrewAI Enterprise

Tool Rendering

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

CrewAI FlowsCrewAI 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 FlowsCrewAI Enterprise

Tool Rendering (Custom Catch-all)

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

CrewAI FlowsCrewAI Enterprise

Tool Rendering + Reasoning Chain

Sequential tool calls with reasoning tokens side-by-side

CrewAI FlowsCrewAI Enterprise

Agentic Generative UI

Long-running agent tasks with generated UI

CrewAI FlowsCrewAI Enterprise

Tool-Based Generative UI

Agent uses tools to trigger UI generation

CrewAI FlowsCrewAI Enterprise

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

CrewAI FlowsCrewAI Enterprise

Frontend Tools (Async)

useFrontendTool with an async handler

CrewAI FlowsCrewAI Enterprise

State Streaming

Per-token state delta streaming from agent to UI

CrewAI FlowsCrewAI Enterprise

Shared State (Read + Write)

Bidirectional shared state - UI writes preferences, agent writes notes

CrewAI FlowsCrewAI Enterprise

Sub-Agents

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

CrewAI FlowsCrewAI Enterprise

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

CrewAI FlowsCrewAI Enterprise

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

CrewAI FlowsCrewAI Enterprise

Open-Ended Gen UI (Advanced)

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

CrewAI FlowsCrewAI Enterprise

Agent Config Object

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

CrewAI FlowsCrewAI Enterprise

Authentication

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

CrewAI FlowsCrewAI Enterprise

Voice Input

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

CrewAI FlowsCrewAI Enterprise

Multimodal Attachments

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

CrewAI FlowsCrewAI Enterprise

Declarative Generative UI (A2UI - Dynamic Schema)

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

CrewAI FlowsCrewAI Enterprise

A2UI Fixed-Schema

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

CrewAI FlowsCrewAI Enterprise

A2UI Error Recovery

CrewAI Flow-owned validate-to-retry recovery that heals a malformed render or shows a graceful exhausted fallback

CrewAI FlowsCrewAI Enterprise

Beautiful Chat

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

CrewAI FlowsCrewAI Enterprise

MCP Apps

MCP server-driven UI via activity renderers

CrewAI FlowsCrewAI Enterprise

Human in the Loop: Interrupts

Native CrewAI Flow human feedback rendered inline through useInterrupt

CrewAI FlowsCrewAI Enterprise

Headless Interrupt

Native CrewAI Flow human feedback rendered in the app surface outside chat

CrewAI Conversational FlowsCrewAI Enterprise

Start with CrewAI Flows

Scaffold a CrewAI Flow, then promote it to conversational mode

CrewAI Conversational FlowsCrewAI Enterprise

Agentic Chat

Natural conversation with frontend tool execution

CrewAI Conversational FlowsCrewAI Enterprise

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

CrewAI Conversational FlowsCrewAI Enterprise

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

CrewAI Conversational FlowsCrewAI Enterprise

Chat Customization (Slots)

Customize CopilotChat via its slot system

CrewAI Conversational FlowsCrewAI Enterprise

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

CrewAI Conversational FlowsCrewAI Enterprise

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

CrewAI Conversational FlowsCrewAI Enterprise

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

CrewAI Conversational FlowsCrewAI Enterprise

Reasoning: Default

Built-in CopilotChat reasoning rendering backed by native CrewAI Flow reasoning events

CrewAI Conversational FlowsCrewAI Enterprise

Reasoning: Custom

Native CrewAI reasoning tokens rendered through a custom reasoning message slot

CrewAI Conversational FlowsCrewAI Enterprise

In-Chat Human in the Loop

User approves agent actions before execution

CrewAI Conversational FlowsCrewAI Enterprise

In-Chat HITL (Booking)

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

CrewAI Conversational FlowsCrewAI 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 Conversational FlowsCrewAI Enterprise

In-Chat Human in the Loop (original)

Original CrewAI HITL demo — kept for backwards-compat

CrewAI Conversational FlowsCrewAI Enterprise

Tool Rendering

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

CrewAI Conversational FlowsCrewAI 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 Conversational FlowsCrewAI Enterprise

Tool Rendering (Custom Catch-all)

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

CrewAI Conversational FlowsCrewAI Enterprise

Tool Rendering + Reasoning Chain

Sequential tool calls with reasoning tokens side-by-side

CrewAI Conversational FlowsCrewAI Enterprise

Agentic Generative UI

Long-running agent tasks with generated UI

CrewAI Conversational FlowsCrewAI Enterprise

Tool-Based Generative UI

Agent uses tools to trigger UI generation

CrewAI Conversational FlowsCrewAI Enterprise

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

CrewAI Conversational FlowsCrewAI Enterprise

Frontend Tools (Async)

useFrontendTool with an async handler

CrewAI Conversational FlowsCrewAI Enterprise

State Streaming

Per-token state delta streaming from agent to UI

CrewAI Conversational FlowsCrewAI Enterprise

Shared State (Read + Write)

Bidirectional shared state - UI writes preferences, agent writes notes

CrewAI Conversational FlowsCrewAI Enterprise

Sub-Agents

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

CrewAI Conversational FlowsCrewAI Enterprise

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

CrewAI Conversational FlowsCrewAI Enterprise

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

CrewAI Conversational FlowsCrewAI Enterprise

Open-Ended Gen UI (Advanced)

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

CrewAI Conversational FlowsCrewAI Enterprise

Agent Config Object

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

CrewAI Conversational FlowsCrewAI Enterprise

Authentication

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

CrewAI Conversational FlowsCrewAI Enterprise

Voice Input

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

CrewAI Conversational FlowsCrewAI Enterprise

Multimodal Attachments

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

CrewAI Conversational FlowsCrewAI Enterprise

Declarative Generative UI (A2UI - Dynamic Schema)

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

CrewAI Conversational FlowsCrewAI Enterprise

A2UI Fixed-Schema

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

CrewAI Conversational FlowsCrewAI Enterprise

A2UI Error Recovery

CrewAI Flow-owned validate-to-retry recovery that heals a malformed render or shows a graceful exhausted fallback

CrewAI Conversational FlowsCrewAI Enterprise

Beautiful Chat

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

CrewAI Conversational FlowsCrewAI Enterprise

MCP Apps

MCP server-driven UI via activity renderers

CrewAI Conversational FlowsCrewAI Enterprise

Human in the Loop: Interrupts

Native CrewAI Flow human feedback rendered inline through useInterrupt

CrewAI Conversational FlowsCrewAI Enterprise

Headless Interrupt

Native CrewAI Flow human feedback rendered in the app surface outside chat

Agent Frameworks

Google ADKGoogle AI Studio

CLI Start Command

Copy-paste command to clone the canonical starter

Google ADKGoogle AI Studio

Pre-Built: CopilotChat

Vanilla CopilotChat with three starter-prompt suggestions — the minimum-viable surface for free-form chat

Google ADKGoogle AI Studio

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

Google ADKGoogle AI Studio

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

Google ADKGoogle AI Studio

Tool Rendering (Custom Catch-all)

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

Google ADKGoogle AI Studio

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

Google ADKGoogle AI Studio

Frontend Tools (Async)

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

Google ADKGoogle AI Studio

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.

Google ADKGoogle AI Studio

MCP Apps

Runtime mcpApps config wires an Excalidraw MCP server; the built-in MCPAppsActivityRenderer renders the sandboxed iframe inline in the chat with no app-side renderer

Google ADKGoogle AI Studio

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

Agent requests approval via a frontend tool 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

Google ADKGoogle AI Studio

Human in the Loop: Interrupts

Interactive time-picker rendered inline in the chat. ADK has no LangGraph interrupt() primitive, so this uses the Strategy-B adaptation — the agent calls a frontend schedule_meeting tool (useHumanInTheLoop) whose Promise resolves only once the user picks a slot, giving the same inline-card UX as the LangGraph reference.

Google ADKGoogle AI Studio

Tool Rendering

Custom per-tool renderers (WeatherCard, FlightListCard) plus a wildcard catch-all for every other tool

Google ADKGoogle AI Studio

Tool-Based Generative UI

Agent uses tools to trigger UI generation

Google ADKGoogle AI Studio

Agentic Generative UI

Canonical agent-state-driven Gen UI — the agent plans a live step list and emits it via state["steps"]; the frontend renders it via useAgent

Google ADKGoogle AI Studio

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).

Google ADKGoogle AI Studio

Shared State: Read + Write

Bidirectional shared state — UI writes preferences via agent.setState; agent writes notes via a Command-returning tool

Google ADKGoogle AI Studio

State Streaming

Per-token state delta streaming from agent to UI via PredictStateMapping

Google ADKGoogle AI Studio

Sub-Agents

Multiple agents with visible task delegation

Google ADKGoogle AI Studio

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

Google ADKGoogle AI Studio

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

Google ADKGoogle AI Studio

Chat Customization (Slots)

Customize CopilotChat via its slot system

Google ADKGoogle AI Studio

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

Google ADKGoogle AI Studio

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

Google ADKGoogle AI Studio

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer (Gemini 3.1 thinking mode)

Google ADKGoogle AI Studio

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override.

Google ADKGoogle AI Studio

Declarative Generative UI (A2UI)

Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider; the runtime forwards the selected Express or Direct JSON format and the ag_ui_adk adapter auto-injects generate_a2ui (injectA2UITool=true). Express progressively compiles validated standard A2UI operations

Google ADKGoogle AI Studio

Declarative Generative UI (A2UI — Fixed Schema)

An authored Express or Direct JSON flight tree with runtime data bindings. Express compiles once at server startup against the build-exported frontend catalog; no layout model call is added.

Google ADKGoogle AI Studio

A2UI Error Recovery

Express or Direct JSON with bounded validation and recovery — malformed model output retries to a valid surface, while repeated failure shows a graceful fallback. Backend-owned via get_a2ui_tool (injectA2UITool=false); reuses the declarative-gen-ui catalog. Express progressively paints validated operations with a stable surface identity.

Google ADKGoogle AI Studio

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

Google ADKGoogle AI Studio

Tool Rendering + Reasoning Chain (testing)

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

Google ADKGoogle AI Studio

Declarative UI: json-render

Streaming hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)

Google ADKGoogle AI Studio

Beautiful Chat

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

Google ADKGoogle AI Studio

Multimodal Attachments

Image and PDF uploads via CopilotChat attachments, processed by a Gemini multimodal agent

Google ADKGoogle AI Studio

Authentication

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

Google ADKGoogle AI Studio

Declarative UI: Hashbrown

Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)

Google ADKGoogle AI Studio

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

Google ADKGoogle AI Studio

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

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

Google ADKGoogle AI Studio

Voice Input

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

Google ADKGoogle AI Studio

Agent Config Object

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

OpenAI Agents SDK (Python)

Beautiful Chat

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

OpenAI Agents SDK (Python)

Pre-Built: CopilotChat

Vanilla CopilotChat with three starter-prompt suggestions — the minimum-viable surface for free-form chat

OpenAI Agents SDK (Python)

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

OpenAI Agents SDK (Python)

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

OpenAI Agents SDK (Python)

Chat Customization: Slots

Customize CopilotChat via its slot system

OpenAI Agents SDK (Python)

Chat Customization: CSS

Default CopilotChat re-themed via CopilotKitCSSProperties

OpenAI Agents SDK (Python)

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.

OpenAI Agents SDK (Python)

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.

OpenAI Agents SDK (Python)

Voice

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

OpenAI Agents SDK (Python)

Frontend Tools: In-app Actions

Agent invokes client-side handlers registered with useFrontendTool

OpenAI Agents 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

OpenAI Agents SDK (Python)

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.

OpenAI Agents SDK (Python)

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

OpenAI Agents SDK (Python)

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

OpenAI Agents SDK (Python)

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`)

OpenAI Agents SDK (Python)

Generative UI: useComponent

Agent uses tools to trigger UI generation

OpenAI Agents SDK (Python)

Generative UI: Tool Rendering (Custom)

Custom per-tool renderers (WeatherCard, FlightListCard) plus a wildcard catch-all for every other tool

OpenAI Agents SDK (Python)

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

OpenAI Agents SDK (Python)

Generative UI: Tool Rendering (Catch-all)

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

OpenAI Agents SDK (Python)

Authentication

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

OpenAI Agents SDK (Python)

Sub-Agents

Multiple agents with visible task delegation

OpenAI Agents SDK (Python)

MCP Apps

MCP server-driven UI via activity renderers

OpenAI Agents SDK (Python)

Declarative UI: Fixed A2UI

Render an A2UI tree from a fixed, server-side schema — the agent streams data into a pre-authored component tree

OpenAI Agents SDK (Python)

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.

OpenAI Agents SDK (Python)

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.

OpenAI Agents SDK (Python)

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.

OpenAI Agents SDK (Python)

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.

OpenAI Agents SDK (Python)

Shared State: Streaming

Per-token state delta streaming from agent to UI

OpenAI Agents SDK (Python)

Shared State: Frontend Context

Frontend provides read-only context via useAgentContext; the agent's dynamic instructions fold it into the prompt

OpenAI Agents SDK (Python)

Agent Config Object

Forward a typed config object (tone / expertise / response length) through useAgentContext; the agent's dynamic instructions apply it on every turn

OpenAI Agents SDK (Python)

Attachments

Image and PDF uploads via CopilotChat attachments, forwarded to the model as input_image / input_file items

OpenAI Agents SDK (Python)

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override.

OpenAI Agents SDK (Python)

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer

OpenAI Agents SDK (Python)

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.

OpenAI Agents SDK (Python)

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.

OpenAI Agents SDK (Python)

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.

OpenAI Agents SDK (Python)

Declarative UI: json-render

Hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)

OpenAI Agents SDK (Python)

Declarative UI: Hashbrown

Structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)

OpenAI Agents SDK (Python)

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).

Emerging

AWS Strands (Python)AWS Bedrock AgentCore

CLI Start Command

Copy-paste command to clone the canonical starter

AWS Strands (Python)AWS Bedrock AgentCore

Agentic Chat

Natural conversation with frontend tool execution

AWS Strands (Python)AWS Bedrock AgentCore

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

AWS Strands (Python)AWS Bedrock AgentCore

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

AWS Strands (Python)AWS Bedrock AgentCore

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

AWS Strands (Python)AWS Bedrock AgentCore

Chat Customization (Slots)

Customize CopilotChat via its slot system

AWS Strands (Python)AWS Bedrock AgentCore

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

AWS Strands (Python)AWS Bedrock AgentCore

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

AWS Strands (Python)AWS Bedrock AgentCore

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

AWS Strands (Python)AWS Bedrock AgentCore

Frontend Tools (Async)

useFrontendTool with an async handler

AWS Strands (Python)AWS Bedrock AgentCore

In-Chat HITL (useHumanInTheLoop)

Inline approval/decision surface via the ergonomic useHumanInTheLoop hook

AWS Strands (Python)AWS Bedrock AgentCore

In-Chat HITL (Booking)

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

AWS Strands (Python)AWS Bedrock AgentCore

In-App Human in the Loop

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

AWS Strands (Python)AWS Bedrock AgentCore

In-Chat HITL (Steps)

Agent pauses for user approval via step-based human-in-the-loop

AWS Strands (Python)AWS Bedrock AgentCore

Tool Rendering

Custom render for tool calls inline in the chat stream

AWS Strands (Python)AWS Bedrock AgentCore

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

AWS Strands (Python)AWS Bedrock AgentCore

Tool Rendering (Custom Catch-all)

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

AWS Strands (Python)AWS Bedrock AgentCore

Tool Rendering + Reasoning Chain

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

AWS Strands (Python)AWS Bedrock AgentCore

Agentic Generative UI

Long-running agent tasks with generated UI

AWS Strands (Python)AWS Bedrock AgentCore

Tool-Based Generative UI

Agent uses tools to trigger UI generation

AWS Strands (Python)AWS Bedrock AgentCore

Declarative Generative UI (A2UI)

Dynamic A2UI BYOC via a custom catalog

AWS Strands (Python)AWS Bedrock AgentCore

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema

AWS Strands (Python)AWS Bedrock AgentCore

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. The Strands adapter runs the recovery loop on its auto-inject path; reuses the declarative-gen-ui catalog.

AWS Strands (Python)AWS Bedrock AgentCore

Shared State (Read + Write)

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

AWS Strands (Python)AWS Bedrock AgentCore

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).

AWS Strands (Python)AWS Bedrock AgentCore

Sub-Agents

Multiple agents with visible task delegation

AWS Strands (Python)AWS Bedrock AgentCore

State Streaming

Per-token state delta streaming from agent to UI

AWS Strands (Python)AWS Bedrock AgentCore

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

AWS Strands (Python)AWS Bedrock AgentCore

Multimodal Attachments

Image and PDF uploads via CopilotChat attachments

AWS Strands (Python)AWS Bedrock AgentCore

Voice Input

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

AWS Strands (Python)AWS Bedrock AgentCore

Authentication

Bearer-token gate via runtime onRequest hook

AWS Strands (Python)AWS Bedrock AgentCore

Agent Config Object

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

AWS Strands (Python)AWS Bedrock AgentCore

Declarative UI: Hashbrown

Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)

AWS Strands (Python)AWS Bedrock AgentCore

Declarative UI: json-render

Streaming hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)

AWS Strands (Python)AWS Bedrock AgentCore

Open Generative UI (Minimal)

Agent-authored HTML/CSS/SVG in a sandboxed iframe, minimal variant

AWS Strands (Python)AWS Bedrock AgentCore

Open Generative UI (Advanced)

Sandboxed iframe that invokes host-registered sandbox functions via Websandbox.connection.remote

AWS Strands (Python)AWS Bedrock AgentCore

MCP Apps

MCP server-driven UI via activity renderers

AWS Strands (Python)AWS Bedrock AgentCore

Beautiful Chat

Polished landing-style chat surface with brand theming and suggestion pills

AWS Strands (Python)AWS Bedrock AgentCore

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override, so the bridge's reasoning start/content/end events land in the default renderer.

AWS Strands (Python)AWS Bedrock AgentCore

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer via a custom reasoningMessage slot.

AWS Strands (Python)AWS Bedrock AgentCore

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

Interactive component rendered inline in the chat via the lower-level `useInterrupt` primitive, driven by Strands' native `tool_context.interrupt()` on the backend

AWS Strands (Python)AWS Bedrock AgentCore

Headless Interrupt (testing)

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

AWS Strands (TypeScript)AWS Bedrock AgentCore

CLI Start Command

Copy-paste command to clone the canonical starter

AWS Strands (TypeScript)AWS Bedrock AgentCore

Agentic Chat

Natural conversation with frontend tool execution

AWS Strands (TypeScript)AWS Bedrock AgentCore

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

AWS Strands (TypeScript)AWS Bedrock AgentCore

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

AWS Strands (TypeScript)AWS Bedrock AgentCore

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

AWS Strands (TypeScript)AWS Bedrock AgentCore

Chat Customization (Slots)

Customize CopilotChat via its slot system

AWS Strands (TypeScript)AWS Bedrock AgentCore

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

AWS Strands (TypeScript)AWS Bedrock AgentCore

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

AWS Strands (TypeScript)AWS Bedrock AgentCore

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

AWS Strands (TypeScript)AWS Bedrock AgentCore

Frontend Tools (Async)

useFrontendTool with an async handler

AWS Strands (TypeScript)AWS Bedrock AgentCore

In-Chat HITL (useHumanInTheLoop)

Inline approval/decision surface via the ergonomic useHumanInTheLoop hook

AWS Strands (TypeScript)AWS Bedrock AgentCore

In-Chat HITL (Booking)

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

AWS Strands (TypeScript)AWS Bedrock AgentCore

In-App Human in the Loop

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

AWS Strands (TypeScript)AWS Bedrock AgentCore

In-Chat HITL (Steps)

Agent pauses for user approval via step-based human-in-the-loop

AWS Strands (TypeScript)AWS Bedrock AgentCore

Tool Rendering

Custom render for tool calls inline in the chat stream

AWS Strands (TypeScript)AWS Bedrock AgentCore

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

AWS Strands (TypeScript)AWS Bedrock AgentCore

Tool Rendering (Custom Catch-all)

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

AWS Strands (TypeScript)AWS Bedrock AgentCore

Tool Rendering + Reasoning Chain

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

AWS Strands (TypeScript)AWS Bedrock AgentCore

Agentic Generative UI

Long-running agent tasks with generated UI

AWS Strands (TypeScript)AWS Bedrock AgentCore

Tool-Based Generative UI

Agent uses tools to trigger UI generation

AWS Strands (TypeScript)AWS Bedrock AgentCore

Declarative Generative UI (A2UI)

Dynamic A2UI BYOC via a custom catalog

AWS Strands (TypeScript)AWS Bedrock AgentCore

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema

AWS Strands (TypeScript)AWS Bedrock AgentCore

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. The Strands adapter runs the recovery loop on its auto-inject path; reuses the declarative-gen-ui catalog.

AWS Strands (TypeScript)AWS Bedrock AgentCore