一、项目介绍

做 AI 聊天或 AIGC 类 Web 应用时，通用组件库往往不够「AI 原生」：消息流、会话、模型切换、Thinking 过程这些特有交互，要么自己拼，要么改得面目全非。设计语言也不够统一，和产品的 AI 调性对不上。
Lobe UI 是 LobeHub 开源的 React 组件库，专为构建 AI 聊天与 AIGC Web 应用而设计。它提供一套现代、可主题化的 AI 原生组件，ESM only，需要 React 19 与 motion，配套文档甚至为编码 Agent 生成了 skills，便于 AI 辅助开发。对想快速做出高质感 AI 产品的团队，它是现成的 UI 基座。

二、项目基本信息

信息项详情
项目名称lobe-ui
GitHub地址https://github.com/lobehub/lobe-ui
项目描述🍭 Lobe UI - an open-source UI component library for building AIGC web apps
作者lobehub
开源协议MIT License
开源状态公开
LanguagesTypeScript
支持平台Web
最后更新2026-10-28

三、核心优势

  • AI 原生：消息流、会话、模型切换等组件开箱即用
  • 设计统一：现代可主题化，契合 AIGC 产品调性
  • React 19 优先：组合式 API 与类型体验到位
  • Agent 友好：文档附带 skills，便于 AI 辅助开发
  • 开源可定制：MIT 协议，源码可改

四、适用场景

适合用 React 构建 AI 聊天、智能体前端与 AIGC 工具的团队。想缩短 AI 产品 UI 开发周期的前端尤为合适。

五、安装教程

当前最新版本 v5.47.1。按下方命令安装：

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

常见报错：依赖缺失时先升级对应运行环境（Node、Python、.NET、Rust、Go、Bun、JDK）；网络超时多为镜像或代理问题，可重试或换源；Docker 相关确保已安装并启动 Docker 服务。

六、使用示例

下面是一段可直接参考的真实示例：

import '@lobehub/ui/theme.css';
import '@lobehub/ui/style.css';
import { Button, ConfigProvider } from '@lobehub/ui';
import { motion } from 'motion/react';

export default () => (
  <ConfigProvider motion={motion}>
    <Button type="primary">Hello AIGC</Button>
  </ConfigProvider>
);

七、常见问题

问：需要什么版本？答：React 19、motion 13/14，ESM only。问：从 v5 升级注意什么？答：v6 移除了 Ant Design，需参考迁移指南。

八、总结

lobe-ui 用清晰的设计，把把界面能力做成组件这件事从重复劳动变成了可复用、可维护的工程能力。它不追求大而全，而是把核心痛点解决得足够扎实，这正是日常开发与团队落地时最需要的那种工具。如果你也在被同类问题困扰，不妨按上面的安装与使用步骤试一试，把它接进自己的工作流。