只需 5 步把APP嵌入ChatGPT，它本質(zhì)上就是ChatGPT版小程序

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線(xiàn)下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門(mén)專(zhuān)項(xiàng)技能課

1300+專(zhuān)題課程

12場(chǎng)職場(chǎng)軟技能直播

12場(chǎng)求職輔導(dǎo)直播

12場(chǎng)專(zhuān)業(yè)技能直播

會(huì)員專(zhuān)屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

只需 5 步把APP嵌入ChatGPT，它本質(zhì)上就是ChatGPT版小程序

張佳的AI實(shí)戰(zhàn)筆記

2025-10-11

0 評(píng)論 1332 瀏覽 4 收藏

10 分鐘

ChatGPT插件不是“技術(shù)外掛”，而是“產(chǎn)品機(jī)制”的重構(gòu)機(jī)會(huì)。本文系統(tǒng)梳理APP嵌入ChatGPT的五步路徑，從注冊(cè)流程、API配置到交互設(shè)計(jì)，幫助產(chǎn)品人理解插件機(jī)制如何成為“輕量應(yīng)用”的新范式，構(gòu)建AI時(shí)代的產(chǎn)品表達(dá)新方式。

國(guó)慶期間，OpenAI 的 DevDay 發(fā)布了一個(gè)新玩意兒：可以把 APP 嵌入 ChatGPT 的聊天中。

比如，給 ChatGPT 一張草圖，讓它用 Figma 幫你畫(huà)出來(lái)。之后你可以直接在 ChatGPT 的聊天框里看到 Figma 的界面。

已經(jīng)上線(xiàn)服務(wù)的還有BOOKING、Canva、shopify 等幾個(gè)應(yīng)用。

過(guò)去，讓 AI 使用工具完成各項(xiàng)工作，只能是以上下文的形式，讓 AI 來(lái)加工改造；現(xiàn)在高級(jí)了，不但可以使用第三方應(yīng)用的數(shù)據(jù)，還給一個(gè)完整、可交互的頁(yè)面。

各種媒體都說(shuō)，這是 ChatGPT-System （ChatGPT 操作系統(tǒng)）。

我今天花半天時(shí)間看了一下這個(gè) Apps SDK 的文檔，花 20 分鐘寫(xiě)完了一個(gè) Demo 并讓 ChatGPT 在對(duì)話(huà)中嵌入了我寫(xiě)好的 APP 頁(yè)面（后面有教程）。

總結(jié)就一句話(huà)：

互聯(lián)網(wǎng)沒(méi)有新鮮事，OpenAI 在做“小程序”。

實(shí)現(xiàn)原理

這個(gè)交互實(shí)現(xiàn)的底層，依然是 MCP。

也就是把你 APP 的服務(wù)改造成 AI 友好的 MCP 服務(wù)，讓 AI 在合適的時(shí)機(jī)選用。

與常規(guī) MCP 不同的是，ChatGPT 的這個(gè) Apps SDK 增加了一項(xiàng)要求：你 APP 不止要給我返回上下文數(shù)據(jù)，還要給我一套 UI 模版。

這個(gè) UI 模板要按照 ChatGPT 的要求來(lái)設(shè)計(jì)，以模版的形式提供。

ChatGPT 拿到返回后，會(huì)把 MCP 的數(shù)據(jù)和你的 UI 模版組裝成一個(gè) HTML 頁(yè)面，嵌入到聊天框里。

原理講完，是不是祛魅了？

并且，如果你是個(gè)老產(chǎn)品/老技術(shù)應(yīng)該有印象，上一次振臂一呼帶著大家這么干的人，叫張小龍。

2017 年 1 月 9 日，微信發(fā)布小程序，在 HTML 的基礎(chǔ)上魔改了一套 WXML 前端語(yǔ)言。

各種工具、服務(wù)，只需要寫(xiě)個(gè)前端代碼，把原有的服務(wù)通過(guò) API 封裝進(jìn)去，就可以在微信里直接給用戶(hù)使用。

發(fā)布小程序的那天，張小龍還發(fā)了個(gè)朋友圈致敬喬布斯。

當(dāng)時(shí)媒體報(bào)道針對(duì)這條朋友圈的猜測(cè)是：微信要做操作系統(tǒng)。

在今天看，微信沒(méi)有通過(guò)小程序把自己打造成“系統(tǒng)”，但是小程序在微信生態(tài)的價(jià)值卻是非常巨大的。

各大 APP 從開(kāi)始的為了保護(hù)數(shù)據(jù)拒絕、到后來(lái)實(shí)在打不過(guò)又紛紛選擇加入的演進(jìn)過(guò)程看，選擇同樣路線(xiàn)把 APP 嵌入到 AI 聊天應(yīng)用中的 OpenAI，方向肯定是正確的。

那么，不出意外，接下來(lái) 2-3 個(gè)月，國(guó)內(nèi)的 AI 們肯定會(huì)立刻跟進(jìn)。

上一次沒(méi)吃到肉的字節(jié)和阿里，這一次終于可以打個(gè)翻身仗了！

零基礎(chǔ)開(kāi)發(fā)部署

我一行代碼沒(méi)寫(xiě)，兩輪對(duì)話(huà)就讓 Cursor 幫我寫(xiě)好了一個(gè) Demo，全程 20 分鐘。

雖然簡(jiǎn)單，但是為此專(zhuān)門(mén)開(kāi)了個(gè) Plus 會(huì)員……

為了不讓我這會(huì)員白開(kāi)，把教程分享給大家。

第一步：把官方的 Examples Clone 下來(lái)給 Cursor，簡(jiǎn)單給它介紹一下這是個(gè)啥，讓它學(xué)習(xí)（最好以問(wèn)題的形式，讓他學(xué)完解釋?zhuān)?/p>

第二步：跟 Cursor 說(shuō)“你真厲害！那請(qǐng)根據(jù)這個(gè)項(xiàng)目，把我下面這個(gè)工具開(kāi)發(fā)成可以嵌入 ChatGPT 的服務(wù)……”

第三步：按照官方文檔的建議，使用 gnork 工具把本地服務(wù)暴露（也就是穿透），確保 ChatGPT 可以連接到本地測(cè)試環(huán)境（有服務(wù)器且有SSL證書(shū)的話(huà)可以直接部署到線(xiàn)上）。

第四步：給 ChatGPT 充會(huì)員（否則沒(méi)法使用 MCP 服務(wù)）。網(wǎng)頁(yè)端設(shè)置-應(yīng)用與鏈接-高級(jí)設(shè)置-打開(kāi)開(kāi)發(fā)者模式。回到上級(jí)頁(yè)面右上角會(huì)多一個(gè)創(chuàng)建按鈕，點(diǎn)擊，填寫(xiě)基礎(chǔ)信息和ngrok的 URL（最后記得加上一個(gè)/mcp）。