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 是一个能够克隆并重建任意网站为现代 React 应用的开源项目其核心工作流是AI 生成代码 → 沙箱中运行与验证 → 浏览器实时预览。本文聚焦其中基于Vercel Sandbox的执行环境模板位于 packages/create-open-lovable/templates/vercel/README.md完整讲解从认证配置、环境变量、参数调优到底层实现原理的全过程。读完本文你将掌握如何用 OIDC / PAT 两种方式为 Vercel Sandbox 完成鉴权、理解config/app.config.ts中每个沙箱参数的取值与影响并能结合 vercel-provider.ts 的源码读懂沙箱创建、命令执行、文件读写与 Vite 重启的完整调用链。一、模板概述Vercel Sandbox 在项目中的定位packages/create-open-lovable/templates/vercel/目录是脚手架工具create-open-lovable的 provider 专属模板之一另一个是templates/e2b/。它本身是一份面向开发者的README 配置指南说明该项目已配置为使用 Vercel Sandboxes 执行代码。在 Open Lovable 的整体架构中沙箱承担着 AI 生成代码的试运行角色AI 生成的 React 代码被写入沙箱文件系统随后启动 Vite 开发服务器用户通过沙箱域名实时预览效果。与本地执行相比沙箱提供了隔离、可回收、资源受限的临时 Linux 环境适合高并发的 AI 生成场景。模板 README 的定位就是指导开发者完成这块执行基础设施的初始化。二、快速上手从零完成五步 Setup模板 README 给出的初始化流程是配置 Vercel 认证方式见下文第三章二选一即可获取 Firecrawl API KeyFirecrawl 负责克隆网站环节的网页抓取是 Open Lovable 复制任意站点的关键依赖需到 Firecrawl 官网控制台创建。复制.env.example为.env并填入凭证环境变量模板位于 packages/create-open-lovable/templates/vercel/.env.example。运行npm install安装依赖。运行npm run dev启动开发服务器。如果你使用脚手架而非手动拷贝模板CLI 会自动完成上述大部分动作。create-open-lovablepackages/create-open-lovable/index.js提供以下参数npx create-open-lovable --sandbox vercel --name my-open-lovable # 可选参数 # -s, --sandbox provider 沙箱提供商取值 e2b | vercel # -n, --name name 项目名称 # -p, --path path 安装路径默认当前目录 # --skip-install 跳过 npm install # --dry-run 只打印将执行的动作不实际创建文件安装器packages/create-open-lovable/lib/installer.js在拷贝 provider 模板后会写入SANDBOX_PROVIDERvercel到.env并在 config/app.config.ts 中注入sandboxProvider: process.env.SANDBOX_PROVIDER || vercel配置项若指定了--dry-run它只打印将要执行的动作清单建目录、拷贝模板、写.env、运行npm install不会改动任何文件。三、Vercel 认证的两种方式模板 README 明确区分了两种鉴权路径且二者在 vercel-provider.ts 的createSandbox()中有对应的优先级逻辑。方式一OIDC TokenVercel 部署环境自动完成当应用运行在 Vercel 平台上时平台通过 OIDCOpenID Connect自动注入信任令牌无需任何手工配置。源码中对应的分支是} else if (process.env.VERCEL_OIDC_TOKEN) { sandboxConfig.oidcToken process.env.VERCEL_OIDC_TOKEN; }即检测到VERCEL_OIDC_TOKEN环境变量时将其作为oidcToken传给Sandbox.create()。这也是 lib/sandbox/factory.ts 中isProviderAvailable(vercel)判定可用的条件之一只要VERCEL_OIDC_TOKEN存在即视为已配置。方式二Personal Access Token本地开发本地开发没有 OIDC 环境需要手工准备三个凭据在 Vercel 账号设置中创建Personal Access Token从团队设置中获取Team ID创建一个项目并取得Project ID随后写入.envVERCEL_TOKENyour_access_token VERCEL_TEAM_IDyour_team_id VERCEL_PROJECT_IDyour_project_id源码中对应分支优先级高于 OIDCif (process.env.VERCEL_TOKEN process.env.VERCEL_TEAM_ID process.env.VERCEL_PROJECT_ID) { sandboxConfig.teamId process.env.VERCEL_TEAM_ID; sandboxConfig.projectId process.env.VERCEL_PROJECT_ID; sandboxConfig.token process.env.VERCEL_TOKEN; }注意三个变量必须同时存在才走 PAT 分支SandboxFactory.isProviderAvailable同样要求三者齐全才判定 PAT 可用。四、环境变量清单.env.example 逐字段说明packages/create-open-lovable/templates/vercel/.env.example 定义了本模板的全部环境变量分类如下变量必需性说明SANDBOX_PROVIDERvercel必需沙箱提供商选择factory.ts 中SandboxFactory.create()读取process.env.SANDBOX_PROVIDER未设置时默认e2b取值为vercel时返回VercelProviderVERCEL_TEAM_IDPAT 方式必需Vercel 团队 IDPAT 鉴权三要素之一VERCEL_PROJECT_IDPAT 方式必需Vercel 项目 IDPAT 鉴权三要素之一VERCEL_TOKENPAT 方式必需个人访问令牌PAT 鉴权三要素之一OIDC 方式下可不填FIRECRAWL_API_KEY必需Firecrawl 网页抓取密钥用于克隆网站的抓取环节ANTHROPIC_API_KEY可选AI 提供商至少其一Anthropic 模型如 Claude调用密钥OPENAI_API_KEY可选AI 提供商至少其一OpenAI 模型调用密钥GEMINI_API_KEY可选AI 提供商至少其一Google Gemini 模型调用密钥GROQ_API_KEY可选AI 提供商至少其一Groq 推理加速平台密钥项目默认模型google/gemini-3-pro-preview与moonshotai/kimi-k2-instruct-0905均可经此接入见 config/app.config.ts 的ai.modelApiConfig安装器在交互式安装时installer.js的createEnvFile还会询问用户选择oidc或pat认证方式选择 OIDC 时跳过三个 VERCEL_ 变量选择 PAT 时逐个写入未交互时则直接复制.env.example。五、Vercel Sandbox 特性速览模板 README 罗列了 Vercel Sandbox 的核心能力这是选择该 provider 的硬件与运行时依据轻量级临时 Linux 虚拟机随建随销毁适合 AI 生成的临时代码运行不污染宿主机底层由 Firecracker MicroVM 驱动Firecracker 是面向无服务器/容器场景的微型虚拟机技术启动快、隔离性强默认超时 5 分钟最大可延至 45 分钟防止长时间运行耗尽资源最高 8 vCPUs计算资源上限root 权限可自由安装系统级与项目级依赖包内置 Node 22 运行时与 config/app.config.ts 中runtime: node22一致注释还列出了可选的python3.13、v0-next-shadcn、cua-ubuntu-xfce等其他运行时。六、沙箱参数配置config/app.config.ts 详解模板 README 指出沙箱设置集中在config/app.config.ts即 config/app.config.ts。对照源码实际的vercelSandbox配置块包含以下字段字段默认值说明timeoutMinutes15沙箱会话超时分钟。注意README 中提到的默认 5 分钟是 Vercel Sandbox 产品层面的默认值当前仓库配置层默认设为 15 分钟并以 gettertimeoutMs换算为毫秒供 API 使用devPort3000开发服务器端口注释说明 Vercel Sandbox 通常用 3000 服务于 Next.js/ReactdevServerStartupDelay7000等待开发服务器就绪的时间毫秒创建沙箱后轮询/等待用cssRebuildDelay2000等待 CSS 重建的时间毫秒应用于样式热更新场景workingDirectory/app沙箱内工作目录runtimenode22沙箱运行时可选node22、python3.13、v0-next-shadcn、cua-ubuntu-xfce在直接调用 Vercel Sandbox API 的 app/api/create-ai-sandbox/route.ts 中这些参数被真实消费timeout: appConfig.vercelSandbox.timeoutMs、runtime: appConfig.vercelSandbox.runtime、ports: [appConfig.vercelSandbox.devPort]并用sandbox.domain(devPort)取得访问 URL再将沙箱 hostname 动态注入 Vite 的allowedHosts同时预留.vercel.run与.vercel-sandbox.dev通配域名。日志会打印当前使用的超时分钟数便于核对配置是否生效。注意版本差异README 中描述的maxDuration字段在当前仓库源码中并不存在实际字段名为timeoutMinutes。本文以当前仓库源码为准。七、源码级原理VercelProvider 的实现与调用链沙箱的 provider 抽象层定义在 lib/sandbox/types.ts抽象类SandboxProvider声明了createSandbox、runCommand、writeFile、readFile、listFiles、installPackages、getSandboxUrl、getSandboxInfo、terminate、isAlive等接口并提供可覆写的setupViteApp与restartViteServer。具体实现 vercel-provider.ts 则完整落地了这些能力。7.1 创建与销毁createSandbox()先尝试stop()已存在的旧沙箱并清空文件追踪集合再按第三章的鉴权逻辑组装Sandbox.create()配置timeout: 300000毫秒、runtime: node22、ports: [5173]端口与devPort的差异是两条调用路径各自实现所致随后用sandbox.domain(5173)生成对外访问 URL。销毁由terminate()调用sandbox.stop()完成isAlive()仅依据this.sandbox是否非空判断。7.2 命令执行runCommand(command)将命令字符串按空格拆分为cmd与args在cwd: /vercel/sandbox下执行如npm run dev即拆为cmd: npm、args: [run, dev]。一个值得注意的实现细节是SDK 返回的stdout/stderr可能是函数因此代码做了兼容处理——先判断typeof result.stdout function是则await result.stdout()否则取字符串或空串。7.3 文件读写writeFile(path, content)默认将相对路径拼接到/vercel/sandbox/下通过sandbox.writeFiles([{ path, content: Buffer.from(content) }])写入若该 API 失败则回退为命令式方案先mkdir -p建目录再对内容做反斜杠、双引号、美元符号、反引号与换行的转义后用sh -c echo ... path写入。readFile走cat命令listFiles用find排除node_modules、.git、.next、dist、build目录后输出相对路径清单。7.4 包安装与 Vite 生命周期installPackages(packages)读取NPM_FLAGS环境变量附加 npm 参数可与 config/app.config.ts 中packages.useLegacyPeerDeps等配置呼应安装成功后若AUTO_RESTART_VITEtrue则自动重启 Vite。setupViteApp()是沙箱初始化模板的完整实现从源码看它依次创建package.jsonReact 18.2、Vite 4.3、Tailwind 3.3 等、vite.config.jshost: 0.0.0.0、strictPort: true、allowedHosts包含.vercel.run/.e2b.dev/localhost、HMR 使用clientPort: 443与wss协议、tailwind.config.js、postcss.config.js、index.html、src/main.jsx、src/App.jsx渲染Vercel Sandbox Ready欢迎页与src/index.css。随后执行npm install失败时回退到sh -c cd /vercel/sandbox npm install再pkill -f vite || true清理旧进程nohup npm run dev /tmp/vite.log 21 后台启动等待 7 秒后记录初始文件集合。restartViteServer()则复用杀进程 → 等待 2 秒 → 后台重启 → 等待 7 秒的同一节奏。7.5 工厂与生命周期管理lib/sandbox/factory.ts 的SandboxFactory.create()依据SANDBOX_PROVIDER环境变量返回E2BProvider或VercelProviderlib/sandbox/sandbox-manager.ts 以单例SandboxManager维护沙箱 Map支持registerSandbox、getActiveProvider、terminateSandbox、terminateAll以及按空闲时长cleanup默认 1 小时。app/api下的create-ai-sandbox-v2、apply-ai-code-stream等路由即通过该工厂与管理器获取 provider形成API 路由 → SandboxFactory → VercelProvider → Vercel Sandbox SDK的完整调用链。八、故障排查指南模板 README 给出的排查顺序结合源码可以对应到具体检查点核对认证凭据检查.env中VERCEL_TOKEN/VERCEL_TEAM_ID/VERCEL_PROJECT_ID是否三者齐全且有效SandboxFactory.isProviderAvailable的逻辑是最终判定依据。确认认证方式匹配本地开发应使用 PATOIDC 仅在 Vercel 部署环境自动生效若在本地误配VERCEL_OIDC_TOKEN源码优先级会先走 PAT 分支需保证两组变量不混用。确认账号具备沙箱访问权限Vercel 账号/团队需开通 Vercel Sandbox 服务否则Sandbox.create()会抛错。观察控制台错误日志VercelProvider各方法均打印带[VercelProvider]前缀的详细日志包括writeFiles失败时的statusCode与responseDatacreate-ai-sandbox路由也会打印[create-ai-sandbox]前缀的创建、鉴权分支与 hostname 信息这些日志能快速定位是鉴权、权限还是资源问题。若沙箱创建成功但页面无法预览还应检查 Vite 的allowedHosts是否覆盖当前沙箱域名源码默认放行.vercel.run与.vercel-sandbox.dev通配域若域名异常需在 vite 配置或路由的动态注入逻辑中补充。九、选型提示Vercel 与 E2B 并存本仓库同时提供vercel与e2b两个 provider 模板二者在 config/app.config.ts 中参数各有不同Vercel 侧devPort: 3000、devServerStartupDelay: 7000而 E2B 侧vitePort: 5173、viteStartupDelay: 10000。选型时可以从部署形态出发若应用本身托管在 VercelOIDC 自动鉴权使沙箱接入几乎零配置若完全本地开发且已有 E2B 密钥可改用 e2b 模板。切换只需修改SANDBOX_PROVIDER环境变量代码层由SandboxFactory统一适配无需改动业务路由。本文所有配置说明与源码引用均以当前仓库实际内容为准环境变量模板见 packages/create-open-lovable/templates/vercel/.env.example配置参数见 config/app.config.tsprovider 实现见 lib/sandbox/providers/vercel-provider.ts鉴权可用性判定见 lib/sandbox/factory.ts沙箱生命周期管理见 lib/sandbox/sandbox-manager.tsAPI 路由示例见 app/api/create-ai-sandbox/route.ts。读者可依此路径继续深入研读。赞分享AI 应用前端后端代码生成【免费下载链接】open-lovable Clone and recreate any website as a modern React app in seconds项目地址https://gitcode.com/gh_mirrors/op/open-lovable点击查看免费下载相关推荐ruflo Flow Nexus Sandbox Agent 技能基于 E2B 隔离沙箱的 MCP 代码执行环境管理指南ruflo Flow Nexus Sandbox Agent 技能基于 E2B 隔离沙箱的 MCP 代码执行环境管理指南 本文以 ruflo 仓库中的 Age人工智能AI Agent多智能体Agent 编排Agent 记忆工具调用代码智能体MCP 服务AI 评测AI-Scientist-v2 入门让 AI 自己跑实验、写论文的端到端自动化科研AI Scientist v2 入门让 AI 自己跑实验、写论文的端到端自动化科研 AI Scientist v2 是一个面向 AI 科学发现的端到端自动化科人工智能AI Agent自主智能体科研Agent 工作流【安全执行未信任代码】sandbox - Node.js的JavaScript沙箱环境【安全执行未信任代码】sandbox Node.js的JavaScript沙箱环境 项目基础介绍及编程语言 sandbox 是一个专为Node.js设上一篇Backstage v1.30.0 版本升级指南Url Reader 迁移、Multiton 服务与新前端扩展体系下一篇深入解析 lo 库 it.Window基于 Go 1.23 iter.Seq 的滑动窗口序列创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考