Google MCP Todo App

谷歌地图MCP Web应用程序

一个现代的Next.js web应用程序，通过模型上下文协议（MCP）服务器与谷歌地图集成。此应用程序提供基于位置的待办事项管理和谷歌地图搜索功能。

特性

• 🗺️ 谷歌地图集成：搜索地点、获取路线和查看地点详细信息
• ✅ 基于位置的待办事项管理：创建带有位置附件的待办事项
• 🚀 Azure云部署：已准备好部署到Azure静态Web应用程序
• 📱 响应式设计：适用于台式机和移动设备
• 🎨 现代用户界面：使用Tailwind CSS和Lucide React图标构建

使用的技术

• 前端Next.js 15、React 19、TypeScript
• 样式：顺风CSS
• 图标：Lucide React
• MCP集成：通过流式HTTP访问谷歌地图MCP服务器
• 部署：Azure静态Web应用程序

谷歌地图MCP集成

此应用程序使用托管的Streamable HTTP端点连接到Google Maps MCP服务器：

{
  "mcpServers": {
    "google-maps": {
      "transport": "streamableHttp",
      "url": "https://mcp.open-mcp.org/api/server/google-maps@latest/mcp"
    }
  }
}

可用特征

地图界面

• 搜索地点和地点
• 获取详细的地点信息
• 计算位置之间的方向
• 查看位置评级和联系信息

计划管理

• 创建基于位置的待办事项
• 设置优先级（高、中、低）
• 添加截止日期和说明
• 获取待办事项地点的路线
• 标记全部完成
• 使用localStorage的持久存储

入门指南

先决条件

• Node.js 18或更高版本
• npm或yarn包管理器

安装

1. 克隆存储库:

   git clone 
   cd "todo on maps"

1. 安装依赖项:

   npm install

1. 运行开发服务器:

   npm run dev

1. 在浏览器中打开:

引导到 http://localhost:3000

为生产而建

npm run build

Azure部署

此应用程序已配置为部署到Azure静态Web应用程序。

先决条件

• Azure帐户
• GitHub存储库

部署步骤

1. 创建Azure静态Web应用程序:

- 转到Azure门户 - 创建新的静态Web应用程序资源 - 连接到您的GitHub存储库 - 选择构建预设：“Next.js” - 将构建位置设置为“/” - 将输出位置设置为“out”

1. 配置GitHub机密:

- 添加 AZURE_STATIC_WEB_APPS_API_TOKEN 存储库机密

1. 部署:

- 推送到主分支 - GitHub Actions将自动构建和部署

配置文件

• staticwebapp.config.json：Azure静态Web应用程序配置
• .github/workflows/azure-static-web-apps.yml：CI/CD管道
• next.config.js：用于静态导出的Next.js配置

项目结构

src/
├── app/
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout component
│   └── page.tsx             # Main page component
├── components/
│   ├── todo/
│   │   └── TodoManager.tsx  # Todo management interface
│   ├── GoogleMapsInterface.tsx # Maps search interface
│   └── Navigation.tsx       # Navigation component
└── lib/
    └── mcp-client.ts        # MCP client implementation

API使用

谷歌地图MCP客户端

该应用程序包括一个用于Google Maps MCP服务器的TypeScript客户端：

const mcpClient = new GoogleMapsMCPClient();

// Search for places
const places = await mcpClient.searchPlaces("restaurants near me");

// Get place details
const details = await mcpClient.getPlaceDetails(placeId);

// Get directions
const directions = await mcpClient.getDirections("origin", "destination");

环境变量

应用程序使用以下环境变量：

• GOOGLE_MAPS_MCP_URL：谷歌地图MCP服务器的URL（在next.config.js中配置）

贡献

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 如果适用，添加测试
5. 提交拉取请求

许可证

该项目根据MIT许可证获得许可。

支持

对于问题和疑问：

1. 检查 问题 章节
2. 创建包含详细信息的新问题
3. 包括重现任何错误的步骤

路线图

• \[\]添加地图可视化组件
• \[\]实现用户身份验证
• \[\]添加实时位置跟踪
• \[\]与日历API集成
• \[\]添加离线功能
• \[\]实现推送通知

部署状态

• ✅ 项目设置完成
• ✅ MCP集成已实施
• ✅ 已创建UI组件
• ✅ Azure配置就绪
• ⏳ 等待Azure部署