【案例共创】在开发者空间使用 MateChat 和MaaS快速开发智能对话界面-优快云博客

本案例由开发者：胡琦提供

1 概述

1.1 背景介绍

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

开发者空间是华为云面向开发者提供的云上开发环境，支持开发者快速创建、部署、调试、运行、管理应用。开发者空间提供丰富的开发工具和资源，支持开发者快速构建应用，加速开发。

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

通过本案例实操，让开发者深入了解如何通过Maas调取API与MateChat结合快速构建智能对话助手。

1.2 适用对象

企业
个人开发者
高校学生

1.3 案例时间

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

1.4 案例流程

{{{width="50%" height="auto"}}} 说明： ① 通过开发者空间云主机的 Firefox 浏览器访问并开通 ModelArts Studio 模型即服务。本次实验采用的 Qwen2_5-72B-Instruct 。 ② 通过终端从 https://gitcode.com/huqi/MateChat-Web 获取源代码，源代码基于 Vite+Vue3+Express 实现 MateChat 的应用。 ③ 通过 Firefox 浏览器访问本地部署的 MateChat 应用，体验智能对话。

1.5 资源总览

本案例预计花费总计0元。

资源名称	规格	单价（元）	时长（分钟）
云主机	基础版本	免费	40
ModelArts Studio（MaaS）	预置服务	免费	40

2 配置基础环境

2.1 基础环境部署

MateChat是一个前端项目，它的构建和运行依赖于Node.js。Node.js为JavaScript提供了运行时环境，它让JavaScript代码可以实现在服务器端运行，而不仅仅局限于浏览器。

同时MateChat依赖于许多第三方库，比如Vue.js、UI组件库、甚至是一些AI模型的封装库。这些库需要通过npm来安装和管理。

因此进入云主机后我们首先需要确认，当前是否已经具备了MateChat的基础运行环境，即NodeJS、npm、Git（下一步用于获取MateChat源代码）。

确认云主机是否以安装NodeJS、npm、Git。
云主机桌面右键，点击Open Terminal Here打开Terminal Emulator窗口。
Termimal终端输入如下命令

node -v
npm -v
git --version

如果未安装基础环境，请参考以下命令安装部署对应工具。

sudo apt update
sudo apt install -y nodejs npm git

2.2 获取MateChat源码

MateChat前端项目源码已经发布在GitCode平台上：https://gitcode.com/huqi/MateChat-Web。我们通过如下命令将源代码拉取到云主机本地。

git clone https://gitcode.com/huqi/MateChat-Web

3 配置MaaS模型服务

3.1 领取Token额度

云主机界面打开浏览器，输入访问地址，本案例在华东二区域体验，登录华为云帐号后进入Token领取界面：

https://console.huaweicloud.com/modelarts/?region=cn-east-4&locale=zh-cn#/model-studio/deployment

ModelArts Studio为开发者提供了千万免费 token 额度，可用于体验 Qwen、Chatglm 等系列模型。Qwen2.5 系列预置服务还支持 Function Calling，可以用于构建 Agent。

本案例中选择Qwen2_5-72B-Instruct-1128，点击领取。

领取完成后，点击对应服务操作栏中的“调用”，这里我们可以获取两个关键信息：模型名称和API地址。

3.2 创建API Key

点击左侧菜单栏，设置 – 鉴权管理，右侧界面中点击“创建API Key”。

此处支持最多可创建5个密钥，密钥只会在新建后显示一次。我们获取第三个关键信息：密钥。

至此，我们完成了ModelArts Studio的基础配置，并且获取了三个关键配置信息：模型名称、API地址和密钥。

3.3 调试大模型API

在Terminal Emulator窗口中使用curl脚本进行大模型API的调试。其命令如下：

curl -X POST "yourBaseUrl" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer yourApiKey" \
  -d '{
    "model": "yourModelName",
    "max_tokens": 20,
    "messages": [
      {"role": "system", "content": "You are a helpful assistant."},
      {"role": "user", "content": "你好"}
    ],
    "stream": false,
    "temperature": 1.0
  }'

这里将前面获取的三个关键信息分别替换命令中的关键字，对应关系如下：

模型名称：yourModelName
API地址：yourBaseUrl
密钥：yourApiKey

Terminal Emulator窗口中输入修改完后的curl脚本，得到如下日志。

至此则证明API配置可用。

4 运行MateChat

通过以上操作，我们完成了基础环境配置，MateChat代码获取以及大模型API配置，接下来我们将安装MateChat依赖，修改配置并最终运行使用MateChat。

4.1 安装MateChat依赖

在Terminal Emulator窗口中输入如下指令，进入项目目录并完成依赖的安装：

cd MateChat-Web && npm install

出现上图中的日志，则说明安装完成。

4.2 修改配置

我们可以在Terminal Emulator窗口中通过cat命令查看当前.env.example配置信息。

cat .env.example

这里由于MaaS提供的大模型API不支持客户端调用，我们需要通过express来转发请求。

我们通过cp命令复制一份配置文件并命名为.env。

cp .env.example .env
cat .env

通过vi命令修改配置文件信息。

vim .env #进入.env配置文件
insert #insert键，进入编辑状态
esc #esc键，退出编辑状态
:wq #退出编辑

这里用之前获取的三个关键信息：模型名称、API地址、密钥，分别替换配置文件中的VITE_OPENAI_MODEL、VITE_OPENAI_PROXY_URL、VITE_OPENAI_API_KEY。

VITE_OPENAI_API_KEY=密钥
VITE_OPENAI_PROXY_URL= API地址
VITE_OPENAI_MODEL=模型名称
VITE_PORT=8090
VITE_OPENAI_BASE_URL=http://localhost:8090
注意：这里API地址需要删除尾缀“chat/completions”。

注意：这里API地址需要删除尾缀“chat/completions”。