最新案例動態，請查閲基於開發者空間雲開發環境，使用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' >> ~/.bashrc
source ~/.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-project
npm 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快速搭建智能對話應用的案例已全部完成。