企业官网建设流程全解析

• AI 应用
• 前端
• 后端
• 代码生成

本文是 Open Lovable 的技术部署指南，围绕项目官方 README.md 的核心内容展开：如何克隆、配置环境变量、选择 AI 提供商与沙箱提供商并启动应用。文章同时结合当前仓库源码（AI Provider 管理、Sandbox 抽象层、全局配置）逐项印证每个配置项的真实作用与默认值，帮助读者快速跑通"聊天生成 React 应用"的完整链路。

一、项目定位：什么是 Open Lovable

Open Lovable 是一个由 Firecrawl 团队开发的开源示例应用，其核心定位是"Chat with AI to build React apps instantly"——即通过与 AI 对话，以自然语言驱动的方式即时生成并迭代 React 应用。它展示了将 Firecrawl 网页抓取能力、多家 LLM 提供商与云端沙箱（Sandbox）组合起来，构建一条"抓取网页 → AI 生成代码 → 沙箱运行 → 实时预览"全自动链路的完整参考实现。若需要开箱即用的云端完整解决方案，官方文档同时推荐了 Lovable.dev。

从仓库结构看，这是一个基于 Next.js 15（App Router）与 React 19 的全栈应用：

• 前端界面位于 app 目录（builder 页、generation 页与落地页），交互组件集中在 components；
• 后端能力全部以 Route Handler 形式暴露，集中在 app/api，涵盖抓取、AI 代码生成、沙箱生命周期管理、包安装、错误监控等约 26 个接口；
• 核心业务逻辑在 lib 目录，包括 AI 提供商管理（lib/ai/provider-manager.ts）、沙箱抽象层（lib/sandbox）、上下文选择器与编辑意图分析器等；
• 全局可调参数集中在 config/app.config.ts，依赖清单见 package.json。

二、系统工作链路（源码级速览）

在动手配置前，先理解整个应用如何协作。从 API 路由与 lib 层的代码结构可以梳理出四条关键链路：

1. 网页抓取链路：用户输入目标 URL 后，app/api/scrape-website/route.ts 调用@mendable/firecrawl-js的app.scrape()抓取页面内容（默认返回 markdown 与 html 格式），作为 AI 生成代码的输入素材；
2. AI 生成链路：app/api/generate-ai-code-stream/route.ts 接收对话上下文与抓取结果，通过streamText流式生成代码；模型解析与客户端创建统一由 lib/ai/provider-manager.ts 完成；
3. 沙箱执行链路：app/api/create-ai-sandbox 与 app/api/create-ai-sandbox-v2 创建云端沙箱，lib/sandbox/factory.ts 按环境变量选择 Vercel 或 E2B 提供商，生成的代码写入沙箱后启动 Vite 开发服务器供前端 iframe 实时预览；
4. 依赖管理链路：app/api/install-packages 与 app/api/install-packages-v2 负责在沙箱内安装 AI 生成代码所引用的 npm 包，并可自动重启 Vite。

沙箱层面采用了统一的抽象：抽象基类SandboxProvider定义在 lib/sandbox/types.ts，声明了createSandbox、runCommand、writeFile、readFile、listFiles、installPackages、terminate等标准方法，Vercel 与 E2B 分别实现，具体调用方可完全无感知地切换后端。

三、环境准备：克隆与依赖安装

3.1 克隆仓库

将仓库克隆到本地（git clone 场景下使用镜像地址）：

git clone https://gitcode.com/gh_mirrors/op/open-lovable cd open-lovable

3.2 安装依赖

README 推荐优先使用 pnpm，同时也兼容 npm 与 yarn：

pnpm install # 或 npm install / yarn install

仓库根目录同时提供了 bun.lock、package-lock.json 与 pnpm-lock.yaml，说明项目对 pnpm、npm、bun 均有锁文件支持，可按团队习惯任选包管理器。

3.3 常用脚本速查

从 package.json 的scripts字段可以看到项目提供的命令：

四、.env.local 环境变量完整配置指南（核心章节）

README 的核心是环境变量配置，这是让整个系统运转起来的关键一步。在项目根目录创建.env.local，并按需填写以下分组变量。

4.1 必填项：FIRECRAWL_API_KEY

FIRECRAWL_API_KEY=your_firecrawl_api_key

该密钥用于调用 Firecrawl 网页抓取服务，是"抓取任意网站并转成 React 应用"的第一步。从 app/api/scrape-website/route.ts 的实现可以看到：

• 路由从process.env.FIRECRAWL_API_KEY读取密钥（第 16 行），未配置时接口会返回一段演示用的 mock 数据以便本地调试；
• 配置后通过new FirecrawlApp({ apiKey })初始化客户端，调用app.scrape(url, { formats, onlyMainContent, waitFor, timeout, ...options })完成抓取；
• 默认formats为['markdown', 'html']，onlyMainContent默认开启以过滤导航等干扰内容，waitFor默认 2000ms 用于等待动态渲染，timeout默认 30000ms。

4.2 AI 提供商：四选一或多选

GEMINI_API_KEY=your_gemini_api_key ANTHROPIC_API_KEY=your_anthropic_api_key OPENAI_API_KEY=your_openai_api_key GROQ_API_KEY=your_groq_api_key

Open Lovable 支持 Google Gemini、Anthropic Claude、OpenAI 与 Groq 四家 LLM 提供商，可在.env.local中同时配置多把密钥，运行期按模型自动路由。

