AI-powered OpenLayers map control via Model Context Protocol (MCP). 30+ tools for view, layer, feature, overlay, interaction, style, and draw operations.
概览
AI-Powered Map Control via Model Context Protocol for OpenLayers Connect any MCP-compatible AI agent to OpenLayers — view, layers, features, styles, drawing, all through natural language. Open examples/minimal/index.html in a browser. The bridge auto-connects to ws://localhost:9300. Or integrate the bridge in your own app: Add to your MCP client config (Claude Desktop, Cursor, etc.): Now ask your AI: "Show a map of Paris and add a polygon around the Louvre" Ask your AI agent natural language questions like: - "Fly to Tokyo at zoom level 12" - "Add a vector layer from this GeoJSON URL" - "Draw a polygon on the map, then export it as GeoJSON" - "Set the layer opacity to 50%" - "Add a marker at the Eiffel Tower with a popup label" - "Take a screenshot of the current map view"
README
以下为原文 README 节选，完整内容请查看原文。
Architecture
+----------------+ stdio +--------------------+ WebSocket +--------------------+
| AI Agent | | openlayers-mcp- | | openlayers-mcp- |
| (Claude, | MCP | runtime | JSON-RPC | bridge |
| Cursor...) | | (Node.js) | 2.0 | (Browser) |
+----------------+ +--------------------+ +--------------------+
|
+------v------+
| OpenLayers |
| Map |
+-------------+
Packages
| Package | Description |
|---|---|
| openlayers-mcp-runtime | MCP Server (stdio) — 30+ tools across 7 toolsets, WebSocket bridge to browser |
| openlayers-mcp-bridge | Browser SDK — receives commands via WebSocket and controls OpenLayers map |
Quick Start
1. Install & Build
git clone https://github.com/gaopengbin/openlayers-mcp.git
cd openlayers-mcp
npm install
npm run build
2. Start the MCP Runtime
npx openlayers-mcp-runtime
# => HTTP + WebSocket server on http://localhost:9300
# => MCP Server running (stdio), 30+ tools registered
3. Connect Browser
Open examples/minimal/index.html in a browser. The bridge auto-connects to ws://localhost:9300.
Or integrate the bridge in your own app:
import { OpenLayersBridge } from 'openlayers-mcp-bridge'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
const map = new Map({
target: 'map',
layers: [new TileLayer({ source: new OSM() })],
view: new View({ center: [0, 0], zoom: 2 })
})
const bridge = new OpenLayersBridge(map)
bridge.connect('ws://localhost:9300')
4. Connect AI Agent
安装
npx -y openlayers-mcp-runtime配置
{
"mcpServers": {
"openlayers": {
"command": "npx",
"args": ["-y", "openlayers-mcp-runtime"]
}
}
}