Open-Lovable 是一个由 AI 驱动的“网站克隆”工具。您只需输入目标网站的 URL，它便能利用大语言模型 (LLM) 智能解析网页的布局、样式和结构，并在数秒内生成一个高保真、可运行、可二次开发的 React (Next.js) 项目代码。这极大地简化了从设计灵感转化为实际代码的过程。

项目特色

• 🤖 AI 智能解析：超越简单截图，深度理解并复现网页的组件结构与设计逻辑。
• 🚀 现代化技术栈：直接生成基于 Next.js 14、TypeScript 和 Tailwind CSS 的生产级前端代码。
• 🔧 多模型支持：可灵活选用 OpenAI GPT、Anthropic Claude、Google Gemini 或 Groq 等多种 AI 模型作为生成引擎。
• 🔄 端到端工作流：提供 Web 界面，一站式完成抓取、分析、生成、预览和下载。

技术栈与依赖环境  

关键的第三方 API 依赖

项目运行严重依赖于以下三项外部服务，您必须提前申请对应的 API 密钥：

环境变量配置

在项目根目录创建 .env.local文件，填入您的密钥，说明如下：

# 1. 必需：网页抓取与沙箱服务
FIRECRAWL_API_KEY="your_firecrawl_api_key_here"
E2B_API_KEY="your_e2b_api_key_here"

# 2. 必需：AI模型密钥（根据您选用的服务四选一填写即可）
OPENAI_API_KEY="sk-xxxxxxxxxxxx"
# 或 ANTHROPIC_API_KEY="claude-xxxxxxxxxxxx"
# 或 GEMINI_API_KEY="xxxxxxxxxxxx"
# 或 GROQ_API_KEY="gsk_xxxxxxxxxxxx"

# 3. 可选：指定默认使用的AI模型（如果您使用OpenAI，可以设为gpt-4o）
NEXT_PUBLIC_DEFAULT_MODEL="gpt-4o"

​完整格式

# =================================================================
# REQUIRED
# =================================================================
FIRECRAWL_API_KEY=your_firecrawl_api_key    # https://firecrawl.dev

# =================================================================
# AI PROVIDER - Choose your LLM
# =================================================================
GEMINI_API_KEY=your_gemini_api_key        # https://aistudio.google.com/app/apikey
ANTHROPIC_API_KEY=your_anthropic_api_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

# =================================================================
# FAST APPLY (Optional - for faster edits)
# =================================================================
MORPH_API_KEY=your_morphllm_api_key    # https://morphllm.com/dashboard

# =================================================================
# SANDBOX PROVIDER - Choose ONE: Vercel (default) or E2B
# =================================================================
SANDBOX_PROVIDER=vercel  # or 'e2b'

# Option 1: Vercel Sandbox (default)
# Choose one authentication method:

# Method A: OIDC Token (recommended for development)
# Run `vercel link` then `vercel env pull` to get VERCEL_OIDC_TOKEN automatically
VERCEL_OIDC_TOKEN=auto_generated_by_vercel_env_pull

# Method B: Personal Access Token (for production or when OIDC unavailable)
# VERCEL_TEAM_ID=team_xxxxxxxxx      # Your Vercel team ID 
# VERCEL_PROJECT_ID=prj_xxxxxxxxx    # Your Vercel project ID
# VERCEL_TOKEN=vercel_xxxxxxxxxxxx   # Personal access token from Vercel dashboard

# Option 2: E2B Sandbox
# E2B_API_KEY=your_e2b_api_key      # https://e2b.dev

部署流程 (宝塔 PM2)

以下是使用您熟悉的宝塔 PM2 方式进行部署的步骤：

1. 环境准备

   • 在宝塔面板的【软件商店】中，安装 PM2管理器。
   • 在宝塔面板的【网站】-【node项目】- Node 版本管理器安装Node.js v20.x 或更高版本。(我推荐用V24以上)

2. 获取项目代码

   • 通过【文件】管理器创建目录open-lovable，随后打开【终端】。
   • 进入目录，克隆官方仓库代码：

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

3. 配置与启动服务

   • 在项目根目录创建 .env.local 文件，并填入上述第五部分的配置。
   • 打开宝塔的 Node项目，点击【添加项目】。
   • 关键配置如下：
     • 项目路径：选择您的网站根目录。
     • 启动文件/脚本：选择 npm。
     • 项目端口：默认为 3000。如果被占用，可在PM2设置或启动命令中修改（例如在“附加参数”中添加 -p 3001）。
     • 创建成功后（根据网络状况要几分钟到十几分钟），编辑站点。 打开“域名管理”添加域名，随后打开“外网映射”

完成以上步骤后，即可通过您的域名访问 Open-Lovable 的 Web 界面，开始体验“克隆”网站的魔力。

核心总结与重点

1. 定位：Open-Lovable 是一个强大的 “设计转代码” 原型工具，而非万能爬虫。它最适合克隆 landing page、静态官网等前端展示型页面。
2. 核心门槛：部署本身不复杂，但 三大 API 密钥是前置必要条件。请务必提前申请并确认相关服务的计费策略（通常有免费额度）。
3. 效果管理：生成结果的质量取决于目标网站的复杂度及所选 AI 模型的能力。对于高度动态或交互复杂的页面，生成后需要一定的人工调试和优化。

演示