Demo MCP Nextjs Weather

与ChatGPT集成的天气预报应用程序

Next.js天气应用程序使用OpenAI Apps SDK和模型上下文协议（MCP）与ChatGPT集成。通过自然对话获取实时天气信息和预报。

特性

核心天气功能

• 当前天气：获取全球任何城市的实时天气数据
• 天气预报：查看5-7天的天气预报，包括每日明细
• 天气比较：比较两个地点的天气状况
• 多单元支持：以摄氏度或华氏度显示温度
• 丰富的天气细节：温度、感觉、湿度、风速、压力和天气条件

ChatGPT集成

• 通过ChatGPT进行自然语言天气查询
• 在ChatGPT中本地显示的交互式天气小部件
• MCP服务器公开了三种天气工具：

- get_current_weather：获取某个位置的当前天气 - get_weather_forecast：获取多日天气预报 - compare_weather：比较两个城市的天气

UI组件

• 天气显示：美丽的当前天气卡，包含所有细节
• 预测卡：带有温度范围的每日预报卡
• 天气比较：并排天气比较视图
• 装载机：优雅的装载状态
• 错误消息：用户友好的错误处理

先决条件

1. Node.js：版本18或更高版本
2. 包管理器：npm或pnpm
3. OpenWeatherMap API密钥：提供免费套餐
4. ChatGPT访问：MCP服务器连接的开发人员模式（独立使用时可选）

安装说明

1.克隆和安装

git clone 
cd weather-demo-nextjs-mcp
pnpm install
# or
npm install

2.获取天气API密钥

1. 访问 OpenWeatherMap
2. 注册一个免费帐户
3. 导航到API密钥部分
4. 复制API密钥

替代：您可以使用 WeatherAPI.com 而是通过修改服务模块。

3.配置环境变量

创建一个 .env.local 项目根目录中的文件：

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

编辑 .env.local 并添加您的API密钥：

OPENWEATHERMAP_API_KEY=your_actual_api_key_here

⚠️ 重要：从不承诺 .env.local 版本控制！

4.运行开发服务器

pnpm dev
# or
npm run dev

打开 http://localhost:3000 查看应用程序。

5.连接到ChatGPT（可选）

MCP服务器位于：

http://localhost:3000/mcp

用于生产:

1. 部署到Vercel（请参阅下面的部署部分）
2. 获取您的生产URL（例如。， https://your-app.vercel.app)
3. 在ChatGPT中，转到 设置→ 连接器 → 创建
4. 添加您的MCP服务器URL： https://your-app.vercel.app/mcp

备注：将MCP服务器连接到ChatGPT需要开发人员模式访问权限。看 连接指南 了解详情。

使用示例

与ChatGPT一起使用

连接到ChatGPT后，尝试以下自然语言查询：

"What's the weather like in London?"
"Show me a 5-day forecast for Tokyo"
"Compare the weather in New York and Los Angeles"
"Is it warmer in Paris or Berlin right now?"
"What's the temperature in Miami in Fahrenheit?"

程序化使用

您还可以直接在代码中使用天气服务：

import { getCurrentWeather, getWeatherForecast, compareWeather } from '@/lib/weather-service';

// Get current weather
const weather = await getCurrentWeather('London', 'celsius');

// Get 7-day forecast
const forecast = await getWeatherForecast('Tokyo', 7, 'fahrenheit');

// Compare two locations
const comparison = await compareWeather('New York', 'Paris', 'celsius');

项目结构

weather-demo-nextjs-mcp/
├── app/
│   ├── components/           # React components
│   │   ├── WeatherDisplay.tsx       # Current weather card
│   │   ├── ForecastCard.tsx         # Forecast day card
│   │   ├── WeatherComparison.tsx    # Comparison view
│   │   ├── LoadingSpinner.tsx       # Loading state
│   │   └── ErrorMessage.tsx         # Error display
│   ├── hooks/                # Custom React hooks
│   ├── mcp/
│   │   └── route.ts          # MCP server with weather tools
│   ├── layout.tsx            # Root layout with SDK bootstrap
│   ├── page.tsx              # Main weather page
│   └── globals.css           # Global styles
├── lib/
│   └── weather-service.ts    # Weather API integration
├── .env.example              # Environment variables template
├── .env.local                # Your API keys (create this)
├── middleware.ts             # CORS handling for RSC
├── next.config.ts            # Next.js configuration
└── package.json              # Dependencies

API 参考

气象服务功能

getCurrentWeather(location, units)

获取某个位置的当前天气数据。

参数：

• location （string）：城市名称或位置（例如，“伦敦”、“美国纽约”）
• units （字符串）：“celsius”或“fahrenheit”（默认值：“celcius”）

退货： Promise

getWeatherForecast(location, days, units)

获取未来几天的天气预报。

参数：

