Open Lovable 安装使用教程

项目介绍

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

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

核心功能

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

环境要求

安装步骤

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

# 使用 pnpm（推荐）
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install

cp .env.example .env.local

pnpm dev

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 获取地址

使用方法

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 调用费用如何？

• Firecrawl：有免费额度，超出后按量计费
• LLM API：按实际 Token 消耗计费，具体价格参考各服务商
• Vercel：个人免费额度通常足够开发测试使用

Q5: 可以商用吗？

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

• 克隆他人网站时需注意版权问题
• 建议仅用于学习参考或获取设计灵感
• 商用时请确保遵守相关法律法规

Q6: 国内用户如何使用？

推荐配置：

• LLM：使用 DeepSeek API（国内直连）或 Gemini（免费额度高）
• Firecrawl：需要科学上网或使用代理
• 沙箱：Vercel 需要科学上网，可考虑使用 E2B 替代