modelcontextprotocol · iamfiscus · Jan 8, 2026 · Jan 9, 2026
diff --git a/examples/d3-graph-server/README.md b/examples/d3-graph-server/README.md
@@ -0,0 +1,123 @@
+# Example: D3 Graph Server
+
+Interactive force-directed graph visualization using D3.js. Explore entity relationships like package dependencies, org charts, or knowledge graphs with zoom, pan, and node interaction.
+
+## Features
+
+- **Force-directed layout**: Physics-based graph simulation with D3.js
+- **Multiple graph datasets**: Package dependencies, org chart, and AI/ML knowledge graph
+- **Interactive nodes**: Drag to reposition, click to recenter view
+- **Zoom and pan**: Scroll to zoom, drag background to pan
+- **Tooltips**: Hover over nodes to see descriptions
+- **Node filtering**: Center on any node with configurable depth
+
+## Running
+
+1. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+2. Build and start the server:
+
+   ```bash
+   npm run start:http  # for Streamable HTTP transport
+   # OR
+   npm run start:stdio  # for stdio transport
+   ```
+
+3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example or another MCP Apps-compatible host.
+
+### Tool Input Examples
+
+**Default (package dependencies graph):**
+
+```json
+{}
+```
+
+**Package dependencies - centered on React:**
+
+```json
+{
+  "graphId": "dependencies",
+  "centerNode": "react",
+  "depth": 2
+}
+```
+
+**Package dependencies - centered on D3:**
+
+```json
+{
+  "graphId": "dependencies",
+  "centerNode": "d3",
+  "depth": 3
+}
+```
+
+**Organization chart:**
+
+```json
+{
+  "graphId": "org-chart"
+}
+```
+
+**Org chart - centered on VP of Engineering:**
+
+```json
+{
+  "graphId": "org-chart",
+  "centerNode": "vp-eng",
+  "depth": 2
+}
+```
+
+**AI/ML knowledge graph:**
+
+```json
+{
+  "graphId": "knowledge"
+}
+```
+
+**Knowledge graph - centered on transformers:**
+
+```json
+{
+  "graphId": "knowledge",
+  "centerNode": "transformers",
+  "depth": 2
+}
+```
+
+**Knowledge graph - centered on PyTorch:**
+
+```json
+{
+  "graphId": "knowledge",
+  "centerNode": "pytorch",
+  "depth": 3
+}
+```
+
+## Architecture
+
+### Server (`server.ts`)
+
+MCP server with sample graph datasets representing different relationship types.
+
+Exposes one tool:
+
+- `get-graph-data` - Returns nodes and links for force-directed visualization
+
+### App (`src/mcp-app.ts`)
+
+Vanilla TypeScript app using D3.js that:
+
+- Receives graph data via the MCP App SDK
+- Renders an interactive force-directed graph with `d3.forceSimulation()`
+- Supports zoom/pan via `d3.zoom()`
+- Enables node dragging and click-to-recenter
diff --git a/examples/d3-graph-server/mcp-app.html b/examples/d3-graph-server/mcp-app.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
+  <title>D3 Graph Explorer</title>
+</head>
+<body>
+  <main id="main">
+    <div id="controls">
+      <select id="graph-select">
+        <option value="dependencies">Package Dependencies</option>
+        <option value="org-chart">Organization Chart</option>
+        <option value="knowledge">Knowledge Graph</option>
+      </select>
+      <button id="reset-btn">Reset View</button>
+    </div>
+    <div id="graph-container">
+      <svg id="graph"></svg>
+    </div>
+    <div id="tooltip"></div>
+  </main>
+  <script type="module" src="/src/mcp-app.ts"></script>
+</body>
+</html>
diff --git a/examples/d3-graph-server/package.json 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"
+  }
+}