MCP Bootcamp

支持MCP的天气AI助手

一个用于OpenAI函数调用的现代网页界面，配备 模型上下文协议（MCP） 支持，专为天气查询设计。本应用展示了如何在一个美观、交互式的网页用户界面中使用OpenAI的Responses API进行函数调用，同时具备MCP服务器功能，可与Claude、Cursor等AI客户端集成。

特点/功能

• 晴天 交互式聊天界面现代、响应式的天气查询聊天界面
• 🔧（扳手，象征修理或技术） 函数调用可视化查看AI如何调用函数并处理结果
• 📱 代表手机的符号。 移动响应式（或：适配移动端）在桌面和移动设备上均运行良好
• 🎨（颜文字：画笔/艺术创作） 精美的设计现代渐变设计，搭配流畅动画
• ⚡（闪电符号，常用于表示快速、能量或电压等概念，在中文中无直接对应文字，通常保留原样使用） 实时更新实时打字指示器和流畅的消息过渡效果
• 🔌（电源插头） MCP服务器支持为AI客户端提供全面的模型上下文协议集成
• 🛠️ 表示“工具”或“修理、维护工具”的意思。 天气工具适用于MCP兼容应用的全面天气工具
• 📚 书籍 资源与提示天气资源及用于人工智能工作流的结构化提示

快速入门

1. 安装依赖项：

   npm install

1. 设置您的API密钥：

   # Copy the example environment file
   cp env.example .env

   # Edit .env with your actual API keys
   OPENAI_API_KEY=sk-your-openai-api-key-here
   WEATHER_API_KEY=your-weatherapi-key-here

1. 启动网络服务器：

   npm run web

1. 打开您的浏览器：

导航至 http://localhost:3000

MCP服务器使用情况

启动MCP服务器

Stdio 模式（适用于 MCP 客户端）

npm run mcp

HTTP模式（用于直接API访问）

npm run mcp:http

HTTP模式提供REST API端点，以便直接访问天气数据和MCP功能。

MCP服务器功能

🛠️（工具或螺丝刀的符号，无直接对应中文含义，可理解为“工具”或“修理工具”） 可用工具：

• get_current_weather - 获取某个地点的当前天气
• get_weather_summary - 详细的天气报告，包含所有指标
• compare_weather - 比较两个地点的天气

📚 书籍 可用资源：

• weather://popular-cities - 天气查询热门城市列表
• weather://weather-conditions - 天气状况参考指南

💬（这个表情符号在中文中通常表示“对话”或“聊天”，但直接翻译时没有对应的中文文字，所以这里描述其含义）对话/聊天 可用提示：

• weather-check - 查询特定地点的当前天气
• weather-comparison - 比较两个地点的天气
• travel-weather - 获取天气信息以规划旅行

MCP客户端集成

Claude Desktop（中文可译为“Claude桌面版”或保持原名，根据上下文判断是否需要具体翻译）

选项1：自动设置（推荐）

npm run setup:claude

这将根据您当前的目录路径生成正确的配置。

选项2：手动设置

1. 复制 claude-desktop-config.json 到您的Claude桌面配置目录
2. 现在的配置使用了绝对路径，因此应该可以直接工作
3. 更新 WEATHER_API_KEY 如需配置，请在配置文件中进行
4. 重启Claude桌面版

注： 使用 claude-desktop-config-portable.json 以实现更便携的配置，配备有 ${HOME} 变量。

Cursor 集成开发环境（IDE）

1. 复制 cursor-mcp-config.json 到你的光标设置
2. 更新 cwd 指向您的项目目录的路径
3. 更新 WEATHER_API_KEY 如需配置，请在配置文件中进行设置
4. 重启光标

其他MCP客户端

使用 mcp-config.json 作为您的MCP客户端配置的模板。

HTTP API 接口端点

MCP_PORT=3001 npx -y /Users/mustafaerbay/code/MCP_Bootcamp/mcp-server.js 翻译为中文是：“设置MCP端口为3001，然后使用npx -y运行位于/Users/mustafaerbay/code/MCP_Bootcamp目录下的mcp-server.js文件”。不过，为了更贴近实际操作的表述，也可以翻译为：“将MCP端口设为3001，然后使用npx -y来执行/Users/mustafaerbay/code/MCP_Bootcamp/mcp-server.js这个Node.js脚本” 当以HTTP模式运行时（npm run mcp:http), 服务器提供以下REST端点：

