MateChat

正在检查是否收录...

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

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

MateChat 简介

是华为为 AIGC 场景打造的 UI 库，用来开发构建

AI 对话应用

。MateChat 也是华为内部多个应用以及

CodeArts

、

InsCode AI IDE

等智能化助手的对话组件。

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

MateChat 技术特性

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

开发上手体验

之前我分别推荐过 Lobe UI 和腾讯的 TDesign AI Chat 两个 AI 聊天互动组件，MateChat 在视觉上更加具有科技感，更适合研发工具领域的对话组件，可以用在

各类Web网站

，企业官网、电商平台、服务型网站、教育平台及社区论坛等。

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

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; } };

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