298e884ec3* chore: add stable spec release 2026-01-26 - Use git mv to copy specification from draft to specification/2026-01-26/apps.mdx (preserves history) - Update status from 'Draft' to 'Stable (2026-01-26)' - Add specification version table to README - Update Resources section with links to both stable and draft specs * chore: bump version to 1.0.0 - Update main package version from 0.4.2 to 1.0.0 - Update all example package versions to 1.0.0 - Regenerate package-lock.json * prettier * chore: align protocol version with spec release 2026-01-26 - Add 'Protocol Version: 2026-01-26' to spec header - Update LATEST_PROTOCOL_VERSION from '2025-11-21' to '2026-01-26' - Update spec examples to use '2026-01-26' protocol version - Add '2025-11-21' to SUPPORTED_PROTOCOL_VERSIONS for backwards compatibility * chore: update spec references to stable 2026-01-26 - Update typedoc.config.mjs navigation link - Update docs/overview.md spec links (10 occurrences) - Update plugins/mcp-apps/skills/create-mcp-app/SKILL.md spec link - Update src/spec.types.ts @see links - Update AGENTS.md spec path - Regenerate src/generated/schema.ts with updated links * chore: simplify versioning - first stable release - Remove backwards compatibility version (2025-11-21) - this is the first stable release - Remove redundant 'Protocol Version' header - spec version IS the protocol version * chore: add history reference comment to stable spec
131 lines
3 KiB
Markdown
131 lines
3 KiB
Markdown
# Example: Interactive Map
|
|
|
|
|
|
|
|
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"
|
|
]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 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
|
|
- **Geocoding**: Search for places using OpenStreetMap Nominatim (no API key required)
|
|
- **OpenStreetMap Tiles**: Uses free OSM tile server (no Cesium Ion token needed)
|
|
- **Dynamic Loading**: CesiumJS loaded from CDN at runtime for smaller bundle size
|
|
|
|
## Running
|
|
|
|
1. Install dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Build and start the server:
|
|
|
|
```bash
|
|
npm run start:http # for Streamable HTTP transport
|
|
# OR
|
|
npm run start:stdio # for stdio transport
|
|
```
|
|
|
|
3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example or another MCP Apps-compatible host.
|
|
|
|
## Tools
|
|
|
|
### `geocode`
|
|
|
|
Search for places by name or address. Returns coordinates and bounding boxes.
|
|
|
|
```json
|
|
{
|
|
"query": "Eiffel Tower"
|
|
}
|
|
```
|
|
|
|
Returns up to 5 matches with lat/lon coordinates and bounding boxes.
|
|
|
|
### `show-map`
|
|
|
|
Display the 3D globe zoomed to a bounding box.
|
|
|
|
```json
|
|
{
|
|
"west": 2.29,
|
|
"south": 48.85,
|
|
"east": 2.3,
|
|
"north": 48.86,
|
|
"label": "Eiffel Tower"
|
|
}
|
|
```
|
|
|
|
Defaults to London if no coordinates provided.
|
|
|
|
## Architecture
|
|
|
|
### Server (`server.ts`)
|
|
|
|
Exposes two tools:
|
|
|
|
- `geocode` - Queries OpenStreetMap Nominatim API with rate limiting
|
|
- `show-map` - Renders the CesiumJS globe UI at a specified location
|
|
|
|
Configures Content Security Policy to allow fetching tiles from OSM and Cesium CDN.
|
|
|
|
### App (`src/mcp-app.ts`)
|
|
|
|
Vanilla TypeScript app that:
|
|
|
|
- Dynamically loads CesiumJS from CDN
|
|
- Initializes globe with OpenStreetMap imagery (no Ion token)
|
|
- Receives tool inputs via the MCP App SDK
|
|
- Handles camera navigation to specified bounding boxes
|
|
|
|
## Key Files
|
|
|
|
- [`server.ts`](server.ts) - MCP server with geocode and show-map tools
|
|
- [`mcp-app.html`](mcp-app.html) / [`src/mcp-app.ts`](src/mcp-app.ts) - CesiumJS globe UI
|
|
- [`server-utils.ts`](server-utils.ts) - HTTP server utilities
|
|
|
|
## Notes
|
|
|
|
- Rate limiting is applied to Nominatim requests (1 request per second per their usage policy)
|
|
- The globe works in sandboxed iframes with appropriate CSP configuration
|
|
- No external API keys required - uses only open data sources
|