chore(blitz): merge F13 into integration

Author: AlemTuzlak

showcase/integrations/mastra/manifest.yaml

@@ -51,6 +51,21 @@ features:
   - 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
+  - tool-rendering-reasoning-chain
+not_supported_features:
+  - gen-ui-interrupt
+  - interrupt-headless
 demos:
   - id: cli-start
     name: CLI Start Command
@@ -356,3 +371,133 @@ demos:
       - 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: byoc-hashbrown
+    name: BYOC — Hashbrown
+    description: Bring-your-own-component dashboard rendered via @hashbrownai/react useUiKit + useJsonParser
+    tags:
+      - generative-ui
+    route: /demos/byoc-hashbrown
+    animated_preview_url:
+    highlight:
+      - src/app/demos/byoc-hashbrown/page.tsx
+      - src/app/api/copilotkit-byoc-hashbrown/route.ts
+  - id: byoc-json-render
+    name: BYOC — JSON Render
+    description: Bring-your-own-component dashboard rendered from a streamed JSON envelope into a frontend-owned catalog
+    tags:
+      - generative-ui
+    route: /demos/byoc-json-render
+    animated_preview_url:
+    highlight:
+      - src/app/demos/byoc-json-render/page.tsx
+      - src/app/api/copilotkit-byoc-json-render/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/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

showcase/integrations/mastra/public/demo-audio/README.md

@@ -0,0 +1,18 @@
+# Voice demo audio
+
+Drop a small (<100KB) WAV file named `sample.wav` in this directory. The voice
+demo (`/demos/voice`) fetches it client-side and POSTs to the transcription
+endpoint so the flow works without mic permissions.
+
+Expected content: an audio clip speaking the phrase
+**"What is the weather in Tokyo?"** — the demo caption advertises that phrase
+to the user, and the bundled QA checklist + E2E spec assert the transcribed
+text contains "weather" and/or "Tokyo".
+
+Generate locally, for example:
+
+- macOS: `say -o sample.aiff "What is the weather in Tokyo?" && ffmpeg -i sample.aiff -ar 16000 -ac 1 sample.wav`
+- Linux: `espeak-ng -w sample.wav "What is the weather in Tokyo?"`
+- Windows: PowerShell `System.Speech.Synthesis.SpeechSynthesizer` → `SetOutputToWaveFile`
+
+Target: 16kHz mono, 3-5s duration, <100KB.

showcase/integrations/mastra/public/demo-audio/sample.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bd4aa7b049f1c3e324dfd15af4068d7f8fbf2eae1dd044df270dddc5f38a5c57
+size 87078

showcase/integrations/mastra/src/app/api/copilotkit-beautiful-chat/route.ts

@@ -0,0 +1,69 @@
+// Dedicated runtime for the Beautiful Chat flagship showcase cell (Mastra).
+//
+// Beautiful Chat simultaneously exercises A2UI (dynamic + fixed schema),
+// Open Generative UI, and MCP Apps. This route enables all three flags on
+// a single runtime backing one shared Mastra agent — keeping these global
+// runtime flags scoped to the flagship cell so other demos sharing the
+// main `/api/copilotkit` endpoint preserve their per-demo
+// `useFrontendTool` / `useComponent` registrations.
+
+import { NextRequest, NextResponse } from "next/server";
+import {
+  CopilotRuntime,
+  ExperimentalEmptyAdapter,
+  copilotRuntimeNextJSAppRouterEndpoint,
+} from "@copilotkit/runtime";
+import { getLocalAgent } from "@ag-ui/mastra";
+import { mastra } from "@/mastra";
+
+const beautifulChatAgent = getLocalAgent({
+  mastra,
+  agentId: "weatherAgent",
+  resourceId: "mastra-beautiful-chat",
+});
+
+if (!beautifulChatAgent) {
+  throw new Error(
+    "getLocalAgent returned null for weatherAgent — required for /demos/beautiful-chat",
+  );
+}
+
+const runtime = new CopilotRuntime({
+  // @ts-ignore -- see main route.ts
+  agents: {
+    "beautiful-chat": beautifulChatAgent,
+    // Internal components call useAgent() with no args (defaults to "default").
+    default: beautifulChatAgent,
+  },
+  openGenerativeUI: true,
+  a2ui: {
+    // weatherAgent already has its own `generate_a2ui` tool — don't double-bind.
+    injectA2UITool: false,
+  },
+  mcpApps: {
+    servers: [
+      {
+        type: "http",
+        url: process.env.MCP_SERVER_URL || "https://mcp.excalidraw.com",
+        serverId: "beautiful_chat_mcp",
+      },
+    ],
+  },
+});
+
+export const POST = async (req: NextRequest) => {
+  try {
+    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
+      endpoint: "/api/copilotkit-beautiful-chat",
+      serviceAdapter: new ExperimentalEmptyAdapter(),
+      runtime,
+    });
+    return await handleRequest(req);
+  } catch (error: unknown) {
+    const e = error as { message?: string; stack?: string };
+    return NextResponse.json(
+      { error: e.message, stack: e.stack },
+      { status: 500 },
+    );
+  }
+};

