Chat Gpt Test App

应用SDK示例库


此存储库展示了与 应用软件开发工具包，以及将一组组件作为工具公开的示例MCP服务器。 它旨在作为一个起点和灵感来源，为ChatGPT构建自己的应用程序。

注意：如果您使用的是Chrome浏览器，并且最近更新到版本142，则需要禁用 local-network-access 旗帜 查看小部件UI。

如何禁用它：

1. 首选chrome://flags/
2. 查找#本地网络访问检查
3. 将其设置为禁用

⚠️ 备注🚨 请确保在更改此标志后重新启动Chrome，以便更新生效。

MCP+Apps SDK概述

模型上下文协议（MCP）是一个开放规范，用于将大型语言模型客户端连接到外部工具、数据和用户界面。MCP服务器公开模型在对话期间可以调用的工具，并根据工具契约返回结果。这些结果可能包括额外的元数据，如内联HTML，Apps SDK使用这些元数据来呈现丰富的UI组件（小部件）以及辅助消息。

在Apps SDK中，MCP使服务器、模型和UI保持同步。通过标准化连线格式、身份验证和元数据，ChatGPT可以像对内置工具一样对连接器进行推理。Apps SDK的最小MCP集成实现了三个功能：

1. 列出工具 –您的服务器宣传它支持的工具，包括它们的JSON模式输入/输出契约和可选注释（例如， readOnlyHint).
2. 呼叫工具 –当模型选择工具时，它会发出 call_tool 带有与用户意图匹配的参数的请求。您的服务器执行操作并返回模型可以解析的结构化内容。
3. 返回小部件 除了结构化内容外，在响应元数据中返回嵌入式资源，以便Apps SDK可以在Apps SDK客户端（ChatGPT）中内联呈现接口。

由于该协议与传输无关，您可以通过服务器发送事件或流式HTTP承载服务器——Apps SDK支持这两种方式。

此演示中的MCP服务器强调了每个工具如何通过将结构化有效负载与 _meta.openai/outputTemplate 从MCP服务器返回的元数据。

存储库结构

• src/ –每个小部件示例的源代码。
• assets/ –运行构建步骤后生成HTML、JS和CSS包。
• shopping_cart_python/ –Python MCP服务器，演示如何 _meta["widgetSessionId"] 保持 widgetState 购物车小部件的各回合同步。
• pizzaz_server_node/ –MCP服务器使用官方TypeScript SDK实现。
• pizzaz_server_python/ –返回Pizzaz小部件的Python MCP服务器。
• solar-system_server_python/ –用于3D太阳系小部件的Python MCP服务器。
• kitchen_sink_server_node/ –厨房水槽小部件的节点MCP服务器。
• kitchen_sink_server_python/ –用于厨房水槽小部件的Python MCP服务器。
• authenticated_server_python/ –演示经过身份验证的工具调用的Python MCP服务器。
• build-all.mts –Vite构建编排器，为每个小部件入口点生成哈希包。

Pizzaz概述

此示例包含多个组件，显示了多种类型的视图和交互：列表视图、转盘视图、地图视图。它还包含一个显示交互式流程的“披萨店”和一个结账页面。

此示例使用 Apps SDK UI库 用于图像、按钮和徽章等简单组件。

厨房水槽小部件概述

厨房水槽的小样品显示了全部 window.openai 表面协同工作：

• 读取主机状态(toolInput, toolOutput, displayMode, theme, widgetState).
• 写入主机状态 setWidgetState.
• 使用以下命令从小部件调用另一个MCP工具 callTool.
• 使用主机助手，如 requestDisplayMode, openExternal，以及 sendFollowUpMessage.

将其用作如何将UI连接到MCP工具响应以及使用Apps SDK UI组件托管API的参考。

先决条件

• Node.js 18+
• pnpm（推荐）或npm/yarn
• Python 3.10+（适用于Python MCP服务器）
• 格式化预提交

安装依赖项

克隆存储库并安装工作区依赖项：

pnpm install
pre-commit install

使用npm还是yarn？使用首选客户端安装根依赖项，并相应地调整以下命令。

构建组件库

这些组件被捆绑到MCP服务器作为可重用UI资源的独立资产中。

pnpm run build

此命令运行 build-all.mts，生成版本 .html, .js，以及 .css 内部文件 assets/每个小部件都用它需要的CSS包装，这样你就可以直接托管捆绑包，或者用你自己的服务器运送它们。

要在本地迭代组件，您还可以启动Vite-dev服务器：

pnpm run dev

为静态资产提供服务

