diff --git a/README.md b/README.md index 05468209..bc331a70 100644 --- a/README.md +++ b/README.md @@ -326,6 +326,173 @@ To use these examples with MCP clients that support the stdio transport (such as > [!NOTE] > The `qr` server requires cloning the repository first. See [qr-server README](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/qr-server) for details. +#### Local Development + +To test local modifications with MCP clients, first clone and install the repository: + +```bash +git clone https://github.com/modelcontextprotocol/ext-apps.git +cd ext-apps +npm install +``` + +Then configure your MCP client to build and run the local server. Replace `~/code/ext-apps` with your actual clone path: + +
+MCP client configuration for local development (all examples) + +```json +{ + "mcpServers": { + "basic-react": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/basic-server-react && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "basic-vanillajs": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/basic-server-vanillajs && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "basic-vue": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/basic-server-vue && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "basic-svelte": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/basic-server-svelte && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "basic-preact": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/basic-server-preact && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "basic-solid": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/basic-server-solid && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "budget-allocator": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/budget-allocator-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "cohort-heatmap": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/cohort-heatmap-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "customer-segmentation": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/customer-segmentation-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "map": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/map-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "pdf": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/pdf-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "scenario-modeler": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/scenario-modeler-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "shadertoy": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/shadertoy-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "sheet-music": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/sheet-music-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "system-monitor": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/system-monitor-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "threejs": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/threejs-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "transcript": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/transcript-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "video-resource": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/video-resource-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "wiki-explorer": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/wiki-explorer-server && npm run build >&2 && node dist/index.js --stdio" + ] + }, + "qr": { + "command": "bash", + "args": ["-c", "uv run ~/code/ext-apps/examples/qr-server/server.py --stdio"] + }, + "say": { + "command": "bash", + "args": ["-c", "uv run --index https://pypi.org/simple ~/code/ext-apps/examples/say-server/server.py --stdio"] + } + } +} +``` + +
+ +This configuration rebuilds each server on launch, ensuring your local changes are picked up. + ## Resources - [Quickstart Guide](https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html) diff --git a/examples/basic-server-preact/README.md b/examples/basic-server-preact/README.md index b85fb907..82cd82ea 100644 --- a/examples/basic-server-preact/README.md +++ b/examples/basic-server-preact/README.md @@ -26,6 +26,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "basic-preact": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/basic-server-preact && npm run build >&2 && node dist/index.js --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 4b3f26c1..e2da3fb2 100644 --- a/examples/basic-server-react/README.md +++ b/examples/basic-server-react/README.md @@ -28,6 +28,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "basic-react": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/basic-server-react && npm run build >&2 && node dist/index.js --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 693fec33..cccdb57f 100644 --- a/examples/basic-server-solid/README.md +++ b/examples/basic-server-solid/README.md @@ -26,6 +26,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "basic-solid": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/basic-server-solid && npm run build >&2 && node dist/index.js --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 ff599af6..362610c2 100644 --- a/examples/basic-server-svelte/README.md +++ b/examples/basic-server-svelte/README.md @@ -26,6 +26,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "basic-svelte": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/basic-server-svelte && npm run build >&2 && node dist/index.js --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 e3fabc9b..970e8225 100644 --- a/examples/basic-server-vanillajs/README.md +++ b/examples/basic-server-vanillajs/README.md @@ -26,6 +26,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "basic-vanillajs": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/basic-server-vanillajs && npm run build >&2 && node dist/index.js --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 84a0b0ed..795a5fe0 100644 --- a/examples/basic-server-vue/README.md +++ b/examples/basic-server-vue/README.md @@ -26,6 +26,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "basic-vue": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/basic-server-vue && npm run build >&2 && node dist/index.js --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 917abd60..88b67294 100644 --- a/examples/budget-allocator-server/README.md +++ b/examples/budget-allocator-server/README.md @@ -31,6 +31,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "budget-allocator": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/budget-allocator-server && npm run build >&2 && node dist/index.js --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 31a0f4ae..bd501d70 100644 --- a/examples/cohort-heatmap-server/README.md +++ b/examples/cohort-heatmap-server/README.md @@ -31,6 +31,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "cohort-heatmap": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/cohort-heatmap-server && npm run build >&2 && node dist/index.js --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 6e118e90..0d3214c5 100644 --- a/examples/customer-segmentation-server/README.md +++ b/examples/customer-segmentation-server/README.md @@ -31,6 +31,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "customer-segmentation": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/customer-segmentation-server && npm run build >&2 && node dist/index.js --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 38a4f383..d8deb6cc 100644 --- a/examples/map-server/README.md +++ b/examples/map-server/README.md @@ -25,6 +25,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "map": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/map-server && npm run build >&2 && node dist/index.js --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 420fc99b..490930a9 100644 --- a/examples/pdf-server/README.md +++ b/examples/pdf-server/README.md @@ -25,6 +25,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "pdf": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/pdf-server && npm run build >&2 && node dist/index.js --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 5c7a61fd..2da112c8 100644 --- a/examples/qr-server/README.md +++ b/examples/qr-server/README.md @@ -12,18 +12,14 @@ First, clone the repository: git clone https://github.com/modelcontextprotocol/ext-apps.git ``` -Then add to your MCP client configuration (stdio transport), replacing the path with your clone location: +Then add to your MCP client configuration (stdio transport), replacing `~/code/ext-apps` with your clone path: ```json { "mcpServers": { "qr": { - "command": "uv", - "args": [ - "run", - "/path/to/ext-apps/examples/qr-server/server.py", - "--stdio" - ] + "command": "bash", + "args": ["-c", "uv run ~/code/ext-apps/examples/qr-server/server.py --stdio"] } } } diff --git a/examples/say-server/README.md b/examples/say-server/README.md index c416755f..d9cccc44 100644 --- a/examples/say-server/README.md +++ b/examples/say-server/README.md @@ -25,6 +25,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "say": { + "command": "bash", + "args": ["-c", "uv run --index https://pypi.org/simple ~/code/ext-apps/examples/say-server/server.py --stdio"] + } + } +} +``` + ## MCP App Features Demonstrated This example showcases several MCP App capabilities: diff --git a/examples/scenario-modeler-server/README.md b/examples/scenario-modeler-server/README.md index 8d3e1001..9a04960d 100644 --- a/examples/scenario-modeler-server/README.md +++ b/examples/scenario-modeler-server/README.md @@ -31,6 +31,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "scenario-modeler": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/scenario-modeler-server && npm run build >&2 && node dist/index.js --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 077b9d00..6c622861 100644 --- a/examples/shadertoy-server/README.md +++ b/examples/shadertoy-server/README.md @@ -31,6 +31,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "shadertoy": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/shadertoy-server && npm run build >&2 && node dist/index.js --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 cdcf869b..bf376fc1 100644 --- a/examples/sheet-music-server/README.md +++ b/examples/sheet-music-server/README.md @@ -30,6 +30,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "sheet-music": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/sheet-music-server && npm run build >&2 && node dist/index.js --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 7330572a..b9229982 100644 --- a/examples/system-monitor-server/README.md +++ b/examples/system-monitor-server/README.md @@ -31,6 +31,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "system-monitor": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/system-monitor-server && npm run build >&2 && node dist/index.js --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 e343421b..6bcadd28 100644 --- a/examples/threejs-server/README.md +++ b/examples/threejs-server/README.md @@ -25,6 +25,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "threejs": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/threejs-server && npm run build >&2 && node dist/index.js --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 4ae89ee4..da1c57fc 100644 --- a/examples/transcript-server/README.md +++ b/examples/transcript-server/README.md @@ -25,6 +25,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "transcript": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/transcript-server && npm run build >&2 && node dist/index.js --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 1c38cbe5..3bdb8487 100644 --- a/examples/video-resource-server/README.md +++ b/examples/video-resource-server/README.md @@ -25,6 +25,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "video-resource": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/video-resource-server && npm run build >&2 && node dist/index.js --stdio"] + } + } +} +``` + ## Quick Start ```bash diff --git a/examples/wiki-explorer-server/README.md b/examples/wiki-explorer-server/README.md index 70ac6d9a..30fd0bb0 100644 --- a/examples/wiki-explorer-server/README.md +++ b/examples/wiki-explorer-server/README.md @@ -31,6 +31,21 @@ Add to your MCP client configuration (stdio transport): } ``` +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "wiki-explorer": { + "command": "bash", + "args": ["-c", "cd ~/code/ext-apps/examples/wiki-explorer-server && npm run build >&2 && node dist/index.js --stdio"] + } + } +} +``` + ## Features - **Force-directed graph visualization**: Interactive graph powered by [`force-graph`](https://github.com/vasturiano/force-graph)