ChatGPT应用将成为下一个大型分发渠道：一份构建指南

Lenny's Newsletter · 2026-01-20🎬 在 YouTube 观看原视频 →

从零开始，一步步构建你的第一个ChatGPT应用

摘要

本文由 Lenny's Newsletter 多次合作的作者 Colin Matthews 撰写，系统剖析了 ChatGPT 应用（ChatGPT Apps）作为全新分发渠道的巨大潜力。文章指出，ChatGPT 应用代表了一种十年一遇的分发机遇，堪比 2008 年的 App Store 和 2000 年代初的 SEO 崛起——早期入场的公司能占据用户习惯，后来者难以撼动。文章详细阐述了 ChatGPT 应用的三层架构（对话层、工具层、小组件层）、三种呈现模式（内联、全屏、画中画），以及背后基于 模型上下文协议（MCP, Model Context Protocol） 的运行机制。实践部分提供了两条构建路径：通过 Replit 导入官方示例，或使用 Colin 自建的 Chippy 平台快速原型开发。文章最后为产品团队、增长团队和技术团队分别给出了行动建议，并附有技术深潜章节。核心判断是：ChatGPT 拥有 8 亿用户，其上下文触发的应用推荐机制让每一次展示都比传统应用商店的发现更有价值——工具描述本身就是一种新形态的搜索优化（AEO, Agent Engine Optimization）。

第一章：十年一遇的分发渠道变革

几个月前，如果你让 ChatGPT 帮你订一张去巴黎的机票，它会给你一串有用的建议：航空公司分析、价格区间、时间选择技巧。然后你得离开 ChatGPT，打开旅游网站，从头开始搜索。

现在，你只需要说"帮我找一张从多伦多飞巴黎的好机票"，一个互动式小组件（widget）就会直接出现在对话中。你可以浏览航班选项、比较价格、完成预订——全程无需离开聊天界面。

这个变化背后的策略很简单：ChatGPT 不再仅仅以文本回复用户、然后把他们引导到别处，而是直接在对话中展示第三方应用的互动组件，让用户在 ChatGPT 内部完成交易。随着时间推移，OpenAI 可能会从中抽取一小部分交易佣金。

在 2025 年 10 月的 Dev Day 上正式发布后，ChatGPT 应用的合作伙伴已经囊括了 Adobe、DoorDash、Canva、Figma、Booking.com、Coursera、Expedia、Spotify 和 Zillow 等大型企业。世界上最顶尖的一些公司正在押注：聊天界面将成为他们产品的主要入口。

ChatGPT 应用代表了一种十年一遇的罕见分发机遇。上一次可比的时刻是 2008 年的 App Store、21 世纪初 SEO 的崛起，以及 Shopify 的应用生态。当一个分发渠道以规模化方式打开时，那些提前行动的公司会抓住用户的习惯，后来者将难以打破这些习惯。

这种机遇对两端都有价值。对企业而言，ChatGPT 应用是现有分发渠道之外的新增长极。对独立创业者（solopreneur）来说，这是一个无需营销预算就能构建微应用并获取分发的机会。入门门槛很低——一个简单应用只需几周即可完成——但覆盖范围是巨大的。

第二章：用户如何发现和使用 ChatGPT 应用

ChatGPT 应用引入了与传统应用商店截然不同的交互模式。在大多数应用商店中，你必须找到应用、下载安装，然后才能使用。ChatGPT 虽然也支持这种模式，但更值得关注的是上下文触发（contextual surfacing）机制。

在不久的将来——这也是大多数人尚未完全理解的一点——ChatGPT 将根据用户的对话自动推荐应用。你询问旅行计划，Expedia 就会出现；你提到需要设计，Canva 就会浮现；你说想订购杂货，Instacart 购物车就会展现在眼前。用户不需要知道有哪些应用可用；模型会自动将他们的意图匹配到相关工具。这有可能成为一个全新的、巨大的增长渠道。

三种呈现格式

作为应用构建者，你需要根据想创造的用户体验来选择适当的格式。每种格式都基于模型上下文协议（MCP, Model Context Protocol）将你的应用交付给 ChatGPT。

① 内联模式（Inline Mode）： 将卡片和列表嵌入对话流中。这是默认格式，适用于商品展示、搜索结果或任何能自然融入 ChatGPT 回复的内容。例如 Expedia 直接在对话中展示酒店列表卡片。

② 全屏模式（Fullscreen Mode）： 占据整个屏幕空间。最适合地图、仪表盘或需要更多空间的复杂工作流。当用户在 AllTrails 上浏览地图或在 Canva 中编辑设计时，全屏提供了充分的操作空间。

