基于开发者空间云开发环境，使用 MateChat+MaaS 构建智能对话应用
一、概述
1. 案例介绍
华为云开发者空间为开发者提供一个免费的云开发环境，开发者可以将计算密集型任务交给性能强大的云开发环境，同时可以在本地 Windows 或者 MacOS 设备上编写代码，在远程的鲲鹏云环境中运行和调试。
MateChat 致力于构建不同业务场景下高一致性的 GenAI 体验系统语言，同时匹配各种工具/平台的原生业务场景和界面特征，提供更适合研发工具领域的对话组件，打造流畅亲和、跨界一致、易学易用的用户体验，以及易接入、易维护、易扩展的开发体验。
MaaS(即 ModelArts Studio 大模型即服务平台)是华为云面向 AI 开发者推出的一站式大模型开发平台，支持开发者一键体验大模型能力，快速构建大模型应用。Mass 平台提供大模型训练、推理、部署、管理、监控等全生命周期管理能力，帮助开发者快速构建大模型应用，加速 AI 开发。
本案例基于华为开发者空间云开发环境，使用 MateChat+MaaS，快速搭建智能对话应用。
2. 适用对象
企业
个人开发者
高校学生
3. 案例时间
本案例总时长预计 60 分钟。
4. 案例流程
说明：
用户进入华为开发者空间云开发环境；
通过 CLI 工具连接云开发环境；
领取并配置模型服务；
使用 MateChat 和 MaaS 快速开发智能对话应用。
5. 资源总览
本案例预计花费 0 元。
体验完整案例请点这里👉️👉️👉️基于开发者空间云开发环境，使用MateChat+MaaS构建智能对话应用
二、环境及资源准备
1. 开发者空间配置
面向广大开发者群体，华为开发者空间提供一个随时访问的“开发平台”、丰富的“预配置工具集合”和灵活使用的“场景化资源池”，开发者开箱即用，快速体验华为根技术和资源。
开发者可以登录华为云账号后可以直接进入华为开发者空间开发平台界面，点击云开发环境即可进入云开发环境页面。
云开发环境如下图所示：
2. PC 端通过 cli 工具连接云开发环境
本案例中，使用华为云《开发者空间云开发环境使用指导》的“三. PC 端环境配置”、“四. 本地 PC 端操作云开发环境中的 1.开机、2.建立隧道连接”章节完成 cli 工具安装、环境配置、创建云开发环境、开机、建立隧道连接的功能。
3. ModelArts Studio 模型服务
华为云提供了单模型 200 万免费 Tokens，我们可以登录华为云 ModelArts Studio(MaaS)控制台领取免费额度，这里我们选择 DeepSeek-R1-32K（NEW）。
打开浏览器，用浏览器访问 ModelArts Studio 首页：https://www.huaweicloud.com/product/modelarts/studio.html，点击ModelArts Studio 控制台跳转到登录界面，按照登录界面提示登录，即可进入 ModelArts Studio 控制台。
进入 ModelArts Studio 控制台首页，区域选择西南-贵阳一，在左侧菜单栏，选择在线推理 > 免费服务，选择 DeepSeek-R1-32K（NEW）模型，点击领取额度，领取 200 万免费 token。
领取后点击调用说明，可以获取到对应的 API 地址、模型名称。
点击 API Key 管理-创建 API Key，自定义标签和描述，点击确定创建 API Key。（注意保存好 API Key）。
到这里华为云 MaaS 提供的免费 Tokens 就领取完成了，记录对应的 API 地址、模型名称、API Key 留作下面步骤使用。
三、构建智能对话应用
1. 本地 VS Code 插件安装
使用 VS Code 创建一个 Vue+TS 项目需要安装以下插件：
Live Server vscode：用于提升前端开发效率，通过自动刷新浏览器实时预览代码改动，无需手动刷新页面。
Vetur：专为 Vue.js 开发者设计的 VS Code 扩展，主要提供语法高亮、智能代码补全、错误检查和代码格式化等核心功能。
**Vue (Official)**：扩展 Vue 框架的功能，提升开发效率，并实现代码复用。
安装后重启 IDE，可以看到已安装的插件：
2. 本地 VS Code 直连云开发环境
本案例中，使用华为云《本地VSCode基于华为开发者空间云开发环境完成小程序开发》中的“三、本地 IDE 直连云开发环境完成上传下载中的 1. 下载 VS Code 并安装 Remote-SSH 插件、2. 连接云开发环境”章节完成本地 VS Code 直连云开发环境功能。
打开远程开发环境目录：
3. 升级 Node.js 版本
当前 Node.js 版本为 12.22.11，版本较低，需升级。
3.1 安装 nvm
执行以下命令安装 nvm：
刷新环境变量：
检查当前镜像源配置：
设置镜像源，解决网络访问速度慢、连接不稳定的问题：
升级更新：
查看 nvm 版本：
已成功安装 nvm。
3.2 使用 nvm 升级 Node.js 版本
指定版本安装 Node.js：
安装完成后，使用特定版本：
查看版本：
已成功升级 Node.js 版本。
4. 创建及运行 MateChat
4.1 创建应用
通过以下命令创建一个 MateChat 应用：
输入项目名称：matechat-project，选择模板：Vue Starter
进入项目目录下安装依赖：
运行默认应用：
点击 Open in Browser：
4.2 模型对接
应用默认使用的 Mock 数据进行对话，在 src/models/config.ts 文件中做如下修改可启用真实模型进行对话：
enableMock 改为 false：
在 src/models/config.ts 文件的 LLM_MODELS 中配置我们在“二、环境及资源准备”第 3 节中获取的 API 地址、模型名称、API Key。
注意：需要删除 API 地址中的“chat/completions”。
4.3 运行智能对话应用
接入 DeepSeek-R1 模型后，Ctrl+s 保存代码，在项目目录下，执行以下命令再次运行程序：
点击 Open in Browser：
切换模型：DeepSeek-R1
尝试问几个问题：
你可以帮助我做些什么？
跑步对身体有哪些好处？
智能对话应用给了我们详尽的回答。至此，基于云开发环境+MateChat+MaaS 快速搭建智能对话应用的案例已全部完成。
四、反馈改进建议
如您在案例实操过程中遇到问题或有改进建议，可以到论坛帖评论区反馈即可，我们会及时响应处理，谢谢！
提供全面深入的云计算技术干货 2020-07-14 加入
生于云，长于云，让开发者成为决定性力量
评论