基於MCP架構的DevUI多元元件協作實踐：打造智能業務分析平台

探索背景

在企業數位轉型過程中，業務分析人員需要頻繁處理數據報表、生成可視化圖表、撰寫分析報告。傳統方式下，這些環節相互割裂：數據處理用Excel、圖表製作用獨立工具、AI分析需要調用API、前端展示又是另一套系統。能否將這些能力整合在一個平台上，通過自然語言交互完成全流程？

DevUI生態為這個問題提供了完整的解決方案。MateChat提供了類ChatGPT的對話交互能力，DevUI元件庫提供了企業級UI元件，華為雲AI服務提供了大模型能力。關鍵問題是：如何讓這三者高效協作，而不是簡單堆砌？

這個項目探索了MCP（Multi-Component Platform）多元元件協作架構，將DevUI生態中的三大能力有機整合，實現了"一句話提問 → AI分析 → 自動生成圖表 → 展示關鍵指標"的完整閉環。實測中，從輸入"對比各區域銷售表現"到展示完整分析結果（包含AI解讀、可視化圖表、數據指標）僅需2.5秒，且AI回覆支持串流輸出，使用者體驗接近真人對話。

在線體驗地址：mcpchat.acowbo.com
開源地址：gitcode.com/Mrxiao_bo/m…

訪問系統後，首先看到的是基於MateChat元件構建的歡迎界面：

界面採用了DevUI的設計語言，品牌色#5e7ce0貫穿始終，三個快捷入口按鈕使用了d-button元件的不同變體。整個歡迎頁面清晰展示了系統的三大核心能力：MateChat對話交互、DevUI數據展示、華為雲AI智能分析。

MCP多元元件協作技術邏輯

為什麼需要MCP架構？

傳統的元件集成方式是"緊耦合"的，比如在UI元件中直接調用AI API，在AI回調中直接操作圖表。這種方式存在三個問題：

1. 元件職責不清：UI元件既要處理界面，又要處理業務邏輯
2. 難以擴展：新增一個能力（如數據導出）需要修改多處代碼
3. 無法重用：其他項目想用同樣的能力，需要重新開發

MCP架構的核心思想是解耦 + 編排。將系統分為三層：

交互層（Interaction Layer）：基於華為MateChat元件實現對話界面，包括McBubble氣泡消息、McInput智能輸入框、McMarkdownCard富文本渲染。這一層只負責展示，不關心業務邏輯。

協調層（Coordination Layer）：核心是MCPEngine引擎，負責三件事：

1. 意圖識別：分析使用者問題，判斷需要哪些能力（AI分析、圖表生成、數據計算）
2. 任務編排：並行調用所需能力，提高處理效率
3. 結果聚合：將各能力的輸出整合成統一格式，返回給交互層

能力層（Capability Layer）：三個獨立的適配器（Adapter）：

• AIAdapter：調用華為雲Token Service大模型服務
• ChartAdapter：基於Chart.js生成可視化圖表
• DataAdapter：進行數據統計和指標計算

每個適配器實現統一的MCPAdapter介面，彼此獨立運行，由Engine統一調度。

MCP工作流程解析

MCP架構的核心是 “解耦 + 編排”，通過三層結構實現MateChat與業務能力的高效協作：

基於 “解耦 + 編排” 核心思想拆分三層架構，本質是解決傳統元件緊耦合的三大痛點 ——① 交互層專注展示（MateChat 負責對話界面，不摻雜業務邏輯），避免 “UI 既做展示又做計算”；② 協調層作為 “中樞”，統一處理意圖識別、任務調度，避免能力調用混亂；③ 能力層採用適配器模式（統一 MCPAdapter 介面），是為了實現 “能力可插拔”，後續新增數據導出、資料庫查詢等功能時，無需修改原有代碼，仅需新增適配器註冊，降低擴展成本。最終目標是讓MateChat成為 “交互入口”，各類業務能力按需協作，实现 “一句話觸發多任務” 的高效閉環。

協作流程如下：
從src/mcp/engine.ts可以看到完整的協作流程：

