MateChat React is the React version of MateChat, a front-end AI scenario solution UI library based on Huawei DevUI Design.
English | 简体中文
MateChat React is a React component library designed for AI-driven interfaces, such as chat assistants, prompt tools, agent frameworks, and more. It is the React version of MateChat, offering consistent features and styles.
MateChat is based on Huawei DevUI Design, offering a modern visual language, consistent user experience, and excellent scalability.
- 🧠 Built for AI interaction and prompt use-cases
- 🎨 Based on DevUI design system
- ⚛️ Fully typed React + TypeScript components
- 🌗 Built-in light/dark theme switching
- 🔌 Highly customizable & flexible
# npm
npm install @matechat/react
# or pnpm
pnpm add @matechat/reactimport { Bubble } from "@matechat/react";
import avatar from "./avatar.png";
export default function BubbleDemo() {
return (
<div className="bubble-chat">
<div className="bubble-row left">
<img src={avatar} alt="Bot" className="avatar" />
<Bubble text="Hello, how can I help you?" />
</div>
<div className="bubble-row right">
<Bubble text="I want to know the product features!" />
<img src={avatar} alt="User" className="avatar" />
</div>
<div className="bubble-row left">
<img src={avatar} alt="Bot" className="avatar" />
<Bubble text="OK, please wait..." isPending />
</div>
</div>
);
}The documentation is still in progress, but you can feel free to create a new issue in GitCode or GitHub to submit your questions or suggestions. This project is still under development, so the documentation is not complete yet, some features may change in the future.
For more information, please track the progress in #4 and #5.
We welcome all kinds of contributions:
- File issues for bugs or features
- Create pull requests
- Help with documentation or translations
Contributors:
| MateChat React Chat Group | SOA Chat Group |
|---|---|
 |
 |
This project is licensed under the MIT License.