ext-apps/examples/map-server
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Jerome 65a62a9fae
feat: compile example servers to JavaScript for npm consumption (#259)
* feat: compile example servers to JavaScript for npm consumption

Add TypeScript compilation for server code so the example packages can be
imported and used by consumers without requiring TypeScript compilation.

Changes:
- Add tsconfig.server.json to each example for compiling server code
- Update package.json exports to point to compiled dist/server/server.js
- Add types field pointing to dist/server/server.d.ts
- Update build scripts to include server compilation step
- Fix .ts import extensions to .js in customer-segmentation-server

This enables importing the createServer function from published packages:
  import { createServer } from '@modelcontextprotocol/server-basic-react';

* fix: add type assertion for Nominatim API response

* chore: regenerate schemas

* refactor: split server examples into library and binary entry points

- server.ts: exports createServer() only (library entry point)
- main.ts: entry point with main() that runs the server (binary)
- package.json: adds bin field for npx support, uses inline bun build
- tsconfig.server.json: emitDeclarationOnly, outputs to dist/

This allows:
1. Importing the server as a library: import { createServer } from '@modelcontextprotocol/server-basic-react'
2. Running with npx: npx @modelcontextprotocol/server-basic-react [--stdio]

Added migration script at scripts/migrate-server-examples.ts

* refactor: migrate remaining server examples to library/binary structure

Apply the same refactoring to all 13 remaining server examples:
- scenario-modeler-server, shadertoy-server, map-server
- cohort-heatmap-server, customer-segmentation-server, video-resource-server
- system-monitor-server, budget-allocator-server, sheet-music-server
- threejs-server, integration-server, transcript-server, wiki-explorer-server

Each now has:
- server.ts: exports createServer() (library)
- main.ts: runs the server (binary with shebang)
- bin field in package.json for npx support

* chore: remove unused server-utils.ts from video-resource-server/src

* update

* fix(build): make Windows-compatible by removing chmod and fixing bun externals

- Remove 'chmod +x dist/index.js' which doesn't exist on Windows
- Add '--external ./server.js' to prevent bun from treating the import as a second entry point

* fix(build): use .ts import for bun compatibility

- Change import from './server.js' to './server.ts' in main.ts files
- Remove --external flag since bun should inline everything
- Fixes Windows build where bun couldn't resolve .js to .ts properly

* fix(build): use --external for Windows bun compatibility

Bun on Windows incorrectly treats imported .ts files as entry points.
Use --external './server.js' to work around this, creating a runtime
dependency between index.js and server.js.

* style: fix prettier formatting in pdf-server/main.ts

* fix(build): remove quotes from --external for Windows cmd.exe compatibility

* fix(build): use glob pattern for --external to work on all platforms

The literal path --external ./server.js was not matching the import.
Using glob pattern --external "./server*" correctly externalizes the server module.

* fix(build): use */server.js pattern for --external

The "./server*" pattern was not matching on Windows.
Using "*/server.js" matches any path ending in /server.js which works cross-platform.

* fix(build): use *server.js pattern without slash for Windows compatibility

* update package-lock

* chore: regenerate package-lock.json for cross-platform compatibility

* fix(build): use ./server.js instead of glob pattern for Windows compatibility

* fix(build): use double quotes for banner to fix Windows cmd.exe compatibility

---------

Co-authored-by: Olivier Chafik <ochafik@anthropic.com>
2026-01-14 23:46:17 +00:00
..
src fix(examples): improve updateModelContext with structured YAML frontmatter (#271) 2026-01-14 22:08:09 +00:00
.gitignore Improve consistency and organization of examples for AI learning 2026-01-13 20:48:02 -06:00
grid-cell.png feat(basic-host): URL params, fullscreen mode, unified layout (#266) 2026-01-14 22:09:41 +00:00
main.ts feat: compile example servers to JavaScript for npm consumption (#259) 2026-01-14 23:46:17 +00:00
mcp-app.html examples: Add CesiumJS Map App example (#235) 2026-01-12 12:13:56 +00:00
package.json feat: compile example servers to JavaScript for npm consumption (#259) 2026-01-14 23:46:17 +00:00
README.md feat: add example gallery with auto-generated screenshots (#253) 2026-01-13 15:12:18 +00:00
screenshot.png feat(basic-host): URL params, fullscreen mode, unified layout (#266) 2026-01-14 22:09:41 +00:00
server.ts feat: compile example servers to JavaScript for npm consumption (#259) 2026-01-14 23:46:17 +00:00
test-standalone.html examples: Add CesiumJS Map App example (#235) 2026-01-12 12:13:56 +00:00
tsconfig.json examples: Add CesiumJS Map App example (#235) 2026-01-12 12:13:56 +00:00
tsconfig.server.json feat: compile example servers to JavaScript for npm consumption (#259) 2026-01-14 23:46:17 +00:00
vite.config.ts examples: Add CesiumJS Map App example (#235) 2026-01-12 12:13:56 +00:00

Example: Interactive Map

Screenshot

Interactive 3D globe viewer using CesiumJS with OpenStreetMap tiles. Demonstrates geocoding integration and full MCP App capabilities.

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:

    npm install
    
  2. Build and start the server:

    npm run start:http  # for Streamable HTTP transport
    # OR
    npm run start:stdio  # for stdio transport
    
  3. View using the basic-host example 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 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

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