+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/d3-graph-server/package.json b/examples/d3-graph-server/package.json
new file mode 100644
index 00000000..5dddec32
--- /dev/null
+++ b/examples/d3-graph-server/package.json
@@ -0,0 +1,32 @@
+{
+ "name": "d3-graph-server",
+ "version": "1.0.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build",
+ "watch": "cross-env INPUT=mcp-app.html vite build --watch",
+ "serve": "bun server.ts",
+ "start": "cross-env NODE_ENV=development npm run build && npm run serve",
+ "dev": "cross-env NODE_ENV=development concurrently 'npm run watch' 'npm run serve'"
+ },
+ "dependencies": {
+ "@modelcontextprotocol/ext-apps": "../..",
+ "@modelcontextprotocol/sdk": "^1.24.0",
+ "d3": "^7.9.0",
+ "zod": "^4.1.13"
+ },
+ "devDependencies": {
+ "@types/cors": "^2.8.19",
+ "@types/d3": "^7.4.3",
+ "@types/express": "^5.0.0",
+ "@types/node": "^22.0.0",
+ "concurrently": "^9.2.1",
+ "cors": "^2.8.5",
+ "cross-env": "^7.0.3",
+ "express": "^5.1.0",
+ "typescript": "^5.9.3",
+ "vite": "^6.0.0",
+ "vite-plugin-singlefile": "^2.3.0"
+ }
+}
diff --git a/examples/d3-graph-server/server.ts b/examples/d3-graph-server/server.ts
new file mode 100644
index 00000000..7fd8853b
--- /dev/null
+++ b/examples/d3-graph-server/server.ts
@@ -0,0 +1,506 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import type {
+ CallToolResult,
+ ReadResourceResult,
+} from "@modelcontextprotocol/sdk/types.js";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { z } from "zod";
+import {
+ RESOURCE_MIME_TYPE,
+ RESOURCE_URI_META_KEY,
+ registerAppResource,
+ registerAppTool,
+} from "@modelcontextprotocol/ext-apps/server";
+import { startServer } from "./src/server-utils.js";
+
+const DIST_DIR = path.join(import.meta.dirname, "dist");
+
+// ============================================================================
+// Schemas
+// ============================================================================
+
+const GraphNodeSchema = z.object({
+ id: z.string(),
+ group: z.string(),
+ size: z.number(),
+ description: z.string().optional(),
+});
+
+const GraphLinkSchema = z.object({
+ source: z.string(),
+ target: z.string(),
+ strength: z.number().min(0).max(1),
+});
+
+const GraphDataSchema = z.object({
+ nodes: z.array(GraphNodeSchema),
+ links: z.array(GraphLinkSchema),
+ metadata: z.object({
+ title: z.string(),
+ description: z.string(),
+ }),
+});
+
+const GetGraphDataInputSchema = z.object({
+ graphId: z
+ .enum(["dependencies", "org-chart", "knowledge"])
+ .optional()
+ .describe("Which graph dataset to load"),
+ centerNode: z.string().optional().describe("Node ID to center the view on"),
+ depth: z
+ .number()
+ .min(1)
+ .max(5)
+ .optional()
+ .describe("Depth of nodes to include from center (1-5)"),
+});
+
+// Types
+type GraphData = z.infer