最新案例动态，请查阅基于开发者空间云开发环境，使用MateChat+MaaS构建智能对话应用。小伙伴们快来领取华为开发者空间进行实操吧！

一、概述

1. 案例介绍

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

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

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

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

2. 适用对象

• 企业

• 个人开发者

• 高校学生

3. 案例时间

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

4. 案例流程

说明：

1. 用户进入华为开发者空间云开发环境；

2. 通过 VS Code 连接云开发环境；

3. 领取并配置模型服务；

4. 使用 MateChat 和 MaaS 快速开发智能对话应用。

5. 资源总览

本案例预计花费 0 元。

二、环境及资源准备

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 git

2.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' >> ~/.bashrcsource ~/.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-projectnpm 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

3.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 快速搭建智能对话应用的案例已全部完成。