Use content instead of structuredContent in examples

Not all MCP clients support structuredContent in MCP tool results, so
examples now return data as JSON in content and parse it client-side.

Pattern used:
- Server: content: [{ type: "text", text: JSON.stringify(data) }]
- Client: JSON.parse(result.content!.filter(...).map(...).join(""))

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: jonathanhefner

examples/basic-server-react/server.ts

@@ -5,7 +5,6 @@ import cors from "cors";
 import express, { type Request, type Response } from "express";
 import fs from "node:fs/promises";
 import path from "node:path";
-import { z } from "zod";
 import { RESOURCE_URI_META_KEY } from "../../dist/src/app";
 
 const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 3001;
@@ -30,14 +29,12 @@ const server = new McpServer({
       title: "Get Time",
       description: "Returns the current server time as an ISO 8601 string.",
       inputSchema: {},
-      outputSchema: { time: z.string() },
       _meta: { [RESOURCE_URI_META_KEY]: resourceUri },
     },
     async (): Promise<CallToolResult> => {
       const time = new Date().toISOString();
       return {
-        content: [{ type: "text", text: time }],
-        structuredContent: { time },
+        content: [{ type: "text", text: JSON.stringify({ time }) }],
       };
     },
   );

examples/basic-server-react/src/mcp-app.tsx

