From cce8d5c7a31d2a05a99dfb9c08923d91414e587b Mon Sep 17 00:00:00 2001 From: Olivier Chafik Date: Fri, 16 Jan 2026 13:59:19 +0000 Subject: [PATCH] docs: add MCP client configuration to example READMEs 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 --- examples/basic-server-preact/README.md | 21 ++++++++++++ examples/basic-server-react/README.md | 21 ++++++++++++ examples/basic-server-solid/README.md | 21 ++++++++++++ examples/basic-server-svelte/README.md | 21 ++++++++++++ examples/basic-server-vanillajs/README.md | 21 ++++++++++++ examples/basic-server-vue/README.md | 21 ++++++++++++ examples/budget-allocator-server/README.md | 21 ++++++++++++ examples/cohort-heatmap-server/README.md | 21 ++++++++++++ .../customer-segmentation-server/README.md | 21 ++++++++++++ examples/map-server/README.md | 21 ++++++++++++ examples/pdf-server/README.md | 21 ++++++++++++ examples/qr-server/README.md | 32 +++++++++++-------- examples/scenario-modeler-server/README.md | 21 ++++++++++++ examples/shadertoy-server/README.md | 21 ++++++++++++ examples/sheet-music-server/README.md | 21 ++++++++++++ examples/system-monitor-server/README.md | 21 ++++++++++++ examples/threejs-server/README.md | 21 ++++++++++++ examples/transcript-server/README.md | 21 ++++++++++++ examples/video-resource-server/README.md | 21 ++++++++++++ examples/wiki-explorer-server/README.md | 21 ++++++++++++ 20 files changed, 417 insertions(+), 14 deletions(-) diff --git a/examples/basic-server-preact/README.md b/examples/basic-server-preact/README.md index 8091ad8..b85fb90 100644 --- a/examples/basic-server-preact/README.md +++ b/examples/basic-server-preact/README.md @@ -5,6 +5,27 @@ 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 index d29073d..4b3f26c 100644 --- a/examples/basic-server-react/README.md +++ b/examples/basic-server-react/README.md @@ -7,6 +7,27 @@ 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 index e0e7584..693fec3 100644 --- a/examples/basic-server-solid/README.md +++ b/examples/basic-server-solid/README.md @@ -5,6 +5,27 @@ 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 index 22505c8..ff599af 100644 --- a/examples/basic-server-svelte/README.md +++ b/examples/basic-server-svelte/README.md @@ -5,6 +5,27 @@ 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 index 41e23e3..e3fabc9 100644 --- a/examples/basic-server-vanillajs/README.md +++ b/examples/basic-server-vanillajs/README.md @@ -5,6 +5,27 @@ 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 index 2090973..84a0b0e 100644 --- a/examples/basic-server-vue/README.md +++ b/examples/basic-server-vue/README.md @@ -5,6 +5,27 @@ 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 index b81d2e1..917abd6 100644 --- a/examples/budget-allocator-server/README.md +++ b/examples/budget-allocator-server/README.md @@ -10,6 +10,27 @@ An interactive budget allocation tool demonstrating real-time data visualization +## 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 index 322a116..31a0f4a 100644 --- a/examples/cohort-heatmap-server/README.md +++ b/examples/cohort-heatmap-server/README.md @@ -10,6 +10,27 @@ A demo MCP App that displays cohort retention data as an interactive heatmap, sh +## 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 index 76a453e..6e118e9 100644 --- a/examples/customer-segmentation-server/README.md +++ b/examples/customer-segmentation-server/README.md @@ -10,6 +10,27 @@ A demo MCP App that displays customer data as an interactive scatter/bubble char +## 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 index ad9223d..38a4f38 100644 --- a/examples/map-server/README.md +++ b/examples/map-server/README.md @@ -4,6 +4,27 @@ 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 index 48964a8..bdc83be 100644 --- a/examples/pdf-server/README.md +++ b/examples/pdf-server/README.md @@ -4,6 +4,27 @@ 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 index e98016e..0dbb54f 100644 --- 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 index c5252a7..8d3e100 100644 --- a/examples/scenario-modeler-server/README.md +++ b/examples/scenario-modeler-server/README.md @@ -10,6 +10,27 @@ A React-based demo MCP App that lets users adjust SaaS business parameters and s +## 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 index 5f965cb..58dc639 100644 --- a/examples/shadertoy-server/README.md +++ b/examples/shadertoy-server/README.md @@ -10,6 +10,27 @@ A demo MCP App that renders [ShaderToy](https://www.shadertoy.com/)-compatible G +## 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 index 8f2f990..cdcf869 100644 --- a/examples/sheet-music-server/README.md +++ b/examples/sheet-music-server/README.md @@ -9,6 +9,27 @@ A demo MCP App that renders [ABC notation](https://en.wikipedia.org/wiki/ABC_not +## 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 index 6e34386..7330572 100644 --- a/examples/system-monitor-server/README.md +++ b/examples/system-monitor-server/README.md @@ -10,6 +10,27 @@ A demo MCP App that displays real-time OS metrics with a stacked area chart for +## 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 index 41e6d2f..2b58fee 100644 --- a/examples/threejs-server/README.md +++ b/examples/threejs-server/README.md @@ -4,6 +4,27 @@ Interactive 3D scene renderer using Three.js. Demonstrates streaming code preview and full MCP App integration. +## MCP Client Configuration + +Add to your MCP client configuration (stdio transport): + +```json +{ + "mcpServers": { + "threejs": { + "command": "npx", + "args": [ + "-y", + "--silent", + "--registry=https://registry.npmjs.org/", + "@modelcontextprotocol/server-threejs", + "--stdio" + ] + } + } +} +``` + ## Features - **Interactive 3D Rendering**: Execute JavaScript code to create and animate Three.js scenes diff --git a/examples/transcript-server/README.md b/examples/transcript-server/README.md index dae2228..4ae89ee 100644 --- a/examples/transcript-server/README.md +++ b/examples/transcript-server/README.md @@ -4,6 +4,27 @@ An MCP App Server for live speech transcription using the Web Speech API. +## MCP Client Configuration + +Add to your MCP client configuration (stdio transport): + +```json +{ + "mcpServers": { + "transcript": { + "command": "npx", + "args": [ + "-y", + "--silent", + "--registry=https://registry.npmjs.org/", + "@modelcontextprotocol/server-transcript", + "--stdio" + ] + } + } +} +``` + ## Features - **Live Transcription**: Real-time speech-to-text using browser's Web Speech API diff --git a/examples/video-resource-server/README.md b/examples/video-resource-server/README.md index 252e6bb..01d89e6 100644 --- a/examples/video-resource-server/README.md +++ b/examples/video-resource-server/README.md @@ -4,6 +4,27 @@ Demonstrates serving binary content (video) via MCP resources using the base64 blob pattern. +## MCP Client Configuration + +Add to your MCP client configuration (stdio transport): + +```json +{ + "mcpServers": { + "video-resource": { + "command": "npx", + "args": [ + "-y", + "--silent", + "--registry=https://registry.npmjs.org/", + "@modelcontextprotocol/server-video-resource", + "--stdio" + ] + } + } +} +``` + ## Quick Start ```bash diff --git a/examples/wiki-explorer-server/README.md b/examples/wiki-explorer-server/README.md index bd827e3..70ac6d9 100644 --- a/examples/wiki-explorer-server/README.md +++ b/examples/wiki-explorer-server/README.md @@ -10,6 +10,27 @@ Visualizes Wikipedia link graphs using a force-directed layout. Explore how Wiki +## MCP Client Configuration + +Add to your MCP client configuration (stdio transport): + +```json +{ + "mcpServers": { + "wiki-explorer": { + "command": "npx", + "args": [ + "-y", + "--silent", + "--registry=https://registry.npmjs.org/", + "@modelcontextprotocol/server-wiki-explorer", + "--stdio" + ] + } + } +} +``` + ## Features - **Force-directed graph visualization**: Interactive graph powered by [`force-graph`](https://github.com/vasturiano/force-graph)