搭建专属AI聊天网站：NextChat + 蓝耘MaaS平台完整部署指南
文章目录
- 项目概述
- 第一步：注册蓝耘平台并获取API凭证
- 1.1 注册蓝耘MaaS平台
- 1.2 获取API密钥
- 1.3 获取模型信息和接口地址
- 第二步：一键部署NextChat
- 2.1 开始部署流程
- 2.2 关联GitHub账号
- 2.3 创建项目
- 2.4 配置基本参数
- 2.5 高级环境变量配置
- 2.6 重新部署应用
- 第三步：访问和测试您的AI聊天平台
- 3.1 首次登录
- 3.2 功能测试
- 第四步：AI应用开发案例 - BMI健康指数计算器
- 4.1 向AI提出需求
- 4.2 获取和使用代码
- 4.3 测试BMI计算器
- 总结
项目概述
在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文件，直接在浏览器中打开使用，或集成到您的网站中。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="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><div class="wrapper"><h2>BMI 健康指数计算器</h2><label>身高 (cm)<input type="number" id="height" placeholder="例如：170"></label><label>体重 (kg)<input type="number" id="weight" placeholder="例如：65"></label><button onclick="calculateBMI()">计算 BMI</button><div id="result" style="display:none;"></div></div><script>function calculateBMI() {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 = "偏瘦";else if (bmi < 24) category = "正常";else if (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聊天平台，无需编写任何代码，只需简单配置即可完成。
希望本教程对您有所帮助，祝您使用愉快！