粤ICP备17114055号
微信扫码
添加专属顾问
支持私有化部署
我要投稿
构建高效对话式UI的新选择，阿里开源ChatUI组件库，助力快速开发高质量聊天应用。核心内容：1. ChatUI组件库功能介绍及安装方法2. 基础组件预览及环境支持说明3. 基于阿里巴巴Alime Chatbot的最佳实践和交互模式
文章底部获取项目地址
// npm
npm install @chatui/core --save
// import
import React from'react';
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<Bubble content={content.text} />;
}
return (
<Chat
navbar={{ title: 'Assistant' }}
messages={messages}
renderMessageContent={renderMessageContent}
onSend={handleSend}
/>
);
};
exportdefault App;环境支持：
ChatUI 支持现代浏览器（支持 CSS 变量）以及 Internet Explorer 11（需要 polyfills 和 CSS 变量 polyfill）。
浏览器：Edge 16+、Firefox 31+、Chrome 49+、Safari 9.1+、iOS Safari 9.3+、Android WebView 6+。
1. 最佳实践
ChatUI 基于阿里巴巴 Alime Chatbot 的聊天交互最佳实践，提供了经过验证的交互模式和设计语言。这使得开发者能够快速构建符合用户习惯的聊天应用。
2. TypeScript 支持
ChatUI 使用 TypeScript 编写，提供了可预测的静态类型。这不仅有助于代码的可维护性，还能在开发过程中提供更好的类型检查和代码提示。
3. 响应式设计
ChatUI 采用响应式设计，能够自动适应各种设备，包括桌面浏览器、移动设备等。这确保了用户在不同设备上都能获得一致的体验。
4. 无障碍支持
ChatUI 获得了无障碍研究协会的认证，支持无障碍功能。这使得聊天应用能够更好地服务于残障用户，提升应用的包容性。
5. 主题定制
ChatUI 提供了强大的主题定制功能，开发者可以在每个细节上自定义界面的样式。这使得开发者能够根据品牌需求或用户偏好调整应用的外观。
6. 国际化支持
ChatUI 支持多种语言的国际化，能够满足不同地区用户的需求。开发者可以通过简单的配置，将应用翻译成多种语言，提升应用的全球适用性。
《前端资源推荐》公众号收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、在看、转发、关注！！！
其他推荐
Element-Plus-X：基于 Element Plus AI 组件库
AJ-Report：Vue + SpringBoot 可视化大屏设计器
form-create：多 UI 低代码 可视化 表单设计器
项目地址
GitHub：https://github.com/alibaba/ChatUI
53AI，企业落地大模型首选服务商
产品：场景落地咨询+大模型应用平台+行业解决方案
承诺：免费场景POC验证，效果验证后签署服务协议。零风险落地应用大模型，已交付160+中大型企业
2025-05-14
开源AI新协议！AI Agent与前端交互的轻量级协议，轻松构建交互式AI应用！
2025-05-14
事实证明千问qwen3小模型才是企业的生产力，他究竟能做什么呢？
2025-05-14
AG-UI：打破AI与应用壁垒，让智能助理真正“嵌入”你的工作流
2025-05-14
智能体到用户交互（AG-UI）协议
2025-05-14
3.4K star！阿里出品对话式UI神器，轻松打造专业级聊天界面！
2025-05-14
深度对比流行开源智能体 Agent 框架：选择适合你的解决方案
2025-05-13
阿里云人工智能大模型通义千问Qwen3开发部署
2025-05-12
一款辅助Cursor的开源神器，直接在浏览器选中元素调用AI Composer！
2024-07-25
2025-01-01
2025-01-21
2024-05-06
2024-09-20
2024-07-20
2024-07-11
2024-06-12
2024-12-26
2024-08-13
2025-05-14
2025-05-12
2025-04-30
2025-04-29
2025-04-28
2025-04-28
2025-04-28
2025-04-21
回到顶部