天气人工智能系统 - 完整安装指南
一个集Claude AI于一体的综合天气系统，具备REST API、MCP服务器和美观的React用户界面。您可以使用自然语言询问天气问题，并获得格式丰富的AI驱动回复。
🌟 系统概述
这个项目由四个相互关联的服务组成：
- 🌤️ 天气API - 用于连接Open-Meteo获取天气数据的REST API
- 🔗 天气MCP服务器 - 具有多个接口的模型上下文协议服务器
- Claude AI 集成 - 用于天气查询的自然语言处理
- 🎨 BlockNote 用户界面 - 精美的React界面，支持富文本编辑
🚀 快速入门（所有服务）
先决条件
- Node.js 18及以上版本 已安装
- Anthropic API密钥 为Claude AI（在这里获取一个)
- Git 用于克隆仓库
1. 克隆并设置
git clone https://github.com/thomasdegan/weather-ai-system.git
cd weather-ai-system2. 安装依赖项
# Install Weather API dependencies
cd weather-api
npm install
# Install Weather MCP dependencies
cd ../weather-mcp
npm install
# Install BlockNote UI dependencies
cd ../blocknoteUI
npm install3. 配置环境变量
天气API （可选 - 开箱即用）：
cd weather-api
cp env.example .env
# Edit .env if needed (defaults work fine)天气MCP服务器:
cd weather-mcp
cp env.example .env
# Edit .env to match your setup配备Claude AI的BlockNote用户界面:
cd blocknoteUI
cp env.example .env
# Edit .env with your Anthropic API keyblocknoteUI 需要的 .env 配置：
# Claude AI Configuration
VITE_ANTHROPIC_API_KEY=your_anthropic_api_key_here
VITE_CLAUDE_PROXY_URL=http://localhost:3003
# Server Environment Variables (for proxy server)
ANTHROPIC_API_KEY=your_anthropic_api_key_here
WEATHER_API_URL=http://localhost:3001
CLAUDE_PROXY_PORT=30034. 启动所有服务
打开4个终端窗口/标签页：
1号航站楼 - 天气API：
cd weather-api
npm start✅ 天气API正在运行于 http://localhost:3000
2号航站楼 - 天气MCP HTTP服务器：
cd weather-mcp
npm run http✅ Weather MCP HTTP 服务器正在运行于 http://localhost:3001
3号航站楼 - Claude 代理服务器：
cd blocknoteUI
npm run proxy✅ Claude 代理服务器正在运行于 http://localhost:3003
4号航站楼 - BlockNote 用户界面：
cd blocknoteUI
npm run dev✅ BlockNote UI 运行于 http://localhost:3002
5. 访问系统
打开您的浏览器： http://localhost:3002
尝试这些自然语言查询：
- “纽约的天气怎么样？”
- “给我一份伦敦的5天天气预报”
- “10001地区的天气怎么样？”
- “比较纽约和洛杉矶的天气”
- “迈阿密有天气预警吗？”
- “纽约目前有哪些生效的天气预警？”
- “给我显示英国伦敦的天气预警”
📊 服务架构
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ BlockNote UI │ │ Claude Proxy │ │ Weather API │
│ (Port 3002) │◄──►│ (Port 3003) │◄──►│ (Port 3000) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ User Interface │ │ Claude AI │ │ Open-Meteo │
│ Natural Lang │ │ Processing │ │ Weather Data │
└─────────────────┘ └─────────────────┘ └─────────────────┘🔧 个性化服务设置
天气API设置
目的： REST API 提供来自 Open-Meteo 的天气数据
快速入门：
cd weather-api
npm install
npm start特点：
- 当前天气及预报
- 无需API密钥
- Swagger 文档位于
http://localhost:3000/docs
见： weather-api/README.md（文件说明） 以获取详细文档
天气MCP服务器设置
目的： 具有多个接口的模型上下文协议服务器
快速入门：
cd weather-mcp
npm install
npm run http # HTTP API
# OR
npm start # MCP server for Claude Desktop
# OR
npm run cli # CLI tool特点：
- HTTP API接口
- 用于命令行使用的CLI工具
- 为Claude Desktop进行MCP集成
见： weather-mcp/README.md（可译为：天气-MCP/README.md文件，或根据上下文简化为“天气模块/README.md”） 用于详细文档说明
BlockNote 用户界面设置
目的： 集成Claude AI的React用户界面，支持自然语言天气查询
快速入门：
cd blocknoteUI
npm install
# Configure .env with your Anthropic API key
npm run proxy # Start Claude proxy server
npm run dev # Start React UI特点：
- 自然语言天气查询
- Claude AI集成
- 带有BlockNote的富文本编辑器
- 漂亮的天气格式
见： blocknoteUI/README.md（注：此文件名通常表示一个名为“blocknoteUI”的项目中的“README”文件，其内容为说明或指南，但文件名本身在中文中不直接翻译，保持原样） 用于详细文档说明
🎯 使用示例
自然语言查询
当前天气：
- “华盛顿特区的天气怎么样？”
- “邮编10001那里的天气怎么样？”
- “伦敦的温度是多少？”
预测：
- “给我东京接下来5天的天气预报”
- “本周纽约的天气预报怎么样？”
- “给我看看巴黎接下来3天的天气”
比较：
- “比较纽约和洛杉矶的天气”
- “迈阿密和西雅图哪个城市更暖和？”
API终端节点
天气API：
# Current weather
curl "http://localhost:3000/api/weather/current?city=New York&units=metric"
# Forecast
curl "http://localhost:3000/api/weather/forecast?city=London&days=5&units=metric"
# Weather alerts
curl "http://localhost:3000/api/weather/alerts?city=Miami"天气MCP HTTP API:
# Current weather
curl "http://localhost:3001/api/current?location=New York&units=metric"
# Forecast
curl "http://localhost:3001/api/forecast?location=London&days=5&units=metric"
# Weather alerts
curl "http://localhost:3001/api/alerts?location=Miami"🔍 故障排除
常见问题
无法连接到天气API
- 确保天气API在3000端口上运行
- 检查所有服务是否按正确的顺序启动
- 验证环境变量是否设置正确
2. “Claude AI无响应”
- 请检查您的Anthropic API密钥是否有效
- 确保Claude代理服务器正在端口3003上运行
- 检查浏览器控制台中的CORS错误
3. “未找到位置”
- 尝试不同的位置格式（城市名、邮政编码、坐标）
- 对于国际位置，请尝试添加国家代码
- 确保位置存在且拼写正确
4. 端口冲突
- 天气API：端口3000
- 天气MCP HTTP：端口3001
- Claude 代理：端口 3003
- BlockNote UI：端口 3002（Vite 开发服务器）
服务健康检查
检查所有服务是否正在运行：
# Weather API
curl http://localhost:3000/api/weather/health
# Weather MCP HTTP Server
curl http://localhost:3001/api/weather-health
# Claude Proxy Server
curl http://localhost:3003/health🛠️ 开发
项目结构
weather/
├── weather-api/ # REST API for weather data
│ ├── src/
│ │ ├── services/ # Weather service implementation
│ │ ├── routes/ # API route handlers
│ │ └── index.js # Main application
│ ├── package.json
│ └── README.md
├── weather-mcp/ # MCP server with multiple interfaces
│ ├── src/
│ │ ├── services/ # Weather API client
│ │ ├── index.js # MCP server
│ │ ├── http-server.js # HTTP API server
│ │ └── cli.js # Command line interface
│ ├── package.json
│ └── README.md
├── blocknoteUI/ # React UI with Claude AI
│ ├── src/
│ │ ├── services/ # API integration services
│ │ ├── components/ # React components
│ │ ├── AppClaude.jsx # Main Claude AI app
│ │ └── claude-proxy-server.js # Claude proxy server
│ ├── package.json
│ └── README.md
└── README.md # This file开发脚本
天气API：
cd weather-api
npm run dev # Development with auto-restart
npm test # Run tests天气管理面板（或天气控制面板，根据具体上下文可能有所不同）
cd weather-mcp
npm run http-dev # HTTP API with auto-restartBlockNote 用户界面：
cd blocknoteUI
npm run dev # React dev server
npm run proxy-dev # Claude proxy with auto-restart
npm run build # Production build📝 配置
环境变量摘要
天气API (weather-api/.env)：
WEATHER_BASE_URL=https://api.open-meteo.com/v1
PORT=3000
NODE_ENV=development天气气象控制面板（Weather MCP） (weather-mcp/.env):
WEATHER_API_URL=http://localhost:3000
WEATHER_API_TIMEOUT=10000
HTTP_PORT=3002
MCP_SERVER_NAME=weather-mcp
MCP_SERVER_VERSION=1.0.0BlockNote 用户界面 (blocknoteUI/.env）：
# Frontend
VITE_WEATHER_API_URL=http://localhost:3002
VITE_ANTHROPIC_API_KEY=your_anthropic_api_key
VITE_CLAUDE_PROXY_URL=http://localhost:3003
VITE_DEV_MODE=true
# Backend (Claude Proxy)
ANTHROPIC_API_KEY=your_anthropic_api_key
WEATHER_API_URL=http://localhost:3001
CLAUDE_PROXY_PORT=3003🚀 部署
生产构建
天气API：
cd weather-api
npm start天气监控面板（或天气管理控制面板，具体根据上下文确定MCP的含义）
cd weather-mcp
npm run http # HTTP API modeBlockNote 用户界面：
cd blocknoteUI
npm run build
npm run previewDocker 支持（可选）
每个服务都可以容器化：
# Example Dockerfile for Weather API
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]📊 API文档
天气API端点
- 当前天气：
GET /api/weather/current - 天气预报：
GET /api/weather/forecast - 天气预警：
GET /api/weather/alerts - 健康检查：
GET /api/weather/health - API文档：
http://localhost:3000/docs
天气MCP HTTP终端点
- 当前天气：
GET /api/current - 天气预报：
GET /api/forecast - 天气预警：
GET /api/alerts - 健康检查：
GET /api/weather-health
Claude AI集成
- 天气查询：
POST /api/claude/weather - 自然语言处理： Claude AI能够理解天气相关问题
- 工具集成： 天气API工具，Claude可使用
🤝 贡献
- 为仓库创建分支（或“克隆仓库”）
- 创建一个特性分支
- 进行你的更改
- 与所有服务进行全面测试
- 提交一个拉取请求
📞 支持
对于问题和疑问：
- 查看上面的故障排除部分
- 查看各个服务的README文件
- 确保所有服务均正常运行
- 检查浏览器控制台中的错误
- 验证环境变量是否设置正确
特定服务的文档：
📄 许可证
麻省理工学院许可证
🔗 仓库
- GitHub：
- 问题： 报告错误或提出功能需求
- 拉取请求（Pull Requests）： 为项目做贡献
注： 替换 YOUR_USERNAME 使用您实际的GitHub用户名。🎯 快速参考
启动所有服务：
# Terminal 1
cd weather-api && npm start
# Terminal 2
cd weather-mcp && npm run http
# Terminal 3
cd blocknoteUI && npm run proxy
# Terminal 4
cd blocknoteUI && npm run dev接入点：
- BlockNote 用户界面：
http://localhost:3002 - 天气API文档：
http://localhost:3000/docs - 天气MCP HTTP：
http://localhost:3001
测试查询：
- “纽约的天气怎么样？”
- “给我一份伦敦5天的天气预报”
- “比较迈阿密和西雅图的天气”