async process(query: string, data?: any[], onStream?: (chunk: string) => void): Promise<MCPResult> {
  // 1. 意圖識別：判斷使用者想做什麼
  const { intent, capabilities } = await this.analyzeIntent(query);

  // 2. 構建MCP消息（統一通信格式）
  const message: MCPMessage = {
    id: `msg_${Date.now()}`,
    type: 'query',
    intent,
    payload: { query, data, context: this.buildContext() },
    capabilities,
    timestamp: Date.now()
  };

  // 3. 任務編排：並行調用所需能力
  const result = await this.orchestrate(message, onStream);

  return result;
}

意圖識別基於關鍵詞分析，當使用者提問"對比各區域銷售表現"時：

async analyzeIntent(query: string): Promise<{ intent: MCPIntent; capabilities: MCPCapability[] }> {
  const queryLower = query.toLowerCase();

  // 檢測到"對比"關鍵詞，判定為可視化意圖
  if (queryLower.includes('對比') || queryLower.includes('趨勢') || queryLower.includes('佔比')) {
    return {
      intent: 'visualize',
      capabilities: ['ai', 'chart', 'data'] // 需要三個能力協同
    };
  }
}

Engine識別出需要三個能力後，通過orchestrate方法並行調用：

async orchestrate(message: MCPMessage, onStream?: (chunk: string) => void): Promise<MCPResult> {
  const tasks: Promise<any>[] = [];

  message.capabilities.forEach(cap => {
    switch (cap) {
      case 'ai':
        tasks.push(this.aiAdapter.process(payload, onStream)); // 華為雲AI分析
        break;
      case 'chart':
        tasks.push(this.chartAdapter.process(payload)); // 圖表生成
        break;
      case 'data':
        tasks.push(this.dataAdapter.process(payload)); // 數據計算
        break;
    }
  });

  // 並行執行，提高效率
  const results = await Promise.all(tasks);

  // 結果聚合
  return {
    text: results[0],      // AI分析文本
    chart: results[1],     // 圖表配置
    metrics: results[2]    // 關鍵指標
  };
}

這種設計的優勢是：如果將來需要增加"數據導出"能力，只需新增一個ExportAdapter，在Engine中註冊即可，其他元件無需修改。

DevUI元件深度集成

MateChat：智能對話交互

MateChat是DevUI生態中的對話元件，提供了開箱即用的聊天界面。項目中使用了三個核心元件：

McBubble氣泡消息：支持不同角色（使用者/AI）的消息展示，內置頭像、時間戳等功能。

<McBubble :role="msg.role" :avatar="msg.avatar">
  <!-- AI分析結果 -->
  <McMarkdownCard v-if="msg.content" :content="msg.content" />

  <!-- 圖表展示 -->
  <div v-if="msg.chart" class="chart-container">
    <canvas :ref="el => chartRefs[msg.id] = el"></canvas>
  </div>

  <!-- DevUI關鍵指標卡片 -->
  <div v-if="msg.metrics" class="metrics-container">
    <d-row :gutter="[12, 12]" wrap>
      <d-col v-for="(value, key) in msg.metrics" :key="key" :span="4">
        <div class="metric-card">
          <div class="metric-label">{{ key }}</div>
          <div class="metric-value">{{ formatNumber(value) }}</div>
        </div>
      </d-col>
    </d-row>
  </div>
</McBubble>

這裡體現了MateChat與DevUI的協作：McBubble負責消息容器，d-row和d-col（DevUI格栅元件）負責指標卡片佈局。兩者配合實現了"對話+數據展示"的混合界面。

McInput智能輸入：支持Enter提交、禁用狀態、佔位提示等功能。

<McInput
  :value="userInput"
  placeholder="輸入問題，如：分析各區域銷售表現"
  :disabled="loading"
  @change="(val: string) => userInput = val"
  @submit="handleSend"
/>

與傳統<input>相比，McInput內置了對話場景的常用邏輯（如Shift+Enter換行、Enter發送），減少了開發工作量。

McMarkdownCard富文本渲染：AI返回的分析報告通常包含Markdown格式（加粗、列表、代碼塊），McMarkdownCard可以直接渲染，無需額外配置。

<McMarkdownCard :content="aiAnalysisResult" />

這個元件的價值在於：華為雲AI返回的分析結果是Markdown格式，如果用普通<div>展示會丟失格式。McMarkdownCard解決了這個問題，讓AI輸出更專業。

DevUI元件：企業級數據展示

除了MateChat，項目還深度使用了DevUI元件庫的其他元件：

d-table數據表格：展示業務數據，支持排序、分頁、自定義列。

<d-table :data="tableData" border stripe>
  <d-column field="region" header="區域" width="120" />
  <d-column field="q1" header="Q1銷售額" width="150" align="right" />
  <d-column field="q2" header="Q2銷售額" width="150" align="right" />
  <d-column field="growth" header="增長率" width="100" align="right">
    <template #default="{ row }">
      <span :class="row.growth > 15 ? 'growth-high' : 'growth-normal'">
        {{ row.growth }}%
      </span>
    </template>
  </d-column>
</d-table>

d-modal對話框：數據選擇彈窗，內置動畫效果和遮罩層。

<d-modal v-model="showDataModal" title="選擇數據集" width="600px">
  <d-radio-group v-model="selectedDataset" direction="column">
    <d-radio v-for="ds in datasets" :key="ds.id" :value="ds.id">
      <div class="dataset-option">
        <div class="dataset-name">{{ ds.name }}</div>
        <div class="dataset-desc">{{ ds.description }}</div>
      </div>
    </d-radio>
  </d-radio-group>

  <template #footer>
    <d-button @click="loadSelectedData" variant="solid">確認加載</d-button>
  </template>
</d-modal>

點擊"加載數據"按鈕後，d-modal彈出數據選擇界面，展示了多個預置數據集：

彈窗採用了DevUI的標準樣式，d-radio-group以列表形式展示選項，每個選項包含數據集名稱和描述。使用者選擇後點擊"確認加載"，系統會通過DataAdapter加載對應的業務數據。

d-button按鈕：支持多種變體（solid、outline、text）和尺寸（sm、md、lg），圖標插槽可以自定義內容。

<d-button @click="handleAnalyze" size="lg" variant="solid">
  <template #icon>
    <span>🔍</span>
  </template>
  開始分析
</d-button>

這些元件的統一設計語言保證了界面的一致性。比如所有按鈕的主色調都是DevUI的品牌色（#5e7ce0），所有表格都遵循相同的交互規範，使用者學習成本很低。

流式輸出：解決Vue響應式更新問題

華為雲AI支持流式返回，但如何在MateChat中實現"逐字顯示"效果？這裡遇到了Vue響應式的坑。

在src/App.vue中，如果直接修改對象屬性：

// ❌ 錯誤寫法
const aiMessage = { id: 'ai_xxx', content: '' };
messages.value.push(aiMessage);

// 流式更新時
aiMessage.content += chunk; // Vue無法檢測到變化

解決方案是通過數組索引觸發響應：

// ✅ 正確寫法
messages.value.push({ id: 'ai_xxx', content: '' });
const aiMessageIndex = messages.value.length - 1;

// 調用MCP Engine，傳入流式回調
await mcpEngine.process(query, tableData.value, (chunk: string) => {
  messages.value[aiMessageIndex].content += chunk; // 觸發響應式
});

在src/mcp/adapters/ai-adapter.ts中處理華為雲AI的流式響應：

async process(payload: MCPPayload, onStream?: (chunk: string) => void): Promise<string> {
  const response = await fetch('/api/v1/chat/completions', {
    method: 'POST',
    body: JSON.stringify({
      model: 'DeepSeek-V3',
      messages: [{
        role: 'system',
        content: '你是專業的業務數據分析師'
      }, {
        role: 'user',
        content: payload.query
      }],
      stream: true // 華為雲AI流式輸出
    })
  });

  const reader = response.body?.getReader();
  const decoder = new TextDecoder('utf-8');
  let fullContent = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    const chunk = decoder.decode(value, { stream: true });
    const lines = chunk.split('\n').filter(line => line.trim() !== '');

    for (const line of lines) {
      if (line.startsWith('data: ')) {
        const data = line.slice(6);
        if (data === '[DONE]') continue;

        const parsed = JSON.parse(data);
        const content = parsed.choices?.[0]?.delta?.content || '';

        if (content) {
          fullContent += content;
          if (onStream) {
            onStream(content); // 實時回調UI層
          }
        }
      }
    }
  }

  return fullContent;
}

實測中，華為雲AI生成一段200字的分析報告需要約2秒，使用者可以看到文字逐個出現的效果，體驗比"等待2秒後一次性顯示"好很多。

場景演示：從提問到結果的完整流程

