# 分享一个 idea

最近 AI Coding 越来越🔥。此类产品依赖的一项核心能力，是对 AI 生成的代码实时预览。

不同的项目代码，用到的预览方案不太一样。

如果生成的代码是单个文件，直接放到 iframe.srcdoc 就能预览，这个方案实现起来很容易。

如果生成的代码是多个文件，涉及到框架 / 组件 / 依赖，预览方案要复杂很多。

比如，让 AI 生成一个 Landing Page，按照 nextjs 的项目规范返回代码，AI 生成的文件树示例：

- app/page.tsx
- app/globals.css
- components/
- Header.tsx
- Hero.tsx
- Features.tsx
- Footer.tsx

这样的一组代码文件，要实时预览，就必须走自定义预览服务的方案。

考虑到想切入 AI Coding 赛道的产品很多，每个人都去实现一个预览服务，成本很高。

可以做一个通用的 code-preview 服务，提供 API 供第三方接入，支持预览任意类型的项目代码，包括单文件 / 多文件。

这个 code-preview 服务，可以用 go 实现，基于 docker + 预置镜像支持各类项目的预览需求。

1. 先制作几套常用的代码模板，打包成 docker 镜像，包括
- vite + react
- vite + vue
- nextjs + shadcn/ui
- nuxtjs

2. 用 go 实现一个服务管理模块
- 接收上游传递的代码包
- 解压缩拿到所有的代码文件
- 根据预览的项目类型，选用特定的 docker image 启动 docker 容器，挂载要预览的代码文件到容器，替换掉模板中的特定文件
- 返回容器的预览端口，拼接可公网访问的预览地址给到上游
- 接到上游预览关闭信号，销毁 docker 容器，或者通过定时程序来清理不再活跃的 docker 容器

3. 需要评估预览服务的启动耗时（文件传输耗时，容器启动耗时），需要支持并发请求（可能会有本地端口占用冲突的问题，服务器资源不够问题）

code-preview 服务跟 AI Coding 业务完全解耦，业务方请求 AI 生成完代码，请求 code-preview 服务的 API 拿到预览地址，通过 iframe.src 预览

code-preview 服务需要保证稳定性和启动预览的速度，如果因为代码问题导致预览报错，需要把错误信息返回给业务方，以便业务方带上错误请求 AI 修正代码后重新启动预览

code-preview 服务按照业务方的 API 调用次数计费

跟 bolt 公司用到的 WebContainer 技术有点类似，只不过 WebContainer 是跑在浏览器端，code-preview 服务是跑在云端，code-preview 的接入会更方便，灵活性也会更高。预览速度方面需要调试后才能对比。

你看好这套方案吗？

点击图片查看原图