ChatGPT 应用将成为下一个重要分发渠道：手把手教你构建第一个应用

ChatGPT 应用通过在聊天中嵌入交互式组件，为开发者提供全新分发渠道。本文详解其工作原理，并提供两种快速构建方法。

几个月前，如果你让 ChatGPT 帮你预订飞往巴黎的航班，它只会提供有用的建议列表：航空公司对比、价格区间，或许还有一些时间安排小贴士。然后你就得离开 ChatGPT，打开旅行网站，从头开始搜索。

现在，你只需说一句：“帮我找一趟从多伦多飞巴黎的好航班”，一个交互式组件就会直接出现在对话中。你可以在聊天界面内浏览航班选项、比较价格并完成预订，全程无需跳转。

这一策略很简单：不再让 ChatGPT 仅以文本形式回复并将用户引导至外部平台，而是直接在对话中嵌入第三方应用的交互式组件，让用户在 ChatGPT 内完成交易（未来 OpenAI 很可能从中抽取少量佣金）。

该功能于去年十月 Dev Day 正式发布，目前合作方已包括 Adobe、DoorDash、Canva、Figma、Booking.com、Coursera、Expedia、Spotify 和 Zillow 等巨头企业。全球顶尖公司正押注“聊天”将成为产品的主要交互界面。

ChatGPT 应用代表着十年一遇的分发机遇。上一次类似的机会是 2008 年的 App Store、2000 年代初的 SEO 兴起，以及 Shopify 应用生态的崛起。每当一个全新的大规模分发渠道开启，率先行动的公司将抢占用户习惯——这些习惯日后极难被撼动。这为各类参与者创造了机会：对大企业而言，这是新增的分发渠道；对独立开发者而言，则是无需营销预算即可获得海量曝光的契机。入门门槛很低（简单应用仅需几周开发），但潜在触达范围巨大。

用户如何发现和使用 ChatGPT 应用

ChatGPT 应用引入了不同于传统应用商店的交互模式。传统模式下，用户需先查找、安装应用才能使用。ChatGPT 虽然也支持该模式，但更值得关注的是“上下文自动推荐”。在不久的将来（也是多数人尚未完全理解的机制），ChatGPT 会根据用户对话内容自动推荐相关应用。例如，当用户提到旅行计划，Expedia 就会出现；当需要设计素材，Canva 会自动浮现；当提及买菜需求，Instacart 购物车随即弹出。用户无需事先了解有哪些应用可用，模型会根据意图匹配合适工具。这有望成为产品增长的全新爆发点。

ChatGPT 应用有三种呈现形式，开发者应根据体验目标选择合适类型。所有类型均通过 Model Context Protocol（MCP）交付至 ChatGPT。

内联模式（Inline mode） 将卡片或列表直接嵌入对话流，适用于商品展示、搜索结果等自然融入聊天的内容。例如 Expedia 的酒店列表：

全屏模式（Fullscreen mode） 占据整个屏幕，适合地图、仪表盘或复杂工作流。例如在 AllTrails 查看地图或在 Canva 编辑设计时，全屏提供充足操作空间。

画中画模式（Picture-in-picture mode） 保持小型浮动窗口，适合音乐播放器、计时器等需后台运行的功能。如下图，Coursera 视频播放时用户仍可继续聊天。

需注意一个重要限制：每条消息仅能显示一个组件。若用户说“订餐厅并叫 Uber”，ChatGPT 只能依次展示一个应用，用户需按顺序完成多步骤任务。

背后的工作原理

构建 ChatGPT 应用前，需先理解其架构。

每个 ChatGPT 应用包含三部分：

ChatGPT 中的对话：模型解析用户请求，判断是否需调用应用。
应用的“工具”：后端服务器和 API 告知 ChatGPT 应用能做什么。
用户界面组件：在聊天中渲染的交互界面，通常基于 Web 技术（如 React），运行于 ChatGPT 的安全沙箱内。

重点解析第 2 部分——“工具”。工具本质上是 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 负责整体编排，决定何时调用工具、传递哪些参数、如何响应用户操作；你的应用只需暴露能力并渲染界面。

MCP（Model Context Protocol）是连接这一切的基础设施。MCP 类似于 API（此前我曾介绍过），但专为 AI 智能体重建。它提供了一种通用方式，将应用连接至 AI 助手。Anthropic 于 2024 年 11 月创建 MCP，OpenAI 在 2025 年 3 月将其全面应用于 ChatGPT 及开发者工具。同年 11 月，双方宣布合作推出 MCP Apps，为协议添加标准化交互界面。

如果你熟悉 AI 智能体，此模式可能似曾相识。ChatGPT 应用与 AI 智能体共享核心逻辑：AI 模型调用外部工具完成任务。区别在于控制权归属：自建 AI 智能体时，你掌控模型、提示词、编排逻辑及错误处理；而 ChatGPT 应用中，OpenAI 的模型负责决策。

你可能已经意识到，工具本身也是一种新型 SEO（或称 AEO）。基于工具名称和描述，ChatGPT 可在用户提出需求（如制作幻灯片或生成财务模型）时推荐你的应用。精准且独特的工具描述有助于在正确场景中被发现和使用。

构建你的第一个 ChatGPT 应用

理解基本结构后，按以下指南可在 30 分钟内完成首个应用。

方案一：使用 Replit

Replit 的智能体并非专精 ChatGPT 应用开发，因此最便捷的方式是导入现有项目。推荐使用 OpenAI 官方示例。为节省时间，我已创建一个预配置好的 Replit 项目，点击此处复制。强烈建议使用该项目，可节省至少 30 分钟。

若想从零开始，可在 Replit 选择“Import from GitHub”，粘贴地址：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 工具，需等待其完成 MCP 服务器配置。