本文圍繞 華為雲 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 改為Assistant

// 修改前：
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 場景案例 。