③ 画中画模式（Picture-in-Picture Mode）： 保持一个浮动小窗口在聊天中持续可见。这对于音乐播放器、计时器或用户希望在后台运行的任何功能都很理想。例如 Coursera 可以在用户继续聊天的同时，在画中画中播放视频课程。

一个关键约束

需要理解一个重要限制：每条消息只能展示一个小部件。如果用户说"帮我订餐厅并叫一辆 Uber"，ChatGPT 一次只能展示一个应用。这意味着用户只能按顺序完成多步骤任务，而非并行操作。这对产品设计有直接影响——你需要将体验拆解为可独立完成的原子化动作。

第三章：幕后原理——MCP、工具与小组件

在开始构建 ChatGPT 应用之前，理解其架构至关重要。

三层架构

每个 ChatGPT 应用由三个部分组成：

  1. ChatGPT 内的对话层： 模型解读用户的请求，并判断是否某个应用能提供帮助。
  2. 应用的"工具"（Tools）： 一个后端服务器和 API，告知 ChatGPT 该应用能做什么。
  3. 面向用户的小组件（Widget）： 出现在用户聊天中，使用 Web 技术（通常是 React）构建，并在 ChatGPT 的安全沙箱中运行。

工具——整个机制的核心

工具（tool）本质上是一个 ChatGPT 可以调用的函数。当你构建应用时，你定义诸如 search_restaurants、book_ticket 或 create_playlist 等工具。每个工具都有一个名称和描述，帮助 ChatGPT 理解何时调用它以及接受哪些参数。

具体流程如下：用户说"帮我在布鲁克林找意大利餐厅"。ChatGPT 查看可用工具，发现一个叫 search_restaurants 的工具，其描述是"按位置和菜系搜索餐厅"，于是以 {location: "Brooklyn", cuisine: "Italian"} 为参数调用它。你的服务器执行搜索、返回结果，并可选择性附带一个小组件来展示结果。ChatGPT 在用户聊天中渲染该组件。

用户与小组件互动——比如点击某家餐厅进行预订——该点击可以触发后续工具调用。小组件向 ChatGPT 发送消息说"用户选择了 restaurant_id: 1241"，ChatGPT 随后可以调用另一个工具如 book_reservation() 来完成预订。对话继续，小组件和 AI 协同工作。

这样形成了一个循环：用户对 ChatGPT 说话 → ChatGPT 调用工具 → 小组件渲染 → 用户与小组件交互 → ChatGPT 调用另一个工具。核心洞察是：ChatGPT 负责编排（orchestrate）整个过程。它决定何时调用工具、传递什么参数、如何响应用户操作。你的应用只需暴露能力和渲染 UI。

MCP：连接一切的管道

MCP 是连接这一切的基础设施。MCP 与传统的 API 非常相似，但专为 AI 智能体（AI Agent）重新构建。它提供了一种通用方式来将应用连接到 AI 助手。Anthropic 于 2024 年 11 月创建了 MCP，OpenAI 于 2025 年 3 月在 ChatGPT 和开发者工具中全面采用。到 2025 年 11 月，两家公司宣布合作开发 MCP Apps，为协议添加交互式 UI 的标准化方式。

ChatGPT 应用 vs. 自建智能体

ChatGPT 应用和 AI 智能体共享同一核心模式：一个可以调用外部工具来完成任务的 AI 模型。区别在于谁来主导（who's running the show）。当你构建自己的 AI 智能体时，你控制一切——模型、提示词、编排逻辑、错误处理。你决定何时调用工具、如何处理结果。

ChatGPT 应用则让你获得向 8 亿用户即时分发的优势，但对自己工具如何被调用的控制较少。对于大多数面向消费者的场景，分发优势胜出。但如果你需要自定义编排、微调模型或复杂的多步骤工作流，你可能仍然需要自己的智能体基础设施。

工具描述 = 新形态的搜索引擎优化

一个值得深思的观点是：工具描述代表了一种新形态的 SEO（或应该称之为 AEO——Agent Engine Optimization，智能体引擎优化）。基于工具的名称和描述，ChatGPT 可以向用户推荐你的应用来满足他们的需求，比如创建幻灯片或生成财务模型。拥有精准、能唯一标识你应用的工具描述，将帮助 ChatGPT 用户在正确的场景中发现和使用你的应用。

第四章：动手构建你的第一个 ChatGPT 应用

理解了基本结构之后，你可以通过以下指南在 30 分钟或更短时间内完成一个应用。