@@ -20,8 +20,12 @@ const log = {
 
 
 function extractTime(callToolResult: CallToolResult): string {
-  const { time } = (callToolResult.structuredContent as { time?: string }) ?? {};
-  return time ?? "[ERROR]";
+  const text = callToolResult.content!
+    .filter((c): c is { type: "text"; text: string } => c.type === "text")
+    .map((c) => c.text)
+    .join("");
+  const { time } = JSON.parse(text) as { time: string };
+  return time;
 }
 
 

examples/basic-server-vanillajs/server.ts

@@ -5,7 +5,6 @@ import cors from "cors";
 import express, { type Request, type Response } from "express";
 import fs from "node:fs/promises";
 import path from "node:path";
-import { z } from "zod";
 import { RESOURCE_URI_META_KEY } from "../../dist/src/app";
 
 const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 3001;
@@ -30,14 +29,12 @@ const server = new McpServer({
       title: "Get Time",
       description: "Returns the current server time as an ISO 8601 string.",
       inputSchema: {},
-      outputSchema: { time: z.string() },
       _meta: { [RESOURCE_URI_META_KEY]: resourceUri },
     },
     async (): Promise<CallToolResult> => {
       const time = new Date().toISOString();
       return {
-        content: [{ type: "text", text: time }],
-        structuredContent: { time },
+        content: [{ type: "text", text: JSON.stringify({ time }) }],
       };
     },
   );

examples/basic-server-vanillajs/src/mcp-app.ts

@@ -15,8 +15,12 @@ const log = {
 
 
 function extractTime(result: CallToolResult): string {
-  const { time } = (result.structuredContent as { time?: string }) ?? {};
-  return time ?? "[ERROR]";
+  const text = result.content!
+    .filter((c): c is { type: "text"; text: string } => c.type === "text")
+    .map((c) => c.text)
+    .join("");
+  const { time } = JSON.parse(text) as { time: string };
+  return time;
 }
 
 

examples/budget-allocator-server/server.ts

@@ -221,30 +221,6 @@ function generateHistory(
   return months;
 }
 
-// ---------------------------------------------------------------------------
-// Response Formatting
-// ---------------------------------------------------------------------------
-
-function formatBudgetSummary(data: BudgetDataResponse): string {
-  const lines: string[] = [
-    "Budget Allocator Configuration",
-    "==============================",
-    "",
-    `Default Budget: ${data.config.currencySymbol}${data.config.defaultBudget.toLocaleString()}`,
-    `Available Presets: ${data.config.presetBudgets.map((b) => `${data.config.currencySymbol}${b.toLocaleString()}`).join(", ")}`,
-    "",
-    "Categories:",
-    ...data.config.categories.map(
-      (c) => `  - ${c.name}: ${c.defaultPercent}% default`,
-    ),
-    "",
-    `Historical Data: ${data.analytics.history.length} months`,
-    `Benchmark Stages: ${data.analytics.stages.join(", ")}`,
-    `Default Stage: ${data.analytics.defaultStage}`,
-  ];
-  return lines.join("\n");
-}
-
 // ---------------------------------------------------------------------------
 // MCP Server Setup
 // ---------------------------------------------------------------------------
@@ -263,7 +239,6 @@ server.registerTool(
     description:
       "Returns budget configuration with 24 months of historical allocations and industry benchmarks by company stage",
     inputSchema: {},
-    outputSchema: BudgetDataResponseSchema.shape,
     _meta: { [RESOURCE_URI_META_KEY]: resourceUri },
   },
   async (): Promise<CallToolResult> => {
@@ -292,10 +267,9 @@ server.registerTool(
       content: [
         {
           type: "text",
-          text: formatBudgetSummary(response),
+          text: JSON.stringify(response),
         },
       ],
-      structuredContent: response,
     };
   },
 );

examples/budget-allocator-server/src/mcp-app.ts

@@ -606,7 +606,13 @@ const app = new App({ name: "Budget Allocator", version: "1.0.0" });
 
 app.ontoolresult = (result) => {
   log.info("Received tool result:", result);
-  const data = result.structuredContent as unknown as BudgetDataResponse;
+  const text = result
+    .content!.filter(
+      (c): c is { type: "text"; text: string } => c.type === "text",
+    )
+    .map((c) => c.text)
+    .join("");
+  const data = JSON.parse(text) as BudgetDataResponse;
   if (data?.config && data?.analytics) {
     initializeUI(data.config, data.analytics);
   }

examples/cohort-heatmap-server/server.ts

@@ -149,17 +149,6 @@ function generateCohortData(
   };
 }
 
-function formatCohortSummary(data: CohortData): string {
-  const avgRetention = data.cohorts
-    .flatMap((c) => c.cells)
-    .filter((cell) => cell.periodIndex > 0)
-    .reduce((sum, cell, _, arr) => sum + cell.retention / arr.length, 0);
-
-  return `Cohort Analysis: ${data.cohorts.length} cohorts, ${data.periods.length} periods
-Average retention: ${(avgRetention * 100).toFixed(1)}%
-Metric: ${data.metric}, Period: ${data.periodType}`;
-}
-
 const server = new McpServer({
   name: "Cohort Heatmap Server",
   version: "1.0.0",
@@ -176,7 +165,6 @@ const server = new McpServer({
       description:
         "Returns cohort retention heatmap data showing customer retention over time by signup month",
       inputSchema: GetCohortDataInputSchema.shape,
-      outputSchema: CohortDataSchema.shape,
       _meta: { [RESOURCE_URI_META_KEY]: resourceUri },
     },
     async ({ metric, periodType, cohortCount, maxPeriods }) => {
@@ -188,8 +176,7 @@ const server = new McpServer({
       );
 
       return {
-        content: [{ type: "text", text: formatCohortSummary(data) }],
-        structuredContent: data,
+        content: [{ type: "text", text: JSON.stringify(data) }],
       };
     },
   );

examples/cohort-heatmap-server/src/mcp-app.tsx

@@ -103,7 +103,13 @@ function CohortHeatmapInner({ app }: { app: App }) {
           maxPeriods: 12,
         },
       });
-      setData(result.structuredContent as unknown as CohortData);
+      const text = result
+        .content!.filter(
+          (c): c is { type: "text"; text: string } => c.type === "text",
+        )
+        .map((c) => c.text)
+        .join("");
+      setData(JSON.parse(text) as CohortData);
     } catch (e) {
       console.error("Failed to fetch cohort data:", e);
     } finally {

examples/customer-segmentation-server/server.ts

@@ -27,29 +27,6 @@ const GetCustomerDataInputSchema = z.object({
     .describe("Filter by segment (default: All)"),
 });
 
-const CustomerSchema = z.object({
-  id: z.string(),
-  name: z.string(),
-  segment: z.string(),
-  annualRevenue: z.number(),
-  employeeCount: z.number(),
-  accountAge: z.number(),
-  engagementScore: z.number(),
-  supportTickets: z.number(),
-  nps: z.number(),
-});
-
-const SegmentSummarySchema = z.object({
-  name: z.string(),
-  count: z.number(),
-  color: z.string(),
-});
-
-const GetCustomerDataOutputSchema = z.object({
-  customers: z.array(CustomerSchema),
-  segments: z.array(SegmentSummarySchema),
-});
-
 // Cache generated data for session consistency
 let cachedCustomers: Customer[] | null = null;
 let cachedSegments: SegmentSummary[] | null = null;
@@ -92,15 +69,13 @@ const server = new McpServer({
       description:
         "Returns customer data with segment information for visualization. Optionally filter by segment.",
       inputSchema: GetCustomerDataInputSchema.shape,
-      outputSchema: GetCustomerDataOutputSchema.shape,
       _meta: { [RESOURCE_URI_META_KEY]: resourceUri },
     },
     async ({ segment }): Promise<CallToolResult> => {
       const data = getCustomerData(segment);
 
       return {
-        content: [{ type: "text", text: JSON.stringify(data, null, 2) }],
-        structuredContent: data,
+        content: [{ type: "text", text: JSON.stringify(data) }],
       };
     },
   );

examples/customer-segmentation-server/src/mcp-app.ts

@@ -336,7 +336,13 @@ async function fetchData(): Promise<void> {
       arguments: {},
     });
 
-    const data = result.structuredContent as unknown as {
+    const text = result
+      .content!.filter(
+        (c): c is { type: "text"; text: string } => c.type === "text",
+      )
+      .map((c) => c.text)
+      .join("");
+    const data = JSON.parse(text) as {
       customers: Customer[];
       segments: SegmentSummary[];
     };