第一个冒烟测试：“Hello widget”和 openExternal

1. 什么是 ChatGPT App 的冒烟测试

在常见的 Web 开发语境中，冒烟测试就是最基本的检查——“系统还活着吗？” 页面能打开，按钮不会崩，没出现致命错误。

在 ChatGPT Apps 的世界里，冒烟测试会更有趣一些，因为链路上同时涉及多个环节：

对我们来说，一个理想的冒烟测试意味着：

• 小部件能在 ChatGPT 内部无错误地渲染；
• 基础的交互正常（例如点击按钮后能打开外部链接）；
• 浏览器控制台和开发服务器日志里没有一片“红色雪崩”。

重要提示：在这个阶段，我们还不检查 MCP 工具，不做压力测试，也不计算 Token 成本。我们的目标朴素而务实：证明“代码 → Next.js → 隧道 → ChatGPT → 用户”这条链路能够闭环。

可以把它想象成这样一张表：

2. 我们的教学 App：简单的“Hello GiftGenius”

在本课程中，我们会逐步构建 GiftGenius——一个礼物选品助手。在当前这一步，它还不会选礼物，但至少可以礼貌地打个招呼，并展示一个“了解更多”的链接。

我们需要一个最小但真实的小部件：没有复杂逻辑，但包含可运行的 React 代码。

一个最简单的小部件组件可以长这样（名称和样式你可以自行调整，这里先使用课程计划中的基础版）：

// app/widget/page.tsx
\’use client\’;

export default function GiftGeniusWidget() {
return (
<main style={

{ padding: 16, fontFamily: \’system-ui, sans-serif\’ }}>
<h1 style={

{ fontSize: 24, marginBottom: 8 }}>
Hello from GiftGenius
</h1>
<p style={

{ marginBottom: 16 }}>
这是你的第一个 ChatGPT App。接下来我们会教它挑选礼物。
</p>
</main>
);
}

几个重要的注意点。

首先，文件开头的指令 \’use client\’; 会把组件标记为客户端组件。没有它，Next.js 会把文件当作服务端组件处理，你将无法使用 window、事件处理器 onClick，以及任何浏览器 API。

其次，这就是一个普通的 React 组件。你看不到任何“Apps SDK 的魔法”——这很坦诚。它之所以最终出现在 ChatGPT 里，所有“魔法”都藏在 MCP 服务器的配置以及那个返回小部件 URL 的工具里。我们稍后再处理这些内容，现在只关心 UI。

3. 把小部件嵌入模板并运行

在用于 Apps SDK 的官方 Next.js 模板里，小部件页面通常已经存在；你可以直接修改，或者按需在相应路由下新建页面（例如 /widget）。

假设你已经有了 app/widget/page.tsx，并把其内容替换为上面