Interactive Map · WebMCP demo

A zero-backend static site that embeds Google Maps and exposes itself to AI agents through WebMCP.

Live demo: https://webmcp-googlemap.pages.dev

What it does

• Full-screen embedded Google Map (no API key required)
• Bottom search bar with two structured fields: area + keyword
• Preset chips that demo a typewriter animation
• Info dialog (top-right i) describing the exposed tools

WebMCP tools

Tool	Type	Purpose
search_map	Declarative (<form toolname>)	Splits queries like "good restaurants in Tokyo" into { area, keyword } and shows them on the map.
get_current_search	Imperative (navigator.modelContext.registerTool)	Read-only accessor that returns the area / keyword currently on the map.

The page also listens to toolactivated / toolcancel and replays the agent-filled values with a typewriter effect so the user can see the agent "type" into the form.

Try it with an agent

1. Use Chrome 146+ and enable chrome://flags/#enable-webmcp-testing.
2. Install the Model Context Tool Inspector Extension.
3. Open the live demo (or http://localhost:8765 locally) — both tools show up in the extension and can be invoked manually or via Gemini.

Run locally

python3 -m http.server 8765
open http://localhost:8765

No build, no dependencies. The whole site is index.html + style.css + script.js.

Deploy

Cloudflare Pages via Wrangler:

wrangler pages deploy . --project-name=webmcp-googlemap --branch=main