project-overview について
オープンソースのLobeHubリポジトリ(旧LobeChat)を開発する人向けのプロジェクト案内です。対応プラットフォーム、技術スタック、構成、データフローを示し、別管理の非公開クラウドリポジトリとの境界も説明します。
主な機能
- 01Webとデスクトップの対応状況
- 02技術スタックの概要
- 03Monorepoのディレクトリ案内
- 04アーキテクチャとデータフロー
- 05オープンソース版とクラウド版の境界
活用シーン
- 01LobeHubリポジトリ内のコード検索
- 02UIからデータベースまでの流れの把握
- 03関連するパッケージやサービス層の特定
- 04オープンソース機能とクラウド専用機能の区別
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ lobehub/ lobehub --skill project-overviewインストール後、Claude Code で/project-overviewを入力して読み込まれたか確認します。
詳細
LobeHub プロジェクト概要
以下のディレクトリ一覧は、主要な場所をまとめた厳選マップであり、 網羅的なツリーではありません。
packages/、src/store/、ルートグループなどは 時間とともに増えていきます。現在の内容を確認するには、実際のディレクトリに対してlsを実行してください。
プロジェクトの説明
モダンなデザインのオープンソース AI エージェントワークスペース:LobeHub(以前の LobeChat)。
このリポジトリはオープンソースのルートです(github.com/lobehub/lobehub、パッケージ @lobehub/lobehub)。
対応プラットフォーム:
- Web デスクトップ/モバイル
- デスクトップ(Electron) —
apps/desktop - モバイルアプリ(React Native) — 別リポジトリで、すでにリリース済み(このモノレポには含まれません)
ロゴの絵文字: 🤯
技術スタック全体
| カテゴリ | 技術 |
|---|---|
| フレームワーク | Next.js 16 + React 19 |
| ルーティング | Next.js 内の SPA と react-router-dom |
| 言語 | TypeScript |
| UI コンポーネント | @lobehub/ui |
| CSS-in-JS | @lobehub/ui createStaticStyles |
| アイコン | lucide-react、@ant-design/icons |
| i18n | react-i18next |
| 状態管理 | zustand |
| URL パラメーター | nuqs |
| データ取得 | SWR |
| React フック | aHooks |
| 日時 | dayjs |
| ユーティリティ | es-toolkit |
| API | TRPC(型安全) |
| データベース | Neon PostgreSQL + Drizzle ORM |
| テスト | Vitest |
正確なバージョンはルートの
package.jsonに記載されています。ここではなく、そちらを確認してください。
モノレポの構成
フラットな構成です。apps/、packages/、src/ はすべてリポジトリのルートにあります。Git サブモジュールはありません。
(repo root)
├── apps/
│ ├── cli/ # LobeHub CLI
│ ├── desktop/ # Electron desktop app
│ └── server/ # Next.js-backed server (`@/server/*` alias)
│ └── src/
│ ├── router-hono/ # Hono endpoint routers and standalone runtime
│ └── ... # featureFlags, globalConfig, modules, routers, services, utils, workflows
├── docs/ # changelog, development, self-hosting, usage
├── locales/ # en-US, zh-CN, ...
├── packages/ # ~80 @lobechat/* workspace packages — `ls` for the full set. Key ones:
│ ├── agent-runtime/ # Agent runtime core
│ ├── agent-signal/ # Agent Signal pipeline
│ ├── agent-tracing/ # Tracing / snapshots
│ ├── builtin-tool-*/ # Per-tool packages (calculator, web-browsing, claude-code, ...)
│ ├── builtin-tools/ # Central registries that compose builtin-tool-*
│ ├── context-engine/
│ ├── database/ # src/{models,schemas,repositories}
│ ├── model-bank/ # Model definitions & provider cards
│ ├── model-runtime/ # src/{core,providers}
│ ├── locales/ # i18n source of truth: packages/locales/src/default/
│ ├── env/ # env schemas (@/envs/* → packages/env/src/*)
│ ├── app-config/
│ ├── business/ # Open-source stubs (config, const, model-bank, model-runtime) — overridden by cloud
│ ├── types/
│ └── utils/
└── src/
├── app/
│ ├── (backend)/ # api, f, market, middleware, oidc, trpc, webapi
│ ├── spa/ # SPA HTML template service
│ └── spa-auth/ # Auth HTML shell (SSR)
├── routes/ # SPA page segments (thin — delegate to features/)
│ └── (main)/ (mobile)/ (desktop)/ (popup)/ auth/ onboarding/ share/
├── spa/ # SPA entries + router config
│ ├── entry.{web,mobile,desktop,popup}.tsx
│ └── router/
├── business/ # Open-source stubs (client/server) — cloud repo provides real impls
├── features/ # Domain business components
├── store/ # ~30 zustand stores — `ls` for the full set
└── ... # components, hooks, layout, libs, services, types, utils
アーキテクチャマップ
| レイヤー | 場所 |
|---|---|
| UI コンポーネント | src/components、src/features |
| SPA ページ | src/routes/ |
| React Router | src/spa/router/ |
| グローバルプロバイダー | src/layout |
| Zustand ストア | src/store |
| クライアントサービス | src/services/ |
| REST API | src/app/(backend)/webapi |
| tRPC ルーター | apps/server/src/routers/{async|lambda|mobile|tools} |
| サーバーサービス | apps/server/src/services(DB にアクセス可能) |
| サーバーモジュール | apps/server/src/modules(DB へのアクセスなし) |
| 機能フラグ | apps/server/src/featureFlags |
| グローバル設定 | apps/server/src/globalConfig |
| DB スキーマ | packages/database/src/schemas |
| DB モデル | packages/database/src/models |
| DB リポジトリ | packages/database/src/repositories |
| サードパーティ | src/libs(分析、OIDC など) |
| 組み込みツール | packages/builtin-tool-*、packages/builtin-tools |
| オープンソーススタブ | src/business/*、packages/business/*(このリポジトリ) |
データフロー
React UI → Store Actions → Client Service → TRPC Lambda → Server Services → DB Model → PostgreSQL
クラウドリポジトリとの関係について
このオープンソースリポジトリは、lobehub/ にマウントされた Git サブモジュールとして、別の非公開クラウド(SaaS)リポジトリで使用されています。クラウドリポジトリには、次のものが含まれます。
- ここに含まれるスタブを上書きする
src/business/{client,server}とpackages/business/*の実装。 - クラウド専用のルート(例:
(cloud)/、embed/)、クラウド専用のストア(例:subscription/)、クラウド専用の TRPC ルーター(課金、予算、リスク制御など)、およびsrc/app/(backend)/cron/配下の Vercel cron ルート。 - クラウドでのファイル解決順序:
@/store/x→ まずクラウドのsrc/store/x、次にlobehub/packages/store/src/x、最後にlobehub/src/store/xの順です。クラウド側のオーバーライドが優先されます。
このリポジトリ単独で作業する場合は、クラウド層を無視してください。ここでは、src/business/ と packages/business/ のスタブが信頼できる情報源です。