几个月前，如果你让 ChatGPT 帮你订一张飞往巴黎的机票，你会得到一份有用的推荐清单：航空公司故障、价格范围，也许还有一些时间安排的小贴士。然后你离开 ChatGPT，打开旅游网站，从零开始搜索。

现在你可以说，“帮我找一张从多伦多飞往巴黎的好航班”，互动小工具会直接出现在你的对话中。你可以浏览航班选项、比较价格、预订，这一切都无需离开聊天。

策略很简单：不再是 ChatGPT 通过文本回复并将用户带到其他地方，而是直接在对话中显示第三方应用的互动小部件，允许用户在 ChatGPT 内部进行交易（随着时间推移，OpenAI 很可能会从交易中抽取一小部分）。

ChatGPT 的应用合作伙伴已包括 Adobe、DoorDash、Canva、Figma、Booking.com、Coursera、Expedia、Spotify 和 Zillow 等大型公司。世界上一些最大的公司正押注聊天将成为其产品的主要界面。

ChatGPT 应用代表了一种罕见的分发机会，这种机会大约每十年才出现一两次。 最后的可比时刻是 2008 年的 App Store、2000 年代初 SEO 的兴起，以及也许 Shopify 的应用生态系统。当一个新的分销渠道大规模开启时，那些早期迁移的公司会形成难以改掉的习惯。这在光谱的两端都创造了机会。对于企业来说，ChatGPT 应用是你现有应用之外的新分发渠道。对于独立创业者来说，这是一个无需营销预算就能构建微应用并获得分发的机会。入门门槛很低（开发一个简单的应用只需几周时间），但覆盖范围极大。

在这篇文章中，我将解析用户如何找到并使用你的应用，这些应用在幕后如何运作，以及如何创建你自己的第一个 ChatGPT 应用。让我们一起打造。

用户如何找到并使用 ChatGPT 应用

ChatGPT 应用引入了与传统应用商店不同的交互模式。在大多数应用商店，你必须找到应用，安装它，只有之后才能使用。ChatGPT 支持这种模式，但更有趣的模式是上下文浮现。在不久的将来（而且大多数人还没完全理解这一点），ChatGPT 会根据用户的对话自动推荐应用 。询问旅行计划时，Expedia 就会出现。提到你需要设计，Canva 就得用。问点菜，Instacart 购物车就出现了。用户无需知道有哪些应用可用;模型将意图与相关工具相匹配。这有可能成为产品增长的新渠道。

ChatGPT 应用有三种格式，作为应用构建者，考虑哪种格式更符合你希望为用户创造的应用体验非常重要。我稍后会详细说明，每种类型都利用模型上下文协议（MCP）将你的应用交付给 ChatGPT。

内联模式将卡片和列表直接嵌入对话流程中。这是默认设置，适用于产品列表、搜索结果或任何与 ChatGPT 回答自然相匹配的内容。以下是 Expedia 上酒店列表的一个简要示例：

全屏模式占据了整个屏幕。这对地图、仪表盘或需要更大空间的复杂工作流程来说最为理想。当用户浏览 AllTrails 地图或在 Canva 中编辑设计时，全屏为他们提供了工作空间。

画中画模式在用户聊天时会显示一个小的悬浮窗口。这非常适合音乐播放器、定时器或任何用户在后台运行的设备，同时他们在处理其他事情时也需要继续运行。这里，Coursera 正在播放视频，而我则继续聊天。

有一个重要的限制需要理解：每条消息只能有一个小部件。如果用户说“预订餐厅并叫 Uber”，ChatGPT 一次只能显示一个应用。这意味着用户按顺序完成多步骤任务，而非并行完成。

幕后运作方式

当你准备构建一个 ChatGPT 应用时，首先了解其架构非常重要。

每个 ChatGPT 应用都包含三个部分：

