Open-Lovable 是一款面向前端开发者的开源工具，核心功能是将任意网页克隆为可编辑的 React 应用，支持多类 AI 模型辅助生成代码。它适用于新手学习、中小企业原型开发等场景，能拆分代码组件并保留完整 CSS 样式，大幅减少手动搭建页面框架的时间。
使用这款工具时需注意：克隆的网页仅能还原静态布局和样式，登录态、动态交互等内容无法完整复刻。使用前需要准备好 E2B、Firecrawl 等平台的 API 密钥，注意隐私保管。
默认情况下 Open-Lovable 仅在本地局域网内使用，限制了远程协作。结合 cpolar 内网穿透工具后，无需公网 IP 和云服务器，即可生成公网访问地址，支持异地同事查看效果及设置账号密码保护，保障 API 密钥安全。
1 关于 Open-Lovable
Open-Lovable 是由 MendableAI 团队开发的开源项目。用户只需与 AI 对话，即可快速生成完整的 React 应用。
- 核心功能
- 将任意网页克隆为 React 应用
- 支持多种 AI 模型（如 Anthropic Claude、OpenAI GPT）
- 集成 E2B 沙箱与 Firecrawl 抓取引擎
- 特点
- 自然语言生成
- 网页克隆
- 灵活模型选择
- 开源免费，MIT 许可证
2 Windows 部署安装 Open-Lovable
前提要求：需安装 Git、Node.js 和 VSCode。
首先打开终端克隆仓库：
git clone https://github.com/mendableai/open-lovable.git
进入项目目录：
cd open-lovable
安装项目依赖。官方推荐使用 npm，但建议使用 pnpm：
npm install -g pnpm
pnpm install
完成后打开 VSCode，找到 env.example 文件，复制内容到新建的 env.local 文件中。
环境变量配置说明：
E2B_API_KEY：沙盒环境隔离代码执行密钥。FIRECRAWL_API_KEY：AI 网络爬虫工具密钥。- 其他 AI 模型密钥（如 Groq）：任选其一用于调用 AI 接口。
保存文件后，在终端启动开发服务器：
pnpm run dev
浏览器访问 localhost:3000 即可进入 Open-Lovable 页面。
3 简单使用 Open-Lovable
尝试克隆目标网页（如 Firecrawl 官网首页），复制链接粘贴至输入框，选择已配置的 AI 模型开始生成。
系统会分析页面结构、抓取样式并理解布局。生成完成后，可查看沙盒中克隆的站点，点击下载按钮将项目代码保存到本地。
解压后在 VSCode 中打开文件夹，即可查看生成的 HTML 结构、CSS 样式及拆分好的组件（如 header、footer）。用户可在此基础上进行修改形成自己的项目。
运行生成的项目：
pnpm install
pnpm run dev
启动成功后访问生成的端口地址，即可预览克隆的站点。
4 介绍及安装 cpolar
若需在非同一局域网环境下远程访问部署的 Open-Lovable，可使用 cpolar 内网穿透工具。
cpolar 是一款支持 TCP/UDP 协议的内网穿透工具，无需公网 IP 即可将本地服务发布到互联网上。
访问 cpolar 官网注册账号，下载最新版本并按默认选项安装。
安装成功后，在浏览器访问 localhost:9200，使用账号登录 Web 管理界面。
5 配置 Open-Lovable 固定公网地址
登录 cpolar Web UI 管理界面，点击隧道管理创建隧道：
- 隧道名称：自定义（如 myclone）
- 协议：http
- 本地地址：3000
- 域名类型：随机域名
- 地区：China Top
创建成功后，在线隧道列表将显示生成的公网地址。在其他设备或移动端通过该地址即可访问。
由于 Open-Lovable 默认无登录验证，建议设置密码保护以保障 API 密钥安全。在隧道列表中点击编辑，进入高级设置中的 auth 字段，填写用户名和密码（格式：username:password）。
更新后，访问链接时将要求输入凭证，确保只有授权人员可访问。
总结
Open-Lovable 凭借网页克隆为 React 应用的能力，解决了前端开发中手动搭建页面耗时的问题。配合 cpolar 内网穿透，弥补了仅支持局域网使用的短板，实现了安全的远程访问与团队协作，提升了开发效率。