TL;DR

• Open Lovable v3 是一个自托管的 Next.js 应用程序，它捕获一个经过授权的源页面，请求 AI 模型生成代码，并在 Vercel 或 E2B 沙箱中运行结果。
• 当前的主应用程序使用 Next.js 15 和 React 19，而其生成的预览脚手架仍然使用 Vite 和 React 18；将它们视为一堆会导致误导性的修复。
• 官方仓库需要一个 Firecrawl 密钥，至少一个 AI 提供者和一个沙箱提供者。“开源”并不意味着依赖的服务是免费或自托管的。
• 克隆是一个初始实现，并不是视觉准确性、响应行为、可访问性、干净依赖或重复使用他人设计的许可证的证明。
• Nstproxy Crawl 可以作为自定义分支中的捕获和验证层，但它并不是 Open Lovable 当前 Firecrawl 特定路由的直接替代品。

---

介绍：Open Lovable 有三个系统来操作

Open Lovable 仅在页面捕获、AI 生成和沙箱执行达成可用协议时才能工作。精致的演示隐藏了这些边界：抓取程序必须返回足够的源上下文，模型必须发出可编译代码，沙箱必须安装并运行该代码。Nstproxy Crawl 可以替换分支中的捕获层，但改变一个环境变量的名称并不会更改应用程序的连接。

本教程使用官方仓库在提交 69bd93b 时的快照，其最新提交标记为 v3。我们安装了其锁定的依赖项，构建了 Next.js 应用程序，启动了开发服务器，并在编写下面的步骤之前请求了主页。

什么是 Open Lovable？

Open Lovable 是一个来自 Firecrawl 团队的 MIT 许可示例应用程序，它将源 URL 和聊天指令变成生成的 React 接口。官方 Open Lovable 仓库 将其描述为一个 AI 辅助的 React 应用程序生成器，而不是一个生产迁移系统。

当前架构具有四个不同的层：

这种区分很重要，因为成功的抓取并不能证明生成的项目有效。同样，沙箱预览可以编译，但仍然缺少交互行为、响应断点、字体、分析或后端状态。有关渲染页面捕获的背景信息，请参见无头浏览器解释。

为什么使用 Open Lovable 而不是 Lovable.dev？

当你希望对主应用程序拥有源可见性和控制权时，Open Lovable 是有用的；而 Lovable.dev 是一个通过托管工作流构建和操作应用程序的管理产品。它们相似的名称并不意味着它们可以互换。

实际选择涉及所有权。Open Lovable 让你有更多代码和基础设施可供检查；Lovable.dev 则移除了更多设置。无论哪条路径，都不能将复制的视觉语言转变为自动可重用的知识产权。

## 详细教程

最安全的 Open Lovable 工作流程在您要求模型重新创建授权页面之前，单独证明每个边界。

方法 1：运行官方 Open Lovable v3 存储库

第 1 步：确认本地工具链

使用当前支持的 Node.js LTS 版本，而不是一些教程中找到的旧的 Node.js 18 推荐版本；Node.js 现在在其 官方下载页面 上将版本 18 标记为结束生命周期。您还需要 Git 和一个包管理器。我们使用 Node.js 24、pnpm 11 和 Git 2.39 验证了该存储库。

node --version
pnpm --version
git --version

第 2 步：克隆存储库并遵守锁定文件

克隆官方源，然后安装存储库记录的确切依赖图。

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

在阻止依赖构建脚本的运行环境中，pnpm 可能会标记 sharp 或原生解析器等包。不要全局批准每个脚本。审核指定的包、其锁定版本及项目需要其安装钩子的原因，然后仅根据您所在组织的政策批准所需的脚本。

第 3 步：创建最小环境文件

将 .env.example 复制到 .env.local，但仅为第一次运行保留一个配置路径。当前源接受 AI Gateway 密钥或单独的 Anthropic、OpenAI、Gemini 或 Groq 凭证。它还包括可选的 Morph 辅助编辑。

FIRECRAWL_API_KEY=YOUR_FIRECRAWL_KEY

ANTHROPIC_API_KEY=YOUR_ANTHROPIC_KEY

SANDBOX_PROVIDER=vercel
VERCEL_OIDC_TOKEN=YOUR_VERCEL_OIDC_TOKEN

绝不要提交 .env.local。将提供者密钥保留在服务器端，并避免将生产 Cookie、私有页面或客户数据粘贴到重建提示中。

第 4 步：明确选择沙盒

