Vibe Coding 产品调研

核心观点:

  1. (不考虑裸模型的话)代码生成产品主要可以分 3 类:

    1. 开发辅助类产品,包括 Github Copilot, Cursor, Supermaven。主要面向程序员,或者正在学习编程的业余用户。
    2. Chat + Preview 类产品,包括 Claude Artifacts, Vercel V0,理论上任何用户都可以用。
    3. 全自动编程助手,包括 replit agent。
  2. 在落地情况上,第一类面向程序员的开发辅助产品已经可以认为成功落地,具备生产价值;第二类 Chat+Preview 的产品给了小白用户很大的震撼,但是后劲不足,现在 Claude Artifacts 热度已经下降,而 Vercel V0 近期做了一次大改版,转向了专注做组件生成;第三类,replit agent 理论上限最高,但目前还是实验性质产品,实测使用下来感觉可用度还不高。

  3. 第二类和第三类都有一点想要让不懂代码的小白用户也能写代码的期望,这个目标现在还没有产品能够完成。主要原因是:non coder 用户不知道如何正确提问、排查问题、反馈问题,与 AI 交互的效率会很低,经常会出现对话多轮都无法修复一个简单问题的情况。开发者必须至少具备一定编程基础知识,才能高效使用 AI。AI 开发过程中经常会遇到一些 gap 无法克服,例如,开发过程中遇到了不在 AI 训练数据中的问题,这些 gap 只有程序员人为介入才能克服。

  4. 在产品形态上,大的趋势是,AI 的能力上限和平台所提供给它的开发环境的丰富度正相关。在 Claude Artifacts 中,除了 Artifacts 本身的查看文件+预览代码能力,模型并没有任何额外的开发工具可用,所以能够达到效果就比较有限;在 Cursor 中,模型拥有对整个 IDE 的控制权,能够编辑代码,能够控制光标、增删文件,能够将整个 codebase 向量化并且检索加入上下文,所以 Curosr 的能力上限显著超过了 Github Copilot 等插件形态产品,也远远超过了 Claude Artifacts 等 Chat+Preview 类的小白向产品;而 Replit 更进一步,除了给模型提供一个在线的 IDE,还提供了整套云端环境(现阶段比较有用的主要是数据库和密钥管理)使得模型理论上可以全自动开发一个全栈应用(实测只能开发简单应用,并且经常翻车)。

  5. 对用户来说,生成产物可理解、可编辑很重要。Cursor / Github Copilot 之所以能成功,有一个原因是因为他们主要面向程序员,程序员能够看到 AI 的生成结果,知道如何进行正确提问和反馈,遇到一些小问题能够自己上手修改,在 AI 掉到坑里时也能够人工干预帮助 AI 回到正确路线。而非程序员背景的用户在使用代码生成类的产品时,通常不知道如何正确提问和反馈,经常反复沟通无法达成预期效果,越改越差。对 Coze 而言,能够生成用户可理解、可编辑的 graph 和 ui builder 中的内容,可能会是一个优势。

  6. 对于代码生成类产品,部署能力很重要。Claude Artifacts 生成效果很好,但是许多用户最终选择将产品部署到 vercel 或者 replit 上。如果 vercel v0 或 replit agent的生成能力能够跟上,那么最终可能会慢慢蚕食掉 claude artifacts 的用户。

  7. 如果干不过 Cursor 或者 Replit 这类产品,那么专注做好一个垂类也是一种可行的策略,Vercel V0 最近改版之后,专注做组件生成,生成完毕之后可以一键集成到开发者的 codebase 中,现在很多开发者在用 Vercel V0 开发前端组件,开发完之后用 Cursor 继续开发整个项目。

概述

产品分类

代码生成产品大致可以分成两类:

产品分类图

产品概述

  1. 开发辅助类产品,主要代表产品 Cursor, Github Copilot, Supermaven, Replit Agent。这类产品主要服务程序员。
Cursor 界面

Cursor,魔改的 VS Code 开源版,没有提供 VS Code 插件,因为他们想实现的一些能力在插件形态下无法实现。

Cursor 并非简单将模型 API 封装进编辑器,背后做了许多工作,包括代码向量化、大模型+小模型的结合应用等等。

VS Code 界面对比

Github Copilot,使用最广泛的代码生成辅助产品。

Supermaven 界面

Supermaven,核心竞争力是自训的代码生成模型,速度非常快,1M token 上下文窗口。

