Repolode
提交项目
lobehub

lobehub/lobe-ui

面向 AI 聊天与 AIGC 网页应用的 React 组件库，提供聊天、Markdown、代码等界面组件。

在 GitHub 查看官网
Star
2,239
Fork
280
未关闭 Issue
56
最近提交
8小时前

这是什么？

Lobe UI 是 LobeHub 使用的 React 组件库，面向构建 AI 聊天界面和 AIGC 网页应用的开发者。它提供渲染 LLM 输出的组件，包括 Markdown、代码块、Mermaid 图表、代码差异和 HTML 预览，并包含聊天与移动端入口。

除聊天场景外，该库也覆盖常规应用界面，如仪表盘、数据表格、表单和落地页，它们共用同一套设计语言。主题支持浅色与深色模式，通过一个属性即可切换主色与中性色。内置中英文文案。

项目仅支持 ESM，需要 React 19，并依赖 motion、@lobehub/icons、@lobehub/fluent-emoji 等对等依赖。文档同时提供面向编码代理的 skills.md 参考和 llms.txt 页面索引。

核心功能

  • 01提供渲染 LLM 输出的组件，包括 Markdown、代码、Mermaid 图表和代码差异。
  • 02提供聊天与移动端界面入口，适用于对话式界面。
  • 03提供仪表盘、数据表格和表单组件，适用于管理后台。
  • 04支持浅色和深色主题，可切换主色与中性色。
  • 05内置英文和简体中文文案。
  • 06文档提供 skills.md 和 llms.txt 等面向编码代理的格式。

适用场景

  • 为 AI 助手搭建包含消息列表和输入框的聊天页面。
  • 在网页应用中渲染 LLM 输出的 Markdown 和代码内容。
  • 在 AI 功能旁构建管理后台或数据表格。
  • 为现有 React 产品添加浅色和深色主题。

快速上手

  1. 1

    使用 pnpm 安装包及其对等依赖

    pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motion
  2. 2

    导入主题和样式 CSS，然后用 ConfigProvider 包裹应用并使用 Button 等组件

使用前须知

  • 需要 React 19，仅支持 ESM 引入，并且需要安装多个对等依赖。
  • 从 5.x 升级到 v6 需要移除 Ant Design，需按迁移指南操作。

收录于专题

AI 聊天机器人与聊天客户端前端框架与界面组件

标签

#react#ui-components#design-system#chatbot#llm#typescript#aigc#antd#dumi#lobehub

常见问题

lobe-ui 是什么？
面向 AI 聊天与 AIGC 网页应用的 React 组件库，提供聊天、Markdown、代码等界面组件。 Lobe UI 是 LobeHub 使用的 React 组件库，面向构建 AI 聊天界面和 AIGC 网页应用的开发者。它提供渲染 LLM 输出的组件，包括 Markdown、代码块、Mermaid 图表、代码差异和 HTML 预览，并包含聊天与移动端入口。
lobe-ui 可以免费使用吗？用的什么许可证？
lobe-ui 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
lobe-ui 还在维护吗？
活跃维护中。lobe-ui 最近一次提交是在 2026年10月22日。
lobe-ui 适合用来做什么？
为 AI 助手搭建包含消息列表和输入框的聊天页面。 在网页应用中渲染 LLM 输出的 Markdown 和代码内容。 在 AI 功能旁构建管理后台或数据表格。 为现有 React 产品添加浅色和深色主题。
lobe-ui 怎么安装和运行？
使用 pnpm 安装包及其对等依赖: pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motion 导入主题和样式 CSS，然后用 ConfigProvider 包裹应用并使用 Button 等组件
在哪里获取 lobe-ui？
源代码和安装说明在 GitHub 上：https://github.com/lobehub/lobe-ui

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目