网站导航
> 技术文档 > 搭建专属AI聊天网站：NextChat + 蓝耘MaaS平台完整部署指南

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

网友: 技术文档 2025-07-30 13:07:09

文章目录

  • 项目概述
  • 第一步：注册蓝耘平台并获取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，可以充分测试各种模型。

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

1.2 获取API密钥

登录后，进入MaaS平台选项卡，您将看到多种可调用的AI模型：

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

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

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

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

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

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

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

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

第二步：一键部署NextChat

2.1 开始部署流程

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

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

2.2 关联GitHub账号

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

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

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

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

2.3 创建项目

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

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

2.4 配置基本参数

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

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

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

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

2.5 高级环境变量配置

点击Continue to Dashboard前往控制面板，然后点击Settings进入设置页面。

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

在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，所以这里只需填写域名部分。

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

配置完成后点击SAVE保存。您可以在下方看到所有已配置的环境变量，包括初始设置的OPENAI_API_KEY和CODE。

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

2.6 重新部署应用

环境变量更新后，需要重新部署应用使配置生效。点击Deployments，切换到Production环境，找到最新版本点击Redeploy。

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

部署完成后，您可以通过类似https://your-project.vercel.app的地址访问您的AI聊天平台。

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

第三步：访问和测试您的AI聊天平台

3.1 首次登录

首次访问平台时，系统会要求输入访问密钥，即您之前设置的CODE环境变量。

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

输入正确密码后，您将进入聊天界面。

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

3.2 功能测试

发送一条测试消息（如\"你好，请介绍一下自己\"），验证系统是否正常工作。

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

第四步：AI应用开发案例 - BMI健康指数计算器

4.1 向AI提出需求

在聊天框中，向AI提出明确的需求：“请你使用CSS+JS+HTML给我实现一个BMI健康指数计算器”。

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

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)^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 值为 ${bmi}，属于 ${category} 范围。 `; } </script></body></html>

4.3 测试BMI计算器

将代码保存为HTML文件并打开，您可以看到一个功能完整的BMI计算器：

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

之后我们可以继续与AI对话，要求它添加更多功能，如健康建议、历史记录保存、更详细的体型分析等。

总结

通过本教程，我们已经成功搭建了一个专业级的AI聊天平台，无需编写任何代码，只需简单配置即可完成。
希望本教程对您有所帮助，祝您使用愉快！

网络标签：

相关问题