開始場景演示前，需要先加載數據。選擇"Q1季度銷售數據"並確認後，系統通過DataAdapter處理數據，右側數據面板使用d-table元件展示數據預覽：

數據表格清晰展示了4個區域的銷售數據，包括區域名稱、Q1銷售額、Q2銷售額和增長率。表格使用了DevUI的border和stripe屬性，提升了可讀性。左側MateChat元件顯示系統提示，引導使用者開始提問。

場景1：區域銷售對比分析

使用者輸入："對比各區域銷售表現"

系統處理流程：

1. MCP Engine意圖識別：檢測到"對比"關鍵詞，判定為visualize意圖，需要ai、chart、data三個能力。
   ① 意圖識別設計：通過關鍵詞匹配意圖（“對比”→visualize 意圖），是為了快速定位使用者核心需求，避免複雜語義分析導致的延遲，符合業務分析 “高效響應” 的要求；② 並行調用設計：三大能力同時執行而非串行，是為了縮短總處理時間（實測 2.3 秒），解決傳統分步操作 “耗時久” 的問題；③ 結果分層展示設計：文本（AI 解讀）→圖表（可視化對比）→指標（核心數據），是遵循 “先理解、再直觀、最後精準” 的認知邏輯，幫助業務人員快速抓取核心信息，無需手動整理分析結果。
2. 並行調用三個適配器：
   • AIAdapter調用華為雲AI分析數據特徵，生成專業建議
   • ChartAdapter自動識別數據結構，生成柱狀圖配置
   • DataAdapter計算關鍵指標（總和、平均值、最大值）
3. MateChat展示結果：
   • AI分析文本通過McMarkdownCard渲染
   • 圖表通過Chart.js在<canvas>中渲染
   • 關鍵指標通過DevUI的d-row+d-col佈局展示

實際效果（見截圖）：

左側對話區域展示了AI的分析結論："華東區域表現最佳，Q1銷售額52萬，增長率28%。華南、華北需探索增長潛力。"

下方自動生成柱狀圖，橫軸為"華東、華南、華北、西南"，縱軸為銷售額，一目了然。

底部關鍵指標卡片顯示：數據總量4條、Q1總和150萬、平均值37.5萬、最大值52萬。

從輸入問題到展示完整結果，耗時2.3秒（其中AI分析1.8秒，圖表生成0.2秒，數據計算0.3秒）。

場景2：趨勢分析

使用者輸入："分析銷售數據趨勢"

系統處理：
Engine識別到"趨勢"關鍵詞，ChartAdapter自動選擇折線圖類型。華為雲AI分析月度增長情況，給出"1月至2月增長10%，2月至3月增長28.57%，整體趨勢向上"的結論。

實際效果：

折線圖清晰展示了6個月的銷售走勢，配合AI的專業建議（"加強市場營銷、區域分析、制定銷售預測"），為業務決策提供依據。

場景3：佔比分析

使用者輸入："各產品佔比分析"

系統處理：
識別到"佔比"關鍵詞，ChartAdapter生成餅圖。華為雲AI分析產品結構，指出"產品A佔36%，是銷售冠軍；產品B和C佔比較低，需要優化銷售策略"。

實際效果：

餅圖直觀展示各產品的市場份額，配合AI的優化建議，幫助業務人員快速找到改進方向。

控制台日誌：MCP協作過程透明化

打開瀏覽器控制台，可以看到MCP Engine的完整工作流程：

[MCP Engine] ========== 開始處理 ==========
[MCP Engine] 查詢: 對比各區域銷售表現
[MCP Engine] 數據量: 4
[MCP Engine] 意圖識別: 對比各區域銷售表現
[MCP Engine] 識別結果: {intent: 'visualize', capabilities: ['ai', 'chart', 'data']}
[MCP Engine] 開始任務編排
[Chart Adapter] 開始處理
[Chart Adapter] 圖表類型: bar
[Chart Adapter] 提取數據: {labelKey: 'region', valueKey: 'q1', labelsCount: 4}
[Chart Adapter] 處理完成
[MCP Engine] 並行執行3個任務: ['AI分析', '圖表生成', '數據處理']
[MCP Engine] AI分析 完成
[MCP Engine] 圖表生成 完成
[MCP Engine] 數據處理 完成
[MCP Engine] 任務編排完成
[MCP Engine] ========== 處理完成 ==========

