这几天在研究 Google AI Studio Build 的实现原理,了解到目前市面上的 Text2Code 一般是通过 AI 后端+SandBox(项目隔离)实现项目生成和及时编译。普通用户想要架设一套完整的 AI 项目生成系统会比较麻烦。
我的初衷是找到一个可以通过语言描述快速生成一些简单的网页应用的项目。但发现目前市面上开源项目大部分都很重,环境变量配置也相当的麻烦。既然没有自己满意的项目,那就动手写一个…
在调研了一些方案后,我最终采用了 AI 代码生成+Sandpack 这套架构方案,Sandpack 底层由 CodeSandbox 提供技术支持,可以很轻松的实现项目云端编译,实时预览的效果,而且没有任何费用。AI 代码生成其实有很多中实现方案,比如像 manus 那样在项目中通过任务的形式一步步执行,也可以通过 tool call 让 AI 自己选择工具进行操作。我在项目中采用了第二种方案。项目的核心代码位于 src/lib/generator.ts,本质上是利用 tool call 让 AI 自主选择工具,对代码进行项目初始化、管理项目依赖、列出所有项目文件、批量读取文件内容、创建或覆写文件、精确搜索替换文件内容、删除文件、全局搜索文件内容,以及可选的联网搜索与网页内容读取。这些操作可以让 AI 精准的操作虚拟文件系统中的项目文件,实现云端项目生成。
本项目无后端架构,是一个静态页面,因此您可以将此项目部署到任何服务器上。所有的项目参数都保存在本地,因此您也无需担心数据泄漏的问题。由于是无后端的架构模式,您可能无法与朋友共享此项目。
这个项目不是强大的 AI 代码构建系统(比如 Lovable、v0.app),但肯定是一个比较好的学习案例。项目代码不多,您完全可以一个文件一个文件的了解这套轻量级的 AI 应用生成系统实现原理和一些逻辑细节。
以下是我部署的一个演示网站,您也可以通过项目文档中的部署指南,一键部署您自己的 AI 应用生成系统。
如果您喜欢这个项目,可以给项目点一个 star,将此项目加入到您的收藏中。
另外,感谢星野公益站提供的稳定的 API 服务,让我可以愉快的使用 Claude Code 进行项目开发。
