哥亦勇誌

5 步把APP嵌入ChatGPT,它本质上就是ChatGPT版小程序


ChatGPT插件不是“技术外挂”,而是“产品机制”的重构机会。本文系统梳理APP嵌入ChatGPT的五步路径,从注册流程、API配置到交互设计,帮助产品人理解插件机制如何成为“轻量应用”的新范式,构建AI时代的产品表达新方式。

国庆期间,OpenAI 的 DevDay 发布了一个新玩意儿:可以把 APP 嵌入 ChatGPT 的聊天中。

比如,给 ChatGPT 一张草图,让它用 Figma 帮你画出来。之后你可以直接在 ChatGPT 的聊天框里看到 Figma 的界面。

已经上线服务的还有BOOKING、Canva、shopify 等几个应用。

过去,让 AI 使用工具完成各项工作,只能是以上下文的形式,让 AI 来加工改造;现在高级了,不但可以使用第三方应用的数据,还给一个完整、可交互的页面。

各种媒体都说,这是 ChatGPT-System (ChatGPT 操作系统)。

我今天花半天时间看了一下这个 Apps SDK 的文档,花 20 分钟写完了一个 Demo 并让 ChatGPT 在对话中嵌入了我写好的 APP 页面(后面有教程)。

总结就一句话:

互联网没有新鲜事,OpenAI 在做“小程序”。

实现原理

这个交互实现的底层,依然是 MCP。

也就是把你 APP 的服务改造成 AI 友好的 MCP 服务,让 AI 在合适的时机选用。

与常规 MCP 不同的是,ChatGPT 的这个 Apps SDK 增加了一项要求:你 APP 不止要给我返回上下文数据,还要给我一套 UI 模版。

这个 UI 模板要按照 ChatGPT 的要求来设计,以模版的形式提供。

ChatGPT 拿到返回后,会把 MCP 的数据和你的 UI 模版组装成一个 HTML 页面,嵌入到聊天框里。

原理讲完,是不是祛魅了?

并且,如果你是个老产品/老技术应该有印象,上一次振臂一呼带着大家这么干的人,叫张小龙。

2017 年 1 月 9 日,微信发布小程序,在 HTML 的基础上魔改了一套 WXML 前端语言。

各种工具、服务,只需要写个前端代码,把原有的服务通过 API 封装进去,就可以在微信里直接给用户使用。

发布小程序的那天,张小龙还发了个朋友圈致敬乔布斯。

当时媒体报道针对这条朋友圈的猜测是:微信要做操作系统。

在今天看,微信没有通过小程序把自己打造成“系统”,但是小程序在微信生态的价值却是非常巨大的。

各大 APP 从开始的为了保护数据拒绝、到后来实在打不过又纷纷选择加入的演进过程看,选择同样路线把 APP 嵌入到 AI 聊天应用中的 OpenAI,方向肯定是正确的。

那么,不出意外,接下来 2-3 个月,国内的 AI 们肯定会立刻跟进。

上一次没吃到肉的字节和阿里,这一次终于可以打个翻身仗了!

零基础开发部署

我一行代码没写,两轮对话就让 Cursor 帮我写好了一个 Demo,全程 20 分钟。

虽然简单,但是为此专门开了个 Plus 会员……

为了不让我这会员白开,把教程分享给大家。

第一步:把官方的 Examples Clone 下来给 Cursor,简单给它介绍一下这是个啥,让它学习(最好以问题的形式,让他学完解释)

第二步:跟 Cursor 说“你真厉害!那请根据这个项目,把我下面这个工具开发成可以嵌入 ChatGPT 的服务……”

第三步:按照官方文档的建议,使用 gnork 工具把本地服务暴露(也就是穿透),确保 ChatGPT 可以连接到本地测试环境(有服务器且有SSL证书的话可以直接部署到线上)。

第四步:给 ChatGPT 充会员(否则没法使用 MCP 服务)。网页端设置-应用与链接-高级设置-打开开发者模式。回到上级页面右上角会多一个创建按钮,点击,填写基础信息和ngrok的 URL(最后记得加上一个/mcp)。

第五步:跟 ChatGPT 对话,“诱导”它使用你的工具,就可以看到你自己的作品嵌入 ChatGPT了!

不得不感叹,AI 时代真好啊!!

2017 年龙哥发布小程序的时候,为了会用会玩,我花了至少 1 个月学习前端、JavaScrip,也只能魔改人家的模板。

现在,全流程 1 小时不到,我给它上线了!!

这 AI,不学不行!

来 AI 学习行动圈,一起学 AI、用 AI、玩 AI 吧!

我 23 年底开始,和人人都是产品经理社区共同运营了这个「AI学习行动圈」社区,截止目前已经持续运营、维护超过 500 天了。

我的各种 AI 研究心得、发现的好应用、开发的小项目都会在里面分享,目前圈子有核心三个交流学习平台。

7 个微信群,早报和日常交流

微信群里每天一早有 AI 早报,上下午还有“读报时间”,以及我每天不定期刷屏级的各种 AI 工具体验、提示词编排思考、行业新闻解读同步。

以及,你可以在群里讨论任何与 AI 相关的工具、应用问题,几乎都能找到答案。

腾讯文档-圈友空间

用来沉淀体系化、深度的 AI 文章和超长的工程化提示词,不定期更新。

当前包括:Claude code、Cursor、Manus等顶级产品的系统提示词和工具列表,各种深度的 Agent 白皮书和实践指南

知识星球-每日报告、工具和实战经验分享

我在星球里主要维护「实战分享」「工具箱」和「情报局」三个标签

实战分享是可以在日常工作和生活中直接应用的提示词和效率工具。上面截图里的 Step-Back 提示词就非常好用,堪比 o4。在公众号、直播中演示的所有 AI 实战应用的提示词也都在这个标签下。

AI 工具和鲜知道就是好用的、热门的 AI 工具、资讯分享,我把那些太技术、太浮夸的都筛选了,放进这个标签的都是可以直接用来的好玩儿!

星球还有一个“专栏”体系,目前的定位跟标签差不多。


勇哥
勇哥
这个人很神秘