基于开发者空间云开发环境，使用MateChat+MaaS构建智能对话应用-优快云博客

一、概述

1. 案例介绍

华为云开发者空间为开发者提供一个免费的云开发环境，开发者可以将计算密集型任务交给性能强大的云开发环境，同时可以在本地Windows或者MacOS设备上编写代码，在远程的鲲鹏云环境中运行和调试。

MateChat致力于构建不同业务场景下高一致性的GenAI体验系统语言，同时匹配各种工具/平台的原生业务场景和界面特征，提供更适合研发工具领域的对话组件，打造流畅亲和、跨界一致、易学易用的用户体验，以及易接入、易维护、易扩展的开发体验。

MaaS(即ModelArts Studio大模型即服务平台)是华为云面向AI开发者推出的一站式大模型开发平台，支持开发者一键体验大模型能力，快速构建大模型应用。MaaS平台提供大模型训练、推理、部署、管理、监控等全生命周期管理能力，帮助开发者快速构建大模型应用，加速AI开发。

本案例基于华为开发者空间云开发环境，使用MateChat+MaaS，快速搭建智能对话应用。

2. 适用对象

企业
个人开发者
高校学生

3. 案例时间

本案例总时长预计60分钟。

4. 案例流程

说明：

用户进入华为开发者空间云开发环境；
通过CLI工具连接云开发环境；
领取并配置模型服务；
使用MateChat和MaaS快速开发智能对话应用。

5. 资源总览

本案例预计花费0元。

资源名称	规格	单价（元）	时长（分钟）
华为开发者空间 - 云开发环境	鲲鹏通用计算增强型 kc1 \| 2vCPUs \| 4G \| HCE	免费	60

二、环境及资源准备

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：

sudo curl -fsSL https://gitee.com/edazh/nvm/raw/master/install.sh | bash

刷新环境变量：

source ~/.bashrc  # Bash 用户
source ~/.zshrc   # Zsh 用户

检查当前镜像源配置：

echo $NVM_NODEJS_ORG_MIRROR

设置镜像源，解决网络访问速度慢、连接不稳定的问题：

export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/

升级更新：

nvm update

查看nvm版本：

nvm -v

已成功安装nvm。

3.2 使用nvm升级Node.js版本

指定版本安装Node.js：

nvm install 22.17.1

安装完成后，使用特定版本：

nvm use 22.17.1

查看版本：

node -v

已成功升级Node.js版本。

4. 创建及运行MateChat

4.1 创建应用

通过以下命令创建一个MateChat应用：

npm create matechat@latest

输入项目名称：matechat-project，选择模板：Vue Starter

进入项目目录下安装依赖：

cd matechat-project
npm i

运行默认应用：

npm run dev

点击Open in Browser：

若运行报错：System limit for number of file watchers reached 原因：文件监视程序的系统产生了限制，达到了默认的上限，需要增加限额。执行以下命令：

echo fs.inotify.max_user_watches = 524288 | sudo tee -a /etc/sysctl.conf 
sudo sysctl -p

4.2 模型对接

应用默认使用的Mock数据进行对话，在src/models/config.ts文件中做如下修改可启用真实模型进行对话：

enableMock改为false：

export const MODEL_CONFIGS = {
  stream: true,
  enableMock: false,
};

在src/models/config.ts文件的LLM_MODELS中配置我们在“二、环境及资源准备”第3节中获取的API地址、模型名称、API Key。

注意：需要删除API地址中的“chat/completions”。

4.3 运行智能对话应用

接入DeepSeek-R1模型后，Ctrl+s保存代码，在项目目录下，执行以下命令再次运行程序：

npm run dev

点击Open in Browser：

切换模型：DeepSeek-R1

尝试问几个问题：

你可以帮助我做些什么？

跑步对身体有哪些好处？

智能对话应用给了我们详尽的回答。至此，基于云开发环境+MateChat+MaaS快速搭建智能对话应用的案例已全部完成。

四、反馈改进建议

如您在案例实操过程中遇到问题或有改进建议，可以到论坛帖评论区反馈即可，我们会及时响应处理，谢谢！