project-overview
lobehub/lobe-chat
LobeHub monorepo architecture map for navigating code layers, packages, and project structure.
What is project-overview?
A curated reference guide to the LobeHub open-source AI Agent Workspace monorepo layout, tech stack, and architectural layers. Use this skill when onboarding to the repository, locating specific code modules, understanding the Next.js + React + TypeScript architecture, or navigating the apps/packages/src directory structure.
- Maps key directory locations across apps/, packages/, and src/ without exhaustive enumeration
- Documents the complete tech stack (Next.js 16, React 19, TypeScript, Zustand, tRPC, PostgreSQL, Drizzle ORM)
- Explains the data flow from React UI through stores, services, tRPC, and database layers
- Identifies open-source stubs in src/business/ and packages/business/ that are overridden by the cloud repo
- Provides routing architecture details (SPA with react-router-dom inside Next.js)
- Lists ~80 workspace packages and their purposes (agent-runtime, builtin-tools, model-runtime, database, etc.)
How to install project-overview
npx skills add https://github.com/lobehub/lobe-chat --skill project-overviewHow to use project-overview
- 1.Run `npx skills add https://github.com/lobehub/lobe-chat --skill project-overview` to install the skill
- 2.Reference the monorepo layout section to locate code by category (apps/, packages/, src/)
- 3.Use the architecture map table to find which directory handles your concern (UI, routing, stores, API, database)
- 4.Check the tech stack table for exact library versions in the root package.json
- 5.Understand that src/business/ and packages/business/ contain open-source stubs overridden by the cloud repo
Use cases
- Onboarding a new developer to understand the monorepo structure and find where to make changes
- Locating where a feature lives (e.g., finding Zustand stores in src/store/, tRPC routers in apps/server/src/routers/)
- Understanding the data flow from UI components through services to the database
- Identifying which packages handle agent runtime, model definitions, or builtin tools
- Navigating between open-source stubs and understanding where the cloud repo overrides them
- Developers onboarding to the LobeHub open-source repository
- Contributors looking to understand the monorepo layout and architecture
- Maintainers working across multiple apps (CLI, desktop, server) and packages
- Teams integrating LobeHub as a submodule or understanding its cloud/open-source split
project-overview FAQ
The main backend lives in apps/server/src/ with routers, services, modules, featureFlags, and globalConfig. Standalone Hono pieces are in src/server/.
Global state uses Zustand stores located in src/store/ (~30 stores). Check that directory for the full list of available stores.
Both contain open-source stubs that are overridden by implementations in the private cloud repo. When working in the open-source repo alone, these stubs are the source of truth.
All database code is in packages/database/src/ with separate directories for schemas, models, and repositories.
Each tool has its own package (packages/builtin-tool-*) and they are composed together in packages/builtin-tools/ for central registration.
Full instructions (SKILL.md)
Source of truth, from lobehub/lobe-chat.
name: project-overview description: 'LobeHub open-source monorepo architecture map. Use when locating code layers, understanding apps/packages/src layout, business stubs, project structure, or onboarding to the repository.' user-invocable: false
LobeHub Project Overview
The directory listings below are a curated map of key locations, not an exhaustive tree.
packages/,src/store/, route groups etc. grow over time — runlsagainst the real directory for the current set.
Project Description
Open-source, modern-design AI Agent Workspace: LobeHub (previously LobeChat).
This repo is the open-source root (github.com/lobehub/lobehub, package @lobehub/lobehub).
Supported platforms:
- Web desktop/mobile
- Desktop (Electron) —
apps/desktop - Mobile app (React Native) — separate repo, already launched (not in this monorepo)
Logo emoji: 🤯
Complete Tech Stack
| Category | Technology |
|---|---|
| Framework | Next.js 16 + React 19 |
| Routing | SPA inside Next.js with react-router-dom |
| Language | TypeScript |
| UI Components | @lobehub/ui, antd |
| CSS-in-JS | antd-style |
| Icons | lucide-react, @ant-design/icons |
| i18n | react-i18next |
| State | zustand |
| URL Params | nuqs |
| Data Fetching | SWR |
| React Hooks | aHooks |
| Date/Time | dayjs |
| Utilities | es-toolkit |
| API | TRPC (type-safe) |
| Database | Neon PostgreSQL + Drizzle ORM |
| Testing | Vitest |
Exact versions live in the root
package.json— check there, not here.
Monorepo Layout
Flat layout — apps/, packages/, and src/ all sit at the repo root. No
git submodules.
(repo root)
├── apps/
│ ├── cli/ # LobeHub CLI
│ ├── desktop/ # Electron desktop app
│ ├── device-gateway/ # Device gateway service
│ └── server/ # Next.js-backed server: featureFlags, globalConfig, modules, routers, services, utils, workflows (`@/server/*` alias)
├── 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}
│ ├── 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
│ └── [variants]/(auth)/ # Auth pages (SSR required)
├── routes/ # SPA page segments (thin — delegate to features/)
│ └── (main)/ (mobile)/ (desktop)/ (popup)/ 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
├── server/ # standalone-Hono server pieces only: agent-hono, workflows-hono (main backend lives in `apps/server`)
└── ... # components, hooks, layout, libs, locales, services, types, utils
Architecture Map
| Layer | Location |
|---|---|
| UI Components | src/components, src/features |
| SPA Pages | src/routes/ |
| React Router | src/spa/router/ |
| Global Providers | src/layout |
| Zustand Stores | src/store |
| Client Services | src/services/ |
| REST API | src/app/(backend)/webapi |
| tRPC Routers | apps/server/src/routers/{async|lambda|mobile|tools} |
| Server Services | apps/server/src/services (can access DB) |
| Server Modules | apps/server/src/modules (no DB access) |
| Feature Flags | apps/server/src/featureFlags |
| Global Config | apps/server/src/globalConfig |
| DB Schema | packages/database/src/schemas |
| DB Model | packages/database/src/models |
| DB Repository | packages/database/src/repositories |
| Third-party | src/libs (analytics, oidc, etc.) |
| Builtin Tools | packages/builtin-tool-*, packages/builtin-tools |
| Open-source stub | src/business/*, packages/business/* (this repo) |
Data Flow
React UI → Store Actions → Client Service → TRPC Lambda → Server Services → DB Model → PostgreSQL
Note: Relationship to the Cloud Repo
This open-source repo is consumed by a separate, private cloud (SaaS) repo
as a git submodule mounted at lobehub/. The cloud repo provides:
src/business/{client,server}andpackages/business/*implementations that override the stubs shipped here.- Cloud-only routes (e.g.
(cloud)/,embed/), cloud-only stores (e.g.subscription/), cloud-only TRPC routers (billing, budget, risk control, …), and Vercel cron routes undersrc/app/(backend)/cron/. - File-resolution order in cloud:
@/store/x→ cloudsrc/store/xfirst, thenlobehub/packages/store/src/x, thenlobehub/src/store/x. Cloud override wins.
When working in this repo alone, ignore the cloud layer — the stubs in
src/business/ and packages/business/ are the source of truth here.
Related skills
More from lobehub/lobe-chat and the wider catalog.

react
LobeHub React component conventions for TSX UI, styling, routing, and state management.

testing
Vitest testing guide for writing, fixing, and debugging tests in LobeHub projects.

typescript
LobeHub TypeScript style and type-safety guide for consistent, type-safe code.

zustand
LobeHub Zustand state management conventions for store slices, actions, and optimistic updates.

add-provider-doc
Add documentation for a new AI provider with usage guides, environment variables, Docker config, and image resources.

add-setting-env
Add server-side environment variables to control default values for user settings.