MateChat React

MateChat React is the React version of MateChat, a front-end AI scenario solution UI library based on Huawei DevUI Design.

English | 简体中文

---

Introduction

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.

Features

• 🧠 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

---

Quick Start

# npm
npm install @matechat/react

# or pnpm
pnpm add @matechat/react

import { 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>
  );
}

---

Development

git clone https://github.com/matechat/matechat-react.git
cd matechat-react
pnpm install
pnpm dev

Build the library:

pnpm build

---

Documentation

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.

Star History

---

Contribution

We welcome all kinds of contributions:

• File issues for bugs or features
• Create pull requests
• Help with documentation or translations

Contributors:

---

Contact Us

MateChat React Chat Group	SOA Chat Group

License

This project is licensed under the MIT License.