MateChat - 免费开源、开箱即用！轻松搭建自己的 AI Chat 应用_前端开源的人工智能对话界面

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

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

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

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

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

NPM 安装

基础使用

在项目中引入必要文件：

在vue文件中使用：

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

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

通过 npm 安装 OpenAI

初始化并调用模型接口

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

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

原文：https://www.thosefree.com/matechat