AI导哈

披萨交互工具服务器

一个基于OpenAI Apps SDK的交互式披萨主题工具服务器，提供五种不同类型的交互式小部件，用于在ChatGPT中展示和交互。

  • by dsouza-anush
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 dsouza-anush/pizzaz-mcp-heroku

使用说明

用于ChatGPT的Pizzaz MCP服务器

基于 OpenAI 应用程序SDK示例这个版本已经适应了Heroku的部署要求。

一个交互式模型上下文协议（MCP）服务器，为ChatGPT带来了丰富的披萨主题小部件。该服务器展示了OpenAI Apps SDK的全部功能，包括五种不同的交互式小部件类型。

特点/功能

这个MCP服务器提供了5个交互式工具，这些工具能在ChatGPT中渲染出精美的小部件：

  • 🗺️（地图图标） 披萨地图 - 互动地图，显示披萨店位置并用标记标注
  • 🎠 旋转木马 披萨旋转木马 - 可滑动的披萨店轮播图
  • 📸（表示拍照或相机的符号，可翻译为“拍照”或“相机”） 披萨专辑 - 相册画廊查看器
  • 📋（清单/待办事项列表） 披萨菜单 - 可滚动的列表视图
  • 🎥 披萨视频 - 视频播放器小部件

每个小部件都是完全可交互的，并展示了ChatGPT应用程序软件开发工具包（SDK）中可用的不同用户界面（UI）模式。

建筑学

这台服务器使用：

  • FastMCP - Python MCP服务器框架
  • FastAPI - 用于HTTP/SSE传输的Web框架
  • 模型上下文协议 - OpenAI连接工具与大型语言模型（LLM）的标准
  • OpenAI 应用程序开发工具包（SDK） - ChatGPT中控件渲染的框架

这些小工具由OpenAI的内容分发网络（CDN）提供服务persistent.oaistatic.com并在ChatGPT中将其渲染为可交互的iframe。

快速部署到Heroku

点击下面的按钮，一键将此MCP服务器部署到Heroku：

部署完成后，您的MCP服务器将可通过以下地址访问：

https://your-app-name.herokuapp.com/mcp

手动部署到Heroku

  1. 克隆此仓库：

    git clone https://github.com/dsouza-anush/pizzaz-mcp-heroku.git
cd pizzaz-mcp-heroku

  2. 创建一个Heroku应用：

    heroku create your-app-name

  3. 部署：

    git push heroku main

  4. 您的MCP终端将为：

    https://your-app-name.herokuapp.com/mcp

连接到ChatGPT

  1. 启用开发者模式 在ChatGPT中（需要访问权限）

  2. 添加您的MCP服务器：

    • 前往ChatGPT 设置 → 连接器
    • 点击 创建 并将您的Heroku URL添加到其中 /mcp 路径：
      https://your-app-name.herokuapp.com/mcp

  3. 测试小部件：

    • 在ChatGPT中开始聊天
    • 尝试：“给我看一张披萨地图”或“展示一个披萨旋转展示架”
    • 交互式小部件将直接在您的对话中呈现！

本地开发

  1. 安装依赖项：

    pip install -r requirements.txt

  2. 运行服务器：

    python main.py

  3. 本地测试：

    • 服务器运行于 http://localhost:8000
    • MCP终端： http://localhost:8000/mcp

  4. 使用 ngrok 在本地进行暴露（或：将本地服务通过 ngrok 公开） （用ChatGPT测试）：

    ngrok http 8000
    • 使用 ngrok URL + /mcp 在ChatGPT连接器中

项目结构

.
├── main.py              # MCP server implementation
├── requirements.txt     # Python dependencies
├── Procfile            # Heroku process configuration
├── runtime.txt         # Python version specification
├── app.json            # Heroku deploy button configuration
└── README.md           # This file

它是如何工作的

  1. 工具注册服务器在ChatGPT上注册了5个披萨小工具
  2. 工具调用当用户请求一个小部件时，ChatGPT会调用该工具
  3. 资源响应服务器返回指向预构建小部件资源的HTML
  4. 小部件渲染ChatGPT 在 iframe 中渲染 HTML，具有完全的交互性
  5. 用户交互用户可以点击、滚动和与小部件进行交互

小部件详情

每个小部件包含：

  • OpenAI 元数据将工具调用链接到小部件模板
  • HTML 模板兼容Iframe的HTML，使用来自CDN的CSS/JS
  • 结构化内容ChatGPT能够理解和参考的数据
  • 交互式用户界面带有状态管理的完整React组件

可选：添加身份验证

要在您的MCP服务器上添加OAuth认证：

heroku buildpacks:add https://github.com/heroku/heroku-buildpack-mcp-auth-proxy -a your-app-name

这个构建包增加了身份验证功能，以保护您的MCP端点。

了解更多

许可证

MIT 许可证 - 基于 OpenAI 的应用程序 SDK 示例

相关 MCP