坦白说，当提到“几秒钟克隆任意网站”这类描述时，绝大多数前端开发者都会本能地保持警惕——历史上不少同类工具表现不佳，要么生成代码难以维护，要么对动态内容束手无策。Open-Lovable 正是 MendableAI 团队推出的一款开源项目，其定位与传统克隆工具截然不同：它并非单纯复制网页，而是在 AI 对话框架下，通过提交一个 URL，让 AI 自动解析页面结构、样式与布局，并生成对应的 React 应用代码。最终效果高度依赖目标页面的复杂程度——静态页面克隆效果较为可控，而动态内容丰富的页面往往需要大量手动调整才能满足预期。
该工具的技术栈集成了 E2B 沙箱用于安全执行代码、Firecrawl 用于高效抓取页面内容，同时支持调用多种主流 AI 模型。本地部署流程简洁：在 Node.js 环境下使用 pnpm 安装依赖后即可启动本地服务。cpolar 在此场景中恰好解决了一个长期存在的痛点——如何让本地运行的服务被外部设备顺畅访问。
1 关于【Open-Lovable】：AI 驱动的 React 应用生成，远不止克隆那么简单
Open Lovable 是 MendableAI 团队开发的开源项目，其最大亮点在于：用户只需通过 AI 对话指令，即可快速生成一个完整的 React 应用。无论是用于技术学习、快速原型设计，还是投入实际项目开发，Open Lovable 都能提供高效、灵活的解决方案。
- 核心功能：
- 将任意网页克隆为 React 应用
- 支持多种 AI 模型（如 Anthropic Claude、OpenAI GPT-5）
- 集成 E2B 沙箱与 Firecrawl 抓取引擎
- 特点：
- 自然语言交互生成
- 网页转 React 应用克隆
- 多 AI 模型灵活切换
- 沙箱隔离安全环境
- 开源免费，MIT 许可证
2 Windows 环境部署 Open-Lovable 安装教程
前提条件：需预先安装 Git、Node.js 及 VS Code。
首先打开终端，将仓库克隆到本地：
git clone https://github.com/mendableai/open-lovable.git
接着进入项目目录：
cd open-lovable
下一步是安装项目依赖。官方推荐使用 npm，但若 npm 安装失败，可改用 pnpm。若尚未安装 pnpm，可使用以下命令：
npm install -g pnpm
然后使用 pnpm 安装依赖，根据网络情况可能需要几分钟：
pnpm install
安装完成后，打开 VS Code，进入 open-lovable 文件夹，找到 env.example 文件并打开，全选并复制其中的内容：
新建一个名为 env.local 的文件，将复制的内容粘贴进去：
第一个是 E2B 的 API 密钥，用于提供隔离的沙箱代码执行环境：
第二个是 Firecrawl 的 API 密钥，这是一款高效的 AI 网络爬虫工具，可自动抓取网站内容：
这两个密钥为必填项，可前往各自官网领取免费 API 密钥。下方所列的四个 AI 模型任选其一即可。这些密钥用于后续执行代码、抓取页面和调用 AI 接口时的安全验证。笔者在此处填写了 Groq 的 API 密钥——注意免费领取时需准备合适的网络环境。
按 Ctrl+S 保存文件，返回终端启动开发服务器：
pnpm run dev
在浏览器中访问 localhost:3000，即可看到 Open-Lovable 的简洁美观界面！
3 快速上手使用 Open-Lovable 克隆网站
我们尝试克隆 Firecrawl 官网首页，先复制其链接。
粘贴链接，选择之前配置好的 AI 模型，点击开始！
可以看到 AI 正在高速运转：分析页面结构、抓取样式、理解布局……整个过程如同技艺精湛的画师临摹名作，但速度与精准度远超人工。
请看效果：一个几乎一模一样的 Firecrawl 首页已被成功克隆！
虽然部分动态效果和登录信息无法完全复现，但整体静态布局与样式已经完美复刻。
点击右上角的图标，即可查看沙盒中已克隆的站点。
若是手动编写，工程量将极其庞大；而借助 AI，整个过程仅需几秒钟——这正是科技赋能的魅力所在。
接着点击下载，稍等片刻，即可将生成好的项目代码保存至本地。
找到下载的压缩包并解压。
在 VS Code 中打开该文件夹，即可查看生成的网页代码。其中包含各类组件（如 footer、header 等）。
HTML 结构、CSS 样式一应俱全，甚至组件已被妥善拆分，代码结构清晰明了，便于二次开发。
接下来，您可以根据需要自行修改项目内容。尝试在本地运行：在 VS Code 中打开终端，安装依赖：
pnpm install
然后启动项目：
pnpm run dev
启动完成后，终端会生成一个带端口的地址。在浏览器中粘贴该地址，即可成功访问克隆站点。
4 内网穿透工具 cpolar 介绍与安装
目前，我们只能在本地局域网内访问刚刚部署的 Open-Lovable。若希望在外部网络（如使用手机、平板、电脑等设备）也能远程访问，该如何实现？cpolar 内网穿透工具即可解决这一需求，无需公网 IP，也无需准备云服务器。
cpolar 是一款支持 TCP/UDP 协议的内网穿透工具，可帮助您轻松将本地服务发布到互联网。无论是开发调试、团队协作还是远程办公，cpolar 都能提供稳定可靠的网络连接。
访问 cpolar 官网，点击“免费使用”注册一个账号，并下载最新版本的 cpolar。
登录成功后，下载并安装 cpolar（本教程选择 Windows 版本，一路默认安装即可）。
安装完成后，在浏览器中访问 localhost:9200，使用 cpolar 账号登录，即可看到 cpolar Web 配置界面。
5 使用 cpolar 为 Open-Lovable 配置固定公网地址
登录 cpolar Web UI 管理界面后，点击左侧仪表盘的“隧道管理”——“创建隧道”：
- 隧道名称：可自定义，本例使用 myclone，注意不要与已有隧道名称重复
- 协议：http
- 本地地址：3000
- 域名类型：随机域名
- 地区：选择 China Top
点击创建：
创建成功后，打开左侧“在线隧道列表”，可以看到刚刚生成的公网地址。接下来，您可以在其他电脑或移动设备上（异地）使用任意一个地址在浏览器中访问。
现在，任意打开一个链接，都能完美访问 Open-Lovable！
但需要注意的是，Open-Lovable 本身不包含登录验证机制，导致任何人都能通过公网地址访问您的服务，从而可能浪费 API 密钥资源。如何解决？cpolar 提供了密码验证功能，可有效保障安全。
回到 cpolar 隧道列表，找到需要修改的隧道并点击“编辑”：
进入“高级”选项，在 auth 字段中按格式填写用户名和密码（例如“用户名:密码”），然后点击更新。
完成后，再次访问在线隧道列表中的新链接，系统将要求输入用户名和密码。只有授权用户才能登录使用，安全性大幅提升。
结尾
客观而言，Open-Lovable 在快速获取页面 React 代码骨架方面确有实用价值，尤其在竞品分析或参考他人页面结构时，克隆方式远胜于从零编写。然而，若将其视为完整的网站复制工具则难免失望——生成的代码仍需要大量手动调整，尤其是动态效果与交互逻辑几乎完全依赖开发者自行补充。
实际使用表明，对于具备前端基础的开发者来说，该工具更像是一个起步模板生成器，而非可直接投入生产环境的成品。cpolar 解决了远程访问的通道问题，配置完成后即可在外网访问本地的 Open-Lovable 服务，这对远程演示或团队协作场景颇具价值。
总体而言，Open-Lovable 值得收入开发工具箱，但不宜对“几秒钟克隆任何网站”的宣传寄予过高期望——它本质上是一个辅助起步的加速工具，而非替代手写代码的完整方案。
