MateChat - 免费开源、开箱即用！华为出品的 AI 交互对话组件，轻松搭建自己的 AI Chat 应用

各位前端开发者有做 AI Chat 项目了吗？都用哪个聊天交互界面？本文介绍华为的 MateChat 组件。

MateChat 简介

MateChat 是华为为 AIGC 场景打造的 UI 库，用来开发构建 AI 对话应用。MateChat 也是华为内部多个应用以及 CodeArts、InsCode AI IDE 等智能化助手的对话组件。

MateChat 官网截图
MateChat 官网截图

MateChat 技术特性

  • 官方支持 Vue3 ，但也可以通过 iframe 嵌入（无侵入）以及集成到 React / Angular 中；
  • 支持和 OpenAI、DeepSeek 等大部分模型对接；
  • 支持按需引入、国际化以及主题定制。

开发上手体验

之前我分别推荐过 Lobe UI 和腾讯的 TDesign AI Chat 两个 AI 聊天互动组件，MateChat 在视觉上更加具有科技感， 更适合研发工具领域的对话组件，可以用在各类Web网站，企业官网、电商平台、服务型网站、教育平台及社区论坛等。

文字描述比较苍白，下面几个 UI 界面的示例图片，我们日常多多少少都接触过，相信一看就明白 MateChat 能做什么了。

UI 界面展示
UI 界面展示
UI 界面展示
UI 界面展示
UI 界面展示
UI 界面展示

NPM 安装

npm i vue-devui @matechat/core @devui-design/icons

基础使用

在项目中引入必要文件：

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');

在vue文件中使用：

<template>
  <McBubble :content="'你好，那些免费的砖'" :avatarConfig="{ name: 'thosefree' }"></McBubble>
</template>

官网提供了简单的对话界面搭建的完整示例，上手非常简单，没有什么学习成本。

对接大模型服务

搭建完 UI 界面后，就可以对接模型服务，比如如盘古、ChatGPT 等大模型，在大模型开放平台注册并生成调用 API_Key 之后，调用方法如下。

通过 npm 安装 OpenAI

npm install openai

初始化并调用模型接口

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: 'some-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;
  }
};

这样就拥有了一个对接大模型的简单应用。像按需引入、国际化和主题配置这种常规操作就不多说了，更完整的页面示例可参考官方的示例代码。

免费开源说明

MateChat 是华为 DevUI 团队开发的，属于华为众多开源组件库的一员，基于 MIT 开源协议，我们可以自由下载使用，把它用在商业项目也没问题。