参数量应该比较小,free tier 量大管饱。

  1. 对话式代码生成:Vercel V0, Claude Artifacts。这类产品程序员或者非程序员都能用,对非程序员提供的价值更大,对程序员来说吸引力不如第一类产品高。

Claude Artifacts,Artifacts 本质上是 Claude 提供的一种在对话流中方便预览文件、管理文件的新交互方式,它除了代码预览以外还可以预览文章写作过程、预览 SVG ,但是只有代码预览让小白用户感受到了创造产品的乐趣,从而火出了圈。

核心竞争力是模型,交互做得也很好。

Vercel V0,使用的是 OpenAI 的模型,主要策略是通过限制模型使用 shadcnui + tailwindcss 组件库来控制生成风格。

有一个卖点是依托 vercel 平台可以一键部署。

以前的形态更类似 AIPA,最近改版后变成了对话+Preview形态,至此所有面向非程序员的主流生成式 UI 产品都变成了对话+Preview 形态。

  1. 全自动代码生成:replit agent。

开发辅助类产品

1. Cursor

产品概况

Cursor 是进阶版的 Github Copilot。与 Github Copilot 不同的是,他们认为想要做一个真正 ai native 的编程辅助工具,仅靠插件形态是不够的,所以他们 fork 了一个 VS Code 出来,除了侧边栏稍作改动,几乎与 VS Code 一模一样。Cursor 目前并没有提供一个纯插件形态。

Cursor 原版 VS Code

同样是做 IDE,与 Marscode 不同的是,Cursor 选择做本地 IDE,而不是基于 VS Code 做一个 CloudIDE,这一点对于职业开发者比较友好,因为 CloudIDE 现阶段更多的是一种特殊条件下(出差环境下、安全限制条件下)的工作工具,常规开发还是需要在本地环境下完成,因为现阶段云端的网络延迟是职业开发者无法忍受的。

Cursor 的主要功能:

  1. 自动补全

这个和 Github Copilot 的自动补全功能类似,区别在于 Cursor 可以一次性建议多处修改,而 Github Copilot 只能建议当前光标位置后的修改。另外 Cursor 能够自动修改 typo,能够自动预测开发者下一次想要继续编辑的位置,并自动移动光标位置。

  1. 对话

在对话功能中,用户可以基于当前整个 Codebase 进行问答,整个 Codebase 会被向量化,在问答时自动检索最相关的代码片段回答用户的问题。另外 Cursor 问答中还可以传图或者联网检索。

  1. 编辑代码

这个功能是 Cursor 跟 Github Copilot 开始拉开差距的特性:

用户可以选中一段代码,直接对模型提出修改建议,模型直接对代码文件进行修改。

这个能力应该在编程辅助类产品中是一种很符合直觉的交互,但是 Github Copilot 和 Marscode 都还没有做,应该是实现起来有一定难度?

可以看到模型在编辑代码过程中,会逐行检查全部选中区域,用绿色标记出新增代码片段,用红色标记出删除代码片段,最终由用户确认是否应用修改。这种交互给了开发者很强的控制感,开发者能够清晰得了解 AI 的每一次改动,而不是任由 AI 随意修改自己的 Codebase,自己没有半点掌控。现阶段而言,职业开发者是无法信任一个全自动的 AI 助手去随意修改自己的代码的。

Cursor 整体应用代码编辑的速度非常快,显然不是通过 function call 实现的。可能是使用了自训的小模型。这么判断的理由是:Cursor 是提供自配 API Key 模式的,用户自己使用自己的 API Key 的情况下,可以不用对 Cursor 付费就使用到 Cursor 的补全和对话能力,但是无法使用到 Cursor 的代码编辑能力。在使用自己 API Key 的情况下,Cursor 会提示"xxxx feature requires custom model ,cannot be used with your own API Key"

Cursor API Key 设置

这个编辑功能的实现方式不仅仅对代码生成有价值,对于我们实现更好的文章编辑体验也很有价值,值得深入研究一下。

  1. Composer

这个应该是一个实验性质的能力,在 Cursor 官网上没有宣传。它与编辑功能的不同之处在于,编辑功能只能编辑单个文件,但是在 Composer 中,用户可以命令模型去修改整个 Codebase 的文件。模型会理解用户的需求,定位到需要修改的相关文件,并且逐个完成编辑。

