My Widget

# ChatGPT Apps SDK 开发指南 ## 概述使用交互式小部件创建 ChatGPT 应用程序，在 ChatGPT 对话中呈现丰富的 UI。应用程序将 MCP 服务器（提供工具）与通过“window.openai” API 进行通信的嵌入式 HTML 小部件相结合。 ** ** ## window.openai API 参考小部件通过以下 API 与 ChatGPT 进行通信： ### sendFollowUpMessage（推荐操作）代表用户向 ChatGPT 发送后续提示： // 触发后续对话 if (window.openai?.sendFollowUpMessage) { 等待 window.openai.sendFollowUpMessage({ 提示：“帮我总结一下本章” }); } **用于**：建议后续步骤的操作按钮（总结、解释等） ### 工具输出从小部件交互中发回结构化数据： // 将数据发送回 ChatGPT if (window.openai?.toolOutput) { window.openai.toolOutput({ 行动：'chapter_selected'，章节：1、标题：“简介” }); } **用途**：选择、表单提交、反馈到工具响应中的用户选择。 ### 调用工具从小部件中调用另一个 MCP 工具： // 直接调用工具 if (window.openai?.callTool) { 等待 window.openai.callTool({ name: '阅读章节', 参数：{ 章节：2 } }); } **用途**：内容之间的导航、链接工具调用。 ** ** ## 关键：按钮交互性限制 **重要发现**：小部件按钮可能呈现为**静态 UI 元素**，而不是交互式 JavaScript 按钮。 ChatGPT 在沙盒 iframe 中呈现小部件，其中某些点击处理程序无法可靠地触发。 ### 什么有效 * `sendFollowUpMessage` \- 可靠触发后续提示 * 用于“toolOutput”调用的简单 onclick 处理程序 * CSS悬停效果和视觉反馈 ### 什么可能不起作用 * 复杂的交互式JavaScript（选择API等） * 来自按钮的多个链接工具调用 * `window.getSelection()` 用于文本选择功能 ### 推荐模式：建议按钮不要使用复杂的交互，而是使用建议提示的简单按钮：

<按钮类=“btn btn-primary”id=“summarizeBtn”> 📝 总结章节

<脚本> document.getElementById('summarizeBtn')?.addEventListener('click', async () => { if (window.openai?.sendFollowUpMessage) { 等待 window.openai.sendFollowUpMessage({ 提示：“帮我总结一下本章” }); } }); document.getElementById('explainBtn')?.addEventListener('click', async () => { if (window.openai?.sendFollowUpMessage) { 等待 window.openai.sendFollowUpMessage({ 提示：“解释本章的关键概念” }); } }); ** ** ## Architecture Summary ┌────────────────────────────────────────────────────────────────┐ │ ChatGPT UI │ │ ┌────────────────────────────────────────────────────────────┐│ │ │ 小工具 (iframe) │ │ │ │ HTML + CSS + JS │ │ │ 调用：window.openai.toolOutput({action: "...", ...}) │ │ │ └────────────────────────────────────────────────────────────┘│ │ │ │ │ ▼ │ │ ChatGPT 后端 │ │ │ │ │ ▼ │ │ MCP 服务器 (FastMCP + HTTP) │ │ - 工具：开卷、读章等 │ │ - 资源：小部件 HTML (text/html+skybridge) │ │ - 响应包括：_meta["openai.com/widget"] │ └────────────────────────────────────────────────────────────────┘ ** ** ## 快速入门 1. **使用 FastMCP 和小部件资源创建 MCP 服务器** 2. **定义使用 `window.openai.toolOutput` 的小部件 HTML** 3. **使用 `_meta["openai.com/widget"]` 添加响应元数据** 4. **通过 ngrok** 公开以进行 ChatGPT 访问 5. **在 ChatGPT 中注册** 开发者模式设置 ** ** ## 小部件 HTML 要求 ### 基本小部件模板 <头> <元字符集=“UTF-8”> My Widget

构建 Chatgpt 应用程序

包含技能