docs: add MCP client configuration to example READMEs

ochafik · ochafik · commit 60bb8d68d489 · 2026-01-16T13:59:19.000Z
Add stdio transport configuration snippets near the top of each example
README to help users quickly set up the servers in their MCP clients.

- Node.js examples use npx with the published npm packages
- Python qr-server uses uv with local path
- Removed Claude Desktop-specific references from qr-server
diff --git a/examples/basic-server-preact/README.md b/examples/basic-server-preact/README.md
@@ -5,6 +5,21 @@ An MCP App example with a Preact UI.
 > [!TIP]
 > Looking for a vanilla JavaScript example? See [`basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs)!
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "basic-preact": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-basic-preact", "--stdio"]
+    }
+  }
+}
+```
+
 ## Overview
 
 - Tool registration with a linked UI resource
diff --git a/examples/basic-server-react/README.md b/examples/basic-server-react/README.md
@@ -7,6 +7,21 @@ An MCP App example with a React UI.
 > [!TIP]
 > Looking for a vanilla JavaScript example? See [`basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs)!
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "basic-react": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-basic-react", "--stdio"]
+    }
+  }
+}
+```
+
 ## Overview
 
 - Tool registration with a linked UI resource
diff --git a/examples/basic-server-solid/README.md b/examples/basic-server-solid/README.md
@@ -5,6 +5,21 @@ An MCP App example with a Solid UI.
 > [!TIP]
 > Looking for a vanilla JavaScript example? See [`basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs)!
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "basic-solid": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-basic-solid", "--stdio"]
+    }
+  }
+}
+```
+
 ## Overview
 
 - Tool registration with a linked UI resource
diff --git a/examples/basic-server-svelte/README.md b/examples/basic-server-svelte/README.md
@@ -5,6 +5,21 @@ An MCP App example with a Svelte 5 UI using runes for reactivity.
 > [!TIP]
 > Looking for a vanilla JavaScript example? See [`basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs)!
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "basic-svelte": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-basic-svelte", "--stdio"]
+    }
+  }
+}
+```
+
 ## Overview
 
 - Tool registration with a linked UI resource
diff --git a/examples/basic-server-vanillajs/README.md b/examples/basic-server-vanillajs/README.md
@@ -5,6 +5,21 @@ An MCP App example with a vanilla JavaScript UI (no framework).
 > [!TIP]
 > Looking for a React-based example? See [`basic-server-react`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react)!
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "basic-vanillajs": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-basic-vanillajs", "--stdio"]
+    }
+  }
+}
+```
+
 ## Overview
 
 - Tool registration with a linked UI resource
diff --git a/examples/basic-server-vue/README.md b/examples/basic-server-vue/README.md
@@ -5,6 +5,21 @@ An MCP App example with a Vue 3 UI using the Composition API.
 > [!TIP]
 > Looking for a vanilla JavaScript example? See [`basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs)!
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "basic-vue": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-basic-vue", "--stdio"]
+    }
+  }
+}
+```
+
 ## Overview
 
 - Tool registration with a linked UI resource
diff --git a/examples/budget-allocator-server/README.md b/examples/budget-allocator-server/README.md
@@ -10,6 +10,21 @@ An interactive budget allocation tool demonstrating real-time data visualization
   </tr>
 </table>
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "budget-allocator": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-budget-allocator", "--stdio"]
+    }
+  }
+}
+```
+
 ## Features
 
 - **Interactive Sliders**: Adjust budget allocation across 5 categories (Marketing, Engineering, Operations, Sales, R&D)
diff --git a/examples/cohort-heatmap-server/README.md b/examples/cohort-heatmap-server/README.md
@@ -10,6 +10,21 @@ A demo MCP App that displays cohort retention data as an interactive heatmap, sh
   </tr>
 </table>
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "cohort-heatmap": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-cohort-heatmap", "--stdio"]
+    }
+  }
+}
+```
+
 ## Features
 
 - **Cohort Retention Heatmap**: Color-coded grid showing retention percentages across cohorts and time periods
diff --git a/examples/customer-segmentation-server/README.md b/examples/customer-segmentation-server/README.md
@@ -10,6 +10,21 @@ A demo MCP App that displays customer data as an interactive scatter/bubble char
   </tr>
 </table>
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "customer-segmentation": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-customer-segmentation", "--stdio"]
+    }
+  }
+}
+```
+
 ## Features
 
 - **Interactive Scatter Plot**: Bubble chart visualization using Chart.js with configurable X/Y axes