这个功能更加接近全自动 AI编程的形态,但是 Cursor 做得比较保守,每次编辑完之后,都会需要开发者确认是否应用修改,给开发者更多的掌控感。

可以看到,Cursor 能够在开发者中爆火是有原因的,它的整个思考和编辑代码的速度,已经达到了不会让开发者感觉到不耐烦的程度,代码撰写的质量也很高,可能 10 次生成里面有 6-7 次都是完全不需要修改,可以直接采纳的,剩下的一部分复杂问题,Cursor 无法一次生成正确的,在专业开发者人工介入下,也能够克服。

速度在整体的使用体验中非常重要,这一点 Cursor 目前比 Replit Agent 有明显优势。Cursor 目前的 Agent 属性没那么强,更侧重人机合作编写代码,一步一确认,每步都非常快,可能是因为 Cursor 不太追求实现全自动的项目代码生成,所以不需要太长链路的思考。

这个功能中还可以看到 Cursor 已经具备了修改项目目录中的文件的能力,可以对文件系统中的文件做增加、删除、编辑,那么它以后支持模型操纵命令行、自动安装依赖、自动同步 Github、自动推送到云平台部署等操作也是迟早的事情。

整体而言,Cursor 的开发者体验非常好,是开发者能够接受的一种编程辅助形态,已经达到了生产可用的程度,很多开发者表示习惯 Cursor 之后已经无法回退到纯人工编程的状态。

开发实测

尝试用 Cursor 开发一个可以自定义的上网首页,半人工、半 AI 开发,使用 react-grid-layout 进行布局,页面上的全部组件可以自由拖动位置、调整大小。只实现了搜索引擎和 todo list 组件,整体耗时比纯人工开发要少得多,比使用 Replit Agent 开发更久,但是过程更可控,产出的内容更加符合预期。

过程中 Cursor 也会遇到一些问题无法解决,但是在 Cursor 中可以比较方便得人工介入。

2. Replit Agent

产品概况

Replit Agent 是 9 月 Replit 刚发布的新功能,与 Cursor 不同的是:

  1. 它与编程环境的集成程度更高。

Replit 本身不仅是一个 CloudIDE,也可以算作一个云平台,平台上已经有成熟的对象存储、数据库、鉴权等服务,也有命令行、依赖管理、密钥管理等开发者工具,Replit Agent 依托 Replit 平台,除了能够像 Cursor 一样操控代码文件夹以外,还能够直接操控整个开发环境,帮助开发者配置环境变量、安装依赖、配置数据库、运行 web 服务(目前体验到的是这些能力),这是它的第一大卖点。

  1. 它的自动化程度也更高,是一个真正的 Agent 形态。

与 Cursor 的一步一确认不同,Replit Agent 的目标是希望全自动帮用户完成所有代码编写工作。代码编辑不需要用户确认就可以生效,直接应用在项目代码上。自动安装依赖包,自动配置数据库,半自动配置环境变量,代码编写完成后,自动将服务跑起来,并且提供一个 webview 供用户预览效果。

目前 Replit Agent 的使用体验是,在编写简单应用时,会感觉到整个过程非常得自动化、非常傻瓜,但是当模型遇到问题时,与模型一起 debug 的过程会比较繁琐,对小白用户来说理解门槛比较高。它目前的产品形态,对于专业开发者来说,不如 Cursor 效率高。对于完全不懂代码的用户来说,又用不懂。当前,它服务的主要用户群与 replit 平台现有用户群比较接近,也就是正在学习编程的业余用户。

整体而言,Replit Agent 的上限是目前的代码生成类产品中最高的,可能是未来很长一段时间内,代码生成类产品的最高阶形态。目前的缺陷在于:现阶段产品完成度比较低,许多功能实测下来不够稳定,Agent 思考速度很慢。个人感觉,以现有的模型能力,要把这个形态的产品做到和 Cursor 接近的完成度,会需要比较长的时间。

开发实测

测试一:尝试使用 Replit Agent 实现以下需求:

核心功能描述

智能文稿整理助手是一款Web应用,旨在帮助用户从音频或视频文件中提取文本,并根据用户输入的Markdown格式模板,使用gpt-4o-mini模型整理文稿。

