project-overview
lobehub/lobehub
Navigate LobeHub's monorepo structure: locate code layers, understand app/package layout, and onboard to the repository.
What is project-overview?
A curated architecture map of the LobeHub open-source monorepo. Use this skill to understand the project structure, locate key directories (apps/, packages/, src/), identify technology layers, and navigate the codebase when onboarding or making architectural decisions.
- Maps monorepo layout: apps/, packages/, src/ directories and their purposes
- Documents complete tech stack: Next.js 16, React 19, TypeScript, Zustand, tRPC, PostgreSQL, Drizzle ORM
- Identifies key packages: agent-runtime, builtin-tools, model-runtime, database, business stubs
- Explains data flow: React UI → Store → Client Service → tRPC → Server Services → DB → PostgreSQL
- Locates architectural layers: UI components, SPA pages, routers, stores, services, API endpoints, database schema
- Clarifies relationship between open-source repo and private cloud repo overrides
How to install project-overview
npx skills add https://github.com/lobehub/lobehub --skill project-overviewHow to use project-overview
- 1.Reference the Monorepo Layout section to understand the directory structure: apps/, packages/, src/
- 2.Use the Architecture Map table to locate specific layers (UI, stores, services, API, database)
- 3.Check the Complete Tech Stack table to understand the technologies used in each category
- 4.Review the Data Flow diagram to understand how data moves through the system
- 5.Consult the Note section to understand how open-source stubs relate to the private cloud repo
Use cases
- Onboarding new developers to understand LobeHub's monorepo structure and file organization
- Locating where to add new features: finding the right layer (UI, store, service, API, database)
- Understanding the tech stack when evaluating dependencies or making architectural decisions
- Navigating between frontend (src/) and backend (apps/server/) code during full-stack development
- Identifying open-source stubs in src/business/ and packages/business/ that are overridden by the cloud repo
- New developers onboarding to the LobeHub project
- Full-stack engineers working across frontend and backend layers
- Architects evaluating the monorepo structure and technology choices
- Contributors locating where to implement features or fixes
project-overview FAQ
Add UI components to src/components/ for reusable components or src/features/ for domain-specific business components.
Database schema is in packages/database/src/schemas. Models are in packages/database/src/models, and repositories in packages/database/src/repositories.
REST endpoints go in src/app/(backend)/webapi. Type-safe tRPC routers are in apps/server/src/routers/ (async, lambda, mobile, or tools subdirectories).
Open-source stubs in src/business/ and packages/business/ are placeholder implementations overridden by the private cloud repo. When working in this repo alone, treat these stubs as the source of truth.
Global state is managed with Zustand stores in src/store/. Run ls to see the full set of existing stores.
Full instructions (SKILL.md)
Source of truth, from lobehub/lobehub.
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/lobehub and the wider catalog.

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

store-data-structures
LobeHub Zustand store data-shape patterns. Use when designing store state, list/detail splits, normalized maps, reducers, messagesMap, topicsMap, or choosing shared type sources.

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

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

upstash-workflow
LobeHub Upstash Workflow and QStash guide. Use for async workflows, process/paginate/execute fan-out, serve handlers, context.run/call/sleep, or workflow triggers.

version-release
Version release workflow — release process and GitHub Release notes (not docs/changelog pages).