AI 应用前端后端代码生成【免费下载链接】open-lovable Clone and recreate any website as a modern React app in seconds项目地址https://gitcode.com/gh_mirrors/op/open-lovable点击查看免费下载本文是 Open Lovable 的技术部署指南围绕项目官方 README.md 的核心内容展开如何克隆、配置环境变量、选择 AI 提供商与沙箱提供商并启动应用。文章同时结合当前仓库源码AI Provider 管理、Sandbox 抽象层、全局配置逐项印证每个配置项的真实作用与默认值帮助读者快速跑通聊天生成 React 应用的完整链路。一、项目定位什么是 Open LovableOpen Lovable 是一个由 Firecrawl 团队开发的开源示例应用其核心定位是Chat with AI to build React apps instantly——即通过与 AI 对话以自然语言驱动的方式即时生成并迭代 React 应用。它展示了将 Firecrawl 网页抓取能力、多家 LLM 提供商与云端沙箱Sandbox组合起来构建一条抓取网页 → AI 生成代码 → 沙箱运行 → 实时预览全自动链路的完整参考实现。若需要开箱即用的云端完整解决方案官方文档同时推荐了 Lovable.dev。从仓库结构看这是一个基于 Next.js 15App 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 层的代码结构可以梳理出四条关键链路网页抓取链路用户输入目标 URL 后app/api/scrape-website/route.ts 调用mendable/firecrawl-js的app.scrape()抓取页面内容默认返回 markdown 与 html 格式作为 AI 生成代码的输入素材AI 生成链路app/api/generate-ai-code-stream/route.ts 接收对话上下文与抓取结果通过streamText流式生成代码模型解析与客户端创建统一由 lib/ai/provider-manager.ts 完成沙箱执行链路app/api/create-ai-sandbox 与 app/api/create-ai-sandbox-v2 创建云端沙箱lib/sandbox/factory.ts 按环境变量选择 Vercel 或 E2B 提供商生成的代码写入沙箱后启动 Vite 开发服务器供前端 iframe 实时预览依赖管理链路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-lovable3.2 安装依赖README 推荐优先使用 pnpm同时也兼容 npm 与 yarnpnpm install # 或 npm install / yarn install仓库根目录同时提供了 bun.lock、package-lock.json 与 pnpm-lock.yaml说明项目对 pnpm、npm、bun 均有锁文件支持可按团队习惯任选包管理器。3.3 常用脚本速查从 package.json 的scripts字段可以看到项目提供的命令命令作用pnpm dev以 Turbopack 启动开发服务器next dev --turbopackpnpm build执行生产构建next buildpnpm start启动生产服务器next startpnpm lint运行 ESLint 检查next lintnpm run test:api运行 API 端点测试node tests/api-endpoints.test.jsnpm run test:code运行代码执行测试node tests/code-execution.test.jsnpm run test:all依次运行集成、API 与代码测试四、.env.local 环境变量完整配置指南核心章节README 的核心是环境变量配置这是让整个系统运转起来的关键一步。在项目根目录创建.env.local并按需填写以下分组变量。4.1 必填项FIRECRAWL_API_KEYFIRECRAWL_API_KEYyour_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_KEYyour_gemini_api_key ANTHROPIC_API_KEYyour_anthropic_api_key OPENAI_API_KEYyour_openai_api_key GROQ_API_KEYyour_groq_api_keyOpen 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 行定义了系统默认模型与可选模型清单模型 ID显示名称提供商google/gemini-3-pro-previewGemini 3 Pro (Preview)Google默认模型openai/gpt-5GPT-5OpenAImoonshotai/kimi-k2-instruct-0905Kimi K2 (Groq)Groqanthropic/claude-sonnet-4-20250514Sonnet 4Anthropic同时该配置段还设定了defaultTemperature: 0.7非推理模型默认温度、maxTokens: 8000代码生成最大 token等参数。AI Gateway 支持源码补充除 README 列出的四把密钥外从 lib/ai/provider-manager.ts 第 21-23 行可以看到若设置AI_GATEWAY_API_KEY系统会优先将所有提供商请求统一路由到 Vercel AI Gatewayhttps://ai-gateway.vercel.sh/v1此时各家的原始 API Key 可省略——这在统一计费与密钥管理场景下很有用。4.3 可选加速项MORPH_API_KEYMORPH_API_KEYyour_morphllm_api_keyREADME 将其标注为 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也可切换为 E2BSANDBOX_PROVIDERvercel # 或 e2b选择机制lib/sandbox/factory.ts 的SandboxFactory.create()按provider || process.env.SANDBOX_PROVIDER顺序决定提供商isProviderAvailable()则依据对应密钥是否配置来判断可用性。一个值得注意的实现细节是factory 在两者都未提供时兜底回退到e2bfactory.ts因此生产部署时显式设置SANDBOX_PROVIDER是更稳妥的做法。方式一Vercel Sandbox默认Vercel 提供两种认证方式README 建议开发环境优先使用 OIDC TokenMethod AOIDC Token推荐用于开发VERCEL_OIDC_TOKENauto_generated_by_vercel_env_pull先执行vercel link将项目关联到 Vercel再运行vercel env pull即可自动拉取并写入VERCEL_OIDC_TOKEN无需手工申请密钥。Method BPersonal Access Token用于生产或无法使用 OIDC 的场景VERCEL_TEAM_IDteam_xxxxxxxxx VERCEL_PROJECT_IDprj_xxxxxxxxx VERCEL_TOKENvercel_xxxxxxxxxxxx从 lib/sandbox/providers/vercel-provider.ts 第 33-39 行可以看到优先级逻辑当VERCEL_TOKENVERCEL_TEAM_IDVERCEL_PROJECT_ID三件套齐全时使用 PAT 认证否则回退到VERCEL_OIDC_TOKEN。Vercel 沙箱创建时使用runtime: node22、暴露5173端口Vite并通过setupViteApp()在沙箱内预置一份含 React 18 Vite 4 Tailwind CSS 3 的模板工程随后以nohup npm run dev后台启动开发服务器。方式二E2B SandboxE2B_API_KEYyour_e2b_api_keyE2B 实现位于 lib/sandbox/providers/e2b-provider.ts其沙箱基于e2b/code-interpreterSDK 创建工作目录为/home/user/app同样运行 Vite端口 5173并通过 Pythonsubprocess包装执行命令、通过 filesystem API 读写文件。4.5 环境变量速查表变量必填分组用途FIRECRAWL_API_KEY✅REQUIRED网页抓取抓取任意站点作为生成素材GEMINI_API_KEY视模型AI PROVIDERGemini 模型调用ANTHROPIC_API_KEY视模型AI PROVIDERClaude 模型调用OPENAI_API_KEY视模型AI PROVIDERGPT 模型调用GROQ_API_KEY视模型AI PROVIDERGroq 托管模型如 Kimi K2调用MORPH_API_KEY可选FAST APPLY加速代码编辑应用SANDBOX_PROVIDER✅SANDBOXvercel默认或e2bVERCEL_OIDC_TOKEN方式 ASANDBOXVercel OIDC 认证VERCEL_TEAM_ID/VERCEL_PROJECT_ID/VERCEL_TOKEN方式 BSANDBOXVercel PAT 认证三件套E2B_API_KEY选 E2B 时SANDBOXE2B 沙箱认证AI_GATEWAY_API_KEY可选AI PROVIDER统一走 Vercel AI Gateway源码支持五、启动开发服务器环境变量配置完成后一条命令即可启动pnpm dev # 或 npm run dev / yarn dev然后打开 http://localhost:3000 即可看到应用界面。由于dev脚本启用了 Turbopacknext dev --turbopack热更新体验更快。生产环境则按构建 → 启动两步走先pnpm build执行生产构建再pnpm start以next start提供产物服务。六、运行参数与默认值config/app.config.ts 速览除.env.local外系统行为还可通过 config/app.config.ts 调整这里列出与部署运维最相关的几组默认值配置段关键参数默认值说明vercelSandboxtimeoutMinutes15Vercel 沙箱超时分钟vercelSandboxdevServerStartupDelay7000ms等待开发服务器就绪e2btimeoutMinutes30E2B 沙箱超时分钟e2bviteStartupDelay10000ms等待 Vite 就绪aidefaultModelgoogle/gemini-3-pro-preview默认对话模型aidefaultTemperature/maxTokens0.7 / 8000生成参数codeApplicationdefaultRefreshDelay2000ms应用代码后刷新 iframe 延迟packagesuseLegacyPeerDeps/installTimeouttrue/ 60000ms沙箱内 npm 安装策略filesmaxFileSize1MB单文件最大读取体积apimaxRetries/requestTimeout3 / 30000ms外部服务重试与超时例如packages.useLegacyPeerDeps对应 lib/sandbox/providers/vercel-provider.ts 中NPM_FLAGS与 npm install 参数组装逻辑用于规避沙箱内依赖版本冲突files.excludePatterns则与沙箱listFiles()中find排除node_modules/.git/.next/dist/build的行为一致。这些参数均为可调项可直接修改配置文件后重启服务生效。七、LicenseOpen Lovable 以MIT协议开源见 LICENSE可自由用于学习、二次开发与商业项目是研究AI 生成代码 云端沙箱 网页抓取组合架构的完整参考实现。赞分享AI 应用前端后端代码生成【免费下载链接】open-lovable Clone and recreate any website as a modern React app in seconds项目地址https://gitcode.com/gh_mirrors/op/open-lovable点击查看免费下载相关推荐终极RustViz部署指南从源码构建到生产环境配置的完整教程终极RustViz部署指南从源码构建到生产环境配置的完整教程 RustViz是一个强大的Rust所有权和借用可视化工具能够帮助开发者直观理解Rust的核心概终极指南从源码构建Open GApps的完整环境配置与编译教程终极指南从源码构建Open GApps的完整环境配置与编译教程 Open GApps 是一个开源项目为Android设备提供Google AppsGApp构建工具移动开发Claudian Obsidian 插件安装指南把 AI 编码助手嵌进你的知识库Claudian Obsidian 插件安装指南把 AI 编码助手嵌进你的知识库 Claudian 是一款 Obsidian 插件把 Claude CodeAI 应用代码智能体交互助手人工智能AI Agent上一篇Yii 2 路由与 URL 创建完全指南UrlManager 解析、美化 URL 规则与实战配置下一篇10分钟跑通superfile终端文件管理器创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考