CopilotKit Showcase

Mastra

TypeScript-native agent framework with built-in tool management, agent memory, and workflow orchestration. Integrates with CopilotKit via the AG-UI protocol adapter.

41 demos·6 categories·integration mastra

Chat UI12

Agentic Chat

Natural conversation with frontend tool execution

/demos/agentic-chat

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

/demos/prebuilt-sidebar

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

/demos/prebuilt-popup

Chat Customization (Slots)

Customize CopilotChat via its slot system

/demos/chat-slots

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

/demos/chat-customization-css

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

/demos/headless-simple

Headless Chat (Complete)

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

/demos/headless-complete

Beautiful Chat (Flagship)

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

/demos/beautiful-chat

Multimodal Attachments

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

/demos/multimodal

Voice Input

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

/demos/voice

Reasoning: Default

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

/demos/reasoning-default

Reasoning: Custom

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

/demos/reasoning-custom

Interactivity8

In-Chat HITL (useHumanInTheLoop — ergonomic API)

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

/demos/hitl-in-chat

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

/demos/hitl-in-app

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

/demos/frontend-tools

Frontend Tools (Async)

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

/demos/frontend-tools-async

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)

/demos/hitl

In-Chat HITL (Booking)

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

/demos/hitl-in-chat

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

/demos/gen-ui-interrupt

Headless Interrupt (Frontend Tool)

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

/demos/interrupt-headless

Generative UI11

Tool Rendering (Default Catch-all)

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

/demos/tool-rendering-default-catchall

Tool Rendering (Custom Catch-all)

Single branded wildcard renderer via useDefaultRenderTool

/demos/tool-rendering-custom-catchall

Agentic Generative UI

Long-running agent tasks with generated UI

/demos/gen-ui-agent

Declarative Generative UI (A2UI — Dynamic Schema)

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

/demos/declarative-gen-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)

/demos/a2ui-fixed-schema

A2UI Error Recovery

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.

/demos/a2ui-recovery

Open Generative UI

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

/demos/open-gen-ui

Open Generative UI (Advanced)

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

/demos/open-gen-ui-advanced

Tool-Based Generative UI

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

/demos/gen-ui-tool-based

MCP Apps

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

/demos/mcp-apps

Tool Rendering + Reasoning Chain

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

/demos/tool-rendering-reasoning-chain

Agent Capabilities4

Tool Rendering

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

/demos/tool-rendering

Sub-Agents

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

/demos/subagents

Background Agents

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

/demos/background-agents

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.

/demos/browser-use

Agent State4

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

/demos/readonly-state-agent-context

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

/demos/shared-state-read-write

State Streaming

Per-token state delta streaming from agent to UI

/demos/shared-state-streaming

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

/demos/observational-memory

Platform2

Agent Config Object

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

/demos/agent-config

Authentication

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

/demos/auth