這種透明化的日誌對於調試和優化非常有幫助。比如發現某個適配器耗時過長，可以針對性優化。

價值總結：MCP協作帶來的三大提升

1. 開發效率提升：元件即插即用

傳統方式下，集成AI對話需要自己寫UI、處理流式響應、實現Markdown渲染，至少需要2-3天。使用MateChat後，只需幾行代碼：

<McBubble role="assistant" avatar="ai">
  <McMarkdownCard :content="aiResponse" />
</McBubble>

DevUI元件也是如此。需要數據表格？<d-table>搞定。需要彈窗？<d-modal>搞定。粗略估計，使用DevUI生態的元件，開發效率提升了60%以上。

2. 使用者體驗提升：多能力無縫銜接

MCP架構的核心價值是"多能力協同"。使用者提一個問題，系統自動判斷需要哪些能力，並行處理後統一返回。這種體驗遠超傳統的"分步操作"：

• 傳統方式：使用者上傳數據 → 選擇圖表類型 → 手動調整參數 → 生成圖表 → 另外打開AI工具分析 → 手動整理報告
• MCP方式：使用者提問"對比各區域銷售表現" → 系統自動完成所有環節，2.5秒出結果

實測中，業務人員使用MCP平台分析一份數據的時間從15分鐘縮短到2分鐘，效率提升了7倍。

3. 架構擴展性提升：新增能力成本低

由於MCP採用適配器模式，新增能力的成本很低。比如將來需要增加"數據導出"功能：

// 新增ExportAdapter
export class ExportAdapter implements MCPAdapter {
  name = 'Export Adapter';

  async process(payload: MCPPayload): Promise<string> {
    // 導出為Excel
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet(payload.data);
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Data');
    XLSX.writeFile(workbook, 'export.xlsx');

    return '數據已導出';
  }
}

// 在Engine中註冊
class MCPEngine {
  private exportAdapter: ExportAdapter;

  constructor() {
    this.exportAdapter = new ExportAdapter();
  }

  async orchestrate(message: MCPMessage): Promise<MCPResult> {
    if (message.capabilities.includes('export')) {
      tasks.push(this.exportAdapter.process(payload));
    }
  }
}

只需新增一個適配器，無需修改UI層和其他能力層代碼。這種擴展性讓系統具備了長期演進的能力。

對DevUI生態的理解

通過這個項目，我對DevUI生態有了更深的認識：
MateChat不只是聊天元件，它是一個"交互範式"的實現。傳統企業軟體的交互是"表單+按鈕"，MateChat提供了"對話+智能理解"的新範式，特別適合數據分析、運維監控、知識問答等場景。

DevUI不只是UI庫，它是一套完整的"企業級前端解決方案"。從基礎元件（按鈕、輸入框）到高級元件（表格、圖表），從交互規範到設計語言，都經過了企業場景的打磨。使用DevUI開發企業應用，比用通用UI庫（如Element Plus）更高效。

華為雲AI與前端的結合不是簡單的"調API"，而是"能力融合"。通過MCP這樣的協作架構，AI成為了前端元件的"增強器"，讓靜態的表格變得"會分析"，讓死板的圖表變得"會解讀"。

這個項目只是個開始。未來可以探索更多DevUI生態的協作可能：

• MateChat + ModelArts：將華為雲ModelArts的模型訓練能力集成到對話界面，使用者可以通過對話完成模型訓練、調優、部署
• DevUI + GaussDB：將華為雲GaussDB的資料庫能力封裝為適配器，使用者通過自然語言查詢資料庫
• MCP + 微服務：將MCP Engine部署為獨立服務，多個前端應用共享能力層

MCP架構證明了一件事：好的協作機制比單個元件的強大更重要。DevUI生態提供了優秀的元件，MCP提供了優秀的協作方式，兩者結合產生了"1+1>2"的效果。

在線體驗地址：mcpchat.acowbo.com
開源地址：gitcode.com/Mrxiao_bo/m…
DevUI 官網：devui.design/home 查看完整元件庫
體驗地址：MateChat - 輕鬆構建你的AI應用
MateChat 使用指南：matechat.gitcode.com/use-guide/i… 快速上手開發

原文出處：https://juejin.cn/post/7577220965437980726