设置 SANDBOX_PROVIDER=vercel 或 SANDBOX_PROVIDER=e2b；不要依赖隐式默认值。README 和 .env.example 都将 Vercel 作为默认值，而经过测试的源中的一个共享沙盒工厂在缺少变量时仍会回退到 E2B。明确的值消除了这种模糊性。

对于 Vercel 开发身份验证，存储库指示您链接项目并拉取环境配置。对于 E2B，请提供 E2B_API_KEY；E2B 的官方文档 确认其 SDK 使用该环境变量创建隔离沙盒。

第 5 步：在打开 UI 之前构建

生产构建可以比交互式生成作业更早捕获缺失的导入、类型问题和服务器路由编译失败。

pnpm build
pnpm dev

然后单独验证本地 shell：

curl -I http://127.0.0.1:3000/

我们的干净运行返回 HTTP 200 和 HTML 标题 Open Lovable v3。由于 next/font 无法访问 Google Fonts，一个受限构建最初失败了；允许该出口，自托管字体，或在受限 CI 中替换远程字体配置。

第 6 步：重新创建一个授权的、有界的目标

从您拥有的页面、暂存夹具或明确许可重用的设计开始。选择一个着陆页，而不是经过身份验证的应用程序。提交完整的 HTTPS URL，让 Open Lovable 创建初始预览，并保持第一次提示简洁：保持内容层次，重建响应式布局，避免发明后端行为。

不要仅通过单个桌面截图来评判结果。测试最小和最大支持的视口、键盘导航、菜单、表单、图像加载、内部链接以及任何传达状态的动画。

第 7 步：导出代码并应用验收门

将导出的代码视为不受信任的生成输入。在运行或部署之前，请检查 package.json、网络调用、环境变量访问、内联脚本、远程资产、许可证和构建命令。用您获得授权使用的资产替换源品牌、文案、图像和跟踪代码。

在您的编辑之后运行生产构建和自动页面审计。Google 的 Lighthouse 文档 涵盖性能、可访问性、最佳实践和 SEO 审计，但仍然需要手动键盘和功能测试。

方法 2：在自定义 Open Lovable 分支中使用 Nstproxy Crawl

第 1 步：保持集成边界诚实

Nstproxy Crawl 是一种托管的抓取服务，可以渲染 JavaScript 并返回 Markdown、HTML、JSON、链接和 PDF 文档。当团队希望在不操作浏览器工作者的情况下实现依赖代理的访问、有限的发现和可重复的页面输出时，这个服务非常有用。使用费用按成功抓取的 URL 收费。Open Lovable 当前并未提供通用的抓取提供者开关，因此 Nstproxy Crawl 不是一个可以直接替换的环境变量；需要对相关的服务器路由和响应字段进行适配。

第 2 步：替换抓取合同，而不是标签

经过测试的代码库从路由中调用其抓取提供者，以增强 URL 抓取、截图、品牌风格提取、网站抓取和搜索。一个可靠的适配器必须映射每个消费者，而不是仅仅修补第一个抓取路由。

• 渲染的源代码： 请求干净的 HTML 或其他保留 DOM 的格式以进行代码生成；仅使用 Markdown 可能会丢失提示所需的布局信号。
• 视觉证据： 捕获屏幕截图或 PDF 进行并排审查，而不是假设生成的 DOM 结构意味着视觉准确性。
• 有限发现： 当重建多个页面时，设置明确的深度、页面限制和排除项，以防搜索页面、日历和查询变体意外扩大任务。

Nstproxy Crawl 启动指南 解释了托管工作流程，而AI 网站抓取指南 则涵盖了页面内容如何进入后端模型管道。

第 3 步：使用记录的固定数据验证适配器

保存一个授权的源页面、其抓取响应，以及您的 Open Lovable 分支所使用的标准化对象。在调用模型之前，进行合约测试以验证所需字段和错误状态。适配器应区分被接受的提供者请求和实际检索的页面，并应在不泄露凭据的情况下保留 HTTP 状态、最终 URL 和诊断消息。

我们的洁净室验证发现

当前的 Open Lovable 代码库构建并提供，但路径并不像三条命令快速启动所建议的那样顺畅。测试过的锁定文件包含 650 个条目，并安装了 600 个软件包。一个软件包策略包装器阻止了第一次安装，因为未批准本地构建脚本；在审查该边界并恢复锁定的软件包后，Next.js 的生产编译完成。

