# @chatui/core 中文文档
规范地址：https://npmcn.com/package/%40chatui/core/
版本：3\.9\.0
npm 元数据更新时间：2026-10-12T03:10:07.280Z
中文译文更新时间：2026-11-09T11:34:14.213Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40chatui/core
原文对照：https://npmcn.com/package/%40chatui/core/?lang=original
项目主页：https://chatui.io/
源码仓库：https://github.com/alibaba/ChatUI
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：1.2 MB，612 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react \>=16\.8\.0，react-dom \>=16\.8\.0
- 首次发布：2020-09-17T02:41:37.988Z
- 最新版本发布：2026-10-12T03:10:07.023Z
- 近 30 天下载量：10576（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：103（近 12 个月 6 个）
## 中文简介
Chatbot UI 反应库
## 安装
```sh
npm install @chatui/core
```
也可以使用：`pnpm add @chatui/core`、`yarn add @chatui/core`、`bun add @chatui/core`
## README
# [](https://chatui.io/)
服务于对话领域的设计和开发体系
官网：[https://chatui.io](https://chatui.io/)
[](https://github.com/alibaba/ChatUI/blob/master/LICENSE) [](https://www.npmjs.com/package/@chatui/core) [](https://www.npmjs.com/package/@chatui/core) [](https://unpkg.com/@chatui/core@0.1.0/dist/index.js) [](https://cdn.jsdelivr.net/npm/@chatui/core)
[English](https://npmcn.com/package/%40chatui/core/README.md) | 简体中文
## 特性
- 😎 **最佳实践**：基于阿里小蜜业务积累和打磨的对话式交互最佳实践
- 🛡 **TypeScript**：使用 TypeScript 开发，提供完整的类型定义文件
- 📱 **响应式**：响应式布局，在无线和 PC 端都可以友好展现
- ♿ **障碍**：支持无障碍，已通过深圳市无障碍研究会的认证
- 🎨 **主题**：支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求
- 🌍 **国际化**：支持多语言和本土化特性
## 兼容环境
- 现代浏览器 (支持 [CSS Variables](https://caniuse.com/css-variables))
- IE 11 (需要 [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11) 和 [CSS Variables Polyfill](https://github.com/nuxodin/ie11CustomProperties) / [css-vars-ponyfill](https://github.com/jhildenbiddle/css-vars-ponyfill))
| 
Edge | 
Firefox | 
Chrome | 
Safari | 
iOS Safari | 
Android WebView |
| --- | --- | --- | --- | --- | --- |
| 16+ | 31+ | 49+ | 9.1+ | 9.3+ | 6+ |
## 安装
```bash
npm install @chatui/core --save
```
```bash
yarn add @chatui/core
```
## 示例
```jsx
import Chat, { Bubble, useMessages } from '@chatui/core';
import '@chatui/core/dist/index.css';
const App = () => {
const { messages, appendMsg, setTyping } = useMessages([]);
function handleSend(type, val) {
if (type === 'text' && val.trim()) {
appendMsg({
type: 'text',
content: { text: val },
position: 'right',
});
setTyping(true);
setTimeout(() => {
appendMsg({
type: 'text',
content: { text: 'Bala bala' },
});
}, 1000);
}
}
function renderMessageContent(msg) {
const { content } = msg;
return ;
}
return (
);
};
```
[](https://codesandbox.io/s/chatui-demo-o6n3z?fontsize=14&hidenavigation=1&theme=dark)
### 本地开发
```bash
cd storybook
npm i
npm run storybook
```
### 定制主题
参考 [定制主题](https://chatui.io/docs/customize-theme) 文档。
## 国际化
参考 [国际化](https://chatui.io/docs/i18n) 文档。
## 交流讨论
## License
MIT
## 常见问题
### @chatui/core 是什么？
Chatbot UI 反应库
### 如何安装 @chatui/core？
在项目目录运行 npm install @chatui/core，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8\.0）、react-dom（\>=16\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @chatui/core 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @chatui/core 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @chatui/core 可以商用吗？
@chatui/core 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @chatui/core 的下载量有多少？
根据 npm 官方下载统计，@chatui/core 在 2026/10/10 – 2026/11/08 这 30 天内被下载 10,576 次，日均约 353 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @chatui/core 还在维护吗？
最新版本 3\.9\.0 发布于 2026/10/12（28 天前）；至今共发布 103 个版本，其中过去 12 个月发布了 6 个；首次发布于 2020/09/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。