华为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 对话功能的开发流程，助力应用智能化升级。

---

在安装完成MateChat 后，我们需要将AI大模型进行对接进来。

OpenAI

在搭建完成页面后，我们可以开始对接模型服务，如 DeepSeek、盘古大模型、ChatGPT 等优秀大模型。在注册并生成对应模型的调用API_Key后，可以参考如下方法进行调用：

通过 npm 安装 openai:

$ npm install openai

使用OpenAI初始化并调用模型接口，如下为一段代码示例：
注意：通常openai-node用于node环境，如果在浏览器环境使用，需要开启dangerouslyAllowBrowser，开启该配置存在安全风险（API凭证泄露），请确保在安全环境中使用，详见openai-node官方文档说明。

import OpenAI from 'openai';

const client = ref();

client.value = new OpenAI({
  apiKey: '', // 模型APIKey
  baseURL: '', // 模型API地址
  dangerouslyAllowBrowser: true, // 浏览器环境使用需要开启
});

const fetchData = (ques) => {
  const completion = await client.value!.chat.completions.create({
    model: 'my-model', // 替换为自己的model名称
    messages: [
      { role: 'user', content: ques },
    ],
    stream: true, // 为 true 则开启接口的流式返回
  });

  for await (const chunk of completion) {
    console.log('content: ', chunk.choices[0]?.delta?.content || '');
    console.log('chatId: ', chunk.id);
  }
}

结合MateChat【快速开始】示例代码，修改onSubmit函数代码如下：

import OpenAI from 'openai';

const client = ref<OpenAI>();

client.value = new OpenAI({
  apiKey: '', // 模型APIKey
  baseURL: '', // 模型API地址
  dangerouslyAllowBrowser: true,
});

const onSubmit = (evt) => {
  inputValue.value = '';
  startPage.value = false;
  // 用户发送消息
  messages.value.push({
    from: 'user',
    content: evt,
    avatarConfig: { name: 'user' },
  });

  fetchData(evt);
};

const fetchData = async (ques) => {
  // 消息响应气泡
  messages.value.push({
    from: 'model',
    content: '',
    avatarConfig: { name: 'model' },
    id: '',
    loading: true,
  });
  const completion = await client.value!.chat.completions.create({
    model: 'my-model', // 替换为自己的model名称
    messages: [{ role: 'user', content: ques }],
    stream: true, // 为 true 则开启接口的流式返回
  });
  messages.value[messages.value.length - 1].loading = false;
  // 将流式返回拼接到消息内容中
  for await (const chunk of completion) {
    const content = chunk.choices[0]?.delta?.content || '';
    const chatId = chunk.id;
    messages.value[messages.value.length - 1].content += content;
    messages.value[messages.value.length - 1].id = chatId;
  }
};

完成模型API地址与APIKey填充后，即拥有了一个对接大模型的简单应用。

---

DeepSeek

这里我们以DeepSeek为例，介绍如何在MateChat搭建的应用中接入DeepSeek提供的模型服务。

DeepSeek API 使用与 OpenAI 兼容的 API 格式，详见官方文档：DeepSeek - 首次调用API

baseURL获取：https://api-docs.deepseek.com/zh-cn/
apiKey获取：https://platform.deepseek.com/api\_keys

前往DeepSeek开发平台获取相关的baseURL和apiKey后，可以参考如下方法对【快速开始】中示例代码进行调整：

const onSubmit = (evt) => {
  inputValue.value = '';
  startPage.value = false;
  // 用户发送消息
  messages.value.push({
    from: 'user',
    content: evt,
  });
  setTimeout(() => {
    // 模型返回消息
    messages.value.push({
      from: 'model',
      content: evt,
    });
  }, 200);
};
修改为：

import OpenAI from 'openai';

const client = ref<OpenAI>();

client.value = new OpenAI({
  apiKey: '', // 模型APIKey
  baseURL: '', // 模型API地址
  dangerouslyAllowBrowser: true, // 浏览器环境使用需要开启
});

const onSubmit = (evt) => {
  inputValue.value = '';
  startPage.value = false;
  // 用户发送消息
  messages.value.push({
    from: 'user',
    content: evt,
    avatarConfig: { name: 'user' },
  });

  fetchData(evt);
};