构建还尝试通过 next/font 下载 Inter 和 Roboto Mono。由于出站 DNS 被阻止，编译失败；在允许字体访问的情况下，它生成了 33 个静态页面或路由并成功完成。ESLint 报告无法解析 eslint-plugin-react-hooks，但 Next.js 仍然继续并返回了退出代码零。这意味着“构建通过”不足以作为发布门限：捕获并在 lint 诊断上单独失败。

最后，开发服务器大约两秒钟内准备就绪，按需编译第一个页面并返回 HTTP 200。没有测试捕获、AI 生成或沙盒创建，因为这些操作需要用户拥有的凭据和可计费的外部服务。这是验证开放源代码外壳与验证完整克隆之间的诚实边界。

Open Lovable 故障排除的失败边界

当您识别出三个外部系统中哪个出现故障时，Open Lovable 的错误更容易修复。

在调试时避免记录 API 密钥或完整的提供者头部。记录非秘密的请求 ID、目标 URL、提供者选择、时间戳和终端错误状态。有关 API 响应边界的更广泛视图，请参阅 Nstproxy 的 API 词汇表。

限制和负责任的使用

Open Lovable无法可靠地克隆每个网站，因为浏览器可见的页面并不是整个应用程序。身份验证、数据库、服务器操作、私有API、结账逻辑、个性化、分析和第三方服务配置都不能通过渲染的标记安全地恢复。生成的交互可能看起来合理，但实际上可能没有任何作用或调用错误的端点。

MIT许可证适用于Open Lovable的源代码，而不适用于提交给它的每个网站。版权、商标、隐私、合同和网站条款仍适用于源材料。使用您拥有或获得复制许可的页面，减少捕获的数据，移除第三方追踪，并在超出内部原型之前审查网络爬取法律与合规指南。

结论：将Open Lovable视为具有可测试合同的生成器

Open Lovable v3对于将授权的视觉参考转换为可编辑的React代码非常有用，前提是您要有意识地操作捕获、AI和沙盒层。锁定库提交，明确选择提供程序，在生成之前构建，并拒绝任何未通过依赖项审查、功能测试、响应比较或可访问性检查的导出。

从您控制的一个页面开始，并保持截图加清单的基线。如果捕获层是重复出现的操作负担，那么对同一页面测试Nstproxy Crawl并测量完整性，然后再编写适配器。对于保留自身爬虫但需要集中代理路由和诊断的分叉，Nstproxy Proxy Manager是另一个相关的功能可供评估。

在代码生成之前测试捕获层

使用一个小的授权页面来确认渲染的内容、工件和错误处理，然后再花费模型和沙盒使用在完全重建上。

免费试用Nstproxy →

常见问题

问：什么是Open Lovable？

Open Lovable是一个MIT许可的Next.js应用，它捕获一个授权的源页面，将上下文发送给AI模型，并在隔离的沙盒中运行生成的React代码。它是Firecrawl团队的一个示例应用，而不是Lovable.dev的开源版本。

问：运行Open Lovable是免费的么？

Open Lovable的源代码在MIT许可下可用，但工作生成流程使用外部捕获、AI和沙盒服务，这些服务有自己的基于使用或订阅的计费。运行主机应用也会消耗您的计算和工程时间。

问：Open Lovable可以在本地运行而不需要API密钥吗？

主机接口可以在没有提供程序密钥的情况下本地启动，正如我们HTTP 200检查所确认的那样，但页面捕获、AI生成和沙盒预览需要相应的凭证。加载的主页并不能证明端到端工作流程已配置好。

问：为什么Open Lovable同时提到Next.js和Vite？

当前的Open Lovable主机使用Next.js 15和React 19，而它的Vercel沙盒路线将生成的预览搭建为一个使用React 18的Vite应用。将主机和生成的项目作为单独的依赖关系图进行故障排除。

问：Nstproxy Crawl可以在Open Lovable中替代Firecrawl吗？

Nstproxy Crawl只能通过自定义适配器替代捕获层。当前的Open Lovable源调用Firecrawl特定的路由和响应形状，因此在FIRECRAWL_API_KEY下设置Nstproxy令牌将不起作用。

问：使用Open Lovable克隆任何公共网站是否合法？

不合法。公共可访问性并不授予复制网站受保护的代码、设计资产、文本、商标或个人数据的权限。限制使用您拥有的网站、获得许可的模板、允许的内部测试或在适用法律和条款下审查的其他情况。