feat: use structuredContent in all example servers

All servers now return structuredContent alongside JSON text content.
All mcp-apps now read structuredContent directly (no JSON.parse fallback).

Updated servers:
- basic-server-vanillajs
- budget-allocator-server
- cohort-heatmap-server
- customer-segmentation-server
- integration-server
- scenario-modeler-server
- system-monitor-server
- threejs-server
- video-resource-server
- wiki-explorer-server

Author: ochafik

examples/basic-server-vanillajs/server.ts

@@ -32,8 +32,10 @@ export function createServer(): McpServer {
     },
     async (): Promise<CallToolResult> => {
       const time = new Date().toISOString();
+      const data = { time };
       return {
-        content: [{ type: "text", text: JSON.stringify({ time }) }],
+        content: [{ type: "text", text: JSON.stringify(data) }],
+        structuredContent: data,
       };
     },
   );

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

@@ -15,8 +15,8 @@ const log = {
 
 
 function extractTime(result: CallToolResult): string {
-  const { text } = result.content?.find((c) => c.type === "text")!;
-  return text;
+  const data = result.structuredContent as { time: string };
+  return data.time;
 }
 
 

examples/budget-allocator-server/server.ts

@@ -279,6 +279,7 @@ export function createServer(): McpServer {
             text: JSON.stringify(response),
           },
         ],
+        structuredContent: response,
       };
     },
   );

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

@@ -607,13 +607,7 @@ const app = new App({ name: "Budget Allocator", version: "1.0.0" });
 
 app.ontoolresult = (result) => {
   log.info("Received tool result:", result);
-  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;
+  const data = result.structuredContent as BudgetDataResponse;
   if (data?.config && data?.analytics) {
     initializeUI(data.config, data.analytics);
   }

examples/cohort-heatmap-server/server.ts

@@ -181,6 +181,7 @@ export function createServer(): McpServer {
 
       return {
         content: [{ type: "text", text: JSON.stringify(data) }],
+        structuredContent: data,
       };
     },
   );

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

@@ -123,13 +123,7 @@ function CohortHeatmapInner({
           maxPeriods: 12,
         },
       });
-      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);
+      setData(result.structuredContent as CohortData);
     } catch (e) {
       console.error("Failed to fetch cohort data:", e);
     } finally {

examples/customer-segmentation-server/server.ts

@@ -85,6 +85,7 @@ export function createServer(): McpServer {
 
         return {
           content: [{ type: "text", text: JSON.stringify(data) }],
+          structuredContent: data,
         };
       },
     );

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

@@ -369,41 +369,31 @@ function resetDetailPanel(): void {
 // Create app instance
 const app = new App({ name: "Customer Segmentation", version: "1.0.0" });
 
-// Fetch data from server
-async function fetchData(): Promise<void> {
-  try {
-    const result = await app.callServerTool({
-      name: "get-customer-data",
-      arguments: {},
-    });
-
-    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[];
-    };
+// Handle tool results via structuredContent
+app.ontoolresult = (result) => {
+  const data = result.structuredContent as {
+    customers: Customer[];
+    segments: SegmentSummary[];
+  };
 
-    state.customers = data.customers;
-    state.segments = data.segments;
+  if (!data?.customers || !data?.segments) {
+    log.error("Invalid data received:", result);
+    return;
+  }
 
-    // Initialize or update chart
-    if (!state.chart) {
-      state.chart = initChart();
-    } else {
-      updateChart();
-    }
+  state.customers = data.customers;
+  state.segments = data.segments;
 
-    renderLegend();
-    log.info(`Loaded ${data.customers.length} customers`);
-  } catch (error) {
-    log.error("Failed to fetch data:", error);
+  // Initialize or update chart
+  if (!state.chart) {
+    state.chart = initChart();
+  } else {
+    updateChart();
   }
-}
+
+  renderLegend();
+  log.info(`Loaded ${data.customers.length} customers`);
+};
 
 // Event handlers
 xAxisSelect.addEventListener("change", () => {
@@ -482,6 +472,3 @@ app.connect().then(() => {
     handleHostContextChanged(ctx);
   }
 });
-
-// Fetch data after connection
-setTimeout(fetchData, 100);

examples/integration-server/server.ts

@@ -36,13 +36,15 @@ export function createServer(): McpServer {
       _meta: { [RESOURCE_URI_META_KEY]: RESOURCE_URI },
     },
     async (): Promise<CallToolResult> => {
+      const time = new Date().toISOString();
       return {
         content: [
           {
             type: "text",
-            text: JSON.stringify({ time: new Date().toISOString() }),
+            text: JSON.stringify({ time }),
           },
         ],
+        structuredContent: { time },
       };
     },
   );

examples/integration-server/src/mcp-app.tsx

@@ -17,13 +17,7 @@ const log = {
 };
 
 function extractTime(callToolResult: CallToolResult): string {
-  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 };
+  const { time } = callToolResult.structuredContent as { time: string };
   return time;
 }