主要功能

  1. 文件上传与处理

    • 文件上传:用户可以上传音频(.mp3, .wav)或视频文件(.mp4, .avi),支持拖拽上传和文件选择。
    • 音频提取:系统自动从视频文件中提取音频。
    • ASR转写:使用ASR技术将音频转写为文本,支持多种语言和方言。
  2. Markdown编辑器

    • 编辑器功能:提供功能齐全的Markdown编辑器,支持常用Markdown语法(如标题、列表、链接、图片)。
    • 模板输入:用户可以在编辑器中输入希望输出的文档格式模板,包含占位符(如:{{content}})。
  3. 文稿整理

    • 提交与处理:用户完成模板编辑后,点击"提交"按钮,系统根据模板和ASR转写的文本,使用gpt-4o-mini模型整理文稿。
    • 文稿生成:生成的文稿展示在用户界面中,供用户预览和下载,支持多种格式(.txt, .md, .docx, .pdf)。

用户界面与体验

样式设计

  • 简洁直观:界面设计简洁,操作流程清晰。首页包括文件上传区域、Markdown编辑器和预览区域。
  • 实时反馈:在文件上传、音频提取、ASR转写和文稿整理过程中,提供实时进度反馈和提示信息。
  • 响应式设计:支持在PC、平板和手机等多种设备上使用,确保跨设备体验一致。
  • 主题风格:采用现代化的UI设计风格,使用清新配色和简洁图标,提升用户体验。

技术架构

  • 前端:使用React框架构建用户界面,集成Markdown编辑器(如Editor.md)。
  • 后端:使用Node.js搭建后端服务,处理文件上传、音频提取、ASR转写和文稿整理。
  • 存储与处理:使用云存储服务(如AWS S3)存储文件,使用任务队列(如RabbitMQ)管理处理任务。

安全与隐私

  • 文件加密:上传的文件和生成的文稿在存储和传输过程中进行加密,确保数据安全。
  • 隐私保护:遵守相关隐私法律法规,明确告知用户数据使用范围和保护措施。

通过这些核心功能和简洁直观的界面设计,智能文稿整理助手将为用户提供高效、便捷的文稿整理体验。

Replit 开发过程

可以看到,Replit Agent 全自动完成了以下动作:

  1. 完成了项目代码的编写
Replit Agent 代码编写完成
  1. 自动安装了项目的依赖包
Replit Agent 自动安装依赖
  1. 主动向用户索要了一次 OpenAI API Key
Replit Agent 请求 API Key
  1. 自动配置好了一个基于 Neon 的 postgres 数据库,并配置好了数据库地址、端口和账户密码。
Replit Agent 配置数据库
  1. 自动把 Flask 服务跑起来了,并且给了一个 WebView 供用户预览效果
Replit Agent Flask 预览
  1. 自动截了一张效果图
Replit Agent 自动截图
  1. 中间遇到错误能够进行一定的自动纠错,并自动重启服务
Replit Agent 自动重启

但是,后期尝试上传一个文件进行测试时,遇到了一个 ffmpeg 未安装的报错,就始终无法解决,这是因为 ffmpeg 不是 python 环境的依赖包,而是需要安装在系统环境的依赖,这种依赖 Replit Agent 无法自主安装,所以它始终无法解决这个问题。

另外,在尝试 debug 的过程中,Replit Agent 会需要用户手动上传文件,获取上传时的报错,当报错信息不足以进行排查时,它会尝试增加 logger 输出,并让用户将 log 日志反馈给它查看。这些操作,目前对于非开发者来说是无法简单完成的,但是,可以大胆畅想一下,未来 Replit Agent 很可能会支持自动化的 Agent 主动试运行、主动查看 log,并且自动修复问题。

第二次尝试使用 Replit Agent 完成同样的项目时,replit agent 产出了以下结果:

Replit Agent 第二次尝试结果

整体样式和第一次生成非常接近。

  1. Replit Agent 已经具备一个完善的前后端开发框架,Replit Agent 不仅能够编写代码,还能够配置开发环境、配置并运行数据库,在开发过程中遇到报错,能够自行识别并且修正错误,这是 Replit Agent 相比 Cursor 更进的一步。但是目前只能修复 terminal 中的错误,无法主动识别到一些需要试运行才能够发现的错误。

  2. Replit Agent 多次生成的样式基本一致,表明 Replit Agent 可能限制了模型的生成风格,或者使用了某种微调过的模型。

第二次尝试

任务

