Demos
81 resultsMost Popular
MastraMastra CloudCLI Start Command
Copy-paste command to scaffold the canonical Mastra starter
MastraMastra CloudAgentic Chat
Natural conversation with frontend tool execution
MastraMastra CloudIn-Chat HITL (useHumanInTheLoop — ergonomic API)
Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook
MastraMastra CloudIn-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 CloudTool Rendering
Custom per-tool renderers plus a wildcard catch-all for every other tool
MastraMastra CloudTool Rendering (Default Catch-all)
Out-of-the-box tool rendering — backend defines tools; frontend adds zero custom renderers
MastraMastra CloudTool Rendering (Custom Catch-all)
Single branded wildcard renderer via useDefaultRenderTool
MastraMastra CloudAgentic Generative UI
Long-running agent tasks with generated UI
MastraMastra CloudState Streaming
Per-token state delta streaming from agent to UI
MastraMastra CloudReadonly State (Agent Context)
Frontend provides read-only context to the agent via useAgentContext
MastraMastra CloudPre-Built: Sidebar
Docked sidebar chat via <CopilotSidebar />
MastraMastra CloudPre-Built: Popup
Floating popup chat via <CopilotPopup />
MastraMastra CloudChat Customization (Slots)
Customize CopilotChat via its slot system
MastraMastra CloudChat Customization (CSS)
Default CopilotChat re-themed via CopilotKitCSSProperties
MastraMastra CloudHeadless Chat (Simple)
Minimal custom chat surface built on useAgent
MastraMastra CloudFrontend Tools (In-App Actions)
Agent invokes client-side handlers registered with useFrontendTool
MastraMastra CloudFrontend Tools (Async)
useFrontendTool with an async handler — agent awaits a client-side async operation and uses the returned result
MastraMastra CloudAgent Config Object
Forward a typed config object (tone / expertise / response length) from the provider to the agent via useAgentContext
MastraMastra CloudDeclarative Generative UI (A2UI — Dynamic Schema)
Dynamic A2UI surfaces generated by the `generate_a2ui` tool; frontend supplies a typed catalog (Card, Metric, PieChart, BarChart, …)
MastraMastra CloudA2UI 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.
MastraMastra CloudA2UI 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 CloudHeadless Chat (Complete)
Full chat-from-scratch on useAgent — custom bubbles, manual generative-UI composition via useRenderToolCall / useRenderActivityMessage / useRenderCustomMessages
MastraMastra CloudAuthentication
Bearer-token gate enforced by the V2 runtime's onRequest hook — unauthenticated requests 401 before reaching the agent
MastraMastra CloudShared 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 CloudSub-Agents
Supervisor Mastra Agent delegates to research / writing / critique sub-agents; every delegation appended to a live UI log via shared state
MastraMastra CloudBeautiful Chat (Flagship)
Flagship CopilotKit showcase combining A2UI, Open Generative UI, and MCP Apps in one cell
MastraMastra CloudMultimodal Attachments
Image + PDF uploads forwarded to a vision-capable Mastra agent (gpt-4o)
MastraMastra CloudOpen Generative UI
Agent-authored HTML + CSS streamed into a sandboxed iframe via the runtime's openGenerativeUI flag
MastraMastra CloudOpen Generative UI (Advanced)
Open Generative UI with host-side sandbox functions wired through the iframe bridge
MastraMastra CloudVoice Input
Mic-to-text input via OpenAI Whisper, streamed into the chat composer
MastraMastra CloudTool-Based Generative UI
Agent uses a frontend tool to trigger rich generative UI inline in the chat
MastraMastra CloudHuman 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 CloudIn-Chat HITL (Booking)
Time-picker card rendered inline via useHumanInTheLoop for a booking flow (alias of hitl-in-chat)
MastraMastra CloudMCP Apps
MCP server-driven UI rendered inline via the runtime's mcpApps config and the built-in activity renderer
MastraMastra CloudTool Rendering + Reasoning Chain
Sequential tool calls rendered with per-tool components plus a reasoning chain rendered inline via a custom reasoningMessage slot
MastraMastra CloudReasoning: Default
Built-in CopilotChatReasoningMessage rendering with no slot override — the v1 bridge emits reasoning start/content/end events straight into the default renderer.
MastraMastra CloudReasoning: Custom
Visible reasoning/thinking chain alongside the final answer via a custom reasoningMessage slot.
MastraMastra CloudGen 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 CloudHeadless Interrupt (Frontend Tool)
Time-picker popup rendered outside the chat in the app surface — headless variant of the Strategy B interrupt adaptation
MastraMastra CloudBackground Agents
A long-running deep-research tool dispatched as a Mastra background task, surfaced inline as a live "working" activity card
MastraMastra CloudBrowser 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 CloudObservational 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
Agent Frameworks
Google ADKGoogle AI StudioCLI Start Command
Copy-paste command to clone the canonical starter
Google ADKGoogle AI StudioPre-Built: CopilotChat
Vanilla CopilotChat with three starter-prompt suggestions — the minimum-viable surface for free-form chat
Google ADKGoogle AI StudioChat Customization (CSS)
Default CopilotChat re-themed via CopilotKitCSSProperties
Google ADKGoogle AI StudioTool 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 StudioTool Rendering (Custom Catch-all)
Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call
Google ADKGoogle AI StudioFrontend Tools (In-App Actions)
Agent invokes client-side handlers registered with useFrontendTool
Google ADKGoogle AI StudioFrontend Tools (Async)
useFrontendTool with an async handler — agent awaits a client-side async operation and uses the returned result
Google ADKGoogle AI StudioHuman 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 StudioMCP 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 StudioIn-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 StudioHuman 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 StudioTool Rendering
Custom per-tool renderers (WeatherCard, FlightListCard) plus a wildcard catch-all for every other tool
Google ADKGoogle AI StudioTool-Based Generative UI
Agent uses tools to trigger UI generation
Google ADKGoogle AI StudioAgentic 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 StudioShared 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 StudioShared State: Read + Write
Bidirectional shared state — UI writes preferences via agent.setState; agent writes notes via a Command-returning tool
Google ADKGoogle AI StudioState Streaming
Per-token state delta streaming from agent to UI via PredictStateMapping
Google ADKGoogle AI StudioSub-Agents
Multiple agents with visible task delegation
Google ADKGoogle AI StudioPre-Built: Sidebar
Docked sidebar chat via <CopilotSidebar />
Google ADKGoogle AI StudioPre-Built: Popup
Floating popup chat via <CopilotPopup />
Google ADKGoogle AI StudioChat Customization (Slots)
Customize CopilotChat via its slot system
Google ADKGoogle AI StudioHeadless Chat (Simple)
Minimal custom chat surface built on useAgent
Google ADKGoogle AI StudioHeadless Chat (Complete)
Full chat implementation built from scratch on useAgent
Google ADKGoogle AI StudioReasoning: Custom
Visible reasoning/thinking chain alongside the final answer (Gemini 3.1 thinking mode)
Google ADKGoogle AI StudioReasoning: Default
Built-in CopilotChatReasoningMessage rendering with no slot override.
Google ADKGoogle AI StudioDeclarative Generative UI (A2UI)
Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider; the runtime injects the render_a2ui tool automatically (injectA2UITool=true) and the ag_ui_adk adapter auto-injects generate_a2ui
Google ADKGoogle AI StudioDeclarative Generative UI (A2UI — Fixed Schema)
A2UI rendering against a known client-side schema
Google ADKGoogle AI StudioA2UI 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 via get_a2ui_tool (injectA2UITool=false); reuses the declarative-gen-ui catalog. Also shipped for langgraph (python/fastapi/typescript) and strands (python/typescript).
Google ADKGoogle AI StudioReadonly State (Agent Context)
Frontend provides read-only context to the agent via useAgentContext
Google ADKGoogle AI StudioTool Rendering + Reasoning Chain (testing)
Sequential tool calls with reasoning tokens rendered side-by-side
Google ADKGoogle AI StudioDeclarative UI: json-render
Streaming hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)
Google ADKGoogle AI StudioBeautiful Chat
Canonical polished starter chat — brand fonts, theme tokens, suggestion pills
Google ADKGoogle AI StudioMultimodal Attachments
Image and PDF uploads via CopilotChat attachments, processed by a Gemini multimodal agent
Google ADKGoogle AI StudioAuthentication
Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states
Google ADKGoogle AI StudioDeclarative UI: Hashbrown
Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)
Google ADKGoogle AI StudioFully Open-Ended Generative UI
Agent generates UI from an arbitrary component library
Google ADKGoogle AI StudioOpen-Ended Gen UI (Advanced: with frontend function calling)
Agent-authored UI that can invoke frontend sandbox functions from inside the iframe
Google ADKGoogle AI StudioVoice Input
Speech-to-text via @copilotkit/voice with a bundled sample audio button
Google ADKGoogle AI StudioAgent Config Object
Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt