前两天刷到一个东西，给我整不会了。
有个开源项目叫 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 机器上。
我是真的觉得，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。
蓝耘 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。上面这段配置，等于把 lanyun/kimi-k2.7-code 这个下拉项，整条路由到了蓝耘 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 的 OPENAI_API_KEY 那一行，其他的保留。
# 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。
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 验证没问题，存一下，回到终端，启动开发服务器。
npm run dev
这一步启动的是 Next.js 开发服务器，正常会在 http://localhost:3000 起一个界面。我本机是把服务真跑通了，下面是真实运行出来的主界面。
如果你开了系统代理，浏览器访问 localhost:3000 时记得把 localhost 和 127.0.0.1 加到代理绕过列表，否则可能连不上，也可以直接访问 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，一个比一个能打，接进来几乎没有门槛。
磨平一些信息差，就是这个号一直想做的事情之一。
