前两天刷到一个东西，给我整不会了。

有个开源项目叫 Open-Lovable，玩法特别简单粗暴，你给它一个网址，它自己把那个网页分析一遍，然后吐出一套能继续改的 React 前端代码。不是截图，不是 Figma 稿，是能跑、能改、能下载的真实工程。

我当时就愣住了，这玩意要是真的，前端同学搞原型的效率不得直接起飞。我寻思着，得，我自己动手趟一遍，看看是不是又一个 PPT 项目。

咱们平时刷到一个喜欢的网站，布局舒服，配色高级，组件也清爽，脑子里第一反应往往是，能不能快速搞一个差不多的出来。当学习样本，当项目起点，当给老板演示的原型，都好使。

传统路子呢，先分析人家的页面结构，再手动拆组件，写样式，调响应式，折腾大半天。说真的，光是把那个 footer 和 header 对齐，就够你喝一壶的。

Open-Lovable 给的就是一条歪路，你丢网址进去，它结合网页抓取、AI 模型和沙盒执行环境，把页面嚼一遍，吐出 React 代码。

它是 MendableAI 团队开源的项目，MIT 许可证，代码完全摊在桌上。最戳人的点是，你不用写代码，跟它说人话就行。给它一个网址，它把网页克隆成一套 React 应用。学习、做原型、直接当脚手架，都够用。

第一样，抓取引擎，原版用的 Firecrawl，负责把目标网页的内容、结构、样式全抓回来。没有它，模型连人家页面长啥样都不知道。

第二样，沙盒执行环境，原版用的是 E2B 或者 Vercel Sandbox，负责隔离地跑代码。你生成的 React 项目就在里面跑，不会把你本机搞脏，这点我特别喜欢，谁也不想为了试个工具把电脑环境搞崩。

第三样，大模型，负责理解页面、生成代码、再迭代修改。模型这块它很开放，Claude、GPT、Gemini，还有通过 OpenAI 兼容协议接进来的各种模型，都能用。

就是这第三样，埋着今天这篇文章的钩子。

原版默认让你填 Groq，或者 OpenAI 的 key。但咱在国内，你懂的，直连那些国外接口，网络不稳，延迟感人，成本也不低。我就想，能不能把它的 AI 大脑，换成国产的模型平台。

正好前段时间在折腾蓝耘 MaaS。

蓝耘 MaaS 是蓝耘元生代智算云搞的一个开箱即用的大模型平台。它把 DeepSeek、Kimi、Qwen、GLM、MiniMax 这些主流模型聚到一起，给你统一网关、统一鉴权、统一成本管控。

最香的一点是，它的文本对话接口，完全兼容 OpenAI 协议。你用 OpenAI SDK 写的代码，把 base_url 和 api_key 一换，就能直接调蓝耘的模型，一行逻辑都不用改。

这下巧了。Open-Lovable 原生支持 OpenAI 这个 provider，而蓝耘恰好是 OpenAI 兼容的。那不就一拍即合，我们一行业务代码都不用改，只要把 OpenAI 的接入点指到蓝耘，再把模型名换成蓝耘的，整套生成逻辑的大脑，就切到国产平台了。

说到这，你可能纳闷，听上去很美，那实际部署起来麻烦不。

麻烦，太麻烦了，至少在我这台 Windows 机器上。

我是真的觉得，Windows 上搞前端工具链，有时候比写代码本身还折腾。我这台机器上，从 clone 到把依赖装完，前后折腾了好几轮。pnpm 因为 Windows 符号链接权限直接挂，换成 npm，又因为工作目录所在的磁盘有文件保护机制、叠加系统盘被占满，reify 阶段反复卡死，node_modules 始终装不完整。

当时给我整懵了，明明就是个 npm install，怎么比登天还难。

后来摸到门道了，如果你机器也是类似环境，最稳的办法是把项目放在系统盘的非受保护目录，确保系统盘有至少几个 G 的空闲，再用 npm 装。还有个坑得提醒你，C 盘的 npm-cache 索引文件如果因为前面几次中断安装被锁死，会反复报 EPERM 这种错，最简单的办法是把缓存目录指到别的盘。

npm install --cache F:\npm-cache --registry https://registry.npmmirror.com

就这么一行，把我从坑里捞出来了。等它跑完，node_modules 里就有 next、react、@ai-sdk 全家桶这些东西了。

装完依赖，打开编辑器，把项目里的 env.example 全选复制，新建一个 env.local 粘进去。env.local 里要填几个密钥，我一个个说。

FIRECRAWL_API_KEY，抓取引擎的密钥，去 firecrawl.dev 领一个免费的。沙盒的密钥，原版默认用 Vercel Sandbox，也可以换成 E2B，去 e2b.dev 领。这两个是跑通生成流程必须的，没有它们，Open-Lovable 连网页都抓不回来。

第三个，也是今天的重点，蓝耘 MaaS 的 Key。

蓝耘的 Key 挺简单，打开蓝耘智算云的注册页，手机号加邮箱注册登录，进控制台找到 API Keys，点创建，生成一个 Key。千万记住，蓝耘的 API Key 是 sk- 开头的字符串，而且只在创建那一刻完整显示一次，之后就再也看不全了，立刻复制到本地存好。

安全上多嘴一句，API Key 等同于你账号的凭据，只写在本地 env.local 里，确认这个文件已经被 .gitignore 忽略掉，别一个手滑推到公开仓库，被人刷光额度。

登录之后进 MaaS 平台，模型广场里 DeepSeek、Kimi、Qwen 一排排摆着，每个都能直接拿到 API 示例，还有立即体验的入口。

这是模型广场，我截的时候忍不住想，国产模型这两年是真的支棱起来了。

接法一，在配置里注册蓝耘模型

第一种，我更推荐，在配置里注册蓝耘模型。Open-Lovable 允许你在 config/app.config.ts 的 ai 配置段，显式注册一个自定义模型。这样做的好处是，模型下拉框里会直接多出「蓝耘 MaaS」这个选项，模型名自动映射对，不用你每次手填。

打开 config/app.config.ts，在 availableModels、modelDisplayNames、modelApiConfig 这三个地方，各加一条。

// config/app.config.ts，ai 配置段

availableModels: [
  'openai/gpt-5',
  'moonshotai/kimi-k2-instruct-0905',
  'anthropic/claude-sonnet-4-20250514',
  'google/gemini-3-pro-preview',
  'lanyun/kimi-k2.7-code',          // 新增，蓝耘 MaaS
],

modelDisplayNames: {
  'openai/gpt-5': 'GPT-5',
  'moonshotai/kimi-k2-instruct-0905': 'Kimi K2 (Groq)',
  'anthropic/claude-sonnet-4-20250514': 'Sonnet 4',
  'google/gemini-3-pro-preview': 'Gemini 3 Pro (Preview)',
  'lanyun/kimi-k2.7-code': '蓝耘 MaaS · Kimi K2.7 Code',   // 新增显示名
} as Record<string, string>,

modelApiConfig: {
  'moonshotai/kimi-k2-instruct-0905': {
    provider: 'groq',
    model: 'moonshotai/kimi-k2-instruct-0905',
  },
  'lanyun/kimi-k2.7-code': {        // 新增，指向蓝耘
    provider: 'openai',
    apiKey: process.env.OPENAI_API_KEY,          // 复用 env.local 里的 OPENAI_API_KEY
    baseURL: 'https://maas-api.lanyun.net/v1',   // 蓝耘 MaaS 的 OpenAI 兼容地址
    model: 'kimi-k2.7-code',                     // 实际发给蓝耘的模型名
  },
},

这里头的原理是这样的，Open-Lovable 对 openai 这个 provider，会去读环境变量里的接入点，而 modelApiConfig 允许你给某个具体的模型 id，直接指定 provider、apiKey、baseURL、model。上面这段配置，等于把 

 这个下拉项，整条路由到了蓝耘 MaaS。

第二种，最简，只改环境变量。你要是不想动源码，也可以只改 env.local，把 OpenAI 的接入点整体指到蓝耘。

# env.local
OPENAI_API_KEY=sk-你的蓝耘Key
OPENAI_BASE_URL=https://maas-api.lanyun.net/v1

这样所有 openai 开头的模型都会打到蓝耘。但有个坑得提醒你，此时下拉框里选中的模型名，比如 gpt-5，会被原样发给蓝耘，蓝耘要是没有 gpt-5 这个模型名，就直接报错。所以真要可用，还是得用第一种办法，把模型名映射成蓝耘支持的，比如 kimi-k2.7-code。

回到填 Key 这块，把蓝耘的 Key 填到 env.local 的 

# env.local，节选
FIRECRAWL_API_KEY=你的firecrawl_key
E2B_API_KEY=你的e2b_key            # 或者用 Vercel Sandbox，看官方 env.example
OPENAI_API_KEY=sk-你的蓝耘MaaSKey  # 蓝耘 MaaS 的 Key

正式跑之前，你可以拿一段最小代码，确认 Key 和端点都是好的，不用非得进 Open-Lovable。

# 验证蓝耘 MaaS，OpenAI 兼容
from openai import OpenAI

