GSI Vector Tile App

国土地理院の地理院地図Vectorを表示するMCP App。ElysiaJS + Bun で構築。

チャット内にインタラクティブな地図UIが埋め込まれ、地理院タイルの閲覧・住所検索・タイル情報取得ができます。

Quick Start

# bunx で直接起動（npm公開後）
bunx elysiajs-gsi-gov

# または clone して起動
git clone https://github.com/dj-oyu/elysiajs-gsi-gov.git
cd elysiajs-gsi-gov
bun install
bun run start

サーバーは http://localhost:3001/mcp でMCPエンドポイントを公開します。

Usage

# UI をビルドしてサーバー起動
bun run start

# 開発モード（UI + サーバーのホットリロード）
bun run dev

# stdio モード（Claude Desktop / Claude Code から直接接続）
bun run serve:stdio

# ビルドのみ（UI + サーバーを dist/ にバンドル）
bun run build:all

# テスト実行
bun test

Claude Desktop / Claude Code から使う

Streamable HTTP（リモート接続）

# サーバーを起動
bun run start

Claude の Settings > Connectors > Add custom connector で http://localhost:3001/mcp を追加。

stdio（直接接続）

claude_desktop_config.json に追加:

{
  "mcpServers": {
    "gsi-map": {
      "command": "bun",
      "args": ["run", "serve:stdio"],
      "cwd": "/path/to/elysiajs-gsi-gov"
    }
  }
}

または、ビルド済みバイナリを使う場合:

{
  "mcpServers": {
    "gsi-map": {
      "command": "bun",
      "args": ["/path/to/elysiajs-gsi-gov/dist/index.js", "--stdio"]
    }
  }
}

MCP Tools

show-gsi-map のパラメータ

GSI Tile Layers

タイルURL形式: https://cyberjapandata.gsi.go.jp/xyz/{layer_id}/{z}/{x}/{y}.{format}

Architecture

├── index.ts           # ElysiaJS HTTP エントリポイント
├── server.ts          # MCP Server（ツール・リソース登録）
├── mcp-app.html       # 地図UI ソース
├── src/mcp-app.ts     # 地図UI ロジック（Leaflet + GSIタイル）
├── vite.config.ts     # Vite で UI を単一HTMLにバンドル
├── dist/
│   ├── index.js       # バンドル済みサーバー (bun build)
│   └── mcp-app.html   # バンドル済みUI (vite-plugin-singlefile)
├── server.test.ts     # ユニットテスト (19 tests)
└── index.test.ts      # インテグレーションテスト (7 tests)

処理の流れ

1. LLMが show-gsi-map ツールを呼び出す
2. サーバーがツール結果 + ui://gsi-map/mcp-app.html リソースを返す
3. ホスト（Claude等）がHTMLをsandboxed iframeで表示
4. UIはLeafletで地理院タイルを描画し、App クラスでホストと双方向通信
5. ユーザーが地図を操作すると updateModelContext() でLLMに現在地を通知

Scripts

Tech Stack

• Bun - Runtime & package manager
• ElysiaJS - Web framework
• MCP SDK - Model Context Protocol
• MCP Apps - Interactive UI extension
• Leaflet - Map library
• Vite + vite-plugin-singlefile - UI bundler
• 国土地理院タイル - Map data source

License

MIT