路径一：使用 Replit

Replit 的 AI 智能体并非 ChatGPT 应用专家，因此在 Replit 中最简单的上手方式是导入现有应用。推荐使用 OpenAI 的官方示例。Colin 为了节省时间，创建了一个已完成所有步骤的 Replit 项目，可以直接复制使用。

如果你想从零开始，在 Replit 中选择"从 GitHub 导入"，粘贴官方仓库地址：https://github.com/openai/openai-apps-sdk-examples。Replit 智能体会花 5-10 分钟设置项目。

项目运行后，向智能体发出以下提示：

我想将 ChatGPT 连接到我的 MCP 服务器。请按以下要求设置：

  • 打包 React UI 小组件——项目使用 Vite 将 React 组件构建为独立的小组件包。运行 pnpm run build，将 BASE_URL 设置为完整的 Replit 域名 URL。每个小组件（在 src/*/index.tsx 中）被打包到 /assets 文件夹中的 HTML/JS/CSS 文件。绝对 URL 至关重要，因为 ChatGPT 在沙箱中加载小组件，需要从我的 Replit 服务器获取资源。
  • 端口 5000 上的静态资源服务器——提供 /assets 文件夹服务并启用 CORS。映射到外部端口 80。
  • 端口 8000 上的 MCP 服务器——绑定到 0.0.0.0:8000 以便外部访问。转发为端口 8000。
  • 允许所有主机——两台服务器都必须接受来自任何来源的连接。
  • 给我 MCP 端点 URL，用于 ChatGPT Settings > Connectors。

你可能看到看似错误的页面——Replit 并非为预览 MCP 工具而设计，只有在连接到 ChatGPT 后才能看到 UI 组件。让 Replit 继续工作，直到 MCP 服务器正确设置完毕。

当准备就绪后，询问智能体"这个应用的外部 MCP URL 是什么？"它会提供一个类似 https://xxx.spock.replit.dev:8000/mcp 的 URL。

要在 ChatGPT 中连接应用，首先需要在你的 ChatGPT 账户上启用开发者模式（Developer Mode），然后导航至 Settings → Apps & Connectors → New App，粘贴你的 URL 并命名。

路径二：使用 Chippy 快速原型

大多数 vibe-coding 工具并非为帮助你理解 MCP 和 ChatGPT 应用而构建。它们擅长构建 Web 应用，但无法创建 MCP 服务器、预览工具或帮助你连接 ChatGPT。

这就是 Colin 决定自建工具的原因——Chippy。Chippy 是一个专精于 ChatGPT 应用原型开发的 AI 智能体。你可以使用内置聊天测试应用、无需担心部署即可连接到 ChatGPT，甚至直接从原型生成规格说明。首次使用完全免费。

以构建一个"Maven Lightning Lessons 搜索引擎"为例——核心功能是：根据主题查找相关的免费 30 分钟专家讲座，在 ChatGPT 对话中内联显示视频，并支持切换到画中画模式继续聊天。

操作流程极其简单：

  1. 前往 Chippy.build，告诉 Chippy 你的项目想法
  2. Chippy 会建议一个设计方案——例如，一个名为 find_lightning_lesson 的单一工具，接受主题作为输入，先以内联卡片展示，支持切换到画中画
  3. 告诉 Chippy 开始实现，即可获得可交互的预览
  4. 点击右上角"Test"获取应用链接
  5. 在 ChatGPT 中启用开发者模式，进入 Settings → Apps & Connectors → New App，填入名称、MCP Server URL，认证方式选择"No auth"

最可靠的测试方法是按名称提及你的应用或在聊天中标记它。ChatGPT 会在你提到应用名称时自动标记它。

ChatGPT 应用不仅限于展示视频或卡片这种简单场景。你可以在 ChatGPT 中直接构建完整的复杂应用——Colin 举例展示了一款他在 Chippy 中构建的地下城探索游戏，ChatGPT 能感知当前关卡、游戏状态，并给出提升分数的建议。这展示了 ChatGPT 应用的真正潜力。

第五章：增长机遇——为什么必须现在行动

ChatGPT 应用的运作机制与 SEO 有诸多相似之处，并且同样具有改变消费科技生态系统的潜力。

用户是带着意图来的。他们不是在应用商店里漫无目的地浏览，期待某个应用能吸引眼球。他们说"我要订一张机票"或"帮我找间公寓"。应用在上下文相关时浮现——恰好是用户准备行动的时刻。这让每一次展示都比传统应用商店的发现更有价值。

正如 SEO 一样，早期行动者会复利他们的优势：当越多用户将"在 ChatGPT 中搜索公寓"与 Zillow 关联起来时，竞争对手要打破这种习惯就越困难。

ChatGPT 应用 vs. 自建智能体——如何选择：

维度 ChatGPT 应用 自建 AI 智能体
分发 即时触达 8 亿用户 需自行获取用户
控制力 较低——模型决定如何调用工具 完全控制——你决定一切
基础设施 OpenAI 处理编排 需自建基础设施
适用场景 面向消费者、标准工作流 自定义编排、微调模型、复杂多步流程

对于大多数用例，特别是面向消费者的场景，分发优势胜出。

第六章：各团队的行动指南

如果你是产品团队

开始探索你的产品作为 ChatGPT 应用会是什么样子。用户可以通过对话完成哪些操作？你的体验中哪些部分可以转化为小组件？"每轮只能有一个小组件"的约束迫使你思考原子化、可独立完成的操作。

关键问题：你的产品中最适合通过对话触发的三个核心动作是什么？

如果你是增长团队

将 ChatGPT 评估为一个分发渠道。用户的意图在对话中的什么地方自然出现？哪些查询应当触发你的应用？这里的赢家将是那些最有效地将用户意图映射到自身产品的公司。

关键问题：你目标用户最可能在 ChatGPT 中输入的、与你产品相关的五条查询是什么？

如果你是技术团队

查阅 Apps SDK 和 MCP 文档。构建门槛比你想象的要低——如果你构建过 Web 应用，你就能构建 ChatGPT 应用。架构是熟悉的：暴露工具的后端、渲染 UI 的前端。

典型构建时间：
- 简单应用（搜索 + 显示结果）：1-2 天（熟悉技术栈的情况下）
- 复杂应用（多工具、状态管理、精致 UI）：数周

所需技术组件：一个 MCP 服务器（支持 Node.js 或 Python SDK）、一个小组件（推荐 React，但任何 Web 框架均可）、托管服务（Vercel、Railway 或任意云服务商）、以及 OpenAI 应用目录的注册。

附录：技术深潜

MCP 详解

MCP 定义了 AI 助手与外部工具通信的方式。你的应用运行一个 MCP 服务器，暴露三类能力：工具（AI 可调用的函数）、资源（AI 可读取的数据）和提示词模板（AI 可使用的模板）。当 ChatGPT 连接到你的应用时，它会获取一个描述这些能力的清单（manifest）。

核心代码示例——工具定义：

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 },
    };
  }
);

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

小组件架构

小组件运行在沙箱化的 iframe 中，具有严格的安全约束。它们不能访问父 DOM、不能运行任意脚本，只能通过结构化的 window.openai API 进行通信。这与浏览器扩展的工作方式类似，但更加严格。

当工具返回结果时，可以通过 _meta 字段中的 openai/outputTemplate 指定要渲染的小组件模板。ChatGPT 会在完成工具调用后获取小组件的 HTML 资源，然后将结构化数据注入 UI 组件。

消息流完整序列

当用户说"帮我在布鲁克林找意大利餐厅"时：

  1. ChatGPT 接收消息并检查可用工具
  2. 构造工具调用：search_restaurants({location: "Brooklyn", cuisine: "Italian"})
  3. 你的 MCP 服务器接收调用并执行函数
  4. 服务器返回数据加元数据，包括 UI 包的引用（由你的服务器托管的 HTML 资源）
  5. ChatGPT 从你的服务器获取 HTML 包
  6. ChatGPT 在沙箱化 iframe 中渲染 HTML，并通过 window.openai 桥接注入数据
  7. 小组件出现，展示你的餐厅搜索结果

当用户与小组件交互时（如点击某家餐厅）：

  1. 小组件直接调用 window.openai.callTool('get_restaurant_details', {id: "123"})
  2. 你的 MCP 服务器执行工具并返回结果
  3. 小组件接收响应并更新 UI

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

认证

MCP Apps 支持 OAuth 2.0 用户认证。当用户首次与你的应用交互时，ChatGPT 可以触发 OAuth 流程：打开你的授权页面、让用户登录、将令牌返回给你的 MCP 服务器。此后，你的服务器在每个工具调用中附带用户的访问令牌，后端就能知道是谁在发起请求。

本文作者 Colin Matthews 是 Lenny's Newsletter 的多次合作者，也是该博客历史上第 2 和第 12 热门文章的作者。你可以在 LinkedIn 上找到他，查看他的课程，或参加 1 月 30 日的免费 Lightning Lesson 获取构建 ChatGPT 应用的实战演示。