健康与状况

• GET /health - 服务器健康检查
• GET /tools - 列出可用的MCP工具
• GET /resources - 列出可用的MCP资源
• GET /prompts - 列出可用的MCP提示

直接天气API

• GET /weather/:location - 获取某地的当前天气
• GET /weather/compare/:location1/:location2 - 比较两个地点的天气

MCP协议端点

• POST /call-tool - 直接调用MCP工具
• GET /resource/:uri - 访问MCP资源
• GET /prompt/:name - 获取MCP提示

示例用法

# Get weather for Tokyo
curl "http://localhost:3001/weather/Tokyo,Japan"

# Compare weather between cities
curl "http://localhost:3001/weather/compare/Tokyo,Japan/London,UK"

# Call MCP tool directly
curl -X POST "http://localhost:3001/call-tool" \
  -H "Content-Type: application/json" \
  -d '{"name": "get_current_weather", "arguments": {"location": "Paris, France"}}'

# Test all endpoints
npm run test:mcp

用法

网页界面

• 打开网页界面，开始聊天气
• 尝试使用示例按钮进行快速查询
• 观看人工智能如何调用天气功能并处理结果

命令行（原始）

npm start

它是如何工作的

1. 用户输入您通过网页界面提出天气相关的问题
2. 人工智能处理人工智能分析了你的问题，并决定调用 getWeather 函数
3. 函数执行服务器使用您指定的位置执行天气查询功能
4. 结果处理人工智能处理函数结果并提供自然语言回复
5. 可视化网页用户界面向您展示整个流程，包括函数调用和结果

API终端点

• GET / - 提供主要的网页界面
• POST /api/chat - 处理聊天消息和函数调用
• GET /health - 健康检查端点

文件结构

├── index.html          # Main web interface
├── styles.css          # Modern CSS styling
├── script.js           # Frontend JavaScript
├── server.js           # Express.js server
├── function-calling.js                    # Original CLI version
├── mcp-server.js                          # MCP server implementation (complex)
├── mcp-server-simple.js                  # MCP server implementation (simple, working)
├── mcp-config.json                        # MCP configuration template
├── claude-desktop-config.json             # Claude Desktop MCP config
├── claude-desktop-config-generic.json     # Claude Desktop MCP config (portable)
├── cursor-mcp-config.json                 # Cursor IDE MCP config
├── test-mcp-http.js                       # HTTP mode test script
├── test-mcp-stdio.js                      # Stdio mode test script
├── package.json                           # Dependencies and scripts
└── README.md                              # This file

环境变量

• OPENAI_API_KEY - 您的OpenAI API密钥（必需）
• WEATHER_API_KEY - 您的WeatherAPI.com API密钥（必需）
• PORT - 服务器端口（默认：3000）

获取API密钥

OpenAI API密钥

1. 首选 OpenAI平台
2. 注册或登录
3. 前往API密钥部分
4. 创建一个新的API密钥

WeatherAPI.com 密钥

1. 首选 WeatherAPI.com（可译为“天气API网站”或保持原样，具体取决于语境和使用习惯）
2. 注册一个免费账户
3. 从仪表板获取您的API密钥
4. 免费套餐每月包含100万次通话

依赖项

• 表达网络服务器框架
• OpenAIOpenAI API 客户端
• AxiosWeatherAPI.com 的 HTTP 客户端
• dotenv（用于加载环境变量的库或工具）环境变量管理
• @modelcontextprotocol/sdk（可译为：“@模型上下文协议/开发工具包”或根据具体语境简化为“模型上下文协议SDK”）用于服务器实现的MCP SDK
• 现代CSS无需额外的CSS框架

示例查询

在网页界面中尝试这些示例查询：

• “土耳其伊斯坦布尔的天气怎么样？”
• “纽约市的天气怎么样？”
• “日本东京的气温是多少？”
• “英国伦敦的天气预报”

发展

以开发模式运行：

npm run dev

服务器将在 http://localhost:3000 并自动提供网页界面服务。