搭建专属AI聊天网站：NextChat + 蓝耘MaaS平台完整部署指南
文章目录
项目概述
在AI迅猛发展的今天，拥有一个私人AI聊天网站已不再是奢望。本教程将指导您如何零编码搭建一个专业级AI聊天平台，具体包括：
- 🚀 部署NextChat前端界面到Vercel（支持免费托管）
- 🔌 接入蓝耘MaaS平台的Kimi-K2-Instruct等高性能AI模型
- 🔒 配置访问密码保护您的聊天平台
- 🛠️ 实现一个实用的BMI健康指数计算器案例
准备工作：您需要准备GitHub账号和蓝耘平台账号
第一步：注册蓝耘平台并获取API凭证
1.1 注册蓝耘MaaS平台
首先访问蓝耘MaaS平台官网进行注册。平台为新用户提供大量免费token，可以充分测试各种模型。
1.2 获取API密钥
登录后，进入MaaS平台选项卡，您将看到多种可调用的AI模型：
在左侧菜单中找到"API KEY管理"，点击"创建API KEY"，系统会生成API密钥。请妥善保存这个密钥，它是连接AI模型的关键。
1.3 获取模型信息和接口地址
在MaaS模型广场中，选择您想使用的模型（本教程以Kimi-K2-Instruct为例）。点击查看详情后，您可以看到模型路径为/maas/kimi/Kimi-K2-Instruct。
蓝耘提供了OpenAI兼容接口，可在MaaS平台文档中找到。接口地址为：https://maas-api.lanyun.net/v1
第二步：一键部署NextChat
2.1 开始部署流程
访问NextChat的GitHub仓库，点击Deploy按钮开始部署流程。
2.2 关联GitHub账号
点击Continue with GitHub，然后按提示完成GitHub账号关联。
如果是首次使用，需点击Add GitHub Account添加GitHub账号，并完成授权安装。
2.3 创建项目
设置项目名称（注意：只能使用小写英文字母），然后点击Create创建项目。
2.4 配置基本参数
输入蓝耘MaaS平台的API密钥，并设置一个访问密码（用于保护您的聊天平台），然后点击Deploy开始部署。
耐心等待部署完成，系统会显示部署成功的提示。
2.5 高级环境变量配置
点击Continue to Dashboard前往控制面板，然后点击Settings进入设置页面。
在Environment Variables部分，添加以下环境变量：
| 环境变量 | 值 | 说明 |
|---|---|---|
DEFAULT_MODEL | /maas/kimi/Kimi-K2-Instruct | 设置默认模型：用户打开聊天页时默认使用Kimi-K2-Instruct模型 |
BASE_URL | https://maas-api.lanyun.net | API基础地址：指向蓝耘的OpenAI兼容接口（NextChat会自动添加/v1） |
CUSTOM_MODELS | -all,+/maas/kimi/Kimi-K2-Instruct | 自定义模型列表：隐藏所有默认模型，只显示Kimi模型 |
HIDE_USER_API_KEY | 1 | 隐藏API输入框：用户只能使用您配置的API Key，提高安全性 |
提示：NextChat会自动在BASE_URL后添加/v1/chat/completions，所以这里只需填写域名部分。
配置完成后点击SAVE保存。您可以在下方看到所有已配置的环境变量，包括初始设置的OPENAI_API_KEY和CODE。
2.6 重新部署应用
环境变量更新后，需要重新部署应用使配置生效。点击Deployments，切换到Production环境，找到最新版本点击Redeploy。
部署完成后，您可以通过类似https://your-project.vercel.app的地址访问您的AI聊天平台。
第三步：访问和测试您的AI聊天平台
3.1 首次登录
首次访问平台时，系统会要求输入访问密钥，即您之前设置的CODE环境变量。
输入正确密码后，您将进入聊天界面。
3.2 功能测试
发送一条测试消息（如"你好，请介绍一下自己"），验证系统是否正常工作。
第四步：AI应用开发案例 - BMI健康指数计算器
4.1 向AI提出需求
在聊天框中，向AI提出明确的需求：“请你使用CSS+JS+HTML给我实现一个BMI健康指数计算器”。
4.2 获取和使用代码
AI会生成完整的HTML、CSS和JavaScript代码。您可以将这些代码保存为HTML文件，直接在浏览器中打开使用，或集成到您的网站中。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><title>BMI 健康指数计算器</title><style>*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}body{margin:0;padding:30px;background:#f4f6fa;color:#333;display:flex;justify-content:center}.wrapper{max-width:420px;width:100%}h2{margin:0 0 15px;font-size:24px;text-align:center}label{display:block;margin-bottom:5px;font-weight:600}input,select{width:100%;padding:10px;margin-bottom:15px;border:1px solid #bbb;border-radius:4px}button{width:100%;padding:10px;background:#007bff;color:#fff;border:none;border-radius:4px;font-size:16px;cursor:pointer}button:hover{background:#0069d9}#result{margin-top:20px;padding:15px;border-radius:6px;font-weight:bold;text-align:center}.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.warning{background:#fff3cd;color:#856404;border:1px solid #ffeaa7}</style></head><body><divclass="wrapper"><h2>BMI 健康指数计算器</h2><label>身高 (cm) <inputtype="number"id="height"placeholder="例如：170"></label><label>体重 (kg) <inputtype="number"id="weight"placeholder="例如：65"></label><buttononclick="calculateBMI()">计算 BMI</button><divid="result"style="display:none;"></div></div><script>functioncalculateBMI(){const height =parseFloat(document.getElementById("height").value);const weight =parseFloat(document.getElementById("weight").value);const resultDiv = document.getElementById("result");if(!height ||!weight || height <=0|| weight <=0){alert("请输入有效的身高和体重！");return;}// 公式：BMI = 体重(kg) / 身高(m)^2const heightM = height /100;const bmi =(weight /(heightM * heightM)).toFixed(1);let category ="";if(bmi <18.5) category ="偏瘦";elseif(bmi <24) category ="正常";elseif(bmi <28) category ="偏胖";else category ="肥胖"; resultDiv.className ="success"; resultDiv.style.display ="block"; resultDiv.innerHTML =` 您的 BMI 值为 <strong>${bmi}</strong>，属于 <strong>${category}</strong> 范围。 `;}</script></body></html>4.3 测试BMI计算器
将代码保存为HTML文件并打开，您可以看到一个功能完整的BMI计算器：
之后我们可以继续与AI对话，要求它添加更多功能，如健康建议、历史记录保存、更详细的体型分析等。
总结
通过本教程，我们已经成功搭建了一个专业级的AI聊天平台，无需编写任何代码，只需简单配置即可完成。
希望本教程对您有所帮助，祝您使用愉快！
