mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Jordan Ritter
928ece2f6c
Annotates 14 integration manifests with d6_not_supported_features entries and aligns d6_supported_features with what each backend actually implements, so the D6 fleet probe only enumerates demos that the backend can serve.
529 lines
18 KiB
YAML
529 lines
18 KiB
YAML
name: Mastra
|
|
slug: mastra
|
|
category: popular
|
|
language: typescript
|
|
logo: /logos/mastra.svg
|
|
description: >-
|
|
TypeScript-native agent framework with built-in tool management, agent memory,
|
|
and workflow orchestration. Integrates with CopilotKit via the AG-UI protocol
|
|
adapter.
|
|
partner_docs: https://docs.copilotkit.ai/integrations/mastra
|
|
repo: https://github.com/CopilotKit/CopilotKit/tree/main/showcase/integrations/mastra
|
|
copilotkit_version: 2.0.0
|
|
deployed: true
|
|
docs_mode: authored
|
|
sort_order: 20
|
|
generative_ui:
|
|
- constrained-explicit
|
|
- a2ui-fixed-schema
|
|
- a2ui-dynamic-schema
|
|
interaction_modalities:
|
|
- sidebar
|
|
- embedded
|
|
- chat
|
|
managed_platform:
|
|
name: Mastra Cloud
|
|
url: https://mastra.ai/cloud
|
|
not_supported_features:
|
|
- shared-state-streaming
|
|
- gen-ui-interrupt
|
|
- interrupt-headless
|
|
- agentic-chat-reasoning
|
|
- reasoning-default-render
|
|
- tool-rendering-reasoning-chain
|
|
features:
|
|
- cli-start
|
|
- agentic-chat
|
|
- hitl-in-chat
|
|
- hitl-in-app
|
|
- tool-rendering
|
|
- tool-rendering-default-catchall
|
|
- tool-rendering-custom-catchall
|
|
- gen-ui-agent
|
|
- readonly-state-agent-context
|
|
- prebuilt-sidebar
|
|
- prebuilt-popup
|
|
- chat-slots
|
|
- chat-customization-css
|
|
- headless-simple
|
|
- frontend-tools
|
|
- frontend-tools-async
|
|
- agent-config
|
|
- declarative-gen-ui
|
|
- a2ui-fixed-schema
|
|
- headless-complete
|
|
- auth
|
|
- shared-state-read-write
|
|
- subagents
|
|
- beautiful-chat
|
|
- byoc-hashbrown
|
|
- byoc-json-render
|
|
- multimodal
|
|
- open-gen-ui
|
|
- open-gen-ui-advanced
|
|
- voice
|
|
- gen-ui-tool-based
|
|
- hitl
|
|
- hitl-in-chat-booking
|
|
- mcp-apps
|
|
- shared-state-read
|
|
a2ui_pattern: llm-driven
|
|
agent_config_pattern: shared-state
|
|
auth_pattern: runtime-onrequest
|
|
demos:
|
|
- id: cli-start
|
|
name: CLI Start Command
|
|
description: Copy-paste command to scaffold the canonical Mastra starter
|
|
tags:
|
|
- chat-ui
|
|
command: "npx degit CopilotKit/CopilotKit/showcase/integrations/mastra
|
|
my-copilotkit-app"
|
|
- id: agentic-chat
|
|
name: Agentic Chat
|
|
description: Natural conversation with frontend tool execution
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/agentic-chat
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/agents/index.ts
|
|
- src/mastra/tools/index.ts
|
|
- src/app/demos/agentic-chat/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: hitl-in-chat
|
|
name: In-Chat HITL (useHumanInTheLoop — ergonomic API)
|
|
description:
|
|
Interactive approval/decision surface rendered inline in the chat
|
|
via the high-level `useHumanInTheLoop` hook
|
|
tags:
|
|
- interactivity
|
|
route: /demos/hitl-in-chat
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/agents/index.ts
|
|
- src/app/demos/hitl-in-chat/page.tsx
|
|
- src/app/demos/hitl-in-chat/time-picker-card.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: hitl-in-app
|
|
name: In-App Human in the Loop (Frontend Tools + async HITL)
|
|
description:
|
|
Agent requests approval via useFrontendTool with an async handler;
|
|
the approval UI pops up as an app-level modal OUTSIDE the chat
|
|
tags:
|
|
- interactivity
|
|
route: /demos/hitl-in-app
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/agents/index.ts
|
|
- src/app/demos/hitl-in-app/page.tsx
|
|
- src/app/demos/hitl-in-app/approval-dialog.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: tool-rendering
|
|
name: Tool Rendering
|
|
description: Custom per-tool renderers plus a wildcard catch-all for every other tool
|
|
tags:
|
|
- agent-capabilities
|
|
route: /demos/tool-rendering
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/tools/index.ts
|
|
- shared-tools/get-weather.ts
|
|
- shared-tools/query-data.ts
|
|
- shared-tools/schedule-meeting.ts
|
|
- shared-tools/search-flights.ts
|
|
- src/app/demos/tool-rendering/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: tool-rendering-default-catchall
|
|
name: Tool Rendering (Default Catch-all)
|
|
description: Out-of-the-box tool rendering — backend defines tools; frontend
|
|
adds zero custom renderers
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/tool-rendering-default-catchall
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/tools/index.ts
|
|
- src/app/demos/tool-rendering-default-catchall/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: tool-rendering-custom-catchall
|
|
name: Tool Rendering (Custom Catch-all)
|
|
description: Single branded wildcard renderer via useDefaultRenderTool
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/tool-rendering-custom-catchall
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/tools/index.ts
|
|
- src/app/demos/tool-rendering-custom-catchall/page.tsx
|
|
- src/app/demos/tool-rendering-custom-catchall/custom-catchall-renderer.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: gen-ui-agent
|
|
name: Agentic Generative UI
|
|
description: Long-running agent tasks with generated UI
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/gen-ui-agent
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/gen-ui-agent/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: shared-state-streaming
|
|
name: State Streaming
|
|
description: Per-token state delta streaming from agent to UI
|
|
tags:
|
|
- agent-state
|
|
route: /demos/shared-state-streaming
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/shared-state-streaming/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: readonly-state-agent-context
|
|
name: Readonly State (Agent Context)
|
|
description: Frontend provides read-only context to the agent via useAgentContext
|
|
tags:
|
|
- agent-state
|
|
route: /demos/readonly-state-agent-context
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/readonly-state-agent-context/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: prebuilt-sidebar
|
|
name: "Pre-Built: Sidebar"
|
|
description: Docked sidebar chat via <CopilotSidebar />
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/prebuilt-sidebar
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/prebuilt-sidebar/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: prebuilt-popup
|
|
name: "Pre-Built: Popup"
|
|
description: Floating popup chat via <CopilotPopup />
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/prebuilt-popup
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/prebuilt-popup/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: chat-slots
|
|
name: Chat Customization (Slots)
|
|
description: Customize CopilotChat via its slot system
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/chat-slots
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/chat-slots/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- src/app/demos/chat-slots/slot-wrappers.tsx
|
|
- id: chat-customization-css
|
|
name: Chat Customization (CSS)
|
|
description: Default CopilotChat re-themed via CopilotKitCSSProperties
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/chat-customization-css
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/chat-customization-css/page.tsx
|
|
- src/app/demos/chat-customization-css/theme.css
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: headless-simple
|
|
name: Headless Chat (Simple)
|
|
description: Minimal custom chat surface built on useAgent
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/headless-simple
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/headless-simple/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: frontend-tools
|
|
name: Frontend Tools (In-App Actions)
|
|
description: Agent invokes client-side handlers registered with useFrontendTool
|
|
tags:
|
|
- interactivity
|
|
route: /demos/frontend-tools
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/frontend-tools/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: frontend-tools-async
|
|
name: Frontend Tools (Async)
|
|
description:
|
|
useFrontendTool with an async handler — agent awaits a client-side
|
|
async operation and uses the returned result
|
|
tags:
|
|
- interactivity
|
|
route: /demos/frontend-tools-async
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/frontend-tools-async/page.tsx
|
|
- src/app/demos/frontend-tools-async/notes-card.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: agent-config
|
|
name: Agent Config Object
|
|
description:
|
|
Forward a typed config object (tone / expertise / response length)
|
|
from the provider to the agent via useAgentContext
|
|
tags:
|
|
- platform
|
|
route: /demos/agent-config
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/agent-config/page.tsx
|
|
- src/app/demos/agent-config/config-card.tsx
|
|
- src/app/demos/agent-config/use-agent-config.ts
|
|
- src/app/demos/agent-config/config-types.ts
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: declarative-gen-ui
|
|
name: Declarative Generative UI (A2UI — Dynamic Schema)
|
|
description: Dynamic A2UI surfaces generated by the `generate_a2ui` tool;
|
|
frontend supplies a typed catalog (Card, Metric, PieChart, BarChart, …)
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/declarative-gen-ui
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/declarative-gen-ui/page.tsx
|
|
- src/app/demos/declarative-gen-ui/a2ui/catalog.ts
|
|
- src/app/demos/declarative-gen-ui/a2ui/definitions.ts
|
|
- src/app/demos/declarative-gen-ui/a2ui/renderers.tsx
|
|
- src/mastra/tools/index.ts
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: a2ui-fixed-schema
|
|
name: A2UI Fixed Schema
|
|
description: Frontend-owned component tree; agent streams data into the data
|
|
model (flight card built from Card > Column >
|
|
Title/Airport/Arrow/AirlineBadge/PriceTag/Button)
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/a2ui-fixed-schema
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/a2ui-fixed-schema/page.tsx
|
|
- src/app/demos/a2ui-fixed-schema/a2ui/catalog.ts
|
|
- src/app/demos/a2ui-fixed-schema/a2ui/definitions.ts
|
|
- src/app/demos/a2ui-fixed-schema/a2ui/renderers.tsx
|
|
- src/mastra/tools/index.ts
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: headless-complete
|
|
name: Headless Chat (Complete)
|
|
description: Full chat-from-scratch on useAgent — custom bubbles, manual
|
|
generative-UI composition via useRenderToolCall / useRenderActivityMessage
|
|
/ useRenderCustomMessages
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/headless-complete
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/headless-complete/page.tsx
|
|
- src/mastra/agents/index.ts
|
|
- src/app/api/copilotkit/route.ts
|
|
- src/app/demos/headless-complete/chat/chat.tsx
|
|
- src/app/demos/headless-complete/hooks/use-tool-renderers.tsx
|
|
- src/app/demos/headless-complete/hooks/use-frontend-components.ts
|
|
- src/app/demos/headless-complete/hooks/use-headless-suggestions.ts
|
|
- src/app/demos/headless-complete/attachments/use-attachments-config.ts
|
|
- src/app/demos/headless-complete/tools/weather-card.tsx
|
|
- src/app/demos/headless-complete/tools/stock-card.tsx
|
|
- src/app/demos/headless-complete/tools/chart-card.tsx
|
|
- src/app/demos/headless-complete/tools/highlight-note.tsx
|
|
- id: auth
|
|
name: Authentication
|
|
description: Bearer-token gate enforced by the V2 runtime's onRequest hook —
|
|
unauthenticated requests 401 before reaching the agent
|
|
tags:
|
|
- platform
|
|
route: /demos/auth
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/auth/page.tsx
|
|
- src/app/demos/auth/use-demo-auth.ts
|
|
- src/app/demos/auth/auth-banner.tsx
|
|
- src/app/demos/auth/demo-token.ts
|
|
- src/app/api/copilotkit-auth/[[...slug]]/route.ts
|
|
- id: shared-state-read-write
|
|
name: Shared State (Read + Write)
|
|
description: Bidirectional shared state — UI writes preferences via
|
|
agent.setState; backend reads them every turn and writes notes back via
|
|
the set_notes tool
|
|
tags:
|
|
- agent-state
|
|
route: /demos/shared-state-read-write
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/agents/index.ts
|
|
- src/mastra/tools/shared-state-read-write.ts
|
|
- src/app/demos/shared-state-read-write/page.tsx
|
|
- src/app/demos/shared-state-read-write/preferences-card.tsx
|
|
- src/app/demos/shared-state-read-write/notes-card.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: subagents
|
|
name: Sub-Agents
|
|
description:
|
|
Supervisor Mastra Agent delegates to research / writing / critique
|
|
sub-agents; every delegation appended to a live UI log via shared state
|
|
tags:
|
|
- agent-capabilities
|
|
route: /demos/subagents
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/agents/index.ts
|
|
- src/mastra/tools/subagents.ts
|
|
- src/app/demos/subagents/page.tsx
|
|
- src/app/demos/subagents/delegation-log.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: beautiful-chat
|
|
name: Beautiful Chat (Flagship)
|
|
description:
|
|
Flagship CopilotKit showcase combining A2UI, Open Generative UI,
|
|
and MCP Apps in one cell
|
|
tags:
|
|
- chat-ui
|
|
- generative-ui
|
|
route: /demos/beautiful-chat
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/beautiful-chat/page.tsx
|
|
- src/app/api/copilotkit-beautiful-chat/route.ts
|
|
- id: multimodal
|
|
name: Multimodal Attachments
|
|
description: Image + PDF uploads forwarded to a vision-capable Mastra agent (gpt-4o)
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/multimodal
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/agents/index.ts
|
|
- src/app/demos/multimodal/page.tsx
|
|
- src/app/api/copilotkit-multimodal/route.ts
|
|
- id: open-gen-ui
|
|
name: Open Generative UI
|
|
description:
|
|
Agent-authored HTML + CSS streamed into a sandboxed iframe via the
|
|
runtime's openGenerativeUI flag
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/open-gen-ui
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/open-gen-ui/page.tsx
|
|
- src/app/api/copilotkit-ogui/route.ts
|
|
- id: open-gen-ui-advanced
|
|
name: Open Generative UI (Advanced)
|
|
description:
|
|
Open Generative UI with host-side sandbox functions wired through
|
|
the iframe bridge
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/open-gen-ui-advanced
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/open-gen-ui-advanced/page.tsx
|
|
- src/app/demos/open-gen-ui-advanced/sandbox-functions.ts
|
|
- src/app/demos/open-gen-ui-advanced/suggestions.ts
|
|
- src/app/api/copilotkit-ogui/route.ts
|
|
- id: voice
|
|
name: Voice Input
|
|
description: Mic-to-text input via OpenAI Whisper, streamed into the chat composer
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/voice
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/voice/page.tsx
|
|
- src/app/demos/voice/sample-audio-button.tsx
|
|
- src/app/api/copilotkit-voice/[[...slug]]/route.ts
|
|
- id: gen-ui-tool-based
|
|
name: Tool-Based Generative UI
|
|
description: Agent uses a frontend tool to trigger rich generative UI inline in the chat
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/gen-ui-tool-based
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/gen-ui-tool-based/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: hitl
|
|
name: Human in the Loop (Step Selection)
|
|
description:
|
|
Step-selection HITL surface rendered inline via `useHumanInTheLoop`
|
|
(the LangGraph-specific `useLangGraphInterrupt` branch is a no-op on
|
|
Mastra)
|
|
tags:
|
|
- interactivity
|
|
route: /demos/hitl
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/hitl/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: hitl-in-chat-booking
|
|
name: In-Chat HITL (Booking)
|
|
description: Time-picker card rendered inline via useHumanInTheLoop for a
|
|
booking flow (alias of hitl-in-chat)
|
|
tags:
|
|
- interactivity
|
|
route: /demos/hitl-in-chat
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/hitl-in-chat/page.tsx
|
|
- src/app/demos/hitl-in-chat/time-picker-card.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: mcp-apps
|
|
name: MCP Apps
|
|
description: MCP server-driven UI rendered inline via the runtime's mcpApps
|
|
config and the built-in activity renderer
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/mcp-apps
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/agents/index.ts
|
|
- src/app/demos/mcp-apps/page.tsx
|
|
- src/app/api/copilotkit-mcp-apps/route.ts
|
|
- id: tool-rendering-reasoning-chain
|
|
name: Tool Rendering + Reasoning Chain
|
|
description: Sequential tool calls rendered with per-tool components plus a
|
|
reasoning chain rendered inline via a custom reasoningMessage slot
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/tool-rendering-reasoning-chain
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/tool-rendering-reasoning-chain/page.tsx
|
|
- src/app/demos/tool-rendering-reasoning-chain/reasoning-block.tsx
|
|
- src/app/demos/tool-rendering-reasoning-chain/weather-card.tsx
|
|
- src/app/demos/tool-rendering-reasoning-chain/flight-list-card.tsx
|
|
- src/app/demos/tool-rendering-reasoning-chain/custom-catchall-renderer.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: gen-ui-interrupt
|
|
name: Gen UI Interrupt (Frontend Tool)
|
|
description:
|
|
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
|
|
tags:
|
|
- interactivity
|
|
route: /demos/gen-ui-interrupt
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/agents/index.ts
|
|
- src/app/demos/gen-ui-interrupt/page.tsx
|
|
- src/app/demos/gen-ui-interrupt/_components/time-picker-card.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: interrupt-headless
|
|
name: Headless Interrupt (Frontend Tool)
|
|
description:
|
|
Time-picker popup rendered outside the chat in the app surface —
|
|
headless variant of the Strategy B interrupt adaptation
|
|
tags:
|
|
- interactivity
|
|
route: /demos/interrupt-headless
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/mastra/agents/index.ts
|
|
- src/app/demos/interrupt-headless/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|