📌 项目地址：firecrawl/open-lovable | ⭐ 26,537 颗星 | 🔧 TypeScript | 📜 MIT
Open Lovable：26k Stars 的对话生成 React 应用，但离产品还差几步
Firecrawl 团队最近开源了一个演示项目 open-lovable，Star 数 26537。同名的 SaaS 产品是 Lovable.dev，这个开源版本是它的“毛坯房”——核心逻辑都在，但缺了产品化需要的稳定性、权限管理和上下文记忆。
我花了一个下午搭起来，跑了几个 prompt，写写它的实际工作方式、配置里的坑、以及代码里哪些部分可以拆分复用。
它不是“聊天生成 UI”这么简单
你在对话框里输入中文（或英文），系统做三件事：
- 用 Firecrawl 抓取一个网页（或者直接接受你给的指令）
- 把抓取结果或指令传给 LLM（Gemini / Anthropic / OpenAI / Groq）
- LLM 生成一个 React 组件，并部署到 Vercel 或 E2B 沙盒里，返回预览 URL
所以最终结果不是一句“你好，这是你的代码”，而是一个真实可访问的网址。你点开就能看到生成的界面。
配置环境：最耗时间的是沙盒
README 把环境变量分了四组，我按顺序配下来发现真正的坑在沙盒。
必填的只有一个：FIRECRAWL_API_KEY。去 firecrawl.dev 注册免费账号就能拿到，额度够测试。
AI Provider 四选一：我试了 Gemini 2.0 Flash 和 Groq。Gemini 响应最快，但生成包含 useEffect 的组件时偶尔漏依赖数组。Groq 免费额度很大（每天几千次），适合反复改 prompt。
沙盒配置才是真正花时间的地方。 默认是 Vercel，而 Vercel 有两种认证方式：
- OIDC Token（推荐开发用）。先
vercel link关联项目，再vercel env pull，会自动生成VERCEL_OIDC_TOKEN。我第一遍手动填了VERCEL_TOKEN，权限不对，折腾半小时。换成 OIDC 一次成功。 - Personal Access Token（适合生产）。需要同时填
VERCEL_TEAM_ID、VERCEL_PROJECT_ID、VERCEL_TOKEN三个值。
如果你不想折腾 Vercel，可以改 SANDBOX_PROVIDER=e2b，然后填 E2B_API_KEY。E2B 的沙盒更轻量，配置步骤少一半。
MORPH_API_KEY 是可选加速项。README 说它能实现“快速编辑”——AI 会修改已有文件而不是每次都新建文件。我没申请到试用，不确定效果。默认行为是每次生成独立组件。
工作流：从“抓取 Hacker News”到“生成卡片列表”
我试了两个典型场景。
1. “抓取 Hacker News 首页，做成卡片列表”
流程：系统调用 Firecrawl 把 https://news.ycombinator.com 转成 Markdown 结构文本。这段文本传给 LLM，LLM 分析出标题、链接、分数，然后生成一个带 Tailwind 样式的 React 组件，组件内用 fetch 获取 Firecrawl 返回的数据并渲染成卡片。
整个过程大约 10 秒。生成的组件可以直接在沙盒预览窗口看到。
2. “给我一个可拖拽排序的卡片列表”
这次不涉及抓取。LLM 尝试使用某个第三方拖拽库，但那个库的依赖没有预先安装，导致构建失败。我改成“用原生 HTML5 drag API 实现”就成功了。
这说明：LLM 对流行第三方库的掌握程度不均匀。如果你在 prompt 里指明“用原生实现”或“只依赖 React 内置 API”，成功率更高。
代码里哪些部分可以拆出来复用
项目目录结构很清晰，三组抽象层值得单独看：
/lib/providers：封装了 Gemini、Anthropic、OpenAI、Groq 的调用接口，统一暴露generate(prompt, systemPrompt)。如果你想换其他模型（比如本地 llama），仿照这个模式加一个 provider 就行。/lib/sandbox：Vercel 和 E2B 的适配层。如果你想换成自己的 Docker 环境或 code-server，改这里。- Firecrawl 的用法：项目在 prompt 中把 Firecrawl 返回的 Markdown 结构数据传给 LLM，让 LLM 决定渲染成什么 UI。这个模式可以直接复用：抓取文档生成 demo、抓取 API 文档生成交互式 Playground。
两个成本需要提前知道
1. Vercel 沙盒的免费配额很紧
Vercel 免费版每分钟只能部署一次。我连续改了两个 prompt，第二次就报 rate limit 错误。
两种解法：
- 升级 Vercel 到 Pro 计划（Hobby 版的一半价格）
- 切到 E2B 沙盒。E2B 的配额宽松很多，设置也简单。
如果你打算反复测试，建议直接选 E2B。
2. 多轮对话没有上下文记忆
我迭代了三次：第一次生成表格，第二次改为卡片，第三次增加搜索框。第三次完全忘记了前两次的内容，重新生成了一份无关组件。
原因不是项目特有，而是每次 prompt 都是独立请求，没有做增量保存。所以它并不是真正的“对话式 UI 生成”，而是一次性生成。如果需要迭代，你需要把前面生成的代码手动粘贴到 prompt 里，或者自己扩展上下文管理逻辑。
安全与局限
生成的代码是直接执行的。 如果有人输入恶意 JavaScript（比如窃取 cookie），沙盒虽然隔离，但运行在你的云账号下（Vercel 或 E2B）。建议只本地运行，或者加一层输入审查。
MIT 许可证，意味着你可以随便用。 但你要自己处理安全和稳定性。26k star 不代表它成熟，很多 star 来自“这个想法有意思”。
谁应该花时间部署它
open-lovable 是一个技术演示，不是可投产的工具。适合三类人：
- 想研究“自然语言生成 UI”各模块如何配合的开发者。读代码比读文档快。
- 需要快速验证 UI 原型的设计师。至少能生成骨架，然后手动改。
- 想做类似产品的人。fork 这个仓库，把沙盒改成本地渲染，比从零写省一周。
如果想跑通就完事，15 分钟配好环境足够。如果打算拿它做研究，建议把 OIDC 流程用脚本自动化，或者直接用 E2B 省掉 Vercel 的配额限制。
标签：Firecrawl，对话式UI生成，React，沙盒部署