• location （string）：城市名称或位置
• days （number）：预测天数，1-7（默认值：5）
• units （字符串）：“celsius”或“fahrenheit”（默认值：“celcius”）

退货： Promise

compareWeather(location1, location2, units)

比较两个地点的天气。

参数：

• location1 （string）：第一个城市名称
• location2 （string）：第二个城市名称
• units （字符串）：“celsius”或“fahrenheit”（默认值：“celcius”）

退货： Promise

MCP工具

get_current_weather

• 描述：获取任何位置的当前天气
• 输入: location （字符串）， units （枚举）
• 输出：使用小部件渲染的当前天气数据

get_weather_forecast

• 描述：获取多日天气预报
• 输入: location （字符串）， days （数字1-7）， units （枚举）
• 输出：带有小部件渲染的每日预测数据

compare_weather

• 描述：比较两个地点的天气
• 输入: location1 （字符串）， location2 （字符串）， units （枚举）
• 输出：将数据与并排小部件渲染进行比较

技术细节

气象数据源

• 提供者：OpenWeatherMap API
• 免费等级：1000个电话/天，60个电话/分钟
• 数据刷新：当前天气缓存10分钟，预报缓存30分钟
• 覆盖：全球城市覆盖

MCP集成

此应用程序使用模型上下文协议将天气工具暴露给ChatGPT：

1. 工具注册：在中注册了三个天气工具 app/mcp/route.ts
2. 资源小部件：用于丰富天气可视化的HTML小部件
3. 元数据：用于工具调用状态的OpenAI特定元数据
4. 错误处理：针对无效位置或API问题的优美错误响应

Next.js使用的功能

• 应用路由器：Next.js 15+应用程序目录结构
• 服务器组件：高效的数据获取
• 客户端组件：带有React钩子的交互式UI
• 涡轮增压器：快速开发和构建时间
• Tailwind CSS：实用程序优先样式，支持黑暗模式

部署

部署到Vercel（推荐）

1. 将代码推送到GitHub

1. 单击部署按钮：


1. 添加环境变量：

- 转到项目设置→ 环境变量 - 添加 OPENWEATHERMAP_API_KEY 使用API密钥

1. 部署！

该应用程序将自动检测Vercel环境变量并正确配置URL。

手动部署

对于其他平台，请确保：

• 环境变量 OPENWEATHERMAP_API_KEY 已设置
• Node.js 18+运行时可用
• 构建命令： npm run build
• 启动命令： npm start
• 输出目录： .next

错误处理

该应用程序包括全面的错误处理：

• 无效的位置：未找到城市时清除错误消息
• API错误：优雅地处理API故障
• 缺少API密钥：带有安装说明的有用错误消息
• 速率限制：尊重OpenWeatherMap API的缓存限制
• 网络问题：用户友好的错误显示

定制

使用不同天气API

要使用WeatherAPI.com或其他提供商：

1. 更新 lib/weather-service.ts 使用新的API端点
2. 修改响应解析逻辑
3. 更新中的环境变量 .env.example 和 .env.local

样式

该应用程序使用具有暗模式支持的Tailwind CSS。定制：

• 颜色：修改组件中的顺风类
• 布局：调整组件结构 app/page.tsx
• 主题：更新 app/globals.css 全球风格

添加新的天气特征

1. 添加功能 lib/weather-service.ts
2. 在中注册新工具 app/mcp/route.ts
3. 在中创建UI组件 app/components/
4. 更新 app/page.tsx 处理新数据类型

故障排除

“未配置API密钥”错误

• 验证 .env.local 存在于项目根目录中
• 检查变量名是否准确 OPENWEATHERMAP_API_KEY
• 添加环境变量后重新启动开发服务器

“找不到位置”错误

• 尝试使用国家代码的完整城市名称（例如“英国伦敦”）
• 检查城市名称的拼写
• 使用更具体的位置（美国/加拿大城市的州/省）

ChatGPT中未显示的小部件

• 确保您的应用程序部署到公共URL
• 验证MCP服务器URL是否以结尾 /mcp
• 检查ChatGPT是否启用了开发人员模式
• 查看ChatGPT设置中的连接状态

API利率限制问题

• 免费套餐：每天1000次通话
• 缓存减少了API调用（当前调用10分钟，预测调用30分钟）
• 考虑升级高流量应用程序的OpenWeatherMap计划

资源

• OpenAI应用SDK文档
• 模型上下文协议
• OpenWeatherMap API文档
• Next.js文档
• Tailwind CSS

许可证

麻省理工学院许可证-欢迎将此项目用作您自己的ChatGPT集成应用程序的模板！

贡献

欢迎投稿！请随时提交拉取请求。

支持

对于问题或疑问：

• 检查 故障排除 章节
• 审查 OpenWeatherMap API文档
• 在GitHub上打开一个问题

______________________________________________________________________

内置❤️ 使用Next.js、OpenAI应用程序SDK和OpenWeatherMap API