Most Popular

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

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