feat: use structuredContent in remaining example servers

Updated servers to return structuredContent alongside JSON text content:
- basic-server-vanillajs
- cohort-heatmap-server
- customer-segmentation-server
- system-monitor-server
- video-resource-server
- wiki-explorer-server

Each mcp-app now prefers structuredContent when available, with
fallback to JSON.parse for backwards compatibility.

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,20 @@ const log = {
 
 
 function extractTime(result: CallToolResult): string {
-  const { text } = result.content?.find((c) => c.type === "text")!;
-  return text;
+  // Prefer structuredContent if available, with fallback to parsing text content
+  if (result.structuredContent && typeof result.structuredContent === "object") {
+    const data = result.structuredContent as { time?: string };
+    if (data.time) {
+      return data.time;
+    }
+  }
+  // Fallback: parse JSON from text content
+  const textContent = result.content?.find((c) => c.type === "text");
+  if (textContent && "text" in textContent) {
+    const parsed = JSON.parse(textContent.text) as { time?: string };
+    return parsed.time ?? textContent.text;
+  }
+  return "[no time data]";
 }
 
 

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,17 @@ 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);
+      if (result.structuredContent) {
+        setData(result.structuredContent as CohortData);
+      } else {
+        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

@@ -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

@@ -377,13 +377,16 @@ async function fetchData(): Promise<void> {
       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 {
+    // Use structuredContent if available, otherwise fall back to parsing JSON from text content
+    const data = (result.structuredContent ??
+      JSON.parse(
+        result
+          .content!.filter(
+            (c): c is { type: "text"; text: string } => c.type === "text",
+          )
+          .map((c) => c.text)
+          .join(""),
+      )) as {
       customers: Customer[];
       segments: SegmentSummary[];
     };

examples/system-monitor-server/server.ts

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

examples/system-monitor-server/src/mcp-app.ts

@@ -271,7 +271,7 @@ async function fetchStats(): Promise<void> {
       )
       .map((c) => c.text)
       .join("");
-    const stats = JSON.parse(text) as SystemStats;
+    const stats = (result.structuredContent ?? JSON.parse(text)) as SystemStats;
 
     // Initialize chart on first data if needed
     if (!state.chart && stats.cpu.count > 0) {

examples/video-resource-server/server.ts

@@ -133,16 +133,13 @@ ${Object.entries(VIDEO_LIBRARY)
     },
     async ({ videoId }): Promise<CallToolResult> => {
       const video = VIDEO_LIBRARY[videoId];
+      const data = {
+        videoUri: `videos://${videoId}`,
+        description: video.description,
+      };
       return {
-        content: [
-          {
-            type: "text",
-            text: JSON.stringify({
-              videoUri: `videos://${videoId}`,
-              description: video.description,
-            }),
-          },
-        ],
+        content: [{ type: "text", text: JSON.stringify(data) }],
+        structuredContent: data,
       };
     },
   );

examples/video-resource-server/src/mcp-app.ts

@@ -28,6 +28,15 @@ const videoInfoEl = document.getElementById("video-info")!;
 function parseToolResult(
   result: CallToolResult,
 ): { videoUri: string; description: string } | null {
+  // Use structuredContent if available
+  if (result.structuredContent) {
+    return result.structuredContent as {
+      videoUri: string;
+      description: string;
+    };
+  }
+
+  // Fall back to parsing JSON from text content
   const text = result.content
     ?.filter((c): c is { type: "text"; text: string } => c.type === "text")
     .map((c) => c.text)