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
This commit is contained in:
Olivier Chafik
parent
8c3b1daf7e
commit
cce8d5c7a3
20 changed files with 417 additions and 14 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -10,6 +10,27 @@ 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)
|
||||
|
|
|
|||
|
|
@ -10,6 +10,27 @@ 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
|
||||
|
|
|
|||
|
|
@ -10,6 +10,27 @@ 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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -4,12 +4,27 @@ A minimal Python MCP server that generates customizable QR codes with an interac
|
|||
|
||||
|
||||
|
||||
## 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)
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,27 @@ 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
|
||||
|
|
|
|||
|
|
@ -10,6 +10,27 @@ 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
|
||||
|
|
|
|||
|
|
@ -9,6 +9,27 @@ 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
|
||||
|
|
|
|||
|
|
@ -10,6 +10,27 @@ 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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -10,6 +10,27 @@ Visualizes Wikipedia link graphs using a force-directed layout. Explore how Wiki
|
|||
</tr>
|
||||
</table>
|
||||
|
||||
## 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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue