基于华为开发者空间云开发环境，使用MateChat和MaaS快速开发智能对话应用
最新案例动态，请查阅基于开发者空间云开发环境，使用MateChat+MaaS构建智能对话应用。小伙伴们快来领取华为开发者空间进行实操吧！
一、概述
1. 案例介绍
华为云开发者空间为开发者提供一个免费的云开发环境，开发者可以将计算密集型任务交给性能强大的云开发环境，同时可以在本地Windows或者MacOS设备上编写代码，在远程的鲲鹏云环境中运行和调试。
MateChat致力于构建不同业务场景下高一致性的GenAI体验系统语言，同时匹配各种工具/平台的原生业务场景和界面特征，提供更适合研发工具领域的对话组件，打造流畅亲和、跨界一致、易学易用的用户体验，以及易接入、易维护、易扩展的开发体验。
MaaS(即ModelArts Studio大模型即服务平台)是华为云面向AI开发者推出的一站式大模型开发平台，支持开发者一键体验大模型能力，快速构建大模型应用。Mass平台提供大模型训练、推理、部署、管理、监控等全生命周期管理能力，帮助开发者快速构建大模型应用，加速AI开发。
本案例基于华为开发者空间云开发环境，使用MateChat+MaaS，快速搭建智能对话应用。
2. 适用对象
- 企业
- 个人开发者
- 高校学生
3. 案例时间
本案例总时长预计60分钟。
4. 案例流程
说明：
- 用户进入华为开发者空间云开发环境；
- 通过VS Code连接云开发环境；
- 领取并配置模型服务；
- 使用MateChat和MaaS快速开发智能对话应用。
5. 资源总览
本案例预计花费0元。
| 资源名称 | 规格 | 单价（元） | 时长（分钟） |
|---|---|---|---|
| 华为开发者空间 - 云开发环境 | 鲲鹏通用计算增强型 kc1 | 2vCPUs | 4G | HCE | 免费 | 60 |
二、环境及资源准备
1. 开发者空间配置
面向广大开发者群体，华为开发者空间提供一个随时访问的“开发平台”、丰富的“预配置工具集合”和灵活使用的“场景化资源池”，开发者开箱即用，快速体验华为根技术和资源。
开发者可以登录华为云账号后可以直接进入华为开发者空间开发平台界面，点击云开发环境即可进入云开发环境页面。
云开发环境如下图所示：
2. VS Code远程连接云开发环境（虚机）
本案例中，使用华为云《华为开发者空间-云开发环境（虚拟机）IDE插件远程连接操作指导》中的“二、云开发环境IDE插件远程连接操作指导”，完成“1. 创建” ~ “3. 连接”章节步骤。
完成连接之后的状态：
3. ModelArts Studio 模型服务
参考案例《Versatile Agent中自定义接入大模型配置华为云Maas指导》中的“一、 领取”章节内容，领取华为开发者空间百万token代金券福利，购买ModelArts Studio DeepSeek-V3 轻量体验包（¥3.50）。开通商用模型服务，最后获取模型名称、API地址和API Key的参数值。
注意：记录API Key、API地址以及model名称留作后面步骤使用。
三、构建智能对话应用
1. 本地VS Code插件安装
使用VS Code创建一个Vue+TS项目需要安装以下插件：
Live Server vscode：用于提升前端开发效率，通过自动刷新浏览器实时预览代码改动，无需手动刷新页面。
Vetur：专为Vue.js开发者设计的VS Code扩展，主要提供语法高亮、智能代码补全、错误检查和代码格式化等核心功能。
Vue (Official)：扩展Vue框架的功能，提升开发效率，并实现代码复用。
2. 升级Node.js版本
当前Node.js版本为12.22.11，版本较低，需升级。
2.1 安装git
按下Ctrl+Shift+`，打开terminal窗口，执行以下命令安装git。
sudo yum install git2.2 安装nvm
执行以下命令安装nvm。
sudo curl -fsSL https://gitee.com/edazh/nvm/raw/master/install.sh | bash设置镜像源，解决网络访问速度慢、连接不稳定的问题：
echo 'export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node' >> ~/.bashrc source ~/.bashrc升级更新：
nvm update查看nvm版本：
nvm -v已成功安装nvm。
2.3 使用nvm升级Node.js版本
指定版本安装Node.js：
nvm install 22.17.1安装完成后，使用特定版本：
nvm use 22.17.1查看版本：
node -v已成功升级Node.js版本。
3. 创建及运行MateChat
3.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 -p3.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。
模型名称：DeepSeek-V3
注意：需要删除API地址中的“chat/completions”。
3.3 运行智能对话应用
接入DeepSeek-R1模型后，Ctrl+s保存代码，在项目目录下，执行以下命令再次运行程序：
npm run dev点击Open in Browser：
切换模型：DeepSeek-V3
尝试问几个问题：
- 你可以帮助我做些什么？
- 跑步对身体有哪些好处？
智能对话应用给了我们详尽的回答。
至此，基于云开发环境+MateChat+MaaS快速搭建智能对话应用的案例已全部完成。