feat: port mcp-apps, tool-rendering-reasoning-chain, gen-ui-tool-based, hitl-in-chat-booking, hitl to mastra integration

Picks up the remaining demos from D13's port. Adds:
- mcp-apps: dedicated route with mcpApps.servers config (Excalidraw), no-tools Mastra agent
- tool-rendering-reasoning-chain: per-tool renderers + custom reasoningMessage slot
- gen-ui-tool-based: manifest entry for the existing useFrontendTool haiku page
- hitl-in-chat-booking: manifest alias pointing at the existing /demos/hitl-in-chat route
- hitl: manifest entry for the existing step-selection page (useLangGraphInterrupt branch is a no-op on Mastra; useHumanInTheLoop branch works)

BLOCKED on Mastra adapter capabilities:
- gen-ui-interrupt: useInterrupt requires AG-UI INTERRUPT events the Mastra adapter does not emit
- interrupt-headless: same root cause

Author: AlemTuzlak

showcase/integrations/mastra/manifest.yaml

@@ -58,6 +58,11 @@ features:
   - open-gen-ui
   - open-gen-ui-advanced
   - voice
+  - gen-ui-tool-based
+  - hitl
+  - hitl-in-chat-booking
+  - mcp-apps
+  - tool-rendering-reasoning-chain
 demos:
   - id: cli-start
     name: CLI Start Command
@@ -437,3 +442,59 @@ demos:
       - 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/src/app/api/copilotkit-mcp-apps/route.ts

