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

1. 创建一个Heroku应用：

   heroku create your-app-name

1. 部署：

   git push heroku main

1. 您的MCP终端将为：

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

连接到ChatGPT

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

- 查看 OpenAI开发者模式指南

1. 添加您的MCP服务器：

- 前往ChatGPT 设置 → 连接器 - 点击 创建 并将您的Heroku URL添加到其中 /mcp 路径：

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

1. 测试小部件：

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

本地开发

1. 安装依赖项：

   pip install -r requirements.txt

1. 运行服务器：

   python main.py

1. 本地测试：

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

1. 使用 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端点。

了解更多

• OpenAI 应用程序SDK文档
• 模型上下文协议
• OpenAI 应用程序SDK示例
• FastMCP 文档

许可证

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