帮我写一个名人名言分享网站,它有两个页面:

  1. 一个热门名人名言推荐首页,首页上以列表形式展示名人名言,每条名人名言都支持用户点赞、收藏、复制图片分享。这个页面左侧有一个名人名言筛选器,支持按照国家、领域/行业、年代筛选名人。筛选器上方有一个搜索框,可以搜索名人的名字。推荐首页上顶部有一个导航栏,左侧是 logo,右侧是用户登录、注册功能。

  2. 用户页面,用户点击导航栏用户头像,可以查看自己点赞、收藏过的名人名言,这个页面一样可以进行筛选。

必须使用 supabase 的数据库和鉴权服务,使用 Next.js 进行开发,使用 tailwindcss 编写样式,如果可能的话,尽可能使用 shadcnui 的组件。

最终产物:

名人名言网站最终效果

应用整体完成度很低,需求中的用户管理、名言列表没有开发,实际筛选功能也没有做出来,用户页面也没有开发。

这次尝试在开发需求中明确使用 next.js + supabase + tailwindcss 来进行应用,但是 Replit Agent 表示无法遵循指令,仍然坚持使用 Flask + 纯JS + postgres 开发了这个应用。

这可能是因为 Replit Agent 为了能够顺畅对接 Replit 平台上现有的云服务(主要是 postgres 数据库),所以限制了 agent 能够使用的技术栈。未来 replit 可能会逐步允许 agent 使用更多框架,可能 react / next.js / fastapi / django 这些热门框架都能支持,数据库可能也会开放更多选择。

这个思路和 Vercel V0 通过限制模型只能通过 shadcnui 来写前端样式一样,通过限制开发自由度,来获取更高的可控性和完成度,思路是合理的,但是目前即使限制了模型使用的技术栈,仍然做不到稳定实现需求。

3. Github Copilot / Supermaven

这两个产品比较基础,都是插件形态,提供代码补全能力和针对代码进行问答的能力。Github Copilot 是目前使用最广泛的编程辅助插件,Supermaven 是一个极速版的 Github Copilot,除此之外没有太大差别。

这类产品现阶段都比较熟悉了,暂时不详细写,有时间再补充。

Chat + Preview 类产品(Artifacts 类产品)

1. Vercel V0

产品概况

Vercel 是一个前端云平台,专注提供前端项目部署服务,主要的产品包括 Vercel 平台、Next.js 框架(占据了 React 生态的最大份额)和最新的代码生成产品 Vercel V0。

Vercel V0 是一个做得比较薄的 UI 生成产品,第一期专注纯 UI 生成,几乎不带任何功能,最近更新改版之后,产品形态更加接近 Claude Artifacts,提供代码生成和预览的服务,但是不提供开发环境。

Vercel V0 的主要优势在于:Vercel 对前端的理解比较深刻,在生成过程中限制了平台上生成的内容使用 ShadcnUI 框架和 Tailwindcss 编写样式,(可能在样式层面编写了更加复杂的 Prompt 或者进行了微调),生成的产品显著比其他平台样式更加美观,但是在产品整体功能完成度上,距离 replit agent 这类自主 agent 还有很大距离,无法自主操控开发环境,也无法主动配置环境变量等信息。

Vercel V0 与 shadcnui 的集成:

最近 Vercel V0 改版之后,生成产物可以直接用 shadcn cli 一键安装到自己的项目中:

Vercel V0 添加到代码库

可以看出来 Vercel V0 已经不再像之前一样尝试做完整的页面生成,而是将重心改成了做组件生成,为了服务这个目标,通过 shadcn cli 提供了方便的脚手架工具,支持开发者将 vercel v0 开发的组件快速集成到 codeabse 。

这个定位很好地回避了与 Cursor 类产品的竞争。Vercel V0 只有一个聊天+在线预览的功能,肯定是不能和与 IDE 深度集成的 Cursor 对标的,所以 Vercel 充分发挥了自己在前端领域的优势,专注开发组件,开发后的组件能够很方便得添加到使用 Cursor 开发的项目中,现在已经有用户在结合使用 Vercel V0 和 Cursor 来开发产品。

开发实测

尝试使用 Vercel V0 实现以下需求:

核心功能描述

智能文稿整理助手是一款Web应用,旨在帮助用户从音频或视频文件中提取文本,并根据用户输入的Markdown格式模板,使用gpt-4o-mini模型整理文稿。

[需求详情与上文相同,此处省略]

Vercel V0 开发过程

2. Claude Artifacts

产品概况

