懂AI
chat-ui-kit-react

chat-ui-kit-react

React组件库助力快速构建响应式聊天界面

Chat UI Kit React是一个开源UI工具包，专为Web聊天应用开发而设计。该库提供多种React组件，包括MainContainer、ChatContainer和MessageList等，简化了滚动条、可编辑内容和响应式布局等常见聊天UI难题。支持TypeScript，配有完善的文档和示例，并拥有活跃的社区。这个库为开发者提供了构建现代化、高效聊天界面的有力工具。

React组件聊天UI工具包开源UI工具包前端开发Chat UI Kit ReactGithub开源项目
访问官网GitHub文档

Chat UI Kit React

Actions 状态 npm 版本 代码风格: prettier 语义化发布 Storybook

几分钟内使用 React 组件构建您自己的聊天界面。 chatscope 的 Chat UI Kit 是一个用于开发网页聊天应用的开源 UI 工具包。

厌倦了与粘性滚动条、可编辑内容、响应式设计、CSS 技巧的斗争吗？ 这个工具包就是为您准备的！查看所有功能。

Chat UI Kit 为您带来超高速的聊天界面开发 🚀

演示

演示索引：https://chatscope.io/demo。

安装

组件库

使用 yarn：

yarn add @chatscope/chat-ui-kit-react

使用 npm：

npm install @chatscope/chat-ui-kit-react

样式

使用 yarn：

yarn add @chatscope/chat-ui-kit-styles

使用 npm：

npm install @chatscope/chat-ui-kit-styles

使用方法

ESM

import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
} from "@chatscope/chat-ui-kit-react";

<div style={{ position: "relative", height: "500px" }}>
  <MainContainer>
    <ChatContainer>
      <MessageList>
        <Message
          model={{
            message: "Hello my friend",
            sentTime: "just now",
            sender: "Joe",
          }}
        />
      </MessageList>
      <MessageInput placeholder="Type message here" />
    </ChatContainer>
  </MainContainer>
</div>;

太棒了！您的第一个聊天界面已经准备就绪！

UMD

UMD 用法在我们的 Storybook 中有文档说明。

文档

查看我们友好的 Storybook。

Typescript

该库用 Javascript 编写，但从 1.9.3 版本开始，包中提供了 Typescript 类型定义。

另请参阅

@chatscope/use-chat 是一个用于聊天应用状态管理的 React hook。 查看它，看看您自己可以多轻松地实现聊天逻辑。

表示支持

如果您已经制作了一个很棒的聊天界面并且喜欢这个库，请给这个仓库点个 ⭐！

社区和支持

网站

https://chatscope.io

许可证

MIT

编辑推荐精选

咔片PPT

咔片PPT

AI助力，做PPT更简单！

咔片是一款轻量化在线演示设计工具，借助 AI 技术，实现从内容生成到智能设计的一站式 PPT 制作服务。支持多种文档格式导入生成 PPT，提供海量模板、智能美化、素材替换等功能，适用于销售、教师、学生等各类人群，能高效制作出高品质 PPT，满足不同场景演示需求。

讯飞绘文

讯飞绘文

选题、配图、成文，一站式创作，让内容运营更高效

讯飞绘文，一个AI集成平台，支持写作、选题、配图、排版和发布。高效生成适用于各类媒体的定制内容，加速品牌传播，提升内容营销效果。

AI助手热门AI工具AI创作AI辅助写作讯飞绘文内容运营个性化文章多平台分发
材料星

材料星

专业的AI公文写作平台，公文写作神器

AI 材料星，专业的 AI 公文写作辅助平台，为体制内工作人员提供高效的公文写作解决方案。拥有海量公文文库、9 大核心 AI 功能，支持 30 + 文稿类型生成，助力快速完成领导讲话、工作总结、述职报告等材料，提升办公效率，是体制打工人的得力写作神器。

openai-agents-python

openai-agents-python

OpenAI Agents SDK，助力开发者便捷使用 OpenAI 相关功能。

openai-agents-python 是 OpenAI 推出的一款强大 Python SDK，它为开发者提供了与 OpenAI 模型交互的高效工具，支持工具调用、结果处理、追踪等功能，涵盖多种应用场景，如研究助手、财务研究等，能显著提升开发效率，让开发者更轻松地利用 OpenAI 的技术优势。

Hunyuan3D-2

Hunyuan3D-2

高分辨率纹理 3D 资产生成

Hunyuan3D-2 是腾讯开发的用于 3D 资产生成的强大工具，支持从文本描述、单张图片或多视角图片生成 3D 模型，具备快速形状生成能力，可生成带纹理的高质量 3D 模型，适用于多个领域，为 3D 创作提供了高效解决方案。

3FS

3FS

一个具备存储、管理和客户端操作等多种功能的分布式文件系统相关项目。

3FS 是一个功能强大的分布式文件系统项目，涵盖了存储引擎、元数据管理、客户端工具等多个模块。它支持多种文件操作，如创建文件和目录、设置布局等，同时具备高效的事件循环、节点选择和协程池管理等特性。适用于需要大规模数据存储和管理的场景，能够提高系统的性能和可靠性，是分布式存储领域的优质解决方案。

TRELLIS

TRELLIS

用于可扩展和多功能 3D 生成的结构化 3D 潜在表示

TRELLIS 是一个专注于 3D 生成的项目，它利用结构化 3D 潜在表示技术，实现了可扩展且多功能的 3D 生成。项目提供了多种 3D 生成的方法和工具，包括文本到 3D、图像到 3D 等，并且支持多种输出格式，如 3D 高斯、辐射场和网格等。通过 TRELLIS，用户可以根据文本描述或图像输入快速生成高质量的 3D 资产，适用于游戏开发、动画制作、虚拟现实等多个领域。

ai-agents-for-beginners

ai-agents-for-beginners

10 节课教你开启构建 AI 代理所需的一切知识

AI Agents for Beginners 是一个专为初学者打造的课程项目，提供 10 节课程，涵盖构建 AI 代理的必备知识，支持多种语言，包含规划设计、工具使用、多代理等丰富内容，助您快速入门 AI 代理领域。

AEE

AEE

AI Excel全自动制表工具

AEE 在线 AI 全自动 Excel 编辑器，提供智能录入、自动公式、数据整理、图表生成等功能，高效处理 Excel 任务，提升办公效率。支持自动高亮数据、批量计算、不规则数据录入，适用于企业、教育、金融等多场景。

UI-TARS-desktop

UI-TARS-desktop

基于 UI-TARS 视觉语言模型的桌面应用，可通过自然语言控制计算机进行多模态操作。

UI-TARS-desktop 是一款功能强大的桌面应用，基于 UI-TARS（视觉语言模型）构建。它具备自然语言控制、截图与视觉识别、精确的鼠标键盘控制等功能，支持跨平台使用（Windows/MacOS），能提供实时反馈和状态显示，且数据完全本地处理，保障隐私安全。该应用集成了多种大语言模型和搜索方式，还可进行文件系统操作。适用于需要智能交互和自动化任务的场景，如信息检索、文件管理等。其提供了详细的文档，包括快速启动、部署、贡献指南和 SDK 使用说明等，方便开发者使用和扩展。

下拉加载更多