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

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