构建您自己的ChatGPT应用（本地运行）
I’m unable to retrieve the full article from the external link you provided. If you paste the text you’d like translated here, I’ll be happy to translate it into Simplified Chinese while preserving the formatting, markdown, and code blocks as requested.
介绍
ChatGPT 最近开放了其 Apps 功能的提交，允许开发者将第三方应用的交互式小部件直接嵌入对话中。这为提升用户体验、超越纯文本交互提供了新机会。
在本文中，我分享了探索此功能的经验，并提供了一个逐步教程，帮助你在本地构建并运行自己的 ChatGPT App，以便快速原型开发。
什么是 ChatGPT 应用？
ChatGPT 应用是一种交互式小部件，显示在聊天窗口中，可以由对话上下文自动触发，也可以由用户手动触发。它由三个主要组件组成：
MCP 服务器
后端，用于定义 工具（模型可以调用的函数）和 资源（ChatGPT 渲染的 UI 模板）。
小部件
在沙箱 iframe 中运行的 HTML，拥有自己的状态、事件处理，并通过 ChatGPT 注入的 window.openai 对象直接与您的后端通信。
关键方法包括：
window.openai.callTool()– 调用服务器上的工具。window.openai.sendFollowUpMessage()– 向聊天发送消息，以保持对话循环。
ChatGPT 主机
负责协调工具调用、渲染小部件并维护整体对话状态的 ChatGPT 界面。
工具定义示例
下面是一个可以在 MCP 服务器上注册的工具定义的简单示例。
{
"tool": "find_houses",
"description": "Finds houses by location and number of rooms",
"inputs": {
"location": { "type": "string", "required": true },
"number_rooms": { "type": "integer", "required": false }
},
"output": "ui://widget/list.html"
}- Description – 供 ChatGPT 判断何时触发该工具使用。
- Inputs – 描述必填和可选参数的模式。
- Output – 一个资源 URL，告诉 ChatGPT 使用返回的数据渲染哪个 UI 模板。
可视化流程
整体流程可以可视化为：
- ChatGPT 根据对话判断需要使用工具。
- ChatGPT 在小部件中调用
window.openai.callTool()。 - MCP Server 执行工具逻辑并返回数据。
- ChatGPT 在小部件 iframe 中渲染指定的 UI 资源（例如
list.html）。 - 小部件可根据需要发送后续消息或进一步调用工具。
示例应用仓库结构
用于本地测试的示例应用遵循以下简洁布局：
chatgpt-app/
├─ public/
│ └─ widget.html
├─ server.js
├─ package.json
└─ README.mdpublic/widget.html– iframe UI。server.js– 注册工具并提供资源的 MCP 服务器。package.json– 项目元数据和脚本。
您可以克隆原帖中提供的开源仓库（链接在原文中），并根据自己的逻辑调整这些文件。
创建应用
-
初始化项目 并安装依赖：
npm install -
启动本地 MCP 服务器（开发模式）：
npm run dev
通过 HTTPS 暴露本地服务器
ChatGPT 需要一个 HTTPS URL 来访问您的服务器。对于本地开发，请使用 ngrok：
ngrok http 8787复制生成的 URL（例如 https://abcd-1234.ngrok.app），并在其后追加 /mcp。在 ChatGPT 中注册应用时将使用此完整 URL。
将应用连接到 ChatGPT
-
打开 Settings → Apps → Advanced settings → Developer mode 并将其切换为开启。
-
前往 Settings → Apps → Create App。
-
在创建表单中，将 Connector URL 设置为带有
/mcp的 ngrok 地址，例如：https://abcd-1234.ngrok.app/mcp
保存连接器。ChatGPT 现在即可与您的 MCP 服务器通信。
触发应用
一旦连接器建立，你就可以在对话中调用该应用（例如，提出与工具描述相匹配的问题）。小部件将以内联方式出现，你可以按设计进行交互。
学习与考虑
- 缓存 – 在开发过程中，我常发现删除连接器并重新创建比尝试清除缓存的 UI 或元数据更快。
- 状态管理 – 过度依赖工具调用进行状态更新会导致不必要的重新渲染并使调试更困难。将大部分 UI 状态保存在部件内部本地可以获得更可靠的体验。
- 生产就绪 – 本教程侧重于本地原型制作。上线前，需要处理：
- 安全性和身份验证
- 强健的错误处理
- 幂等调用、速率限制以及隐私问题
请参阅官方 OpenAI 文档以获取最佳实践。
结论
拥有超过 8 亿的每周活跃用户，ChatGPT Apps 为开发者提供了巨大的机会。构建本地原型非常简单，这里展示的概念可以作为更复杂、生产级集成的基础。
你怎么看？这只是另一个功能，还是你看到开发自己的 ChatGPT App 的潜力？