Claude Artifacts 其实不是一个专门的代码生成工具,它是一个可以在对话流中出现的文件预览器,从对话流中点开以后,它能够兼容文件、图片、代码、 HTML页面等形式文件的预览需求。

在所有形态的 Artifacts 中,代码类 Artifacts 率先出圈,给 Claude 带来了较大流量,主要原因是因为 Claude 提供的在线预览和分享能力让模型生成的代码能够让小白用户快速体验到开发应用的感觉,新奇感比较强,在专业开发者中并没有产生像 Cursor 一样大的反响。

Claude Artifacts 预览文档

Claude Artifacts 预览文档

预览 SVG

Claude Artifacts 预览 SVG

当文件类型为代码时,它可以高亮显示代码块:

Claude Artifacts 代码高亮

当且仅当文件类型为 HTML/JSX 时,它可以把页面预览出来,其他类型的代码是无法预览的:

Claude Artifacts HTML/JSX 预览

关掉预览器之后,点右上角展开 panel ,还可以看到一份所有对话中出现的历史文件列表:

这个交互比较好地解决了 LUI 下处理文件比较麻烦的问题。

开发实测

测试一:开发一个用户访谈音视频整理应用

产品目标

app 能够接受一个音频或者视频文件的输入,通过 ASR 提取出其中的文本,并且使用 gpt-4o-mini 模型按照指定格式整理文稿。整理格式是支持编辑的,可以允许用户自由调整预期的文稿格式。

视角

业余开发者视角

开发过程& 结果

说明

  1. 这是第一次尝试,claude 推荐的技术栈是使用 flask +静态 html 实现,这套代码在 claude 上是跑不起来的,需要放到自己本地的开发环境运行。

  2. 需要在本机上进行一系列配置,配置自己的.env 文件,填入 api_key,在本机上安装 python 的一系列依赖包 和 ffmpeg 音视频处理软件,这些如果都能完成的话,中间遇到了包之间互相冲突的问题需要解决,这些工作稍有经验的开发者可以解决,但是纯 non coder 用户是无法操作下来的

备注

这是另一次尝试,推荐 node.js + react 前端,还是需要放到自己本地环境运行,而且对 non coder 来说跑起来更加复杂。

看了一下网上视频博主,使用 claude artifacts 开发完应用之后,如果是非前端文件,一般用 replit 部署比较多。replit 作为一个学习和分享工具效率挺高的。

测试二:开发能在线分享的 web 游戏

产品目标

测试一下什么类型的产品可以直接发布

开发过程& 结果

开发过程的详细说明...

说明

  1. 第一次 claude 仍然尝试给我用Python + Pygame来写这个游戏,这个结果我是无法预览的,跟我在外面用 ChatGPT 写效果是一样的,我还是需要在本地打开 IDE 调试,并最终找一个 replit 或者 railway 类的平台部署。

  2. 第二次在我明确引导后,开始用 html 来给我写这个游戏,最终游戏成功写出来了,也可以预览。也就是说 Claude 的一键发布功能是针对对纯前端的。

测试开发 react 和 vue 应用

产品目标

分别用 react 和 vue 开发一个 todo app 和一个 feed app

开发过程& 结果

详细开发过程...

说明

  1. React 应用可以在线预览,并且一键发布
  2. Vue 应用没支持
  3. 也就是 claude 目前明确支持了的就是 html 和 react(JSX 文件)

其他用户使用 Claude Artifacts 的开发过程

效果

这个博主用了 4.5 个小时,跟 Claude Sonnet 高强度对话,创造了这个 todo app。

这个博主开发的 app 是有用到后端的,后端用的是 firebase,在 claude 的帮助下成功开发了出来。

刷新了我的认知,claude 确实能开发一些实用级别的应用了。

这个博主开发的代码最终部署到 replit 上,所以他不需要自己折腾一遍环境。

这个博主尝试根据一张推特截图,5 分钟内做出自己的笔记 app

这个用户实际 2 分钟的时候就开发完了,后面 3 分钟都是在部署到 replit。

纯模型对话生成产品

1. GPT-4o API +本地 IDE

使用 OpenAI 的模型 API 加上本地 IDE 开发应用,这是大模型出现以后最常见的生成式 UI 场景,没有 vercel v0 和 claude artifacts 等生成式产品的时候已经有很多人在这样用。

开发实测

测试一:开发一个 gradio 应用,将用户访谈的音视频整理成指定的格式

产品目标

