一个由华为出品的免费开源AI交互对话组件——MateChat

MateChat是由华为DevUI团队开源的一款专为前端AI交互设计的组件库，集成了现代化的聊天UI和智能助手能力，适用于AI Chatbot、客服系统、社交聊天等多种场景。它致力于构建不同业务场景下高一致性的 GenAI 体验系统语言，同时匹配各种工具/平台的原生业务场景和界面特征。

MateChat不仅提供了开箱即用的高质量组件，还能直接对接多种主流AI模型，如OpenAI、DeepSeek、盘古大模型等，帮助开发者轻松构建AI应用。它支持Vue3，但也可以通过`iframe`嵌入以及集成到React/Angular中。

MateChat功能特点：

1、即插即用的高质量组件：

提供了对话气泡、Markdown 渲染、布局气泡、智能提示等多种组件，覆盖 20+ 场景，满足不同业务需求。

支持多主题适配，满足个性化设计需求。

2、无缝对接主流模型：

直接支持对接 OpenAI、DeepSeek、盘古大模型等主流模型服务，无需额外配置。

3、深度适配 Vue3：

完美兼容 Vue3 的 Composition API，支持 TypeScript 原生支持，轻松集成到现有项目中。

4、企业级扩展能力：

支持多主题定制、动态加载、流式响应等功能，满足企业级开发需求。

5、活跃的开源社区：

拥有活跃的开源社区，持续更新优化，提供丰富的文档和示例。

6、国际化支持：

支持国际化，可以轻松适配不同语言环境。

7、富功能输入区：

支持文本、指令、快捷模板等多种交互形式，提供更丰富的用户输入体验。

8、主题自适应：

自动切换浅色或深色主题，保证在各类 UI 下都清晰可读。

MateChat使用方法：

1、安装依赖：

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

2、引入组件：

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

3、使用组件：

<template>
  <McBubble :content="'你好，MateChat'" :avatarConfig="{ name: 'MateChat' }"></McBubble>
</template>

进入MateChat官网入口