SuperAPI AI 工具集

Open Lovable

Open Lovable 是由 Mendable AI 打造的一款免费开源 AI 工具,可将任意网站快速转换为 React/Next.js 应用。它通过 Firecrawl 抓取目标网站的 HTML、CSS 和布局,再利用 Claude、GPT、Groq 等大语言模型分析结构,生成带 Tailwind CSS 样式的整洁 TypeScript 代码,并以 MIT 许可证发布,支持自托管与完全自定义。用户需自行配置 E2B Sandbox、Firecrawl 及至少一个 AI 模型 API 密钥,可借助交互式 AI 聊天界面用自然语言实时调整样式与布局。

访问官网

工具介绍

Open Lovable 是一款免费、开源的 AI 网站构建工具,由 Mendable AI 开发,定位为 Lovable.ai 的免费替代方案。它能够在数秒内将任意网站转换为干净的 React/Next.js 应用,用户可克隆网站、生成整洁代码并保有完全所有权。

用途 Open Lovable 主要用于将公开可访问的网站(如落地页、作品集、电商网站、博客和企业网站)重新生成为现代 React/TypeScript 代码,帮助开发者加速 Web 开发流程,将重复的复制粘贴与手动编码工作交给 AI 完成。

主要能力

  • AI 驱动的网站克隆:使用 Claude、GPT、Groq 等 AI 模型分析并重建任意网站为 React 组件。
  • 生成干净的 React/TypeScript 代码:输出可用于生产环境的 React/Next.js 应用,支持现代 hooks、TypeScript 与 Tailwind CSS 样式。
  • 100% 开源免费:MIT 许可证,社区驱动,可自由 fork、修改与自托管。
  • 安全的代码执行:在 E2B Sandbox 环境中安全执行生成的代码,实现隔离测试与开发。
  • 高度可定制:可修改提示词、替换 AI 模型、扩展框架,完全掌控生成过程。
  • 交互式 AI 聊天:通过自然语言命令实时调整样式、布局或功能。

工作原理 Open Lovable 使用 Firecrawl 抓取目标网站的 HTML、CSS 和布局,随后由 AI 模型理解其结构,最终生成带现代 hooks 的 React/Next.js 组件与生产级 TypeScript 代码。官方给出的典型视觉还原准确度为 80-95%,具体取决于源网站复杂度与所用 AI 模型。

使用方式

  1. 从 GitHub 克隆 Open Lovable 仓库并安装依赖,需要 Node.js 18+ 及准备好的 API 密钥。
  2. 配置环境变量,需要:E2B Sandbox API 密钥(用于安全代码执行,有免费额度)、Firecrawl API 密钥(用于网页抓取)、以及至少一个 AI 模型 API 密钥(OpenAI、Anthropic 或 Groq)。
  3. 启动开发服务器并在浏览器中打开界面,AI 聊天界面即可接受指令。
  4. 在聊天界面粘贴网站 URL,AI 会分析该站点并在数秒内生成 React 代码;随后可通过对话调整样式和布局。

适用场景 适合希望快速将现有网站重建为 React/Next.js 项目的开发者、需要学习现代前端代码结构的人员,以及希望自托管、避免供应商锁定的团队。具备基础 React 知识有助于自定义和扩展生成的代码,但并非使用前提。

限制

  • 需要自行申请并配置 E2B、Firecrawl 和 AI 模型三类第三方 API 密钥;这些第三方服务可能产生费用,尽管通常有免费额度。
  • 对于依赖大量后端的复杂 Web 应用,克隆后可能需要额外定制。
  • 视觉还原并非 100% 精确,需借助 AI 聊天进一步微调。
  • 技术栈涉及 Next.js、React、TypeScript、Tailwind CSS、Firecrawl、E2B Sandbox 以及 Claude、GPT-4、Groq/Kimi、Google Gemini 等模型。

费用与版本 Open Lovable 本身 MIT 授权、完全免费,无订阅费、使用限制或隐藏费用。官方页面另提及 Pro Max 350 美元/年的订阅选项(含每月 1000 条消息、1200M Token 上限、增强优先支持、新模型优先支持等),具体归属与条款暂未提供明确说明。