打开 Lovable

与 AI 聊天，即时构建 React 应用。这是一个由 Firecrawl 团队制作的示例应用。如需完整的云解决方案，请查看 Lovable.dev ❤️。

设置

1. 克隆并安装

git clone https://github.com/firecrawl/open-lovable.git
cd open-lovable
pnpm install  # 或 npm install / yarn install

2. 添加 .env.local

# =================================================================
# 必需
# =================================================================
FIRECRAWL_API_KEY=你的 Firecrawl API 密钥    # https://firecrawl.dev

# =================================================================
# AI 提供商 - 选择你的大模型
# =================================================================
GEMINI_API_KEY=你的 Gemini API 密钥        # https://aistudio.google.com/app/apikey
ANTHROPIC_API_KEY=你的 Anthropic API 密钥  # https://console.anthropic.com
OPENAI_API_KEY=你的 OpenAI API 密钥        # https://platform.openai.com
GROQ_API_KEY=你的 Groq API 密钥            # https://console.groq.com

# =================================================================
# 快速应用（可选 - 用于更快的编辑）
# =================================================================
MORPH_API_KEY=你的 MorphLLM API 密钥    # https://morphllm.com/dashboard

# =================================================================
# 沙盒提供商 - 选择一个：Vercel（默认）或 E2B
# =================================================================
SANDBOX_PROVIDER=vercel  # 或 'e2b'

# 选项 1：Vercel 沙盒（默认）
# 选择一种身份验证方式：

# 方法 A：OIDC 令牌（推荐用于开发）
# 运行 `vercel link` 然后 `vercel env pull` 以自动获取 VERCEL_OIDC_TOKEN
VERCEL_OIDC_TOKEN=vercel_env_pull 自动生成的令牌

# 方法 B：个人访问令牌（用于生产环境或 OIDC 不可用时）
# VERCEL_TEAM_ID=team_xxxxxxxxx      # 你的 Vercel 团队 ID 
# VERCEL_PROJECT_ID=prj_xxxxxxxxx    # 你的 Vercel 项目 ID
# VERCEL_TOKEN=vercel_xxxxxxxxxxxx   # 从 Vercel 控制台获取的个人访问令牌

# 选项 2：E2B 沙盒
# E2B_API_KEY=你的 E2B API 密钥      # https://e2b.dev

3. 运行

pnpm dev  # 或 npm run dev / yarn dev

打开 http://localhost:3000

许可证

MIT

Open Lovable 快速上手指南

Open Lovable 是一款由 Firecrawl 团队开源的 AI 工具，允许你通过自然语言对话即时构建 React 应用。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

• 操作系统：macOS, Linux 或 Windows (推荐 WSL2)
• Node.js：版本 18.0 或更高
• 包管理器：推荐安装 pnpm (也可使用 npm 或 yarn)
  • 安装 pnpm: npm install -g pnpm
• API 密钥：
  • 必选：Firecrawl API Key
  • 必选：至少一个大模型提供商密钥 (Google Gemini, Anthropic, OpenAI 或 Groq)
  • 必选：沙箱环境密钥 (默认使用 Vercel，需配置 Vercel CLI 或 Token；或使用 E2B)

安装步骤

1. 克隆项目与安装依赖

打开终端，执行以下命令下载代码并安装依赖：

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

提示：国内开发者若遇到网络延迟，可尝试配置 npm/pnpm 镜像源（如腾讯云或阿里云镜像）加速安装。

2. 配置环境变量

在项目根目录下创建 .env.local 文件，并填入你的 API 密钥。以下是最小化配置示例：

# =================================================================
# 必填：Firecrawl
# =================================================================
FIRECRAWL_API_KEY=your_firecrawl_api_key

# =================================================================
# 必填：选择一个大模型提供商 (只需填写你使用的其中一个)
# =================================================================
GEMINI_API_KEY=your_gemini_api_key
# 或者
# ANTHROPIC_API_KEY=your_anthropic_api_key
# 或者
# OPENAI_API_KEY=your_openai_api_key

# =================================================================
# 必填：沙箱提供商 (默认使用 Vercel)
# =================================================================
SANDBOX_PROVIDER=vercel

# Vercel 认证方式 A (推荐本地开发): 
# 先运行 'vercel link' 关联项目，再运行 'vercel env pull' 自动获取 token
VERCEL_OIDC_TOKEN=auto_generated_by_vercel_env_pull

# 或者 Vercel 认证方式 B (手动填写):
# VERCEL_TEAM_ID=team_xxxxxxxxx
# VERCEL_PROJECT_ID=prj_xxxxxxxxx
# VERCEL_TOKEN=vercel_xxxxxxxxxxxx

注意：如果你选择使用 E2B 作为沙箱提供商，请将 SANDBOX_PROVIDER 设为 e2b 并填写 E2B_API_KEY，同时注释掉 Vercel 相关配置。

基本使用

1. 启动开发服务器

在终端中运行以下命令启动应用：

pnpm dev

2. 开始构建

1. 浏览器会自动打开 http://localhost:3000。
2. 在聊天框中输入你的需求（例如：“创建一个带有深色模式的待办事项列表应用”）。
3. AI 将自动生成代码并在右侧预览窗口实时渲染 React 应用。
4. 你可以继续通过对话修改样式、添加功能或修复 Bug。