课时

本讲解 ChatGPT Apps 中小部件的沙盒是如何工作的：为什么它不是“在 iframe 里的普通网站”，origin/sandbox/CSP 会带来哪些限制，如何通过 window . openai 与宿主安全通信，以及为何在 UI 层更应该使用 React 钩子（ useWidgetProps、 useWidgetState、 useOpenAIGlobal），而不是直接操作全局对象。还将讨论“小部件 ↔ ChatGPT ↔ MCP/服务器”的职责边界、状态存储与常见错误。

本讲解如何将你的 ChatGPT App 的 UI“融入”聊天的限制：如何读取并切换 displayMode（inline/fullscreen/PiP），在不产生“双重滚动”的情况下尊重 maxHeight 限制，通过 notifyIntrinsicHeight () 同步高度，适配 theme，并为桌面/移动端构建稳健的 layout。

在本讲中我们将拆解 ChatGPT Apps 的状态地图并做实战：哪里存放 authoritative 业务数据（通过 MCP 和 toolOutput）、哪里放短暂的 UI（本地 React useState），以及在哪些情况下需要消息级别的持久 state（通过 useWidgetState 使用 widgetState）。另外会单独讨论工具输入（ toolInput）、元数据（ toolResponseMetadata / _meta）、“loading / empty / error” 模式、向导步骤与常见错误。

解析什么是 ChatGPT App 中的 follow‑up，为什么点击小部件会变成新的用户消息，为什么多数情况下更应通过 useSendMessage/ sendFollowUpMessage 发送文本而不是直接调用 tool，“conversational sandwich”（pre‑text → 小部件 → post‑interaction）的结构，以及如何将 widgetState 与聊天历史同步。最后给出设计高质量 follow‑up 的原则与常见错误。

讲解 ChatGPT Apps 中“沙盒小部件”如何与外部世界通信：通过 openExternal（以及用 useOpenExternal 代替 window. open）进行安全导航， window. fetch 的限制与陷阱，为什么像 "/api/..." 这样的相对路径会在宿主环境内失效，以及由此推导出的“瘦 UI — 厚后端”架构，重点依赖 MCP/ callTool。