Open Lovable 安装使用教程

3秒复刻任何网站，AI生成React代码的开源神器

⭐ 24K Star · MIT开源

🚀 项目介绍

Open Lovable 是由 Firecrawl 团队开发的开源项目，能够通过 AI 将任何网站克隆并转换为现代 React 应用。只需输入网址，AI 会自动抓取页面结构、样式和内容，然后生成完整可运行的 React 代码。

✨

核心优势：输入网址 → AI分析 → 生成React代码 → 实时预览，全程自动化！

项目信息 详情
GitHub 地址 github.com/firecrawl/open-lovable
开发团队 Firecrawl
Star 数量 24K+
开源协议 MIT License
技术栈 Next.js + Firecrawl + LLM + Vercel Sandbox

⚡ 核心功能

🌐

网站克隆

输入任意网址，自动抓取页面结构和样式

🤖

AI代码生成

GPT-4/Claude/DeepSeek等大模型生成React代码

👁️

实时预览

Vercel沙箱环境实时运行生成的代码

💬

对话迭代

通过对话持续优化和修改生成的应用

💡

Open Lovable 使用 Firecrawl 进行网页抓取，确保获取完整的页面结构和样式信息！

📋 环境要求

要求 说明
Node.js 18.x 或更高版本
包管理器 pnpm / npm / yarn（推荐 pnpm）
Firecrawl API 用于网页抓取（获取）
LLM API GPT-4 / Claude / Gemini / DeepSeek（任选其一）
Vercel 账号 用于沙箱预览（可选 E2B 替代）

⚙️ 安装步骤

1

克隆代码仓库

bash 
git clone https://github.com/firecrawl/open-lovable.git
cd open-lovable
2

安装依赖

bash 
# 使用 pnpm（推荐）
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install
3

创建环境配置文件

bash 
cp .env.example .env.local

然后编辑 .env.local 文件，填入 API Key（见下一节）

4

启动开发服务器

bash 
pnpm dev

打开浏览器访问 http://localhost:3000

🔑 API 配置

编辑 .env.local 文件，配置以下 API Key：

必填配置

.env.local 
# ============ 必填 ============
FIRECRAWL_API_KEY=your_firecrawl_api_key  # https://firecrawl.dev

AI 模型配置（选择其一）

.env.local 
# ============ AI 模型 - 选择其一 ============
GEMINI_API_KEY=your_gemini_api_key      # https://aistudio.google.com
ANTHROPIC_API_KEY=your_anthropic_key    # https://console.anthropic.com
OPENAI_API_KEY=your_openai_api_key      # https://platform.openai.com
GROQ_API_KEY=your_groq_api_key          # https://console.groq.com

沙箱配置（Vercel 或 E2B）

.env.local 
# ============ 沙箱配置 ============
SANDBOX_PROVIDER=vercel  # 或 'e2b'

# Vercel 方式（推荐）
# 运行 vercel link 然后 vercel env pull 自动获取
VERCEL_OIDC_TOKEN=auto_generated

# 或使用 E2B
# E2B_API_KEY=your_e2b_api_key
⚠️

国内用户推荐：使用 DeepSeek API，价格便宜且国内可直连！或者搭配 Gemini API。

API 获取地址

服务 获取地址
Firecrawl firecrawl.dev
Gemini aistudio.google.com
OpenAI platform.openai.com
Anthropic console.anthropic.com
DeepSeek platform.deepseek.com

💻 使用方法

1. 克隆网站

在输入框中输入要克隆的网站 URL，点击发送：

示例 
克隆这个网站：https://stripe.com

2. 等待生成

AI 会自动完成以下步骤：

  1. 使用 Firecrawl 抓取目标网站
  2. 分析页面结构、样式和内容
  3. 生成 React 组件代码
  4. 在沙箱中实时预览

3. 迭代优化

通过对话继续优化生成的应用：

示例 
把导航栏改成深色主题
添加一个联系我们的表单
让按钮有悬停动画效果

4. 导出代码

生成的代码可以直接下载或复制到你的项目中使用。

🎯

使用技巧：克隆时尽量选择结构清晰的页面，效果会更好！

❓ 常见问题

Q1: 和 Lovable.dev 有什么区别？

Open Lovable 是 Firecrawl 团队开发的开源示例项目，展示如何结合 Firecrawl 和 LLM 构建网站克隆工具。如需完整的云端解决方案，推荐使用 Lovable.dev。

Q2: 支持克隆哪些网站？

理论上支持任何公开访问的网站。但复杂的动态网站（如需要登录、大量 JavaScript 渲染）可能效果较差。静态页面和简单的 SPA 效果最佳。

Q3: 生成的代码质量如何？

代码质量取决于选择的 LLM 模型。GPT-4o 和 Claude 3.5 Sonnet 生成的代码质量较高，结构清晰可维护。

Q4: API 调用费用如何？

Q5: 可以商用吗？

Open Lovable 采用 MIT 开源协议，可以自由使用、修改和商用。但请注意：

Q6: 国内用户如何使用？

推荐配置：