所有MCP服务器都希望从本地静态文件服务器提供捆绑的HTML、JS和CSS。每次构建后，在启动任何MCP进程之前启动服务器：

pnpm run serve

资产暴露于 http://localhost:4444 启用CORS，以便本地工具（包括MCP检查员）可以获取它们。

注： Python Pizzaz服务器缓存小部件HTML functools.lru_cache。如果在中重建或手动编辑文件 assets/，重新启动MCP服务器，使其接收更新的标记。

运行MCP服务器

该存储库附带了几个演示MCP服务器，突出显示了不同的小部件包：

• Pizzaz（节点和Python） –以披萨为灵感的工具和组件系列
• 太阳系（Python） –3D太阳系查看器
• 已验证（Python） –一组需要不同级别OAuth的工具
• 厨房水槽精简版（Node和Python） –演示工具输出、小部件状态的最小小部件+服务器配对， callTool，以及主机助手
• 购物车（Python） –演示如何使用的简单购物车小部件 widgetSessionId 在工具调用之间保持状态

Pizzaz节点服务器

cd pizzaz_server_node
pnpm start

Pizzaz Python服务器

python -m venv .venv
source .venv/bin/activate
pip install -r pizzaz_server_python/requirements.txt
uvicorn pizzaz_server_python.main:app --port 8000

经过身份验证的Python服务器

python -m venv .venv
source .venv/bin/activate
pip install -r authenticated_server_python/requirements.txt
uvicorn authenticated_python_server.main:app --port 8000

太阳系Python服务器

python -m venv .venv
source .venv/bin/activate
pip install -r solar-system_server_python/requirements.txt
uvicorn solar-system_server_python.main:app --port 8000

厨房水槽精简节点服务器

pnpm --filter kitchen-sink-mcp-node start

厨房水槽精简版Python服务器

python -m venv .venv
source .venv/bin/activate
pip install -r kitchen_sink_server_python/requirements.txt
uvicorn kitchen_sink_server_python.main:app --port 8000

购物车Python服务器

使用此示例了解如何 _meta["widgetSessionId"] 可以携带 widgetState 在工具调用之间，使模型和小部件共享同一个购物车。小部件将工具响应与之前的响应合并 widgetState，UI操作（如递增数量）会反馈到共享状态，因此助手始终可以看到最新的购物车。

python -m venv .venv
source .venv/bin/activate
pip install -r shopping_cart_python/requirements.txt
uvicorn shopping_cart_python.main:app --port 8000

\[！注意\] 在生产环境中，您应该在服务器端持久化购物车（参见 shopping_cart_python/README.md)，但这个演示展示了保持状态的机制 widgetSessionId.

______________________________________________________________________

您可以为所有Python服务器重用相同的虚拟环境——只需安装一次依赖项，然后运行所需的任何入口点。

在ChatGPT中进行测试

要将这些应用程序添加到ChatGPT，请启用 开发者模式，然后在“设置”>“连接器”中添加应用程序。

要添加本地服务器而不进行部署，可以使用以下工具 吸烟 将您的本地服务器暴露到互联网。

例如，一旦你的mcp服务器运行，你可以运行：

ngrok http 8000

您将获得一个公共URL，可用于在“设置”>“连接器”中将本地服务器添加到ChatGPT。

例如： https://.ngrok-free.app/mcp

\[！重要\] Python MCP SDK强制执行DNS重新绑定保护。在隧道传输（例如通过ngrok）时，请在启动任何Python服务器之前允许您的隧道主机： ``bash export MCP_ALLOWED_HOSTS=".ngrok-free.app" export MCP_ALLOWED_ORIGINS="https://.ngrok-free.app" ``

添加连接器后，您可以在ChatGPT对话中使用它。

您可以通过在“更多”选项中选择应用程序，将其添加到对话上下文中。

然后，您可以通过询问相关问题来调用工具。例如，对于Pizzaz应用程序，你可以问“城里最好的披萨是什么？”。

下一步

• 自定义小部件数据：在中编辑处理程序 pizzaz_server_node/src, pizzaz_server_python/main.py，或太阳系服务器从您的系统中获取数据。
• 创建自己的组件并将其添加到库中：将新条目放入 src/ 它们将由构建脚本自动拾取。

部署您的MCP服务器

您可以使用您选择的云环境来部署MCP服务器。

将其包含在环境变量中：

BASE_URL=https://your-server.com

这将用于为小部件生成HTML，以便它们可以从该托管url提供静态资产。

贡献

欢迎您打开问题或提交PR来改进此应用程序，但是请注意，我们可能不会审核所有建议。

许可证

该项目根据MIT许可证获得许可。看 许可证 了解详情。