Skip to content

DevCloudFE/matechat-react

Repository files navigation

MateChat React

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

npm Version npm Downloads License

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

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

Star History Chart


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
MateChat React Chat Group SOA Chat Group

License

This project is licensed under the MIT License.

About

React version of MateChat, a frontend AI scenario solution UI library based on Huawei DevUI Design.

Resources

License

Stars

Watchers

Forks

Contributors 8

Languages