模型路由机制：从 lib/ai/provider-manager.ts 的getProviderForModel()（第 79 行起）可以看到，模型 ID 按前缀规则分发：

• anthropic/前缀 → Anthropic 客户端（并去掉前缀作为实际模型名）；
• openai/前缀 → OpenAI 客户端；
• google/前缀 → Google Gemini 客户端；
• 模型moonshotai/kimi-k2-instruct-0905特判走 Groq；
• 未匹配任何规则时默认回退到 Groq，模型 ID 原样透传。

默认模型与可用模型：config/app.config.ts 的ai配置段（第 52-88 行）定义了系统默认模型与可选模型清单：

同时该配置段还设定了defaultTemperature: 0.7（非推理模型默认温度）、maxTokens: 8000（代码生成最大 token）等参数。

AI Gateway 支持（源码补充）：除 README 列出的四把密钥外，从 lib/ai/provider-manager.ts 第 21-23 行可以看到，若设置AI_GATEWAY_API_KEY，系统会优先将所有提供商请求统一路由到 Vercel AI Gateway（https://ai-gateway.vercel.sh/v1），此时各家的原始 API Key 可省略——这在统一计费与密钥管理场景下很有用。

4.3 可选加速项：MORPH_API_KEY

MORPH_API_KEY=your_morphllm_api_key

README 将其标注为 "FAST APPLY (Optional - for faster edits)"，即用于加速代码编辑的快速应用能力。仓库中对应实现为 lib/morph-fast-apply.ts，与 app/api/apply-ai-code 等"应用 AI 代码"接口配合，实现对既有页面的增量修改。该变量为可选项，不配置时系统仍可正常生成与应用代码，只是编辑链路不会启用 Morph 加速。

4.4 沙箱提供商：SANDBOX_PROVIDER（二选一）

沙箱负责在云端运行 AI 生成的 React 代码并提供实时预览。README 明确声明默认使用 Vercel Sandbox，也可切换为 E2B：

SANDBOX_PROVIDER=vercel # 或 'e2b'

选择机制：lib/sandbox/factory.ts 的SandboxFactory.create()按provider || process.env.SANDBOX_PROVIDER顺序决定提供商，isProviderAvailable()则依据对应密钥是否配置来判断可用性。一个值得注意的实现细节是：factory 在两者都未提供时兜底回退到'e2b'（factory.ts），因此生产部署时显式设置SANDBOX_PROVIDER是更稳妥的做法。

方式一：Vercel Sandbox（默认）

Vercel 提供两种认证方式，README 建议开发环境优先使用 OIDC Token：

Method A：OIDC Token（推荐用于开发）

VERCEL_OIDC_TOKEN=auto_generated_by_vercel_env_pull

先执行vercel link将项目关联到 Vercel，再运行vercel env pull即可自动拉取并写入VERCEL_OIDC_TOKEN，无需手工申请密钥。

Method B：Personal Access Token（用于生产或无法使用 OIDC 的场景）

VERCEL_TEAM_ID=team_xxxxxxxxx VERCEL_PROJECT_ID=prj_xxxxxxxxx VERCEL_TOKEN=vercel_xxxxxxxxxxxx

从 lib/sandbox/providers/vercel-provider.ts 第 33-39 行可以看到优先级逻辑：当VERCEL_TOKEN+VERCEL_TEAM_ID+VERCEL_PROJECT_ID三件套齐全时使用 PAT 认证，否则回退到VERCEL_OIDC_TOKEN。

Vercel 沙箱创建时使用runtime: 'node22'、暴露5173端口（Vite），并通过setupViteApp()在沙箱内预置一份含 React 18 + Vite 4 + Tailwind CSS 3 的模板工程，随后以nohup npm run dev后台启动开发服务器。

方式二：E2B Sandbox

E2B_API_KEY=your_e2b_api_key

E2B 实现位于 lib/sandbox/providers/e2b-provider.ts，其沙箱基于@e2b/code-interpreterSDK 创建，工作目录为/home/user/app，同样运行 Vite（端口 5173），并通过 Pythonsubprocess包装执行命令、通过 filesystem API 读写文件。

4.5 环境变量速查表

五、启动开发服务器

环境变量配置完成后，一条命令即可启动：

pnpm dev # 或 npm run dev / yarn dev

然后打开 http://localhost:3000 即可看到应用界面。由于dev脚本启用了 Turbopack（next dev --turbopack），热更新体验更快。生产环境则按"构建 → 启动"两步走：先pnpm build执行生产构建，再pnpm start以next start提供产物服务。

六、运行参数与默认值（config/app.config.ts 速览）

除.env.local外，系统行为还可通过 config/app.config.ts 调整，这里列出与部署运维最相关的几组默认值：

例如packages.useLegacyPeerDeps对应 lib/sandbox/providers/vercel-provider.ts 中NPM_FLAGS与 npm install 参数组装逻辑，用于规避沙箱内依赖版本冲突；files.excludePatterns则与沙箱listFiles()中find排除node_modules/.git/.next/dist/build的行为一致。这些参数均为可调项，可直接修改配置文件后重启服务生效。

七、License

Open Lovable 以MIT协议开源（见 LICENSE），可自由用于学习、二次开发与商业项目，是研究"AI 生成代码 + 云端沙箱 + 网页抓取"组合架构的完整参考实现。

• AI 应用
• 前端
• 后端
• 代码生成