Installation

Run these in a terminal to let Claude Code analyse data and plot it on this map.

1. Add the WebMCP bridge to Claude Code
claude mcp add webmcp -- npx -y @smarchone/webmcp-bridge
2. Ask Claude to map something
claude "Open https://smarchone.github.io/webmcp-apps/maps/ with the webmcp tools and plot the IITs in India"

Run both in the same folder; Claude saves its data files there. Requires Node 22+ and Chrome.

Also works with other local agents that support MCP, like Codex, Gemini CLI, Cursor and VS Code. Add the bridge to their MCP config.

Advanced

For better results, replace step 2 with either of these.

A. A detailed prompt
claude 'Open https://smarchone.github.io/webmcp-apps/maps/ with the webmcp tools and call get_map first. Research the IITs in India, write them to workspace/education/iits.csv with label, lat, lng and category, and plot them with rows: {"$file": "workspace/education/iits.csv"}. Set a source, headline the finding with set_title and zoom to where the story is.'
B. The /map command, then run /map plot the IITs in India in Claude Code
mkdir -p .claude/commands && curl -fsSL https://smarchone.github.io/webmcp-apps/maps/map.md -o .claude/commands/map.md