MCP map sample

AIMCP协作地图演示

日本语 | 英语

AI将聊天和地图融合在一起Web应用程序。Anthropic Claude API和DCP (DIIIG Cloud Platform) MCP以交互方式回答用户问题POI提供信息。

DEMO

褐帘石

• AIMCP网站页面信息

特徴

• AI聊天: Claude (Anthropic) API使用交互接口
• MCP Connector统合: Anthropic API经过DCP MCP结合POI获取信息
• 支持多地图: Mapbox、MapLibre、Google Mapsに対応
• SSE流式传输：实时AI显示响应
• 反射式设计：支持移动台式机
• 聊天记录: LocalStorage保存基本对话历史记录

必要要件

Docker （建议）

• 码头工人
• Docker Compose
• 单击功能区上API键：

- Anthropic API 钥匙 - DCP API 钥匙 - Mapbox / Google Maps API关键帧（取决于要使用的映射系统）

对于手动设置

• PHP 8.x以上
• Web服务器（Apache、Nginx等）
• 与上述相同API钥匙

安装，安装

方法1：Docker 使用（推荐）

最简单的方法。

1.克隆存储库

git clone [repository-url]
cd mcp_map_sample

2.创建配置文件

lib/config.example.php 复制 lib/config.php 创建：

cp lib/config.example.php lib/config.php

3. API设置关键帧

lib/config.php 编辑各种API设置关键帧：

// Anthropic API設定
define('ANTHROPIC_API_KEY', 'your-anthropic-api-key-here');

// DCP API設定
define('DCP_MCP_URL', 'your-dcp-mcp-url-here');
define('DCP_API_KEY', 'your-dcp-api-key-here');

// マップシステム設定
define('MAP_SYSTEM', 'mapbox'); // 'mapbox', 'maplibre', 'googlemaps'

// Mapbox設定 (Mapboxを使用する場合)
define('MAPBOX_ACCESS_TOKEN', 'your-mapbox-access-token-here');

// Google Maps設定 (Google Mapsを使用する場合)
define('GOOGLE_MAPS_API_KEY', 'your-google-maps-api-key-here');

⚠️ 重要信息：Google Maps使用时的安全设置

Google Maps选项卡页面上创建或编辑条目API密钥已公开必须设置以下限制请：

1. 谷歌云控制台 的API打开密钥
2. 应用程序限制 「HTTP里法勒“ 列表框中，此格式对应于条目“无”
3. 添加允许的网站：

- 本番环境： https://yourdomain.com/* - 开発环境： http://localhost:*

1. 「API限制 「Maps JavaScript API」咬 启用

如果不进行这些设定API钥匙被滥用，有被高额请求的可能性。

推奨：在您查看完详细信息后，单击API无键 地图Libre 中所述修改相应参数的值。

4. Docker启动容器

docker-compose up -d

5.访问应用程序

在浏览器中 http://localhost:8080 中所述修改相应参数的值。

Docker 命令

# コンテナを起動
docker-compose up -d

# ログを確認
docker-compose logs -f

# コンテナを停止
docker-compose down

# イメージを再ビルド
docker-compose build

方法2:手动设置

1.克隆存储库

git clone [repository-url]
cd mcp_map_sample

2.创建配置文件

lib/config.example.php 复制 lib/config.php 创建：

cp lib/config.example.php lib/config.php

3. API设置关键帧

lib/config.php 编辑各种API设置关键帧。

⚠️ Google Maps使用时，请务必实施上述“方法1”的安全设定。

4. Web服务器设置

public_html 将目录设置为文档根目录。

Apache 在…的情况下

    DocumentRoot "/path/to/aimap/public_html"
    
        AllowOverride All
        Require all granted
    

Nginx 在…的情况下

