一款AIGC Web应用的开源 UI 组件库——Lobe UI

Lobe UI是由lobehub团队专为AIGC（人工智能生成内容）领域创新研发的一套针对性极强的web UI组件库，区别于市面上常见的通用型 UI 组件解决方案。这套组件库瞄准了当前正蓬勃发展的AIGC应用场景，旨在赋能开发者能够高效构建具备类似ChatGPT风格的指令驱动型生成式AI应用程序界面，从而简化流程并加速此类应用的开发周期。

Lobe UI免费开源说明

Lobe UI是一款完全免费且开源的前端用户界面（UI）组件库，由lobehub团队精心研发。该团队已依据MIT开源许可证将所有源代码公开发布，这意味着任何开发者均可依据此许可协议自由下载、使用Lobe UI组件库，并且无论是应用于个人项目还是商业项目，都能确保法律上的安全性和灵活性。

Lobe UI的技术特性介绍

1、高性能速度快：Lobe UI在运行时会自动裁剪不必要的样式属性，从而提高组件性能，确保了快速的响应速度。

2、支持主题切换：Lobe UI支持亮暗色主题，用户可以在导航栏中快速切换，同时支持自定义主题颜色和中性色，并可选择自定义徽标。此外，还支持一键格式化提示，提供简单的标签管理功能。

3、插件系统：Lobe UI提供了一个可扩展的插件系统，支持语音合成、多模态等功能，使得用户可以轻松地部署和使用私人ChatGPT/Gemini/Ollama聊天等应用。

4、智能调节功能：LobeHub UI（作为Lobe UI的一部分）具有很多可调测的选项和智能调节的功能，这比低代码平台要好很多，为AIGC应用提供了更多的灵活性和定制化选项。

5、优化WebUI界面：通过Lobe Theme插件，可以优化Stable Diffusion WebUI界面的各项功能分配，使界面更加合理和个性化。

Lobe UI轻松上手

需要注意的是，Lobe UI包仅支持ESM，使用 使用NextJS编译，所以只能使用下面这种方式安装：

bun add @lobehub/ui

为了正确使用nextjs ssr，需要在next.config.js中添加transpilePackages: ['@lobehub/ui']，比如：

// next.config.js
const nextConfig = {
  // ...更多其他配置

  transpilePackages: ['@lobehub/ui'],
};

组件使用示范

Lobe UI组件是基于Antd组件开发的，所以和Antd组件完全兼容，我们可以使用Antd样式作为默认的css-in-js样式解决方案。

import { ThemeProvider, Button } from '@lobehub/ui'
import { Button } from 'antd'

export default () => (
  <ThemeProvider>
    <Button>Hello AIGC</Button>
  </ThemeProvider>
)

进入Lobe UI Github入口进入Lobe UI文档官网入口