Open Lovable 是 Firecrawl 最新开源的一个 AI 驱动的 React 应用构建工具。简单来说，你可以像聊天一样告诉 AI 你想要什么样的网页，它会自动帮你生成代码、安装依赖、启动开发服务器，并实时预览效果。因为是开源项目，我们甚至可以加入语音输入功能，让它支持普通话对话。
把它想象成一个“开发助手工具箱” 🧰，你用语言下达指令，它会立即在后台完成编码、安装依赖、运行预览等一系列复杂操作，并让你立刻看到结果。
工作原理 (How It Works)
这个项目的核心魅力在于其高度自动化的工作流程。当你输入一个指令时，后台会发生以下一系列事情：
- 创建沙箱环境 (Sandbox Creation)
· 项目首先会使用 E2B 在云端创建一个完全隔离、安全的开发环境（Sandbox）。就像为你开启了一台临时的云端电脑，里面预装了 Node.js 和其他开发工具。
· 接着，它会自动在这个沙箱里初始化一个基于 Vite 的基础 React 项目，并配置好 Tailwind CSS，为你搭建好开发的起点。
- 指令意图分析 (Intent Analysis)
· 当你发出指令，比如“把导航栏背景改成黑色”，系统并不会立刻让 AI 重新生成所有代码。
· 它会先通过 analyze-edit-intent/route.ts 这个 API 分析你的意图。它会判断你想要的是修改样式、添加功能，还是修复问题。
· 然后，它会制定一个搜索计划，在沙箱里的现有代码中查找最相关的代码片段（例如，找到 Header.jsx 文件中定义导航栏样式的部分）。
- AI 代码生成 (AI Code Generation)
· 系统会将你的指令、沙箱中相关文件的代码（作为上下文）一起发送给你选择的 AI 模型（如 GPT-5, Kimi, Claude 等）。
· AI 会根据这些信息，生成需要修改或新增的代码，并用特定的 XML 标签（如 ）包裹起来返回。
- 代码应用与执行 (Code Application & Execution)
· 后台服务 (apply-ai-code-stream/route.ts) 会解析 AI 返回的内容。
· 文件操作：它会把新生成的代码写入或更新到沙箱里的对应文件中。
· 依赖管理：它会自动检测代码中是否引入了新的第三方库（例如 framer-motion），并通过 install-packages/route.ts 在沙箱中自动运行 npm install 来安装它们。
· 服务重启：如果安装了新的依赖，它会自动重启 Vite 开发服务器，确保新库能被正确加载。
- 实时预览 (Live Preview)
· 沙箱中运行的 Vite 开发服务器会有一个临时的公开 URL。
· 项目前端会通过一个 iframe 将这个 URL 嵌入到界面中，让你能实时看到 AI 修改后的网页效果。整个过程无缝衔接，就像在本地开发一样。
- 迭代循环 (Iterative Loop)
· 你可以继续下达新的指令，项目会重复第 2-5 步，在现有代码的基础上不断迭代，直到你满意为止。你甚至可以要求它将整个项目打包成一个 .zip 文件供你下载。
主要亮点 (Key Features)
· 隔离且安全的沙箱 ☁️: 所有代码都在 E2B 云端沙箱中执行，不会影响你的本地电脑，保证了安全性和环境的一致性。
· 智能代码分析与编辑 🧠: 它不只是粗暴地重新生成代码，而是会分析现有代码库，尝试进行“外科手术式”的精准修改，这让迭代开发成为可能。
· 自动化依赖管理 📦: 你无需关心需要安装哪些 npm 包，AI 在代码中使用了什么，系统就会自动为你安装，极大地简化了流程。
· 多模型支持 🤖 : 项目集成了 Vercel AI SDK, OpenAI, Anthropic, Google Gemini, Groq 等多种主流 AI 模型。
· 实时反馈与预览 👁️: 从依赖安装到文件写入，再到最终的网页效果，整个过程都有实时的状态反馈，并且结果立即可见。
· 网站克隆能力 +1: 利用 Firecrawl 服务，你可以提供一个网址，AI 会先抓取该网站的结构和内容作为参考，然后再进行二次创作或修改。
技术栈 (Tech Stack)
· 前端: Next.js (with Turbopack), React, TypeScript, Tailwind CSS
· 后端 (API Routes): Next.js API Routes, Node.js
· AI 集成: Vercel AI SDK
· 核心服务:
· E2B: 提供代码执行的云端沙箱。
· Firecrawl: 用于抓取和解析现有网站。
· 开发工具: Vite (在沙箱内部署), ESLint, PostCSS
项目价值与潜力 (Purpose & Potential)
Open Lovable 不仅仅是一个有趣的玩具，它探索了 AI 驱动软件开发的未来形态。
· 对于开发者: 它可以作为快速原型验证（MVP）的利器，或是在已有项目上快速实现一些UI小调整的辅助工具。
· 对于初学者: 这是一个极佳的学习平台，可以直观地看到自然语言指令是如何转化为具体的、高质量的 React 代码的。
· 对于非技术人员: 它降低了网页制作的门槛，让产品经理或设计师也有可能通过自然语言来构建或修改简单的网页原型。
开始使用
- 克隆项目
git clone https://github.com/mendableai/open-lovable.git
cd open-lovable
npm install
- 申请填入 API Key
# Required
E2B_API_KEY=your_e2b_api_key # Get from https://e2b.dev (Sandboxes)
FIRECRAWL_API_KEY=your_firecrawl_api_key # Get from https://firecrawl.dev (Web scraping)
# Optional (need at least one AI provider)
ANTHROPIC_API_KEY=your_anthropic_api_key # Get from https://console.anthropic.com
OPENAI_API_KEY=your_openai_api_key # Get from https://platform.openai.com (GPT-5)
GEMINI_API_KEY=your_gemini_api_key # Get from https://aistudio.google.com/app/apikey
GROQ_API_KEY=your_groq_api_key # Get from https://console.groq.com (Fast inference - Kimi K2
- 运行
npm run dev
一句话总结（再说一遍）
Open Lovable 就像你的 AI 程序员同事——你只需要动嘴，它就能把网页做出来。
项目地址：
https://github.com/mendableai/open-lovable