搭建专属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文件，直接在浏览器中打开使用，或集成到您的网站中。

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)^2
      const 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聊天平台，无需编写任何代码，只需简单配置即可完成。希望本教程对您有所帮助，祝您使用愉快！