How vinaymohndass68/mcp-maps-3d works
This is a browser-based AI chat interface for exploring locations and directions on a Google 3D map. A user submits a prompt in the map component; the entry point sends it to Gemini, whose MCP tools are bridged through an in-memory client/server pair. Tool callbacks deliver location or route queries to the map component, which resolves and renders them. The excerpts also show streamed response presentation and chat state handling. The map implementation is only partially excerpted, so internal lookup-to-render details are limited to documented behavior and visible code.
Main entry points: index.tsx App bootstrap · map_app.ts Map query handling · mcp_maps_server.ts Map MCP server
Components 14
Chat experience
- Chat interface
map_app.ts - Chat state
map_app.ts - Response rendering
map_app.ts
AI and MCP bridge
- App bootstrap
index.tsx - MCP client
index.tsx - Gemini chat
index.tsx - Map MCP server
mcp_maps_server.ts
Map experience
- Map query handling
map_app.ts - Location lookup
map_app.ts - Route lookup
map_app.ts - 3D map rendering
map_app.ts
Other components
- User
- Gemini API
- Google Maps services
Connections 16
- User → Chat interface: submits prompt
map_app.ts - Chat interface → App bootstrap: sends message
map_app.ts - App bootstrap → Map MCP server: starts server
index.tsx - App bootstrap → MCP client: connects transport
index.tsx - App bootstrap → Gemini chat: creates chat
index.tsx - Gemini chat → Gemini API: streams request
index.tsx - App bootstrap → Chat state: updates state
index.tsx - App bootstrap → Response rendering: renders chunks
index.tsx - Gemini chat → MCP client: registers tools
index.tsx - MCP client → Map MCP server: dispatches tool calls
index.tsx - Map MCP server → Map query handling: calls query handler
mcp_maps_server.ts - Map query handling → Location lookup: resolves location
map_app.ts - Map query handling → Route lookup: gets directions
map_app.ts - Location lookup → Google Maps services: uses map APIs
map_app.ts - Route lookup → Google Maps services: uses route APIs
map_app.ts - Map query handling → 3D map rendering: updates map
map_app.ts