AI 生成代码，实时预览的几种方案👇

一、 html + srcdoc + iframe

1. AI 生成可以通过浏览器直接打开的 html 文件（单文件，html/css/js 写到一起）

2. 通过 iframe 的 srcdoc 传入 html 源码预览

3. 通过 importmap 指定依赖包的 CDN 资源。

这种方案实现起来简单，预览效率高。

二、react/vue + blob + iframe

1. AI 生成 react / vue 组件代码（单文件组件，无本地 import 依赖）

2. 通过 Babel.transform 转换 react 组件/通过 VueCompiler 编译 vue 组件

3. 使用转换/编译后的组件，构建一个 html 文件

4. 使用 blob 构建预览 url，传入 iframe.src 预览

const blob = new Blob([html], { type: 'text/html' });

iframe.src = URL.createObjectURL(blob);

这种方案稍微复杂一些，适合 react / vue 单文件组件预览。

3. webcontainer

1. AI 生成组件代码（可以返回多个组件文件，组件可以互相 import）

2. 构建一个最小可运行的 vite 项目骨架，把 vite 骨架包含的文件和 AI 生成的组件打包在一起，构建一个文件树

3. 启动 webcontainer 容器，挂载文件树

4. 通过 webcontainer 执行终端命令，安装项目依赖

5. 通过 webcontainer 启动预览服务，得到预览地址

6. 把预览地址传入 webcontainer 容器外的 iframe.src 实现项目预览

这种方案依赖 webcontainer，可以实现多组件预览，灵活性更高，但是涉及到文件挂载，命令行安装依赖等步骤，预览速度会慢一些。

----- 总结 -----

方案一适合用户不关心代码，只想快点看到效果的场景，比如用 Pagen 一句话生成 landing page，页面内容都在一个 html 文件里面。

方案二适合辅助前端写组件场景。比如用 CopyWeb 截图复刻设计，生成单个 react 组件，在线预览效果，导出到本地项目使用。

方案三适合一句话生成完整项目场景，比如用 bolt/v0 一句话生成 nextjs 项目骨架，可在线预览，可导出 zip 到本地修改。

点击图片查看原图

点击图片查看原图