client = OpenAI(
    api_key="sk-你的蓝耘Key",
    base_url="https://maas-api.lanyun.net/v1",
)

resp = client.chat.completions.create(
    model="kimi-k2.7-code",
    messages=[{"role": "user", "content": "用一句话说明 MaaS 的核心价值"}],
    max_tokens=200,
)
print(resp.choices[0].message.content)

curl https://maas-api.lanyun.net/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer sk-你的蓝耘Key" \
  -d '{
    "model": "kimi-k2.7-code",
    "messages": [{"role": "user", "content": "你好"}],
    "stream": true
  }'

Key 验证没问题，存一下，回到终端，启动开发服务器。

这一步启动的是 Next.js 开发服务器，正常会在 http://localhost:3000 起一个界面。我本机是把服务真跑通了，下面是真实运行出来的主界面。

如果你开了系统代理，浏览器访问 localhost:3000 时记得把 

 加到代理绕过列表，否则可能连不上，也可以直接访问 http://127.0.0.1:3000。

主界面中间就是输入框，贴一个你想克隆的公开网址，点右侧橙色箭头进入下一步。模型选择器在后续交互里出现，里面已经注册了「蓝耘 MaaS · Kimi K2.7 Code」这个选项。

点开始之后，Open-Lovable 会走一条固定流水线。Firecrawl 先把目标网页的内容、结构和样式抓回来，模型根据抓取结果生成 React 代码，E2B 或者 Vercel Sandbox 把代码隔离跑起来，最终给你一套能继续改的真实工程。

如果三把密钥都有效，跑出来的预览大概长这样。界面布局和配色会尽量贴近你输入的目标网址，组件、响应式、基础交互都已经被生成好了，你可以直接在这个工程上继续改。

有一说一，这里我得跟各位交个底。

真正点一下开始，让它去克隆一个外部网站，那一步我本机没演示成。因为生成流程要三把钥匙同时转，Firecrawl 负责抓页面，E2B 或者 Vercel Sandbox 负责隔离跑代码，蓝耘 MaaS 负责出代码，这三样密钥我手头没凑齐。没有它们，点开始只会报错，截出来的图也是报错界面，那比不截还假。

你凑齐三把密钥之后，在自己的机器上跑一遍，截出来的那张图，就是这篇文章里缺的那一块。到时候把它换到本节的位置，整篇教程就完整了。

顺便做下预期管理，它复刻的是静态的布局和样式，动态效果、登录态、后台接口这些，它给不了。别指望它把一个网站连人家的数据库一起搬回来，那不现实，也不该那么做。第三方页面，只在你学习、研究、或者拿到授权的情况下用，真要上线，该替换的品牌、图片、文案，一个都别偷懒。

说到这，我突然想到一个更大的东西。

这类工具最有意思的地方，其实不是克隆本身。而是它把前端原型的成本，从大半天手动拆组件，压到了几秒钟。你脑子里有个页面的样子，或者刷到一个喜欢的网站，丢个参考网址进去，它先给你打底，你再精修。原型阶段，效率是真的高。

这让我想起前两年大家聊的，AI 会不会让职业消失。我现在越来越觉得，AI 干掉的不是职业，是职业里那些重复、机械、耗时间的脏活。拆组件、对样式、调布局，这些曾经吃掉程序员大半个下午的事，现在几秒就打底了。人腾出手来，去想更值钱的东西，这个页面的灵魂是什么，体验怎么打磨，业务怎么串。

蓝耘这类国产模型平台的 OpenAI 兼容接口，又给这件事加了一层丝滑。不用翻墙，不用为网络稳定性提心吊胆，成本还更可控。国产模型这一年多肉眼可见地支棱起来了，Kimi、DeepSeek、Qwen，一个比一个能打，接进来几乎没有门槛。

磨平一些信息差，就是这个号一直想做的事情之一。

我把 Open-Lovable 跑通了，丢一个网址进去，几秒生成一套 React 前端

先锋会员

前端

开发工具

人工智能

开源项目Open-Lovable可将任意网址一键克隆为可编辑的React前端代码，结合Firecrawl抓取、E2B沙盒与AI模型实现自动化生成。本文详解Windows部署避坑技巧，并示范如何通过OpenAI兼容接口接入蓝耘MaaS国产模型平台，替换AI大脑，实现低成本、稳定的本地化部署。

数据库

服务器

DeepSeek

Windows

路由

ReAct 

MaaS

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

我把 Open-Lovable 跑通了，丢一个网址进去，几秒生成一套 React 前端

我把 Open-Lovable 跑通了，丢一个网址进去，几秒生成一套 React 前端

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