当前位置：首页 > news >正文

搭建专属AI聊天网站：NextChat + 蓝耘MaaS平台完整部署指南

news 2025/8/3 0:01:56

文章目录

项目概述
第一步：注册蓝耘平台并获取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模型：

蓝耘MaaS平台模型列表

在左侧菜单中找到"API KEY管理"，点击"创建API KEY"，系统会生成API密钥。请妥善保存这个密钥，它是连接AI模型的关键。

API密钥管理界面

1.3 获取模型信息和接口地址

在MaaS模型广场中，选择您想使用的模型（本教程以Kimi-K2-Instruct为例）。点击查看详情后，您可以看到模型路径为/maas/kimi/Kimi-K2-Instruct。

Kimi模型详情页

蓝耘提供了OpenAI兼容接口，可在MaaS平台文档中找到。接口地址为：https://maas-api.lanyun.net/v1

蓝耘OpenAI兼容接口文档

第二步：一键部署NextChat

2.1 开始部署流程

访问NextChat的GitHub仓库，点击Deploy按钮开始部署流程。

NextChat部署入口

2.2 关联GitHub账号

点击Continue with GitHub，然后按提示完成GitHub账号关联。

继续使用GitHub

如果是首次使用，需点击Add GitHub Account添加GitHub账号，并完成授权安装。

添加GitHub账号
安装NextChat

2.3 创建项目

设置项目名称（注意：只能使用小写英文字母），然后点击Create创建项目。

创建NextChat项目

2.4 配置基本参数

输入蓝耘MaaS平台的API密钥，并设置一个访问密码（用于保护您的聊天平台），然后点击Deploy开始部署。

配置NextChat基本参数

耐心等待部署完成，系统会显示部署成功的提示。

部署完成

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健康指数计算器”。

向AI提出需求

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>