server {
    listen 80;
    root /path/to/aimap/public_html;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

5.启动应用程序

Web启动服务器，在浏览器中 http://localhost 中所述修改相应参数的值。

目录结构

mcp_map_sample/
├── docker/
│   ├── nginx.conf          # Nginx設定
│   └── start.sh            # コンテナ起動スクリプト
├── lib/
│   ├── config.example.php  # 設定ファイルのサンプル
│   └── config.php          # 実際の設定ファイル (要作成)
├── public_html/
│   ├── index.html          # メインHTML
│   ├── api/
│   │   ├── chat.php        # チャットAPI (Anthropic + MCP)
│   │   ├── config.php      # 設定API
│   │   └── poi-detail.php  # POI詳細API
│   ├── js/
│   │   ├── app.js          # Vue.jsアプリケーション
│   │   └── map.js          # マップシステム統合
│   ├── css/
│   └── img/
├── Dockerfile              # Docker設定
├── docker-compose.yml      # Docker Compose設定
└── README.md               # このファイル

使用方法

基本用法

1. 开始聊天：在屏幕底部的聊天输入栏中输入问题
2. POI検索：“请告诉我〇〇区域的观光景点”等问题
3. 映射显示: AI提议POI在地图上显示为标记
4. 详细确认单击标记POI显示详细信息

侧面菜单

• 创建新聊天：从左上角的菜单创建新的聊天线程
• 过去的聊天：从侧边栏查看过去的聊天记录
• 设定：主题更改、语言设置、帮助等

API仕様

聊天API (POST /api/chat.php)

Anthropic API和MCP Connector来修改标记元素的显示属性POI获取信息。

请求：

{
  "message": "ユーザーのメッセージ",
  "history": [
    {
      "role": "user",
      "content": "過去のメッセージ"
    }
  ]
}

响应：

实时流传送。

event: message
data: {"text": "回答の一部"}

event: message
data: {"text": "追加のテキスト"}

event: done
data: {"message": "Stream completed"}

POI信息格式：

AI在动态输入提示中单击POI信息将以以下格式填充：

通常のテキスト回答

---POI_DATA---
{
    "pois": [
        {
            "poi_id": "...",
            "name": "...",
            "latitude": ...,
            "longitude": ...,
            "category": "..."
        }
    ]
}

設定API（GET/nenenebb API/config.php）

前端提供映射设置（API密钥除外）。

响应：

{
  "type": "maplibre",
  "config": {
    "center": {
      "lat": 34.69364108831769,
      "lng": 135.19343441838353
    },
    "zoom": 12,
    "style": "https://tiles.openfreemap.org/styles/liberty"
  }
}

POI詳細API（GET/nenenebb API/poi-detail.php）

DCP API特定的POI获取详细信息。

参数：

• poi_id: POI的，之ID

例:

GET /api/poi-detail.php?poi_id=12345

对应映射系统

地图框

define('MAP_SYSTEM', 'mapbox');
define('MAPBOX_ACCESS_TOKEN', 'your-token');
define('MAPBOX_STYLE', 'mapbox://styles/mapbox/streets-v12');

地图Libre

define('MAP_SYSTEM', 'maplibre');
define('MAPLIBRE_STYLE', 'https://demotiles.maplibre.org/style.json');

谷歌地图

define('MAP_SYSTEM', 'googlemaps');
define('GOOGLE_MAPS_API_KEY', 'your-api-key');

⚠️ 安全注意事项： Google Maps API密钥将发布到前端。请务必采取以下措施：

1. 谷歌云控制台的API密钥限制的规格化距离的幂函数
2. 应用程序限制在中选择HTTP引用器
3. 添加允许的引用器：

- 本番: https://yourdomain.com/* - 开発： http://localhost:*

1. API制限仅在中启用“Maps JavaScript API”

故障排除

聊天不正常

• lib/config.php 的，之API确认密钥是否正确设置
• 在浏览器控制台中查看错误消息
• PHP检查错误日志

未显示映射

• 在动态输入提示中单击API确认密钥是否正确设置
• MAP_SYSTEM 的值是否正确（mapbox, maplibre, googlemaps)
• 使用浏览器开发者工具确认网络错误

POI映射中未显示

• DCP API确认连接
• 在浏览器控制台中API检查响应
• POI确认数据格式是否正确

开発

本地开发环境

PHP在内置服务器上开发：

cd public_html
php -S localhost:8000

调试模式

lib/config.php 启用调试模式：

define('DEBUG_MODE', true);

分发

欢迎拉式点播！在大的变更的情况下，首先Issue中所述修改相应参数的值。

开发流程

1. 分叉此存储库
2. 创建特征分支（git checkout -b feature/amazing-feature)
3. 提交更改（git commit -m 'Add amazing feature')
4. 推到分支（git push origin feature/amazing-feature)
5. 打开拉式请求

许可证

这个项目MIT在许可证下公开。详情 许可证 请参见文件。

作成者

• 开発：DIIIG Inc.

谢辞

• Anthropic -API克劳德
• OpenFreeMap -免费的地图瓷砖

参考链接

• 人类API文件
• DIIIG云平台
• DCP API文件
• 拟人MCP连接器
• Mapbox GL JS
• MapLibre GL JS
• 谷歌地图JavaScript API