# vinaymohndass68/mcp-maps-3d architecture

> Architecture diagram of the GitHub repository vinaymohndass68/mcp-maps-3d, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vinaymohndass68/mcp-maps-3d
- Repository: https://github.com/vinaymohndass68/mcp-maps-3d

## Overview

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`](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/index.tsx) (App bootstrap), [`map_app.ts`](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts) (Map query handling), [`mcp_maps_server.ts`](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/mcp_maps_server.ts) (Map MCP server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_conversation["Chat experience"]
  node_chat_ui["Chat interface<br/>[map_app.ts]"]
  node_chat_state["Chat state<br/>[map_app.ts]"]
  node_response_view["Response rendering<br/>[map_app.ts]"]
end

subgraph group_bridge["AI and MCP bridge"]
  node_app["App bootstrap<br/>[index.tsx]"]
  node_mcp_client["MCP client<br/>[index.tsx]"]
  node_ai_chat["Gemini chat<br/>[index.tsx]"]
  node_mcp_server["Map MCP server<br/>[mcp_maps_server.ts]"]
end

subgraph group_mapping["Map experience"]
  node_map_query["Map query handling<br/>[map_app.ts]"]
  node_location_lookup["Location lookup<br/>[map_app.ts]"]
  node_route_lookup["Route lookup<br/>[map_app.ts]"]
  node_map_render["3D map rendering<br/>[map_app.ts]"]
end

node_user(("User"))
node_gemini{{"Gemini API"}}
node_google_maps{{"Google Maps services"}}

node_user -->|"submits prompt"| node_chat_ui
node_chat_ui -->|"sends message"| node_app
node_app -->|"starts server"| node_mcp_server
node_app -->|"connects transport"| node_mcp_client
node_app -->|"creates chat"| node_ai_chat
node_ai_chat -->|"streams request"| node_gemini
node_app -->|"updates state"| node_chat_state
node_app -->|"renders chunks"| node_response_view
node_ai_chat -->|"registers tools"| node_mcp_client
node_mcp_client -->|"dispatches tool calls"| node_mcp_server
node_mcp_server -->|"calls query handler"| node_map_query
node_map_query -->|"resolves location"| node_location_lookup
node_map_query -->|"gets directions"| node_route_lookup
node_location_lookup -->|"uses map APIs"| node_google_maps
node_route_lookup -->|"uses route APIs"| node_google_maps
node_map_query -->|"updates map"| node_map_render

click node_app "https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/index.tsx"
click node_mcp_client "https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/index.tsx"
click node_ai_chat "https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/index.tsx"
click node_mcp_server "https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/mcp_maps_server.ts"
click node_chat_ui "https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts"
click node_chat_state "https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts"
click node_response_view "https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts"
click node_map_query "https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts"
click node_location_lookup "https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts"
click node_route_lookup "https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts"
click node_map_render "https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_chat_ui,node_chat_state,node_response_view,node_user toneBlue
class node_app,node_mcp_client,node_ai_chat,node_mcp_server toneAmber
class node_map_query,node_location_lookup,node_route_lookup,node_map_render,node_gemini toneMint
class node_google_maps toneIndigo
```

## Components

### Chat experience

- [Chat interface](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts): `map_app.ts`
- [Chat state](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts): `map_app.ts`
- [Response rendering](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts): `map_app.ts`

### AI and MCP bridge

- [App bootstrap](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/index.tsx): `index.tsx`
- [MCP client](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/index.tsx): `index.tsx`
- [Gemini chat](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/index.tsx): `index.tsx`
- [Map MCP server](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/mcp_maps_server.ts): `mcp_maps_server.ts`

### Map experience

- [Map query handling](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts): `map_app.ts`
- [Location lookup](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts): `map_app.ts`
- [Route lookup](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts): `map_app.ts`
- [3D map rendering](https://github.com/vinaymohndass68/mcp-maps-3d/blob/main/map_app.ts): `map_app.ts`

### Other components

- **User**
- **Gemini API**
- **Google Maps services**

## Connections

- User → Chat interface: submits prompt (evidence: `map_app.ts`)
- Chat interface → App bootstrap: sends message (evidence: `map_app.ts`)
- App bootstrap → Map MCP server: starts server (evidence: `index.tsx`)
- App bootstrap → MCP client: connects transport (evidence: `index.tsx`)
- App bootstrap → Gemini chat: creates chat (evidence: `index.tsx`)
- Gemini chat → Gemini API: streams request (evidence: `index.tsx`)
- App bootstrap → Chat state: updates state (evidence: `index.tsx`)
- App bootstrap → Response rendering: renders chunks (evidence: `index.tsx`)
- Gemini chat → MCP client: registers tools (evidence: `index.tsx`)
- MCP client → Map MCP server: dispatches tool calls (evidence: `index.tsx`)
- Map MCP server → Map query handling: calls query handler (evidence: `mcp_maps_server.ts`)
- Map query handling → Location lookup: resolves location (evidence: `map_app.ts`)
- Map query handling → Route lookup: gets directions (evidence: `map_app.ts`)
- Location lookup → Google Maps services: uses map APIs (evidence: `map_app.ts`)
- Route lookup → Google Maps services: uses route APIs (evidence: `map_app.ts`)
- Map query handling → 3D map rendering: updates map (evidence: `map_app.ts`)