fix(showcase): wire byoc-hashbrown backend agents correctly

- agno: add default agent alias + per-request runtime
- langgraph-fastapi: add default agent alias
- llamaindex: fix agent name mismatch (byoc_hashbrown → byoc-hashbrown-demo)
- mastra: create dedicated byocHashbrownAgent with hashbrown system prompt
  (was using weatherAgent which produced plain text instead of JSON)
- ms-agent-dotnet: upgrade byoc page to V2 CopilotKit import

Author: jpr5

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

@@ -6,29 +6,53 @@ import {
   ExperimentalEmptyAdapter,
   copilotRuntimeNextJSAppRouterEndpoint,
 } from "@copilotkit/runtime";
-import { HttpAgent } from "@ag-ui/client";
+import { AbstractAgent, HttpAgent } from "@ag-ui/client";
 
 const AGENT_URL = process.env.AGENT_URL || "http://localhost:8000";
 
-const byocHashbrownAgent = new HttpAgent({
-  url: `${AGENT_URL}/byoc-hashbrown/agui`,
-});
+console.log(
+  `[copilotkit-byoc-hashbrown/route] AGENT_URL: ${AGENT_URL}`,
+);
 
-const runtime = new CopilotRuntime({
-  // @ts-ignore -- see main route.ts
-  agents: { "byoc-hashbrown-demo": byocHashbrownAgent },
-});
+function createByocHashbrownAgent() {
+  return new HttpAgent({
+    url: `${AGENT_URL}/byoc-hashbrown/agui`,
+  });
+}
+
+// Register both the named agent and a default fallback so the runtime
+// can always resolve regardless of which agent name the frontend sends.
+const agents: Record<string, AbstractAgent> = {
+  "byoc-hashbrown-demo": createByocHashbrownAgent(),
+  default: createByocHashbrownAgent(),
+};
 
 export const POST = async (req: NextRequest) => {
+  const url = req.url;
+  console.log(`[copilotkit-byoc-hashbrown/route] POST ${url}`);
+
   try {
     const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
       endpoint: "/api/copilotkit-byoc-hashbrown",
       serviceAdapter: new ExperimentalEmptyAdapter(),
-      runtime,
+      runtime: new CopilotRuntime({
+        // @ts-ignore -- see main route.ts
+        agents,
+      }),
     });
