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

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

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

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

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

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

• Markdown 怎么渲染？
• 代码块怎么高亮？
• 流式输出（打字机效果）怎么写？
  如果要手写这一套，成本太高。直到我发现了 华为云 DevUI MateChat（以下简称 MateChat），它提供了开箱即用的 AI 对话 UI 组件，几乎完美治愈了我“前端恐惧症。

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

二、搭建开发环境

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

Node.js官网：https://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来创建项目，非常方便。

# 这里我用的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 改为

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

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

4、接入deepseek大模型

UI 搭好了，现在我们要注入灵魂。我选择用deepseek大模型，这里官方也给了非常详细的对接步骤
（参考https://matechat.gitcode.com/use-guide/model/openai.html）

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

// 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**

  // 修改前：
  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：https://gitcode.com/gcw_o9lCM1pp/matechat-demo.git master分支。
本文参考资料：https://matechat.gitcode.com/use-guide/introduction.html
本文参考mateChat仓库：https://matechat.gitcode.com/，包含MateChat 接入示例、DevUI 组件示例页面、环境配置说明等。
如果这套实践对你有帮助，点个 ⭐ Star，方便后续查阅，一起解锁更多 MateChat / DevUI 场景案例 。