https://github.com/devcloudfe/matechat-react

React version of MateChat, a frontend AI scenario solution UI library based on Huawei DevUI Design.
https://github.com/devcloudfe/matechat-react

Last synced: 11 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/devcloudfe/matechat-react
• Owner: DevCloudFE
• License: mit
• Created: 2025-06-08T10:22:13.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-15T08:48:55.000Z (about 1 year ago)
• Last Synced: 2025-06-15T08:50:22.710Z (about 1 year ago)
• Language: TypeScript
• Homepage:
• Size: 110 KB
• Stars: 9
• Watchers: 1
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  
MateChat React





MateChat React is the React version of [MateChat](https://github.com/DevCloudFE/MateChat), a front-end AI scenario solution UI library based on Huawei DevUI Design.

[![npm Version](https://img.shields.io/npm/v/@matechat/react.svg)](https://www.npmjs.com/package/@matechat/react)

[![npm Downloads](https://img.shields.io/npm/dm/@matechat/react.svg)](https://www.npmjs.com/package/@matechat/react)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)





English | [简体中文](./README.zh-CN.md)



---

## 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](https://github.com/DevCloudFE/MateChat), offering consistent features and styles.

MateChat is based on [Huawei DevUI Design](https://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

```bash

# npm

npm install @matechat/react

# or pnpm

pnpm add @matechat/react

```

```tsx

import { Bubble } from "@matechat/react";

import avatar from "./avatar.png";

export default function BubbleDemo() {

  return (

    


      


        

        

      

      


        

        

      

      


        

        

      

    

  );

}

```


---

## Documentation

The documentation is still in progress, but you can feel free to create a new issue in [GitCode](https://gitcode.com/DevCloudFE/MateChat/issues) or [GitHub](https://github.com/DevCloudFE/MateChat/issues) 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](https://github.com/DevCloudFE/matechat-react/issues/4) and [#5](https://github.com/DevCloudFE/MateChat/issues/5).

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=DevCloudFE/matechat-react&type=Date)](https://www.star-history.com/#DevCloudFE/matechat-react&Date)

---

## 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                                         |

| :------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------: |

| [](https://qm.qq.com/q/aMLehEXzBm) | [](https://qm.qq.com/q/lOocKriX74) |

## License

This project is licensed under the [MIT License](./LICENSE).