diff --git a/examples/map-server/README.md b/examples/map-server/README.md
@@ -4,6 +4,21 @@
 
 Interactive 3D globe viewer using CesiumJS with OpenStreetMap tiles. Demonstrates geocoding integration and full MCP App capabilities.
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "map": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-map", "--stdio"]
+    }
+  }
+}
+```
+
 ## Features
 
 - **3D Globe Rendering**: Interactive CesiumJS globe with rotation, zoom, and 3D perspective
diff --git a/examples/pdf-server/README.md b/examples/pdf-server/README.md
@@ -4,6 +4,21 @@
 
 A simple interactive PDF viewer that uses [PDF.js](https://mozilla.github.io/pdf.js/). Launch it w/ a few PDF files and/or URLs as CLI args (+ support loading any additional pdf from arxiv.org).
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "pdf": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-pdf", "--stdio"]
+    }
+  }
+}
+```
+
 ## What This Example Demonstrates
 
 ### 1. Chunked Data Through Size-Limited Tool Calls
diff --git a/examples/qr-server/README.md b/examples/qr-server/README.md
@@ -4,12 +4,27 @@ A minimal Python MCP server that generates customizable QR codes with an interac
 
 ![Screenshot](https://modelcontextprotocol.github.io/ext-apps/screenshots/qr-server/screenshot.png)
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "qr": {
+      "command": "uv",
+      "args": ["run", "/path/to/qr-server/server.py", "--stdio"]
+    }
+  }
+}
+```
+
 ## Features
 
 - Generate QR codes from any text or URL
 - Customizable colors, size, and error correction
 - Interactive widget that displays in MCP-UI enabled clients
-- Supports both HTTP (for web clients) and stdio (for Claude Desktop)
+- Supports both HTTP (for web clients) and stdio (for MCP clients)
 
 ## Prerequisites
 
@@ -41,24 +56,13 @@ Connect from basic-host:
 SERVERS='["http://localhost:3108/mcp"]' bun serve.ts
 ```
 
-### Stdio Mode (for Claude Desktop)
+### Stdio Mode (for MCP clients)
 
 ```bash
 uv run server.py --stdio
 ```
 
-Add to Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json`):
-
-```json
-{
-  "mcpServers": {
-    "qr": {
-      "command": "uv",
-      "args": ["run", "/path/to/qr-server/server.py", "--stdio"]
-    }
-  }
-}
-```
+See [MCP Client Configuration](#mcp-client-configuration) above for how to add this server to your MCP client.
 
 ### Docker (accessing host server from container)
 
diff --git a/examples/scenario-modeler-server/README.md b/examples/scenario-modeler-server/README.md
@@ -10,6 +10,21 @@ A React-based demo MCP App that lets users adjust SaaS business parameters and s
   </tr>
 </table>
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "scenario-modeler": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-scenario-modeler", "--stdio"]
+    }
+  }
+}
+```
+
 ## Features
 
 - **Interactive Parameters**: 5 sliders for Starting MRR, Growth Rate, Churn Rate, Gross Margin, and Fixed Costs
diff --git a/examples/shadertoy-server/README.md b/examples/shadertoy-server/README.md
@@ -10,6 +10,21 @@ A demo MCP App that renders [ShaderToy](https://www.shadertoy.com/)-compatible G
   </tr>
 </table>
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "shadertoy": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-shadertoy", "--stdio"]
+    }
+  }
+}
+```
+
 ## Features
 
 - **Real-time Rendering**: Renders GLSL shaders using WebGL 2.0
diff --git a/examples/sheet-music-server/README.md b/examples/sheet-music-server/README.md
@@ -9,6 +9,21 @@ A demo MCP App that renders [ABC notation](https://en.wikipedia.org/wiki/ABC_not
   </tr>
 </table>
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "sheet-music": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-sheet-music", "--stdio"]
+    }
+  }
+}
+```
+
 ## Features
 
 - **Audio Playback**: Built-in audio player with play/pause and loop controls
diff --git a/examples/system-monitor-server/README.md b/examples/system-monitor-server/README.md
@@ -10,6 +10,21 @@ A demo MCP App that displays real-time OS metrics with a stacked area chart for
   </tr>
 </table>
 
+## MCP Client Configuration
+
+Add to your MCP client configuration (stdio transport):
+
+```json
+{
+  "mcpServers": {
+    "system-monitor": {
+      "command": "npx",
+      "args": ["-y", "--silent", "--registry=https://registry.npmjs.org/", "@modelcontextprotocol/server-system-monitor", "--stdio"]
+    }
+  }
+}
+```
+
 ## Features
 
 - **Per-Core CPU Monitoring**: Stacked area chart showing individual CPU core utilization over a 1-minute sliding window
diff --git a/examples/threejs-server/README.md b/examples/threejs-server/README.md
diff --git a/examples/transcript-server/README.md b/examples/transcript-server/README.md
diff --git a/examples/video-resource-server/README.md b/examples/video-resource-server/README.md
diff --git a/examples/wiki-explorer-server/README.md b/examples/wiki-explorer-server/README.md
