Open-Lovable工具介绍与使用教程

资源分享
1

Open-Lovable工具介绍与使用教程

工具简介

Open-Lovable是由Firecrawl团队开发的开源AI网站克隆工具，能在几秒内将任意网站转换为现代化的React应用（Next.js + TypeScript + Tailwind CSS）。它通过AI技术自动抓取网页内容、生成组件化代码，并支持自然语言交互修改，适合前端开发、UI学习和原型搭建。

1800×1013 116 KB

核心功能

  • 极速克隆：输入URL即可自动抓取并生成React代码
  • AI辅助开发：支持OpenAI/Claude/Gemini等模型优化代码
  • 本地运行：npm run dev即可在localhost:3000预览和编辑
  • 安全隔离：通过E2B沙箱环境运行，不影响本地系统

1800×1013 116 KB

图：使用自然语言指令调整网站样式的AI交互界面

安装步骤

  1. 克隆仓库

bash

git clone https://github.com/mendableai/open-lovable.git
cd open-lovable
npm install

1850×1476 247 KB

  1. 配置API密钥 创建.env.local文件并添加：

plaintext

# 必需
E2B_API_KEY=your_e2b_key  # 从https://e2b.dev获取
FIRECRAWL_API_KEY=your_firecrawl_key  # 从https://firecrawl.dev获取

# 可选（至少一个AI提供商）
OPENAI_API_KEY=your_openai_key
ANTHROPIC_API_KEY=your_anthropic_key
GROQ_API_KEY=your_groq_key  # 推荐Kimi K2模型
  1. 启动应用

bash

npm run dev

访问http://localhost:3000开始使用

1138×640 163 KB

生成效果对比

通过Open-Lovable克隆的网站与原网站对比：

1024×576 210 KB

左：原网站 | 右：生成的React应用（保留样式与交互）

官方资源