showcase/integrations/mastra/src/app/api/copilotkit-byoc-hashbrown/route.ts

@@ -0,0 +1,54 @@
+// Dedicated runtime for the byoc-hashbrown demo (Mastra).
+//
+// The demo page wraps CopilotChat in the HashBrownDashboard provider and
+// overrides the assistant message slot with a renderer that consumes
+// hashbrown-shaped structured output via `@hashbrownai/react`'s `useUiKit`
+// + `useJsonParser`.
+//
+// In Mastra, the same shared weatherAgent backs this demo — the dashboard
+// shape is enforced entirely on the frontend by the catalog the renderer
+// consumes. For full parity (system prompt tuned to emit the dashboard
+// envelope), a dedicated Mastra agent could be wired here later.
+
+import { NextRequest, NextResponse } from "next/server";
+import {
+  CopilotRuntime,
+  ExperimentalEmptyAdapter,
+  copilotRuntimeNextJSAppRouterEndpoint,
+} from "@copilotkit/runtime";
+import { getLocalAgent } from "@ag-ui/mastra";
+import { mastra } from "@/mastra";
+
+const byocHashbrownAgent = getLocalAgent({
+  mastra,
+  agentId: "weatherAgent",
+  resourceId: "mastra-byoc-hashbrown",
+});
+
+if (!byocHashbrownAgent) {
+  throw new Error(
+    "getLocalAgent returned null for weatherAgent — required for /demos/byoc-hashbrown",
+  );
+}
+
+const runtime = new CopilotRuntime({
+  // @ts-ignore -- see main route.ts
+  agents: { "byoc-hashbrown-demo": byocHashbrownAgent },
+});
+
+export const POST = async (req: NextRequest) => {
+  try {
+    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
+      endpoint: "/api/copilotkit-byoc-hashbrown",
+      serviceAdapter: new ExperimentalEmptyAdapter(),
+      runtime,
+    });
+    return await handleRequest(req);
+  } catch (error: unknown) {
+    const e = error as { message?: string; stack?: string };
+    return NextResponse.json(
+      { error: e.message, stack: e.stack },
+      { status: 500 },
+    );
+  }
+};

showcase/integrations/mastra/src/app/api/copilotkit-byoc-json-render/route.ts

@@ -0,0 +1,50 @@
+// Dedicated runtime for the byoc-json-render demo (Mastra).
+//
+// The demo page renders streaming JSON from the agent into a frontend-owned
+// component catalog. In the langgraph-python integration, a dedicated
+// `byoc_json_render` LangGraph graph emits the JSON envelope; for the
+// Mastra port we reuse the shared weatherAgent — the dashboard shape is
+// enforced entirely on the frontend by the catalog and the renderer.
+
+import { NextRequest, NextResponse } from "next/server";
+import {
+  CopilotRuntime,
+  ExperimentalEmptyAdapter,
+  copilotRuntimeNextJSAppRouterEndpoint,
+} from "@copilotkit/runtime";
+import { getLocalAgent } from "@ag-ui/mastra";
+import { mastra } from "@/mastra";
+
+const byocJsonRenderAgent = getLocalAgent({
+  mastra,
+  agentId: "weatherAgent",
+  resourceId: "mastra-byoc-json-render",
+});
+
+if (!byocJsonRenderAgent) {
+  throw new Error(
+    "getLocalAgent returned null for weatherAgent — required for /demos/byoc-json-render",
+  );
+}
+
+const runtime = new CopilotRuntime({
+  // @ts-ignore -- see main route.ts
+  agents: { byoc_json_render: byocJsonRenderAgent },
+});
+
+export const POST = async (req: NextRequest) => {
+  try {
+    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
+      endpoint: "/api/copilotkit-byoc-json-render",
+      serviceAdapter: new ExperimentalEmptyAdapter(),
+      runtime,
+    });
+    return await handleRequest(req);
+  } catch (error: unknown) {
+    const e = error as { message?: string; stack?: string };
+    return NextResponse.json(
+      { error: e.message, stack: e.stack },
+      { status: 500 },
+    );
+  }
+};