ChatGPT天气应用程序
一个ChatGPT应用程序，通过交互式小部件提供当前天气信息，该小部件使用 OpenAI应用软件开发工具包 并部署到Azure Functions。
概述
此应用程序演示了如何使用模型上下文协议（MCP）和FastMCP Python框架构建ChatGPT应用程序。它从 开放气象API 并将其直接显示在ChatGPT对话中的交互式HTML小部件中。
特性
- 自然语言界面：向ChatGPT询问任何地点的天气（例如，“西雅图的天气怎么样？”）
- 交互式小部件：查看设计精美的卡片中的天气数据，其中包含：
- 当前温度与天气表情符号 - 天气状况描述 - 风速与风向 - 位置坐标 - 上次更新时间戳
- 实时数据：从Open-Meteo API获取当前天气
- Azure上的自托管：作为Azure Functions上的远程MCP服务器部署
建筑
该应用程序由两个主要组件组成：
1.MCP服务器(main.py)
- 内置于 FastMCP Python框架
- 暴露a
get_current_weatherChatGPT可以调用的工具 - 从Open-Meteo API返回结构化天气数据
- 配置为无状态HTTP传输
2.交互式小部件(current_weather_widget.html)
- 在ChatGPT中呈现的HTML/CSS/JavaScript组件
- 使用OpenAI Apps SDK(
window.openai)用于集成 - 显示带有WMO天气代码解释的天气数据
- 针对ChatGPT界面优化的响应式设计
先决条件
- Python 3.12或更高版本
- 紫外线 -快速Python包安装程序
- Azure功能核心工具 v4.5.0或更高版本
- Azure开发者命令行界面（azd）
- ChatGPT帐户 开发人员模式已启用
本地开发
1.安装依赖项
# Install uv if you haven't already
curl -LsSf https://astral.sh/uv/install.sh | sh
# Install dependencies and create virtual environment
uv sync2.本地运行
# Start the MCP server with uv
uv run func start服务器将于启动 http://localhost:7071 默认情况下。
3.使用MCP检验员进行测试
您可以使用 MCP检查员 要在本地测试服务器，请执行以下操作：
npx @modelcontextprotocol/inspector@latest http://localhost:7071/mcp4.暴露于公共互联网（用于ChatGPT测试）
在开发过程中，使用 dev隧道 要公开您的本地服务器，请执行以下操作：
# Install devtunnel CLI if you haven't already
# See: https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started
# Login to dev tunnels (required on first use)
devtunnel user login
# Create a tunnel and host on port 8000
devtunnel host -p 7071 --allow-anonymous该命令将输出公共HTTPS URL（例如。， https://.devtunnels.ms).将此URL与 /mcp 连接到ChatGPT时的路径。
5.连接到ChatGPT
- 打开ChatGPT设置→ 应用程序和连接器 → 高级设置
- 启用 开发者模式
- 导航至 设置 → 连接器
- 点击 创建 添加新连接器
- 输入您的开发隧道URL
/mcp路径：https://.devtunnels.ms/mcp - 命名您的连接器（例如“天气”）
- 添加描述：“获取当前天气信息”
- 点击 创建
要使用该应用程序：
- 在ChatGPT中开始新的聊天
- 点击 + 按钮并选择您的天气连接器
- 问：“纽约的天气怎么样？”
- ChatGPT将调用您的工具并显示交互式天气小部件
部署到Azure
使用Azure Developer CLI（azd）将您的应用部署到Azure：
# Login to Azure
azd auth login
# Provision and deploy (first time)
azd up
# For subsequent deployments (code changes only)
azd deploy这 azd up 命令将：
- 提供Azure资源（功能应用程序、存储等）
- 将代码部署到Azure Functions
- 输出部署URL（例如。，
https://.azurewebsites.net)
部署后，使用Azure URL连接到ChatGPT /mcp 路径： https://.azurewebsites.net/mcp
将已部署的应用程序添加到ChatGPT
按照与中相同的步骤进行操作 本地开发-连接到ChatGPT，但请使用您的Azure部署URL：
- 在ChatGPT设置中→ 连接器，单击 创建
- 输入您的Azure URL
/mcp路径：https://.azurewebsites.net/mcp - 命名（例如“天气”）并添加描述
- 点击 创建
然后通过开始一个新的聊天，添加你的连接器，并询问天气来测试它！
项目结构
.
├── main.py # MCP server with FastMCP
├── current_weather_widget.html # Interactive weather widget UI
├── host.json # Azure Functions configuration
├── pyproject.toml # Python project metadata and dependencies
├── uv.lock # uv lock file for reproducible builds
├── azure.yaml # Azure Developer CLI configuration
└── infra/ # Azure infrastructure (Bicep files)
├── main.bicep
├── main.parameters.json
└── app/
├── app.bicep
├── entra.bicep
├── rbac.bicep
└── vnet.bicep关键配置文件
host.json
将Azure Functions配置为作为MCP服务器的自定义处理程序运行：
{
"version": "2.0",
"configurationProfile": "mcp-custom-handler",
"customHandler": {
"description": {
"defaultExecutablePath": "python",
"arguments": ["main.py"]
},
"port": "8000"
}
}main.py
MCP服务器：
- 集合
fastmcp.settings.stateless_http = TrueAzure功能兼容性 - 将天气小部件注册为资源
text/html+skybridgeMIME 类型 - 定义
get_current_weather带有OpenAI元数据的工具
运作原理
- 用户询问ChatGPT“纽约的天气怎么样？”
- ChatGPT解释：确定纽约的坐标（40.7128，-74.0060）
- 调用您的工具：调用
get_current_weather带纬度和经度 - 服务器获取数据：您的Azure函数调用Open-Meteo API
- 返回结构化数据：当前天气的JSON响应
- 小部件渲染：ChatGPT显示包含天气信息的HTML小部件
使用的应用程序SDK功能
- 工具:
@mcp.tool()装饰器为ChatGPT定义可调用函数 - 资源:
@mcp.resource()将HTML小部件公开为ui://widget/current-weather.html - 元数据：标题、提示和调用消息的工具注释
- 输出模板：将工具响应链接到小部件进行渲染
- 结构化内容：返回文本和JSON以实现灵活的显示选项
安全与隐私
- API密钥：Open-Meteo（免费公共API）无需身份验证
- 数据收集：仅处理纬度/经度坐标
- 隐私：不存储或记录用户数据
- 内置身份验证：可以启用Azure应用服务身份验证以供生产使用
了解更多
贡献
欢迎投稿！请随意：
- 报告错误或问题
- 建议新功能或改进
- 提交拉取请求
许可证
MIT许可证-请参阅 许可证 文件以获取详细信息。
致谢
- 与 OpenAI应用软件开发工具包
- 天气数据来自 开放天气
- 托管于 Azure功能