AI 生成前端项目的 bolt.new 是怎么做到的?

3,651 阅读5分钟

最近一些 AI 生成前端代码的应用挺火的。

比如 bolt.new

image.png

我告诉他写个菜谱大全网站,用 react、ts 写。

它会依次生成这个项目的全部代码:

2024-11-19 17.51.24.gif

可以看到,它的流程是这样的:

image.png

先生成 package.json,然后执行 npm install。

依次生成所有的文件。

然后跑下 npm run dev:

image.png

这样就可以在右侧看到生成的代码和预览效果了:

2024-11-19 18.01.24.gif

交互啥的都没问题。

之后点击部署:

2024-11-19 17.56.30.gif

它会部署到服务器,然后给你一个 url。

打开看下:

gleeful-sundae-df68f2.netlify.app/

这样一个菜谱网站就给写完并部署好了。

是不是很震撼!

要一个月薪 2 万的前端工程师写,也得要至少一天吧。

但是 AI 只要一分钟就给生成然后部署好了。

当然,我的需求比较简单,你完全可以描述更细致的需求,让 AI 给你生成。

生成后也可以再提需求,让它继续完善。

或者你也可以基于这些代码自己改:

image.png

这对于工作效率的提高,比任何基建都好用。

最近流行的 cursor,也是帮你写代码,但是它是集成到了 vscode 里,自己做了一个编辑器。

image.png

核心也是基于聊天做的。

大差不差的。

那 bolt.new 这种 AI 生成前端代码并在浏览器里编译、运行的功能,实现原理是什么呢?

我们简单分析下。

首先我们需要调用 AI 接口,告诉它需求,让它给生成代码。

这里看下 cursor 用的模型:

image.png

默认是 claude-3.5-sonnet 这个。

国内调用国外的 ai 接口有重重阻碍。

image.png

所以我们一般都是找个国内的代理商的 api 来用。

这种代理挺多的,我这里用的 302.ai,你也可以用别的

这种代理都是给你对接好了国内、国外各种模型,你可以直接用:

image.png

刚才 cursor 用的那个模型也有。

我这里充了 5 美元,也就是 40 人民币,可以用支付宝支付,这点确实方便:

image.png

国外的那些模型,你支付都是个问题。

所以还是调用 AI 接口,还是直接用国内的代理香。

创建个聊天机器人,指定 cursor 用的那个模型:

image.png

让它给生成一个菜谱网站:

生成一个菜谱大全网站,用 react、ts 写,先用 json 形式给我项目目录,然后依次给我每个文件的内容

首先,目录是这样的:

image.png

然后依次给我了每个文件的内容:

image.png

你也可以分别询问每个文件的内容:

image.png

bolt.new 就是这样新生成了目录,然后依次生成的每个文件:

2024-11-19 17.51.24.gif

我们在项目里怎么调用这个 AI 接口呢?

这样:

image.png

创建一个 api key。

然后看下调用接口的文档:

image.png

把示例代码复制下来:

image.png

我们创建个测试项目:

mkdir ai-test
cd ai-test
npm init -y

image.png

创建 index.js

var axios = require('axios');
var data = JSON.stringify({
   "model": "claude-3-5-sonnet-20241022",
   "messages": [
      {
         "role": "user",
         "content": "生成一个菜谱大全网站,用 react、ts 写,用 json 形式返回,key 是文件目录,value 是文件内容"
      }
   ]
});

var config = {
   method: 'post',
   url: 'https://api.302.ai/v1/chat/completions',
   headers: { 
      'Accept': 'application/json', 
      'Authorization': 'Bearer API_KEY放这里', 
      'Content-Type': 'application/json'
   },
   data : data
};

axios(config)
.then(function (response) {
   console.log(JSON.stringify(response.data, null, 4));
})
.catch(function (error) {
   console.log(error);
});

填入刚才的 api key,content 那里输入内容。

安装依赖,然后跑一下:

npm install --save axios
node ./index.js

image.png

我们打印下这部分:

console.log(response.data.choices[0].message.content)

和我们在网页那里问的结果一样:

image.png

我们可以用 remark 来 parse 出 AST,拿到这部分代码:

image.png

astexpoler.net 可以看到 AST。

然后把这些依次写到磁盘里就好了。

加上 typescript、vite、tailwind 等基础代码,就可以跑了。

那 bolt.new 在浏览器里执行 npm install、npm run dev,是怎么做到的呢?

image.png

这是用他家之前出的 WebContainer 来做的。

前几年刚出的时候火过一段时间,不知道大家还有印象没:

image.png

就是基于 wasm 实现的浏览器里的 node 运行时,也可以跑 npm。

所以自然就可以执行 npm install、npm run dev,跑各种 node 代码。

个人用、不商用是免费的:

image.png

那怎么用呢?

官方有个 demo:

stackblitz.com/edit/stackb…

最终效果就是在浏览器里跑起来了 express 服务:

image.png

api 是这么用的:

image.png

调用 @webcontainer/api 包的 WebContainer 的 api。

首先调用 boot,把它跑起来。

然后调用 mount 传入一些 files。

这里有两个 file:

image.png

一个 package.json,一个 index.js

后面还可以调用 fs 的 api 来写入文件:

image.png

总之,就是 webcontainer 里有一套文件系统。

然后有了 package.json 就可以跑 npm install 了:

image.png

调用 spawn 来执行命令,这里跑下 npm install。

然后结果可以在 WriteStream 里拿到。

这里只是打印了下,后面可以接入 xtrerm 在浏览器里显示终端。

也就是在这个东西:

image.png

之后继续执行 npm run start 的命令就好了

image.png

这里是通过 iframe.src 来访问的这个 express 服务。

这样,我们就通过 @webcontainer/api 在浏览器里跑了一个 express。

其实 WebContaienr 用起来还是很简单的,

这俩都是他家的:

image.png

那自然会在实现 bolt.new 的时候用到 WebContainer 在浏览器里做构建。

image.png

那之后的部署呢?

在浏览器里跑完 npm run build 之后,拿到 dist 目录上传到服务器就好了。

这就是 bolt.new 的大概实现原理。

总结

今天我们了解了一下 bolt.new,它可以通过文本描述需求,让 AI 去生成前端项目的代码,然后在 webcontainer 里跑 npm install 和 npm run build 等,把产物部署到服务器上,之后直接通过 url 访问 AI 生成的代码的效果。

我们简单试了一下这个流程,首先我们用的国内的一个 AI 代理商的接口来试了下代码的生成,用的 cursor 一样的模型,生成的目录和代码都是可以直接跑的。

然后学习了下 @webcontainer/api,它是一个基于 wasm 实现的浏览器里的 node 环境,可以往其中写入一些文件,然后跑各种 node 脚本。

之后我们还可以在服务器上加一个接口来接收编译后的代码,实现部署。

把这个流程连起来,就是 bolt.new 的实现原理。

当然,具体细节肯定还有很多,但思路就是这样的。