PluginBench
Skill
Pass
Audit score 90

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-overview
Claude Code
Cursor
Windsurf
Cline

How to use project-overview

  1. 1.Reference the Monorepo Layout section to understand the directory structure: apps/, packages/, src/
  2. 2.Use the Architecture Map table to locate specific layers (UI, stores, services, API, database)
  3. 3.Check the Complete Tech Stack table to understand the technologies used in each category
  4. 4.Review the Data Flow diagram to understand how data moves through the system
  5. 5.Consult the Note section to understand how open-source stubs relate to the private cloud repo

Use cases

Good for
  • 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
Who it's for
  • 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

Where do I add a new UI component?

Add UI components to src/components/ for reusable components or src/features/ for domain-specific business components.

Where is the database schema defined?

Database schema is in packages/database/src/schemas. Models are in packages/database/src/models, and repositories in packages/database/src/repositories.

How do I add a new API endpoint?

REST endpoints go in src/app/(backend)/webapi. Type-safe tRPC routers are in apps/server/src/routers/ (async, lambda, mobile, or tools subdirectories).

What are the 'business' stubs and why do they exist?

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.

Where do I add global state?

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 — run ls against 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

CategoryTechnology
FrameworkNext.js 16 + React 19
RoutingSPA inside Next.js with react-router-dom
LanguageTypeScript
UI Components@lobehub/ui, antd
CSS-in-JSantd-style
Iconslucide-react, @ant-design/icons
i18nreact-i18next
Statezustand
URL Paramsnuqs
Data FetchingSWR
React HooksaHooks
Date/Timedayjs
Utilitieses-toolkit
APITRPC (type-safe)
DatabaseNeon PostgreSQL + Drizzle ORM
TestingVitest

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

LayerLocation
UI Componentssrc/components, src/features
SPA Pagessrc/routes/
React Routersrc/spa/router/
Global Providerssrc/layout
Zustand Storessrc/store
Client Servicessrc/services/
REST APIsrc/app/(backend)/webapi
tRPC Routersapps/server/src/routers/{async|lambda|mobile|tools}
Server Servicesapps/server/src/services (can access DB)
Server Modulesapps/server/src/modules (no DB access)
Feature Flagsapps/server/src/featureFlags
Global Configapps/server/src/globalConfig
DB Schemapackages/database/src/schemas
DB Modelpackages/database/src/models
DB Repositorypackages/database/src/repositories
Third-partysrc/libs (analytics, oidc, etc.)
Builtin Toolspackages/builtin-tool-*, packages/builtin-tools
Open-source stubsrc/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} and packages/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 under src/app/(backend)/cron/.
  • File-resolution order in cloud: @/store/x → cloud src/store/x first, then lobehub/packages/store/src/x, then lobehub/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.