Open-Lovable是Firecrawl团队推出的开源项目，在GitHub已斩获18.8K Star，成为近期最热门的开源项目之一。
它通过 AI 技术快速将任意网站克隆为现代 React 应用。用户输入目标网站 URL 后，通过 Firecrawl 抓取内容，用 AI 模型生成 React 代码，最终输出完整应用。
快速克隆：能快速抓取目标网站的页面内容和结构。
自动化构建：利用AI技术自动生成React组件和代码，快速搭建应用。
多AI支持：支持多种AI提供商（如Anthropic、OpenAI、Google Gemini等），支持根据需求选择不同的AI服务。
本地运行：用户能在本地环境中运行和测试克隆的应用，方便开发和调试。
灵活配置：基于配置文件（如.env.local）设置API密钥和相关参数，适应不同的开发需求。
该项目通过三阶段流水线实现网站克隆：
教育与学习：开发者和学生快速生成React代码，作为学习React组件化开发、状态管理和路由等概念的实践工具。
快速原型开发：初创公司和开发团队快速生成网站的React版本，用在概念验证或市场调研，节省开发时间和成本。
数据可视化：基于抓取特定网站数据并生成React应用，开发者能快速搭建数据可视化平台，例如展示新闻趋势或实时数据监控。
开发辅助：为复杂页面生成初步React组件代码，作为开发起点，帮助开发者减少重复劳动，快速迭代和优化应用。
内容迁移与重构：将传统网站迁移到现代React技术栈，或作为多平台应用开发的基础框架，助力开发者进行进一步的重构和扩展。
Open Lovable 安装与运行教程
Open Lovable 的核心功能是与 AI 聊天来即时构建 React 应用。为了运行它，你需要获取一些 API 密钥，并选择一个沙盒提供商。
步骤 1：克隆仓库并安装依赖
首先，你需要将 Open Lovable 的代码克隆到你的本地机器上，并安装所有必要的依赖项。
- 克隆仓库： 打开你的终端或命令行工具，运行以下命令： 2. 进入项目目录： 克隆完成后，进入新创建的
open-lovable目录： 3. 安装依赖： Open Lovable 支持pnpm、npm或yarn。选择你常用的包管理器进行安装。推荐使用pnpm。 步骤 2：配置环境变量 (.env.local)
Open Lovable 需要一些 API 密钥才能正常工作。在项目根目录创建一个名为 .env.local 的文件，并添加以下内容。请务必替换 your_xxx_api_key 为你自己的实际密钥。
你可以参考 GitHub 仓库中的 .env.example 文件。
-
FIRECRAWL_API_KEY (必需)： 这是 Open Lovable 的核心，用于内容的抓取和处理。
- 访问 https://firecrawl.dev 获取你的 API Key。
FIRECRAWL_API_KEY=your_firecrawl_api_keyAI PROVIDER (选择一个)： Open Lovable 使用大型语言模型 (LLM) 进行 AI 聊天和应用构建。你需要选择一个 LLM 提供商并获取其 API Key。
- Anthropic: https://console.anthropic.com
- OpenAI: https://platform.openai.com
- Gemini: https://aistudio.google.com/app/apikey
- (新增) Groq: https://console.groq.com
选择其中一个，并取消注释对应的行，填入你的密钥：
# ANTHROPIC_API_KEY=your_anthropic_api_key
OPENAI_API_KEY=your_openai_api_key # 例如，如果你选择OpenAI
# GEMINI_API_KEY=your_gemini_api_key
# GROQ_API_KEY=your_groq_api_keySANDBOX PROVIDER (选择一个)： 沙盒提供商用于代码执行等操作，默认为 Vercel。
-
Option 1: Vercel Sandbox (默认推荐)
-
方法 A: OIDC Token (推荐用于开发) 运行
vercel link然后vercel env pull，VERCEL_OIDC_TOKEN会自动生成。这是最简单和推荐的本地开发方法。
-
SANDBOX_PROVIDER=vercel
VERCEL_OIDC_TOKEN=auto_generated_by_vercel_env_pull方法 B: Personal Access Token (适用于生产或OIDC不可用时) 你需要你的 Vercel Team ID、Project ID 和 Personal Access Token。
# VERCEL_TEAM_ID=team_xxxxxxxxx
# VERCEL_PROJECT_ID=prj_xxxxxxxxx
# VERCEL_TOKEN=vercel_xxxxxxxxxxxx
Option 2: E2B Sandbox 如果你选择 E2B，需要获取其 API Key。
- 访问 https://e2b.dev 获取你的 API Key。
# SANDBOX_PROVIDER=e2b
# E2B_API_KEY=your_e2b_api_key.env.local 文件示例
这是一个 .env.local 文件的完整示例（请根据你的选择进行修改）：
# =================================================================
# REQUIRED
# =================================================================
FIRECRAWL_API_KEY=fc_your_firecrawl_api_key_here
# =================================================================
# AI PROVIDER - Choose your LLM
# =================================================================
# ANTHROPIC_API_KEY=your_anthropic_api_key
OPENAI_API_KEY=sk-your_openai_api_key_here
# GEMINI_API_KEY=your_gemini_api_key
# GROQ_API_KEY=your_groq_api_key
# =================================================================
# SANDBOX PROVIDER - Choose ONE: Vercel (default) or E2B
# =================================================================
SANDBOX_PROVIDER=vercel
VERCEL_OIDC_TOKEN=auto_generated_by_vercel_env_pull # 由 vercel env pull 自动生成项目地址：https://github.com/firecrawl/open-lovable