docs: add local development MCP client configuration to READMEs (#361)
* docs: add local development MCP client configuration to READMEs Add instructions for configuring MCP clients to use locally-cloned and modified servers. This allows developers to test local changes with MCP clients like Claude Desktop or VS Code. - Top-level README: Added 'Local Development' section after npx config - All TypeScript examples: Added 'Local Development' subsection with bash one-liner that builds and runs the server - Python examples (qr-server, say-server): Added local path config * docs: include all servers in local development config * docs: use bash wrapper for Python server configs to enable tilde expansion
This commit is contained in:
Olivier Chafik
GitHub
parent
2d4311a25d
commit
d03123bb5c
22 changed files with 470 additions and 7 deletions
167
README.md
167
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:
|
||||
|
||||
<details>
|
||||
<summary>MCP client configuration for local development (all examples)</summary>
|
||||
|
||||
```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"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue