基于 MateChat 构建 AI 编程智能助手的落地实践

本文围绕 华为云 DevUI MateChat，在在线教育中如何用 DevUI 组件 + MateChat 搭建智能问答界面。

一、需求背景：为什么我需要一个AI 助教？

最近我开设了一期《AI 编程实战营》，面向零基础学员。教学过程中，两个痛点让我非常头大：

复读机式低效： 学员问题非常琐碎，比如环境变量怎么设？、Key 哪里找？这些问题在群里被反复问，我被迫变成了复读机，无法专注于深度教学。
时差与响应滞后： 学员常在深夜学习，但我无法 24 小时在线。一旦他们卡在某个报错，往往要等到第二天我醒来才能解决，极大地打击了学习积极性。

我想做一个嵌在课程网页里的智能助手。 但当我调研技术方案时，发现后端接入大模型很简单，最让人头秃的是前端交互：

Markdown 怎么渲染？
代码块怎么高亮？
流式输出（打字机效果）怎么写？

如果要手写这一套，成本太高。直到我发现了 华为云 DevUI MateChat（以下简称 MateChat），它提供了开箱即用的 AI 对话 UI 组件，几乎完美治愈了我"前端恐惧症。

于是我尝试用华为云 DevUI MateChat（以下简称 MateChat）做一个嵌在课程里的智能问答助手。

二、搭建开发环境

1、安装并检查 Node.js 环境

Node.js官网：nodejs.org/en/download...

安装后，打开命令提示符（Win+R 输入cmd）或打开windows搜索cmd也行。

输入显示版本号，说明安装成功。

复制代码

node -v
pnpm -v

注意：Vue 官方建议 Node.js 版本至少 18+ 或 20 LTS，这样用 Vite 起项目比较稳。

三、搭建MateChat + DevUI 聊天页面

1、用 MateChat最新CLI创建项目

在命令行里，切到你想放项目的文件夹，比如 D:\code，然后用MateChat最新CLI来创建项目，非常方便。

perl 复制代码

# 这里我用的npm管理
npm create matechat@latest

注意：这一指令在安装并执行create-matechat 过程中，需要我们确认两个信息。

1、输入项目名称（Please input the project name），我的项目名称是：matechat-demo。

2、选择模版（Please select the template: Vue Starter），默认用Vue Starter即可。

2、安装依赖并启动

根据MateChat使用指南

先切换到项目的根目录（ cd .\matechat-demo\），然后执行 npm i 安装依赖，最后用npm run dev 启动项目。

打开浏览器，访问local地址：http://localhost:5173/vue-starter

至此，能看到的默认的应用页面，有历史会话和输入框，就说明基础对话助手已经OK 了。

3、把模板修改为助手式

我想收起左侧的对话，在文件src//global-config.ts 把地4行的displayShape，Immersive 改为Assistant

javascript 复制代码

  // 修改前：
export default {
  displayShape: "Immersive ",
  title: "MateChat",
} as IGlobalConfig;

  // 修改后：
export default {
  displayShape: "Assistant",
  title: "MateChat",
} as IGlobalConfig;

4、接入deepseek大模型

UI 搭好了，现在我们要注入灵魂。我选择用deepseek大模型，这里官方也给了非常详细的对接步骤

（参考matechat.gitcode.com/use-guide/m...

1、安装 OpenAI SDK DeepSeek 兼容 OpenAI 协议，我们可以直接用 OpenAI 的 SDK。

复制代码

npm install openai

2、获取deepseek的key

3、基于 MateChat，配置API KEY

MateChat把应用默认接入了DeepSeek，在src/models/config.ts文件的LLM_MODELS配置apiKey

vbnet 复制代码

// deepseek
providerKey: LLMProviders.DEEP_SEEK,
apiPath: "https://api.deepseek.com",
apiKey: "这里填写你的KEY",
models: [
  { name: "deepseek-chat", iconPath: DeepSeekIcon },
  { name: "deepseek-reasoner", iconPath: DeepSeekIcon },
],
available: true,
clientKey: LLMClientKey.openai,

4、将关闭 Mock 模式，调用 DeepSeek API，文件： src/models/config.ts

arduino 复制代码

  // 修改前：
  export const MODEL_CONFIGS = {
    stream: true,
    enableMock: true,   // ← 原来是 true
  };

  // 修改后：
  export const MODEL_CONFIGS = {
    stream: true,
    enableMock: false,  // ← 改成 false
  };

5、最后的运行效果

四、总结

如果以前要实现 Markdown 渲染、流式打字机效果、自适应气泡布局，我至少需要写几百行 CSS 和 JS 代码，还要调试各种兼容性。

现在使用 DevUI + MateChat做开发，速度提升了10倍。DevUI 提供了企业级的组件规范，MateChat 封装了复杂的对话交互逻辑，很快就做好了这个在线教育智能助手。

本文完整 Demo 已开源在 GitCode：gitcode.com/gcw_o9lCM1p... master分支。

本文参考资料：matechat.gitcode.com/use-guide/i...

本文参考mateChat仓库：matechat.gitcode.com/，包含MateChat 接入示例、DevUI 组件示例页面、环境配置说明等。

如果这套实践对你有帮助，点个 ⭐ Star，方便后续查阅，一起解锁更多 MateChat / DevUI 场景案例。