1. ChatGPT 内部的对话： 模型会解读用户的请求，并决定某个应用是否有帮助。
2. 应用的“工具”： 后端服务器和 API 告诉 ChatGPT 应用能做什么。
3. 面向用户的小部件： 它出现在用户聊天中，采用网页技术（通常是 React）构建，并在 ChatGPT 内部的安全沙箱中运行。

让我们深入探讨#2，应用的工具，因为这正是其运作的核心。工具只是 ChatGPT 调用的一个函数。当你构建应用时，你会定义工具，比如 search_restaurants、book_ticket 或 create_playlist。每个工具都有名称和描述，帮助 ChatGPT 理解何时使用以及接受哪些参数。当用户说出相关内容时，ChatGPT 会读取这些描述并决定调用哪个工具。

流程是这样的：用户说：“帮我找到布鲁克林的意大利餐厅。”ChatGPT 查看可用的工具，发现一个叫 search_restaurants 的工具，描述类似“按地点和菜系搜索餐厅”，并用 {location：“Brooklyn”， cuisine： “Italian”} 来调用。你的服务器负责搜索，返回结果，并且可以选择添加一个小部件来显示结果。ChatGPT 在与用户的聊天中渲染了该小部件。

用户与小部件互动——比如点击餐厅预订。这种点击可能会触发后续工具调用。你的小部件随后会向 ChatGPT 发送一条消息，说“用户选择 restaurant_id：1241”，ChatGPT 可以调用其他工具，比如 book_reservation（），来保存他们的预订。对话继续，小部件和人工智能协同工作。

这形成了一个循环：用户对 ChatGPT 说话→ ChatGPT 调用一个工具→控件渲染→用户与控件交互→ChatGPT 调用另一个工具。关键的见解是，ChatGPT 负责协调整个过程。它决定何时调用工具、传递哪些参数以及如何响应用户作。你的应用只是暴露能力并渲染界面。

MCP 是连接这一切的基础设施。MCP 和 API 非常相似（我在这里讲过）， 但重新构建了 AI 代理。它提供了一种通用的方式，将应用与人工智能助手连接起来。Anthropic 于 2024 年 11 月创建了 MCP，OpenAI 于 2025 年 3 月将其应用于 ChatGPT 及其开发者工具。去年十一月，两家公司宣布正在合作开发 MCP Apps，这是一种标准化的方式，可以为协议添加交互式界面。

如果你听说过人工智能代理，这个词可能听起来很熟悉。ChatGPT 应用和 AI 代理共享相同的核心模式：一个能够调用外部工具完成任务的 AI 模型。区别在于谁在掌控局面。当你构建自己的 AI 代理时，你控制一切——模型、提示、编排逻辑、错误处理。你决定何时调用工具以及如何处理结果。

正如你读到这里时可能在想的，工具也代表了一种新的 SEO（或者说是 AEO？）。 根据工具的名称和描述，ChatGPT 可以向用户推荐应用，帮助解决他们的需求，比如制作幻灯片或生成财务模型。拥有准确且能独特识别应用的工具描述，将帮助 ChatGPT 用户在正确的语境中找到并使用你的应用。

打造你的第一个 ChatGPT 应用

现在你已经了解了基本结构，按照本指南作，30分钟内就能搭建一个应用。

选项一：再攀爬

Replit 代理并不是 ChatGPT 应用的专家，所以入门 Replit 最简单的方式是导入一个现有的应用。我推荐 OpenAI 的官方示例。为了节省时间，我创建了一个 Replit 项目，你可以复制，完成以下所有步骤，点击这里 。我强烈推荐使用我的项目;这至少能帮你节省 30 分钟。

如果你想从头开始，可以访问 Replit，选择“从 GitHub 导入”，然后粘贴这个 URL：https://github.com/openai/openai-apps-sdk-examples

随后，Replit 代理会帮你安排项目——大约需要 5 到 10 分钟。

项目运行后，你应提示以下提示：

