{"id":28842747,"url":"https://github.com/devcloudfe/matechat-react","last_synced_at":"2025-07-24T15:12:17.188Z","repository":{"id":299192309,"uuid":"998304332","full_name":"DevCloudFE/matechat-react","owner":"DevCloudFE","description":"React version of MateChat, a frontend AI scenario solution UI library based on Huawei DevUI Design.","archived":false,"fork":false,"pushed_at":"2025-06-15T08:48:55.000Z","size":113,"stargazers_count":9,"open_issues_count":5,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-15T08:50:22.710Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DevCloudFE.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-08T10:22:13.000Z","updated_at":"2025-06-15T08:48:58.000Z","dependencies_parsed_at":"2025-06-15T09:02:28.356Z","dependency_job_id":null,"html_url":"https://github.com/DevCloudFE/matechat-react","commit_stats":null,"previous_names":["devcloudfe/matechat-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DevCloudFE/matechat-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevCloudFE%2Fmatechat-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevCloudFE%2Fmatechat-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevCloudFE%2Fmatechat-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevCloudFE%2Fmatechat-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevCloudFE","download_url":"https://codeload.github.com/DevCloudFE/matechat-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevCloudFE%2Fmatechat-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260783886,"owners_count":23062430,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-19T16:06:33.354Z","updated_at":"2025-07-24T15:12:17.152Z","avatar_url":"https://github.com/DevCloudFE.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eMateChat React\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nMateChat 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.\n\n[![npm Version](https://img.shields.io/npm/v/@matechat/react.svg)](https://www.npmjs.com/package/@matechat/react)\n[![npm Downloads](https://img.shields.io/npm/dm/@matechat/react.svg)](https://www.npmjs.com/package/@matechat/react)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nEnglish | [简体中文](./README.zh-CN.md)\n\n\u003c/div\u003e\n\n---\n\n## Introduction\n\n**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.\n\nMateChat is based on [Huawei DevUI Design](https://devui.design/), offering a modern visual language, consistent user experience, and excellent scalability.\n\n## Features\n\n- 🧠 Built for AI interaction and prompt use-cases\n- 🎨 Based on DevUI design system\n- ⚛️ Fully typed React + TypeScript components\n- 🌗 Built-in light/dark theme switching\n- 🔌 Highly customizable \u0026 flexible\n\n---\n\n## Quick Start\n\n```bash\n# npm\nnpm install @matechat/react\n\n# or pnpm\npnpm add @matechat/react\n```\n\n```tsx\nimport { Bubble } from \"@matechat/react\";\nimport avatar from \"./avatar.png\";\n\nexport default function BubbleDemo() {\n  return (\n    \u003cdiv className=\"bubble-chat\"\u003e\n      \u003cdiv className=\"bubble-row left\"\u003e\n        \u003cimg src={avatar} alt=\"Bot\" className=\"avatar\" /\u003e\n        \u003cBubble text=\"Hello, how can I help you?\" /\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"bubble-row right\"\u003e\n        \u003cBubble text=\"I want to know the product features!\" /\u003e\n        \u003cimg src={avatar} alt=\"User\" className=\"avatar\" /\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"bubble-row left\"\u003e\n        \u003cimg src={avatar} alt=\"Bot\" className=\"avatar\" /\u003e\n        \u003cBubble text=\"OK, please wait...\" isPending /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## Documentation\n\nThe 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.\n\nFor 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).\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=DevCloudFE/matechat-react\u0026type=Date)](https://www.star-history.com/#DevCloudFE/matechat-react\u0026Date)\n\n---\n\n## Contribution\n\nWe welcome all kinds of contributions:\n\n- File issues for bugs or features\n- Create pull requests\n- Help with documentation or translations\n\n**Contributors:**\n\n\u003ca href=\"https://github.com/DevCloudFE/matechat-react/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=DevCloudFE/matechat-react\" /\u003e\n\u003c/a\u003e\n\n---\n\n## Contact Us\n\n|                                              MateChat React Chat Group                                               |                                         SOA Chat Group                                         |\n| :------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------: |\n| [\u003cimg alt=\"MateChat React Chat Group\" src=\"./assets/matechat-react-qq-group.jpg\" /\u003e](https://qm.qq.com/q/aMLehEXzBm) | [\u003cimg alt=\"SOA Chat Group\" src=\"./assets/soa-qq-group.jpg\" /\u003e](https://qm.qq.com/q/lOocKriX74) |\n\n## License\n\nThis project is licensed under the [MIT License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevcloudfe%2Fmatechat-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevcloudfe%2Fmatechat-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevcloudfe%2Fmatechat-react/lists"}