华为MateChat组件是为AI生成内容（AIGC）场景设计的UI库。MateChat，作为华为专为AIGC场景精心打造的UI库，旨在助力开发者高效构建AI对话应用。实际上，它不仅支撑了华为内部多个应用的对话需求，还融入了CodeArts、InsCode AI IDE等智能化助手的构建之中。

MateChat 是由华为 DevUI 团队开发的一款开源前端 AI 组件库，旨在帮助开发者快速构建智能对话应用。

它专注于生成式 AI（GenAI）场景，提供了一套完整的对话式交互组件，如消息气泡、输入框和过程监督组件，以实现流畅、易用的用户体验。 其核心特点包括：

• 即插即用：轻量化设计，支持快速集成到 React、Vue 等主流前端框架中，降低开发门槛。
• 高扩展性：允许自定义消息格式、主题样式和对话逻辑，兼容 OpenAI、Gemini 等主流 AI 模型。
• 多场景适配：不仅适用于通用网站（如企业官网、电商平台），还特别优化了研发工具领域（如 IDE 插件），支持沉浸式、情境化的交互体验。

MateChat 已在华为内部多个应用及 CodeArts、InsCode AI IDE 等产品中落地，体现了其在实际项目中的可靠性。 通过提供开箱即用的组件和灵活的定制能力，它致力于简化 AI 对话功能的开发流程，助力应用智能化升级。

---

创建一个应用

可通过如下命令创建一个应用：

// npm
npm create matechat@latest

// pnpm
pnpm create matechat@latest

这一指令会安装并执行create-matechat，你将会看到一些创建提示：

Please input the project name: matechat-project
Please select the template: Vue Starter

应用创建完成后通过以下命令安装依赖并启动开发：

cd matechat-project
npm i
npm run dev

模型适配

应用默认使用的Mock数据进行对话，在src/models/config.ts文件中做如下修改可启用真实模型进行对话：

export const MODEL_CONFIGS = {
  //...
  enableMock: false, // 是否使用mock数据
};

应用默认接入了DeepSeek，在src/models/config.ts文件的LLM_MODELS配置中填充自己申请的apiKey可使用模型进行对话，如需要接入其他模型，可参考LLM_MODELS的配置自行补充。

配置化

在src/global-config.ts文件中可对应用进行简单的配置，比如将模板修改为助手式，此时将隐藏左侧导航栏，历史记录将移动到右上角。

配置如下：

// src/global-config.ts
export default {
  displayShape: 'Assistant',
  //...
};

响应式

默认已支持响应式和移动端适配。

主题化配置

MateChat Cli模板应用支持灵活的主题配置，默认提供深色与浅色两种主题，并支持高度自定义。通过修改 src/global-config.ts 配置文件，您可以轻松实现主题定制。以下是详细配置指南：

默认主题

应用预设了两种主题风格：浅色主题和深色主题。您可以直接引入并应用这些主题。

在 src/global-config.ts 中配置主题变量，代码示例如下：

import { lightTheme, darkTheme } from "./constant";

export default {
  theme: lightTheme,
} as IGlobalConfig;

浅色主题效果：浅色主题效果

自定义主题
若预定义主题无法满足需求，可通过自定义主题色值实现主题定制。系统支持基于主色、主背景色等核心色值自动推导完整主题配置，降低自定义成本。

示例
例如，若想创建一个粉色系主题，只需指定一个主色（如 #F7A2AD），系统会基于此主色智能推导其他关联颜色（包括按钮、链接、背景等元素的颜色）。

此外，您还可以灵活配置全局背景样式：支持纯色背景、渐变背景或自定义背景图片，满足各种视觉需求。

在 src/global-config.ts 中配置主题变量，代码示例如下：

// 自定义主题配置
export default {
  theme: {
    data: {
      // 关键色值配置
      "devui-brand": "#F7A2AD",       // 品牌主色
      "mc-global-bg": "linear-gradient(to bottom, #FFDDE1, #EE9CA7)",  // 渐变背景
      // 可选：指定其他主题变量，若不指定则使用自动推导的值
      // "devui-text": "#333333",       // 文本色
      // "devui-border": "#e8e8e8"      // 边框色
      // 可自定义添加其他主题变量，并在样式中使用
      // "custom-color": "#F7A2AD",
    }
  }
} as IGlobalConfig;

现在我们已经完成了主题的自定义，来看看效果吧

更多自定义主题配置可参考 src/constant/theme-data.ts 中的 CustomThemeDataConfig 实现。

---

多轮对话 & 深度思考

多轮对话和深度思考是智能对话应用中的常见功能，MateChat Cli模板应用也提供了相关的支持，以下将简要介绍多轮对话和深度思考在MateChat中的实现。

多轮对话

基于直连LLM的无状态API实现多轮对话，需要在每次对话结束后，将之前所有对话历史拼接好后，传递给对话 API。详细介绍参考 DeepSeek 多轮对话。

在第一轮请求时，传递给 API 的 messages 为：

[
    {"role": "user", "content": "What's the highest mountain in the world?"}
]

在第二轮请求时：

要将第一轮中模型的输出添加到 messages 末尾
将新的提问添加到 messages 末尾 最终传递给 API 的 messages 为：

[
    {"role": "user", "content": "What's the highest mountain in the world?"},
    {"role": "assistant", "content": "The highest mountain in the world is Mount Everest."},
    {"role": "user", "content": "What is the second?"}
]

需要注意的是，在实际的生产应用中，我们前端应用通常不会直连LLM，多轮对话会带来巨大的Token消耗，且容易超出大模型上下文最大长度。常见的方案是调用后端Agent服务，通过sessionId实现多轮对话的应用以及其他复杂的会话管理。

深度思考

在MateChat的 Markdown 卡片组件中，实现了对think标签的支持，我们开启enableThink参数，并将思考内容使用think标签包裹，即可开启思考过程的渲染。

华为MateChat是一款专为AIGC场景设计的开源UI组件库，由华为DevUI团队开发。它提供即插即用的对话组件（如消息气泡、输入框等），支持React/Vue框架集成，可灵活适配OpenAI、Gemini等AI模型。该库具备高扩展性，允许自定义消息格式和主题样式，已在华为内部多个产品（如CodeArts、InsCode AI IDE）中应用。通过简洁的CLI命令可快速创建项目，支持多轮对话、深度思考功能，并提供响应式设计和主题定制能力（含深色/浅色模式及自定义配色）。开发者可轻松构建智能对话应用，降低AI功能开发门槛。

---

MateChat：https://gitcode.com/DevCloudFE/MateChat
MateChat官网：https://matechat.gitcode.com
DevUI官网：https://devui.design/home