| Filename | Latest commit message | Latest commit date |
|---|---|---|
e479497371* fix(e2e): add masks for dynamic content and increase timeouts for slow servers - Add HOST_MASKS for Tool Input/Result panels with dynamic timestamps - Add say-server to SLOW_SERVERS (10s) for TTS model download - Add say-server to EXTRA_WAIT_MS (30s) in generate-grid-screenshots * feat: add update-lock:docker script to regenerate lockfile with public registry * pin package versions for dev compatibility * feat(basic-host): add ?theme=hide query param to hide theme toggle in screenshots - Add hideThemeToggle param to getQueryParams() - Conditionally render ThemeToggle based on ?theme=hide - Update e2e tests to use ?theme=hide for consistent screenshots * update screenshots * update screenshots * fix(husky): load Node.js environment for GUI apps like GitHub Desktop * fix(e2e): increase map-server wait time to 15s for tile loading * fix(e2e): increase waitForAppLoad timeout to 30s for nested iframe loading * ci: add workflow to update e2e snapshots * ci: trigger snapshot update on push to this branch * chore: update e2e snapshots [skip ci] * ci: trigger CI after snapshot update * style: fix prettier formatting in update-snapshots workflow * fix: pin seroval, seroval-plugins, and solid-js for artifactory compatibility --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> |
||
| .. | ||
| src | ||
| .gitignore | ||
| grid-cell.png | ||
| main.ts | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| screenshot.png | ||
| server.ts | ||
| test-standalone.html | ||
| tsconfig.json | ||
| tsconfig.server.json | ||
| vite.config.ts | ||
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):
{
"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
- 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
-
Install dependencies:
npm install -
Build and start the server:
npm run start:http # for Streamable HTTP transport # OR npm run start:stdio # for stdio transport -
View using the
basic-hostexample or another MCP Apps-compatible host.
Tools
geocode
Search for places by name or address. Returns coordinates and bounding boxes.
{
"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.
{
"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 limitingshow-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- MCP server with geocode and show-map toolsmcp-app.html/src/mcp-app.ts- CesiumJS globe UIserver-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