@@ -0,0 +1,69 @@
+// CopilotKit runtime for the MCP Apps cell.
+//
+// The runtime's `mcpApps` config auto-applies the MCP Apps middleware to the
+// agent: when the agent calls a tool backed by an MCP UI resource, the
+// middleware fetches the resource and emits the activity event that the
+// built-in `MCPAppsActivityRenderer` (registered by CopilotKit internally)
+// renders in the chat as a sandboxed iframe.
+
+import { NextRequest, NextResponse } from "next/server";
+import {
+  CopilotRuntime,
+  ExperimentalEmptyAdapter,
+  copilotRuntimeNextJSAppRouterEndpoint,
+} from "@copilotkit/runtime";
+import { getLocalAgent } from "@ag-ui/mastra";
+import { mastra } from "@/mastra";
+
+const mcpAppsAgent = getLocalAgent({
+  mastra,
+  agentId: "mcpAppsAgent",
+  resourceId: "mastra-mcp-apps",
+});
+if (!mcpAppsAgent) {
+  throw new Error("getLocalAgent returned null for mcpAppsAgent");
+}
+
+// @region[runtime-mcpapps-config]
+// The `mcpApps.servers` config is all you need server-side. The runtime
+// auto-applies the MCP Apps middleware to every registered agent: on each
+// MCP tool call it fetches the associated UI resource and emits an
+// `activity` event that the built-in `MCPAppsActivityRenderer` renders
+// inline in the chat.
+const runtime = new CopilotRuntime({
+  // @ts-ignore -- see main route.ts
+  agents: {
+    "mcp-apps": mcpAppsAgent,
+    default: mcpAppsAgent,
+  },
+  mcpApps: {
+    servers: [
+      {
+        type: "http",
+        url: process.env.MCP_SERVER_URL || "https://mcp.excalidraw.com",
+        // Always pin a stable `serverId`. Without it CopilotKit hashes the
+        // URL, and a URL change silently breaks restoration of persisted
+        // MCP Apps in prior conversation threads.
+        serverId: "excalidraw",
+      },
+    ],
+  },
+});
+// @endregion[runtime-mcpapps-config]
+
+export const POST = async (req: NextRequest) => {
+  try {
+    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
+      endpoint: "/api/copilotkit-mcp-apps",
+      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/route.ts

@@ -71,6 +71,7 @@ export const demoAgentNames = [
   "declarative-gen-ui",
   "a2ui-fixed-schema",
   "headless-complete",
+  "tool-rendering-reasoning-chain",
 ] as const;
 
 // Per-demo override map: any demo alias listed here resolves to a dedicated
@@ -99,7 +100,8 @@ export type LocalMastraAgentName =
   | "headlessCompleteAgent"
   | "sharedStateReadWriteAgent"
   | "subagentsSupervisorAgent"
-  | "multimodalAgent";
+  | "multimodalAgent"
+  | "mcpAppsAgent";
 
 export type BuiltAgents = Record<
   DemoAgentName | LocalMastraAgentName,
@@ -157,6 +159,11 @@ export function buildAgents(
       "multimodalAgent missing from Mastra config — required for /demos/multimodal",
     );
   }
+  if (!baseLocalAgents.mcpAppsAgent) {
+    throw new Error(
+      "mcpAppsAgent missing from Mastra config — required for /demos/mcp-apps",
+    );
+  }
   const headlessCompleteAgentInstance = getLocalAgent({
     mastra: mastraInstance,
     agentId: "headlessCompleteAgent",
@@ -191,12 +198,21 @@ export function buildAgents(
   if (!multimodalAgentInstance) {
     throw new Error("getLocalAgent returned null for multimodalAgent");
   }
+  const mcpAppsAgentInstance = getLocalAgent({
+    mastra: mastraInstance,
+    agentId: "mcpAppsAgent",
+    resourceId: "mastra-mcpAppsAgent",
+  });
+  if (!mcpAppsAgentInstance) {
+    throw new Error("getLocalAgent returned null for mcpAppsAgent");
+  }
   const localAgents = {
     weatherAgent: baseLocalAgents.weatherAgent,
     headlessCompleteAgent: headlessCompleteAgentInstance,
     sharedStateReadWriteAgent: sharedStateRWAgentInstance,
     subagentsSupervisorAgent: subagentsSupervisorAgentInstance,
     multimodalAgent: multimodalAgentInstance,
+    mcpAppsAgent: mcpAppsAgentInstance,
   };
 
   // Guard against silent shadowing: if Mastra ever registers a local agent
@@ -241,6 +257,7 @@ export function buildAgents(
     "mastra-subagentsSupervisorAgent",
   );
   resourceIdByAgent.set("multimodalAgent", "mastra-multimodalAgent");
+  resourceIdByAgent.set("mcpAppsAgent", "mastra-mcpAppsAgent");
 
   const demoAliases: Record<
     string,

showcase/integrations/mastra/src/app/demos/mcp-apps/README.md

@@ -0,0 +1,20 @@
+# MCP Apps
+
+## What This Demo Shows
+
+MCP server-driven UI rendered inline via the runtime's `mcpApps` config and the built-in activity renderer.
+
+## How to Interact
+
+Try asking:
+
+- "Use Excalidraw to draw a simple flowchart with three steps."
+- "Open Excalidraw and sketch a system diagram with a client, server, and database."
+
+The Mastra agent calls a remote MCP tool (Excalidraw's `create_view`); the runtime fetches the UI resource and emits an activity event, which the built-in `MCPAppsActivityRenderer` renders as a sandboxed iframe inline in the chat.
+
+## Technical Details
+
+- `CopilotRuntime({ mcpApps: { servers: [...] } })` auto-applies MCP Apps middleware to every registered agent
+- The agent itself defines no tools — MCP server tools are injected at request time
+- The frontend renders nothing custom: `<CopilotChat />` plus the auto-registered `MCPAppsActivityRenderer` does the work

showcase/integrations/mastra/src/app/demos/mcp-apps/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+/**
+ * MCP Apps demo (Mastra).
+ *
+ * MCP Apps are MCP servers that expose tools with associated UI resources.
+ * The CopilotKit runtime is wired with `mcpApps: { servers: [...] }`
+ * (see `src/app/api/copilotkit-mcp-apps/route.ts`), which auto-applies the
+ * MCP Apps middleware. When the agent calls an MCP tool, the middleware
+ * fetches the associated UI resource and emits an activity event; the
+ * built-in `MCPAppsActivityRenderer` registered by `CopilotKitProvider`
+ * renders the sandboxed iframe inline in the chat — no app-side renderer
+ * registration required.
+ *
+ * This cell points at the public Excalidraw MCP app
+ * (https://mcp.excalidraw.com).
+ */
+
+import React from "react";
+import {
+  CopilotKit,
+  CopilotChat,
+  useConfigureSuggestions,
+} from "@copilotkit/react-core/v2";
+
+export default function MCPAppsDemo() {
+  // @region[no-frontend-renderer-needed]
+  // No `renderActivityMessages`, no `useRenderActivityMessage` — the
+  // CopilotKitProvider auto-registers the built-in `MCPAppsActivityRenderer`
+  // for the "mcp-apps" activity type. A plain <CopilotChat /> is enough.
+  return (
+    <CopilotKit runtimeUrl="/api/copilotkit-mcp-apps" agent="mcp-apps">
+      <div className="flex justify-center items-center h-screen w-full">
+        <div className="h-full w-full max-w-4xl">
+          <Chat />
+        </div>
+      </div>
+    </CopilotKit>
+  );
+  // @endregion[no-frontend-renderer-needed]
+}
+
+function Chat() {
+  useConfigureSuggestions({
+    suggestions: [
+      {
+        title: "Draw a flowchart",
+        message: "Use Excalidraw to draw a simple flowchart with three steps.",
+      },
+      {
+        title: "Sketch a system diagram",
+        message:
+          "Open Excalidraw and sketch a system diagram with a client, server, and database.",
+      },
+    ],
+    available: "always",
+  });
+
+  return <CopilotChat agentId="mcp-apps" className="h-full rounded-2xl" />;
+}

showcase/integrations/mastra/src/app/demos/tool-rendering-reasoning-chain/README.md

@@ -0,0 +1,22 @@
+# Tool Rendering + Reasoning Chain
+
+## What This Demo Shows
+
+Sequential tool calls rendered with per-tool components plus a reasoning chain rendered inline via a custom `reasoningMessage` slot.
+
+## How to Interact
+
+Try asking:
+
+- "What's the weather in Tokyo?"
+- "Find flights from SFO to JFK."
+- "Roll a 20-sided die for me."
+
+The agent's reasoning tokens stream into a `ReasoningBlock` while tool calls render as `WeatherCard`, `FlightListCard`, or the catch-all renderer.
+
+## Technical Details
+
+- `useRenderTool({ name: "get_weather" })` and `useRenderTool({ name: "search_flights" })` register named per-tool renderers
+- `useDefaultRenderTool` registers the catch-all that handles every other tool
+- The reasoning chain comes from AG-UI `REASONING_MESSAGE_*` events emitted by the Mastra agent when the underlying model produces reasoning tokens
+- The `messageView.reasoningMessage` slot on `<CopilotChat />` overrides the default reasoning UI