-    return await handleRequest(req);
+    const response = await handleRequest(req);
+    console.log(
+      `[copilotkit-byoc-hashbrown/route] Response status: ${response.status}`,
+    );
+    return response;
   } catch (error: unknown) {
     const e = error as { message?: string; stack?: string };
+    console.error(
+      `[copilotkit-byoc-hashbrown/route] ERROR: ${e.message}`,
+    );
+    console.error(
+      `[copilotkit-byoc-hashbrown/route] Stack: ${e.stack}`,
+    );
     return NextResponse.json(
       { error: e.message, stack: e.stack },
       { status: 500 },

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

@@ -30,9 +30,18 @@ const byocHashbrownAgent = new LangGraphAgent({
   langsmithApiKey: process.env.LANGSMITH_API_KEY || "",
 });
 
+const agents: Record<string, LangGraphAgent> = {
+  "byoc-hashbrown-demo": byocHashbrownAgent,
+  // Internal components (headless-chat, example-canvas) call `useAgent()` with
+  // no args, which defaults to agentId "default". Alias to the same graph so
+  // those component hooks resolve instead of throwing "Agent 'default' not
+  // found".
+  default: byocHashbrownAgent,
+};
+
 const runtime = new CopilotRuntime({
   // @ts-ignore -- see main route.ts
-  agents: { "byoc-hashbrown-demo": byocHashbrownAgent },
+  agents,
 });
 
 export const POST = async (req: NextRequest) => {

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

@@ -20,7 +20,7 @@ const byocHashbrownAgent = new HttpAgent({
 
 const runtime = new CopilotRuntime({
   // @ts-ignore -- see main route.ts
-  agents: { byoc_hashbrown: byocHashbrownAgent as AbstractAgent },
+  agents: { "byoc-hashbrown-demo": byocHashbrownAgent as AbstractAgent },
 });
 
 export const POST = async (req: NextRequest) => {

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

@@ -5,10 +5,10 @@
 // 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.
+// Uses the dedicated `byocHashbrownAgent` whose system prompt forces the
+// model to emit the hashbrown JSON envelope `{ "ui": [...] }`. The default
+// weatherAgent produces plain text that `useJsonParser` parses as `null`,
+// leaving the dashboard empty — which is why D5 probes time out.
 
 import { NextRequest, NextResponse } from "next/server";
 import {
@@ -21,13 +21,13 @@ import { mastra } from "@/mastra";
 
 const byocHashbrownAgent = getLocalAgent({
   mastra,
-  agentId: "weatherAgent",
+  agentId: "byocHashbrownAgent",
   resourceId: "mastra-byoc-hashbrown",
 });
 
 if (!byocHashbrownAgent) {
   throw new Error(
-    "getLocalAgent returned null for weatherAgent — required for /demos/byoc-hashbrown",
+    "getLocalAgent returned null for byocHashbrownAgent — required for /demos/byoc-hashbrown",
   );
 }
 

showcase/integrations/mastra/src/mastra/agents/index.ts

@@ -312,6 +312,89 @@ Do NOT call \`read_me\`, do NOT iterate, do NOT make multiple calls. Ship on the
   }),
 });
 
+// @region[byoc-hashbrown-agent]
+/**
+ * Mastra agent backing the byoc-hashbrown demo.
+ *
+ * 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`.
+ *
+ * The system prompt forces the model to emit a single JSON envelope
+ * `{ "ui": [ { <componentName>: { "props": { ... } } }, ... ] }` matching
+ * the schema consumed by `useSalesDashboardKit()` in the frontend renderer.
+ * Without this prompt the default weatherAgent produces plain text, which
+ * `useJsonParser` parses as `null` and the dashboard renders nothing.
+ */
+export const byocHashbrownAgent = new Agent({
+  id: "byoc-hashbrown-agent",
+  name: "BYOC Hashbrown Agent",
+  model: openai("gpt-4o-mini"),
+  instructions: `You are a sales analytics assistant that replies by emitting a single JSON
+object consumed by a streaming JSON parser on the frontend.
+
+ALWAYS respond with a single JSON object of the form:
+
+{
+  "ui": [
+    { <componentName>: { "props": { ... } } },
+    ...
+  ]
+}
+
+Do NOT wrap the response in code fences. Do NOT include any preface or
+explanation outside the JSON object. The response MUST be valid JSON.
+
+Available components and their prop schemas:
+
+- "metric": { "props": { "label": string, "value": string } }
+    A KPI card. \`value\` is a pre-formatted string like "$1.2M" or "248".
+
+- "pieChart": { "props": { "title": string, "data": string } }
+    A donut chart. \`data\` is a JSON-encoded STRING (embedded JSON) of an
+    array of {label, value} objects with at least 3 segments, e.g.
+    "data": "[{\\"label\\":\\"Enterprise\\",\\"value\\":600000}]".
+
+- "barChart": { "props": { "title": string, "data": string } }
+    A vertical bar chart. \`data\` is a JSON-encoded STRING of an array of
+    {label, value} objects with at least 3 bars, typically time-ordered.
+
+- "dealCard": { "props": { "title": string, "stage": string, "value": number } }
+    A single sales deal. \`stage\` MUST be one of: "prospect", "qualified",
+    "proposal", "negotiation", "closed-won", "closed-lost". \`value\` is a
+    raw number (no currency symbol or comma).
+
+- "Markdown": { "props": { "children": string } }
+    Short explanatory text. Use for section headings and brief summaries.
+    Standard markdown is supported in \`children\`.
+
+Rules:
+- Always produce plausible sample data when the user asks for a dashboard or
+  chart — do not refuse for lack of data.
+- Prefer 3-6 rows of data in charts; keep labels short.
+- Use "Markdown" for short headings or linking sentences between visual
+  components. Do not emit long prose.
+- Do not emit components that are not listed above.
+- \`data\` props on charts MUST be a JSON STRING — escape inner quotes.
+
+Example response (sales dashboard):
+{"ui":[{"Markdown":{"props":{"children":"## Q4 Sales Summary"}}},{"metric":{"props":{"label":"Total Revenue","value":"$1.2M"}}},{"metric":{"props":{"label":"New Customers","value":"248"}}},{"pieChart":{"props":{"title":"Revenue by Segment","data":"[{\\"label\\":\\"Enterprise\\",\\"value\\":600000},{\\"label\\":\\"SMB\\",\\"value\\":400000},{\\"label\\":\\"Startup\\",\\"value\\":200000}]"}}},{"barChart":{"props":{"title":"Monthly Revenue","data":"[{\\"label\\":\\"Oct\\",\\"value\\":350000},{\\"label\\":\\"Nov\\",\\"value\\":400000},{\\"label\\":\\"Dec\\",\\"value\\":450000}]"}}}]}`,
+  memory: new Memory({
+    storage: new LibSQLStore({
+      id: "byoc-hashbrown-agent-memory",
+      url: WORKING_MEMORY_DB_URL,
+    }),
+    options: {
+      workingMemory: {
+        enabled: true,
+        schema: AgentState,
+      },
+    },
+  }),
+});
+// @endregion[byoc-hashbrown-agent]
+
 /**
  * Vision-capable Mastra agent backing the Multimodal Attachments demo.
  *

showcase/integrations/mastra/src/mastra/index.ts

@@ -8,6 +8,7 @@ import {
   interruptAgent,
   multimodalAgent,
   mcpAppsAgent,
+  byocHashbrownAgent,
 } from "./agents";
 import { ConsoleLogger, LogLevel } from "@mastra/core/logger";
 
@@ -22,6 +23,7 @@ export const mastra = new Mastra({
     interruptAgent,
     multimodalAgent,
     mcpAppsAgent,
+    byocHashbrownAgent,
   },
   storage: new LibSQLStore({
     id: "mastra-storage",

showcase/integrations/ms-agent-dotnet/src/app/demos/byoc-hashbrown/page.tsx

@@ -13,11 +13,11 @@
 
 import React from "react";
 import {
+  CopilotKit,
   CopilotChat,
   CopilotChatAssistantMessage,
   useConfigureSuggestions,
 } from "@copilotkit/react-core/v2";
-import { CopilotKit } from "@copilotkit/react-core";
 import {
   HashBrownDashboard,
   useHashBrownMessageRenderer,