Open-Lovable 是一款面向前端开发者的开源工具，核心功能是将任意网页克隆为可编辑的 React 应用，还支持多类 AI 模型辅助生成代码，适配新手学习、中小企业原型开发等场景。它的优点很贴合实际需求：拆分代码组件清晰，保留完整 CSS 样式，能大幅减少手动搭建页面框架的时间。
使用这款工具时也有一些实用的小提醒：克隆的网页仅能还原静态布局和样式，像登录态、动态交互这类内容无法完整复刻，而且使用前需要准备好 E2B、Firecrawl 等平台的 API 密钥，密钥保管要注意隐私，避免外泄造成不必要的损失。
不过 Open-Lovable 默认只能在本地局域网内使用，这会带来不少不便：比如开发者在家调试的克隆项目，想让公司的设计师远程查看效果，只能通过传文件、远程协助的方式，不仅耗时，还可能出现版本不一致的问题；要是出差在外需要修改克隆的代码，没法直接访问本地的工具，只能等回到电脑前操作，耽误工作进度。
而将 Open-Lovable 与 cpolar 内网穿透工具结合后，这些问题就能迎刃而解。无需公网 IP 和云服务器，只需简单配置就能生成公网访问地址，异地的同事直接点开链接就能查看克隆效果，还能给链接设置账号密码保护，既保障了 API 密钥的安全，又能实现团队实时协作，哪怕在咖啡馆、高铁站等场景，只要能上网就能访问本地的 Open-Lovable，灵活度大幅提升。
1 关于【Open-Lovable】：不只是克隆那么简单
Open Lovable 是由 MendableAI 团队开发的一个开源项目。这款神器最吸引人的地方在于，你只需与 AI 对话，就能快速生成一个完整的 React 应用。无论是学习、原型设计还是实际项目开发，Open Lovable 都能轻松应对。
- 核心功能：
- 将任意网页克隆为 React 应用
- 支持多种 AI 模型（如 Anthropic Claude、OpenAI GPT-5）
- 集成 E2B 沙箱与 Firecrawl 抓取引擎
- 特点：
- 自然语言生成
- 网页克隆
- 灵活模型选择
- 安全环境
- 开源免费，MIT 许可证
2 Windows 部署安装 Open-Lovable
前提要求：需要有 git，node.js，还有 vscode！
我们首先打开终端先把仓库克隆下来
git clone https://github.com/mendableai/open-lovable.git
接着进入到项目里
cd open-lovable
下一步是安装项目依赖，正常官方是用 npm 来安装，但是我用 npm 失败了，所以我这里使用 pnpm 来安装，没有 pnpm 的可以使用这行命令安装一下。
npm install -g pnpm
接着我们来用 pnpm 安装，过程可能会需要几分钟，取决于你的网络情况。
pnpm install
完成后我们打开 vscode，打开 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 模型，开始！
大家看它开始疯狂工作了！它正在分析页面结构，抓取样式，理解布局……
这个过程就像一个绝世画师在临摹一幅传世名画，只不过我们的画师画得更快，更准！
请看！一个几乎一模一样的 firecrawl 首页，就这样被我们克隆出来了！
虽然有些动态效果和登录信息没有，但整个静态布局和样式已经完美复刻！
我们点击右上角这个图标，我们就可以看到刚才在沙盒当中克隆的站点了。
现在，只需要几秒钟！这就是科技的力量啊！
接着我们点击下载，稍等一会就可以把刚才生成好的项目代码下载到本地上了，
然后我们打开文件件，找到刚才下载的压缩包，解压。
完成后在 vscode 当中打开这个文件夹，就能看到这个网页生成的代码了。
里边有各种各样的组件，footer、header 等等。
HTML 结构、CSS 样式，全都有！它甚至把组件都给你拆分好了，这结构，清晰得就像我梳理好的代码逻辑一样！太优雅了！
到时候你就可以自己在里面修修改改，形成自己的项目了
接下来我们试试在本地运行一下，接着我们在 vscode 打开终端，安装依赖
pnpm install
然后输入这行命令来启动项目，
pnpm run dev
启动完成以后会生成一个带端口的地址，我们打开浏览器粘贴这行地址，能看到我们成功访问了刚才克隆的站点
4 介绍以及安装 cpolar
不过我们目前只能在本地局域网内访问刚刚部署的 open-lovable，如果想不在同一局域网内时，也能在外部网络环境使用手机、平板、电脑等设备远程访问与使用它，应该怎么办呢？我们可以使用 cpolar 内网穿透工具来实现远程访问的需求。无需公网 IP，也不用准备云服务器那么麻烦。
cpolar 是一款支持 TCP/UDP 协议的内网穿透工具，可以帮助你轻松将本地服务发布到互联网上。无论是开发调试、团队协作还是远程办公，cpolar 都能为你提供稳定的网络连接。
访问 cpolar 官网注册一个账号，并下载最新版本的 cpolar。
登录成功后，点击下载 Cpolar 到本地并安装（一路默认安装即可）本教程选择下载 Windows 版本。
cpolar 安装成功后，在浏览器上访问 localhost:9200，使用 cpolar 账号登录，登录后即可看到 Cpolar web 配置界面，接下来在 web 管理界面配置即可。
5 使用 cpolar 配置 open-lovable 固定公网地址
登录 cpolar web UI 管理界面后，点击左侧仪表盘的隧道管理——创建隧道：
- 隧道名称：可自定义，本例使用了：myclone，注意不要与已有的隧道名称重复
- 协议：http
- 本地地址：3000
- 域名类型：随机域名
- 地区：选择 China Top
点击创建：
创建成功后，打开左侧在线隧道列表，可以看到刚刚通过创建隧道生成了两个公网地址，接下来就可以在其他电脑或者移动端设备（异地）上，使用任意一个地址在浏览器中访问即可。
现在我们任意打开一个链接，都能完美访问！
但是咱们会发现了，Open-lovable 是不自带登录验证的，导致现在任何人都能在公网上访问我们自己的 Open-lovable。这也太没安全感了，谁都能用我们的 api 秘钥了，资源都被浪费了这怎么办呢？
别担心，cpolar 还有设置密码验证功能，这样你就不必担心自己的 api 秘钥泄漏了！
回到 cpolar 隧道列表，找到需要修改的隧道点击编辑，
点击高级，在这个 auth 里面直接填写你想要的用户名，冒号后面写密码，可以按照我这个格式直接抄哈。
点击更新，完成后我们再去在线隧道列表打开新链接，
能看到我们为这个网址成功创建了一个用户名和密码，这样只有我们自己能登录进去，安全多了！
结尾
总结来说，Open-Lovable 凭借网页克隆为 React 应用的核心能力，切实解决了前端开发中手动搭建页面耗时、新手学习代码结构难的问题，是日常开发中实用的辅助工具。而 cpolar 内网穿透则弥补了它仅能局域网使用的短板，通过简单配置实现远程访问，还能保障使用安全，两者结合让前端开发的协作效率和使用灵活性都得到了提升。对于前端开发者而言，这类工具的组合使用，能让日常的开发、沟通、调试流程更顺畅，贴合实际工作中的各类场景需求。