Chatgpt App Azure Function MCP

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_weather ChatGPT可以调用的工具
• 从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 sync

2.本地运行

# Start the MCP server with uv
uv run func start

服务器将于启动 http://localhost:7071 默认情况下。

3.使用MCP检验员进行测试

您可以使用 MCP检查员 要在本地测试服务器，请执行以下操作：

npx @modelcontextprotocol/inspector@latest http://localhost:7071/mcp

4.暴露于公共互联网（用于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

1. 打开ChatGPT设置→ 应用程序和连接器 → 高级设置
2. 启用 开发者模式
3. 导航至 设置 → 连接器
4. 点击 创建 添加新连接器
5. 输入您的开发隧道URL /mcp 路径： https://.devtunnels.ms/mcp
6. 命名您的连接器（例如“天气”）
7. 添加描述：“获取当前天气信息”
8. 点击 创建

要使用该应用程序：

1. 在ChatGPT中开始新的聊天
2. 点击 + 按钮并选择您的天气连接器
3. 问：“纽约的天气怎么样？”
4. 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 命令将：

1. 提供Azure资源（功能应用程序、存储等）
2. 将代码部署到Azure Functions
3. 输出部署URL（例如。， https://.azurewebsites.net)

部署后，使用Azure URL连接到ChatGPT /mcp 路径： https://.azurewebsites.net/mcp

将已部署的应用程序添加到ChatGPT

按照与中相同的步骤进行操作 本地开发-连接到ChatGPT，但请使用您的Azure部署URL：

1. 在ChatGPT设置中→ 连接器，单击 创建
2. 输入您的Azure URL /mcp 路径： https://.azurewebsites.net/mcp
3. 命名（例如“天气”）并添加描述
4. 点击 创建

然后通过开始一个新的聊天，添加你的连接器，并询问天气来测试它！

项目结构

.
├── 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 = True Azure功能兼容性
• 将天气小部件注册为资源 text/html+skybridge MIME 类型
• 定义 get_current_weather 带有OpenAI元数据的工具

运作原理

1. 用户询问ChatGPT“纽约的天气怎么样？”
2. ChatGPT解释：确定纽约的坐标（40.7128，-74.0060）
3. 调用您的工具：调用 get_current_weather 带纬度和经度
4. 服务器获取数据：您的Azure函数调用Open-Meteo API
5. 返回结构化数据：当前天气的JSON响应
6. 小部件渲染：ChatGPT显示包含天气信息的HTML小部件

使用的应用程序SDK功能

• 工具: @mcp.tool() 装饰器为ChatGPT定义可调用函数
• 资源: @mcp.resource() 将HTML小部件公开为 ui://widget/current-weather.html
• 元数据：标题、提示和调用消息的工具注释
• 输出模板：将工具响应链接到小部件进行渲染
• 结构化内容：返回文本和JSON以实现灵活的显示选项

安全与隐私

• API密钥：Open-Meteo（免费公共API）无需身份验证
• 数据收集：仅处理纬度/经度坐标
• 隐私：不存储或记录用户数据
• 内置身份验证：可以启用Azure应用服务身份验证以供生产使用

了解更多

• OpenAI应用SDK文档
• 模型上下文协议
• FastMCP框架
• Azure功能MCP托管
• 开放气象API

贡献

欢迎投稿！请随意：

• 报告错误或问题
• 建议新功能或改进
• 提交拉取请求

许可证

MIT许可证-请参阅 许可证 文件以获取详细信息。

致谢

• 与 OpenAI应用软件开发工具包
• 天气数据来自 开放天气
• 托管于 Azure功能