lobehub/lobe-ui

これは何？

主な機能

• 01Markdown、コード、Mermaid図、差分など、LLMの出力を表示するコンポーネント。
• 02会話型インターフェース向けのチャットおよびモバイルUI。
• 03管理コンソール向けのダッシュボード、データテーブル、フォームのコンポーネント。
• 04プライマリカラーとニュートラルカラーを切り替えられるライト／ダークテーマ。
• 05英語と簡体字中国語のテキストバンドルを同梱。
• 06skills.mdやllms.txtなど、エージェントが読み取れる形式のドキュメント。

ユースケース

• AIアシスタント向けに、メッセージ一覧と入力欄を備えたチャットページを構築する。
• WebアプリでLLMからストリーミングされるMarkdownやコードの出力を表示する。
• AI機能と併せて管理コンソールやデータテーブルを作成する。
• 既存のReact製プロダクトにライト／ダークテーマを追加する。

クイックスタート

1. 1

   pnpmでパッケージとpeer dependenciesをインストールします

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

   テーマとスタイルのCSSをインポートし、アプリをConfigProviderでラップして、Buttonなどのコンポーネントを使用します

使う前に知っておきたいこと

• !React 19が必要で、ESMのみで利用できます。また、複数のpeer dependenciesをインストールする必要があります。
• !5.xからアップグレードする場合、v6への移行に伴いAnt Designを使わなくなります。

収録されている特集

トピック

よくある質問

lobe-ui とは？

AIチャットやAIGCのWebアプリ構築に使えるReactコンポーネントライブラリ。チャット、Markdown、コード、管理画面向けUIを備えています。 Lobe UIはLobeHubが使用するReactコンポーネントライブラリで、AIチャットインターフェースやAIGCのWebアプリを開発する人を対象としています。Markdown、コードブロック、Mermaid図、差分、HTMLプレビューなど、LLMの出力を表示するコンポーネントに加え、チャットやモバイル向けのUIも用意されています。

lobe-ui は無料で使えますか？ライセンスは？

lobe-ui は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

lobe-ui は今もメンテナンスされていますか？

活発にメンテナンス中。lobe-ui の最終コミットは 2026年10月22日 です。

lobe-ui は何に使えますか？

AIアシスタント向けに、メッセージ一覧と入力欄を備えたチャットページを構築する。 WebアプリでLLMからストリーミングされるMarkdownやコードの出力を表示する。 AI機能と併せて管理コンソールやデータテーブルを作成する。 既存のReact製プロダクトにライト／ダークテーマを追加する。

lobe-ui のインストール方法は？

pnpmでパッケージとpeer dependenciesをインストールします: pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motion テーマとスタイルのCSSをインポートし、アプリをConfigProviderでラップして、Buttonなどのコンポーネントを使用します

lobe-ui はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/lobehub/lobe-ui