基于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... 快速上手开发