I want to connect ChatGPT to my MCP server. Please set this up:

Bundle the React UI widgets - The project uses Vite to build React components into standalone widget bundles. Run pnpm run build with BASE_URL set to the full Replit domain URL. Each widget (in src/*/index.tsx) gets bundled into HTML/JS/CSS files in the /assets folder. The absolute URLs are critical because ChatGPT loads widgets in a sandbox that needs to fetch assets from my Replit server.

Static asset server on port 5000 - Serve the /assets folder with CORS enabled. Map to external port 80.

MCP server on port 8000 - Bind to 0.0.0.0:8000 for external access. Forward as port 8000.

Allow all hosts - Both servers must accept connections from any origin.

Give me the MCP endpoint URL for ChatGPT Settings > Connectors.

你可能会看到一个看起来像是错误的屏幕，就像下面的截图一样。Replit 并不是为预览 MCP 工具而设计的，所以你只有连接到 ChatGPT 后才能看到界面组件。允许 Replit 继续运行，直到它正确设置好 MCP 服务器。

最终 Replit 特工会告诉你它准备好了。常见问题包括端口配置错误和无法提供静态资产，因此需要时应跟进。准备好后（或者如果你复制了我的项目），你应该会看到这样的屏幕：

我们现在准备好连接 ChatGPT。问客服 ：“这个应用的外部 MCP 网址是什么？” 这应该会提供类似 https://b3c4d0a4-6bdc-4926-b55e-5f94c6246e1e-00-1uvko22a6cltw.spock.replit.dev:8000/mcp 的网址。

要连接 ChatGPT，首先需要在你的 ChatGPT 账户上启用开发者模式 。然后，你可以进入设置 -> 应用与连接器 -> 新应用。在这个模态中粘贴你的网址并附上名称（例如 Replit App）。

连接后，你应该可以按应用名称调用：

选项二：奇比

大多数氛围编码工具并不是用来帮助你理解 MCP 和 ChatGPT 应用的。它们擅长构建网页应用，但无法创建 MCP 服务器、预览你的工具，也无法帮助你连接 ChatGPT。

这就是我决定自己造一个的原因——Chippy。Chippy 是一个专注于 ChatGPT 应用原型的人工智能代理。你可以用内置聊天功能测试应用，无需担心部署问题即可连接 ChatGPT，甚至可以直接从原型生成规格。而且你可以完全免费地搭建你的第一个应用。

在这个例子中，我将构建一个应用，允许用户搜索 Maven Lightning Lessons（由人工智能、产品和设计专家提供的免费 30 分钟讲座）。

其核心功能包括：

• 帮我找一个相关的闪电课，基于某个主题
• 在我的 ChatGPT 帖子中展示课程录像
• 将显示切换到画中画模式，以便在播放 Maven 视频时继续与 ChatGPT 互动

首先，我会去 Chippy.build，请 Chippy 帮我规划这个项目。Chippy 建议使用一种叫 find_lightning_lesson 的工具，它能接收一个主题作为输入。然后它会显示一张内联卡作为起始，并有切换为画中画的选项。

接下来，我们只需要告诉奇皮去实施。然后我们可以预览应用，测试它在聊天环境中的工作。

我们现在已经准备好了一个功能齐全的 ChatGPT 应用来测试。在继续之前，请先获取右上角带有“测试”的应用链接

要连接 ChatGPT，首先需要在你的 ChatGPT 账户上启用开发者模式 。从那里，你可以进入设置 -> 应用与连接器 -> 新应用。

添加名称、MCP 服务器 URL，并将认证设置为无授权。一旦点击“创建”，你就成功制作了你的第一个 ChatGPT 应用！

测试应用最可靠的方法是直接提及应用名称或在自己的聊天中标记。下面你可以看到，如果你提到应用名称，ChatGPT 会自动给它打标签。

一旦你有了一个可用的应用，就可以继续迭代，开始构建一套黄金提示来触发你的应用。你可能想添加认证，从产品中提取真实数据，或者开发结合多种工具的应用。

ChatGPT 应用不必像展示视频或展示卡片那么简单。你可以直接在 ChatGPT 中构建完整且复杂的应用。这里有一个我用 Chippy 快速制作的地下城探险游戏示例。你可以看到 ChatGPT 掌握了我当前等级的背景信息，还能给我提升分数的建议。

你眼前的成长机会

ChatGPT 应用的机制与 SEO 有相似之处，同样有潜力改变消费者科技生态系统的运作方式。用户是带着意图来的。他们不会浏览应用商店，希望有什么东西能吸引他们的目光。他们说，“我需要订机票”或者“帮我找个公寓”。应用在用户准备行动时，恰好在情境中出现。这使得每一次曝光都比传统的应用商店发现更有价值。而且和 SEO 一样，早期行动者会扩大优势：越多用户将“ChatGPT 中的公寓搜索”与 Zillow 联系起来，竞争对手就越难打破这种习惯。

通过 ChatGPT Apps SDK，OpenAI 负责编排。你只需要提供工具和界面。自己构建代理能让你拥有更多控制权，但需要更多基础设施。ChatGPT 应用能让你即时分发给 8 亿用户，但对工具调用方式的控制权较少。对于大多数用例，尤其是面向消费者的场景，分销优势占优。但如果你需要自定义编排、微调模型或复杂的多步工作流程，你可能仍然需要自己的代理基础设施。

你接下来该做什么

如果你在产品团队，开始探索你的产品作为 ChatGPT 应用的样子。用户可以通过对话采取哪些行动？你的哪些体验可以转化为小工具？“每回合一个小部件”的限制迫使你思考原子级、可完成的动作。

如果你在成长团队，评估一下 ChatGPT 作为一个分发渠道。用户的意图在对话中自然出现在哪里？哪些查询应该触发你的应用？赢家将是那些最有效地将用户意图映射到产品中的公司。

如果你在技术团队，可以看看 Apps SDK 和 MCP 的文档。建造门槛比你想象的要低。如果你已经开发了一个网页应用，你也可以做一个 ChatGPT 应用。架构很熟悉：后端展示工具，前端渲染界面。

你也可以参加 1 月 30 日的闪电课程，亲身体验从零开始构建 ChatGPT 应用。

给书们：技术细节

如果你想真正了解底层到底发生了什么，这里有更深层的架构。

MCP

MCP（模型上下文协议）定义了人工智能助手如何与外部工具通信。你的应用运行一个 MCP 服务器，它会暴露三个东西：工具（AI 可以调用的功能）、资源（AI 能读取的数据）和提示（AI 可以使用的模板）。当 ChatGPT 连接到你的应用时，它会获取一个描述这些功能的清单。

工具定义的实际样子如下：

import { z } from “zod”;

const searchRestaurantsInputSchema = {

location: z.string().min(1),

cuisine: z.string().optional(),

price_range: z.number().min(1).max(4).optional(),

};

server.registerTool(

“search_restaurants”,

{

title: “Search restaurants”,

description: “Search for restaurants by location and cuisine type”,

inputSchema: searchRestaurantsInputSchema,

},

async (args) => {

const { location, cuisine, price_range } = args;

const results = await db.query(”SELECT * FROM restaurants WHERE ...”);

return {

content: [{ type: “text”, text: `Found ${results.length} restaurants in ${location}` }],

structuredContent: { restaurants: results },

};

}

);

描述比你想象的更重要。ChatGPT 用它来决定何时调用你的工具。模糊的描述意味着 ChatGPT 可能不会在应该调用的时候调用你的工具，或者在不该调用的时候调用。

控件架构

小部件运行在带有严格安全约束的沙盒 iframe 中。他们无法访问父 DOM 代码，无法运行任意脚本，只能通过结构化的窗口.openai API 进行通信。这类似于浏览器扩展的工作方式，但更为封闭。

当你的工具返回结果时，你可以包含一个 UI 模板引用，指示 ChatGPT 渲染一个小部件：

const getRestaurantDetailsInputSchema = {

id: z.string().min(1),

};

server.registerTool(

“get_restaurant_details”,

{

title: “Get restaurant details”,

description: “Retrieves detailed information about a specific restaurant.”,

inputSchema: getRestaurantDetailsInputSchema,

_meta: {

“openai/outputTemplate”: “ui://widget/restaurant-details.html”,

“openai/toolInvocation/invoking”: “Loading restaurant details”,

“openai/toolInvocation/invoked”: “Loaded restaurant details”,

},

},

async (args) => {

const id = args?.id;

if (!id) {

return {

content: [{ type: “text”, text: “Missing restaurant id.” }],

structuredContent: { restaurant: null },

};

}

const restaurant = await db.findById(id);

return {

content: [{ type: “text”, text: `Details for ${restaurant.name}` }],

structuredContent: { restaurant },

};

}

);

当 ChatGPT 包含时，调用工具后 ChatGPT 会获取 UI 控件资源，然后将你的结构化数据推送到 UI 组件中。例如，你可以在卡片中展示搜索结果。

当用户与小部件交互（点击按钮、选择物品）时，小部件还可以直接使用 window.openai.callTool（） 调用工具。这意味着小部件可以在模型不在循环的情况下调用你的后端工具并更新界面。

消息流

以下是用户说“查找布鲁克林意大利餐厅”时的实际顺序：

1. ChatGPT 接收消息并检查可用工具
2. 它构建了一个工具调用：search_restaurants（{地点：“布鲁克林”，美食：“意大利”}）
3. 你的 MCP 服务器接收调用并执行该函数
4. 你的服务器返回数据和元数据，包括对 UI 包（服务器托管的 HTML 资源）的引用
5. ChatGPT 从你的服务器获取 HTML 捆绑包
6. ChatGPT 在沙盒 iframe 中渲染 HTML，并通过 window.openai 桥接注入数据
7. 小工具会显示你的餐厅结果

当用户通过点击餐厅与小部件交互时：

1. Widget 直接调用 window.openai.callTool（'get_restaurant_details'， {id： “123”}）
2. 你的 MCP 服务器执行该工具并返回结果
3. 小部件接收响应并更新其用户界面

与传统聊天机器人集成的关键区别在于：小部件可以直接调用工具，而无需经过模型。这让互动更快，并让你对用户体验有更多控制权。

认证

MCP Apps 支持 OAuth 2.0 用于用户认证。当用户首次与你的应用互动时，ChatGPT 可以触发一个 OAuth 流程，打开你的授权页面，允许用户登录，并将令牌返回到你的 MCP 服务器。然后，你的服务器会在每次工具调用中包含用户的访问令牌，这样后端就知道是谁在发起请求。

构建与部署

要构建一个 ChatGPT 应用，你需要：

• 一个 MCP 服务器（Node.js 或 Python SDK 可用）
• 一个小部件（推荐用 React，但任何网页框架都可以）
• 两者（Vercel、Railway 或任何云服务提供商）的托管服务
• 在 OpenAI 应用目录注册

MCP SDK 负责协议细节。你可以把工具定义为函数，SDK 负责管理 JSON-RPC 层、认证以及与 ChatGPT 的通信。

如果你熟悉这个栈，一个简单应用（搜索加显示结果）的典型构建时间是一到两天。而复杂且多工具、状态管理和完善的用户界面应用则需要几周时间。

谢谢你，科林！想了解更多 Colin 的内容，可以在 LinkedIn 上找到他 ，查看他的课程 ，并于 1 月 30 日参加免费的 Lightning 课程 ，亲手体验打造你的第一个 ChatGPT 应用。

祝你一周充实且富有🙏成效