app 能够接受一个音频或者视频文件的输入,通过 ASR 提取出其中的文本,并且使用 gpt-4o-mini 模型按照指定格式整理文稿。整理格式是支持编辑的,可以允许用户自由调整预期的文稿格式。

最终结果

结论

  1. 生成式 UI 其实就是人和 ai 结伴编程,人负责提问,ai 负责写代码。这个过程中,对 non coder 来说,更重要的是开发环境,而不是代码生成本身,头部闭源模型都能够把代码写得比较好。如果没有这个开发环境,non coder 就无法踏出第一步。

  2. 如果有一个集成式的现在生成式 UI 环境,确实可以帮助 non coder 用户解决不少问题,但是对于已经配置过开发环境的、有一定经验的开发者来说,其实就是省去了一个复制粘贴的工作量而已。也就是现阶段它服务的对象仅限 non coder。 Pro coder 会需要更加专业的生成式产品,github copilot 是一种成功的形态,其他的形态还未知。

  3. 生成中遇到数据量少或者知识更新不及时的领域,会无法完成生成任务,遇到这种问题,有一定开发经验的可以继续完成开发, non coder 用户基本无法解决。

开发视角

业余开发者视角

non coder 视角

开发过程

  1. 首先打开一个 ChatGPT的 UI 界面,由于ChatPGT 官网上的 GPT-4o 是偷偷降级过的,我找了一个通过api 访问的三方 UI,api 比官网 4o 模型效果更好一点。
ChatGPT UI 界面
  1. 向模型提出我的问题
向模型提问

这一步 non coder 是能够完成的

将代码复制到 IDE 中运行,这部分对业余开发者很简单

复制代码到 IDE

这部分工作对 non coder 来说比较繁琐,涉及到:

  1. 安装并配置 IDE
  2. 安装 python 并配置路径
  3. 学会执行代码

一部分能够成功

报错没有安装 ffmpeg,一个音视频处理工具

ffmpeg 报错

需要 brew intstall ffmpeg

安装 ffmpeg
  1. 一部分 non coder 看不懂报错,按照 gpt 的意见执行之后发现没有安装 brew
  2. 接下来需要安装 brew 或者其他软件管理工具,一部分人能够通过询问 gpt 正确安装 brew
  3. 最后顺利安装 ffmpeg

一部分人能完成这一步

支持更多音视频格式

支持更多格式

如果上一步坚持下来,这步也能完成

提示 openai sdk 的使用方式不对,openai sdk 在 1.0.0 之后有 breaking change,但是 4o 仍然使用了老版本的用法,导致报错。

OpenAI SDK 报错

按照 GPT 的修正更新代码:

更新代码

还是无法成功运行。接下来重新尝试很多次,都无法问到能成功执行的代码。GPT 宣布束手无策。

一部分 non coder 询问 chatgpt 之后搞懂了这个报错,但是接下来反复询问 chatgpt 都无法给出能成功运行的代码,绝大多数人在这里会放弃。

翻看官方文档,找到最新的 whisper 和 chat model 调用方式,并且手动修改代码

查看官方文档

这步 non coder 基本无法做到,到这里 non coder 开发者可以宣告失败了

剩下几个报错继续问 GPT 解决:

继续解决报错 解决更多报错 最终解决

这步没什么问题,这个音视频文案提取和整理 app 最终开发成功。运行 gradio 文件,得到了一个可分享链接。可以分享到公开互联网上,但是这个服务是运行在自己电脑上的,要部署到云服务器上还需要一番折腾。

部署

在国外可以选择 render / railway / vercel 这样的平台很方便的部署,免去折腾服务器的功夫,但是国内没有这类型产品,要部署还得去云平台上重新弄服务器、配置 ssl、配置 nginx、域名备案

备注

实际上,用户可以不需要打开一个 ChatGPT 界面就可以享受生成式 UI 能力。在IDE 上装一个好的 copilot 插件,把注释当成对话流用,一样也能够开发产品。但是以前 copilot 并没有引起这么多非开发人员的注意。

Claude Artifacts 能火,一方面是因为 Cluade Sonnet 3.5 模型能力大幅增强了,生成代码的完成度比以前最好水平有了显著提升。

另一个方面因为以前 non coder 用户没有接触过 IDE。 claude 做了一个纯静态网页的演示,支持在 claude 一键发布,让人以为不需要 IDE 也不需要部署,就可以发布产品了。