const fetchData = async (ques) => {
  messages.value.push({
    from: 'model',
    content: '',
    avatarConfig: { name: 'model' },
    id: '',
    loading: true,
  });
  const completion = await client.value!.chat.completions.create({
    model: 'deepseek-reasoner', // 根据deepseek模型列表进行替换
    messages: [{ role: 'user', content: ques }],
    stream: true, // 为 true 则开启接口的流式返回
  });
  messages.value[messages.value.length - 1].loading = false;
  for await (const chunk of completion) {
    const content = chunk.choices[0]?.delta?.content || '';
    const chatId = chunk.id;
    messages.value[messages.value.length - 1].content += content;
    messages.value[messages.value.length - 1].id = chatId;
  }
};

完成模型API地址与APIKey填充后，即拥有了一个对接DeepSeek大模型的简单应用。如果你想要参考更完整的页面示例.

---

其他

当前大部分大模型服务 API 接口都使用与 OpenAI 兼容的 API 格式，但直到目前，还没有标准的协议定义模型接口规范，所以仍会存在协议不兼容的问题。

这里补充介绍如下 fetch + SSE 的接入方案供参考：

Fetch Event Source

Fetch Event Source 是一个用于处理服务器发送事件（Server-Sent Events, SSE）的 JavaScript 库，并具有 Fetch API 中所提供的所有功能。

安装依赖

npm install @microsoft/fetch-event-source

使用 fetchEventSource 调用模型接口

import { fetchEventSource } from '@microsoft/fetch-event-source';

const getAIAnswer = (content, type) => {
  abortController = new AbortController();
  const aiAnswer = {
    from: 'assistant',
    content: '',
    type,
    avatarPosition: 'side-left',
    avatarConfig: { ...aiModelAvatar },
    loading: true,
  };
  messages.value.push(aiAnswer);
  const source = fetchEventSource(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      messages: [
        {
          role: 'user',
          content,
        },
      ],
      apikey: apiKey,
    }),
    signal: abortController.signal,
    onopen: (response) => {},
    onmessage: (msg) => {
      messages.value.at(-1).loading = false;
      if (msg.data === '[DONE]') {
        nextTick(() => {
          conversationRef.value?.scrollTo({
            top: conversationRef.value.scrollHeight,
            behavior: 'smooth',
          });
        });
        return;
      }
      const data = JSON.parse(msg.data);
      const responseContent = data.choices[0].delta.content;
      messages.value.at(-1).content += responseContent;
    },
    onerror: (err) => {
      messages.value.at(-1).loading = false;
      messages.value.at(-1).content = '请求失败';
      throw err;
    },
  });
};

const stop = () => {
  if (abortController) {
    abortController.abort();
    abortController = null;
    // 更新最后一条消息的状态
    if (messages.value.length > 0) {
      messages.value.at(-1).loading = false;
      messages.value.at(-1).content += '已中止对话';
    }
  }
};

---

使用MateChat的多种方式

当前MateChat主要基于Vue3开发，但我们仍可以通过多种方式将MateChat与您的项目集成。

以下是一些可行方案供参考：

一、在Vue3项目中集成MateChat（主流方式）

适用场景：需要深度定制AI助手功能，并与现有Vue项目无缝融合的场景。

步骤： 参考 快速开始 的使用方式

import { createApp } from 'vue';
import App from './App.vue';

import MateChat from '@matechat/core';

import '@devui-design/icons/icomoon/devui-icon.css';

createApp(App).use(MateChat).mount('#app');

二、通过iframe嵌入独立页面

适用场景：需快速为第三方平台添加AI助手，且不希望侵入宿主环境。

步骤：

• 构建独立MateChat页面: 创建一个包含MateChat组件的独立Vue项目，并打包为静态资源或独立部署。
• 嵌入iframe：在宿主页面中通过iframe加载matechat应用。

三、与其他框架集成（如React/Angular）

适用场景：需与现有其他框架的宿主应用集成

方案建议：

• 封装Web Component: 将MateChat组件打包为自定义元素，供任意框架调用。
• 通过微前端架构: 使用qiankun、microApp等微前端方案将MateChat作为独立子应用加载。

---

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

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