一款AntDesign开发的AIGC-Web应用的开源UI组件库-Lobe UI（ChatGPT必备）

对于软件/网页设计者而言，UI是提升应用体验度最好的解决方法，UI 组件库的出现让界面设计变得更加轻松~

本期推荐一款可以快速开发 ChatGPT UI 界面的组件库-Lobe UI：

Lobe UI 是由 lobehub 团队开发的一套 web UI 组件库，和我之前推荐的很多通用型的 UI 组件库不同，Lobe UI 是专门为目前火热的 AIGC 应用开发而打造，让我们可以快速构建出类似于 ChatGPT 这样的指令输入型生成式 AI 应用。

一个专门为ChatGPT应用打造专属开源UI组件库！

Lobe UI功能特色说明：

高性能速度快：Lobe UI 在运行时会自动裁剪不必要的样式属性，组件性能很高；

支持主题定制：官方提供了一种简单的方法来自定义主题，我们可以更改颜色、字体等外观，轻松构建符合自身产品主题的界面；

支持 light / dark 界面：支持自动暗模式识别，原理是 NextUI 在检测到 HTML theme prop 变化时自动更改主题。

Lobe UI 能做什么？

ChatGPT 已经爆火了一年多了，我们知道，通过申请 OpenAi 的账号，我们可以拥有 ChatGPT 的能力来将 ChatGPT 的能力接入到自己产品中。这套组件内置了很多拿来就直接用的UI组件，可以让我们以极快的速度搭建应用…

如何安装 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’],
};

组件使用示范:

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

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

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

这样就可以开始开发我们的 GPT 应用了!

LobeUI 官方提供了很多 AIGC 专用的组件，比如指令输入框、表情选择器、聊天图标、聊天窗口、聊天消息列表等，都是非常实用的组件!

Lobe UI 是一套免费开源的前端 UI 组件库，开发团队 lobehub 已经把项目的源代码基于 MIT 开源协议完全开放，根据这个协议，我们可以自由地下载来使用，放心用在个人和商业项目上。