Skip to content
Gains Summary
Main Navigation 首页 / Home
C++ 编程 / C++ Programming
系统与高性能 / Systems & Performance
Web 开发 / Web Development
人工智能 / Artificial Intelligence
工业软件 / Industrial Software
其他内容 / Other Topics
C++ 编程 / C++系统与性能 / SystemsWeb 开发 / Web人工智能 / AI工业软件 / Industrial

外观

Sidebar Navigation

← 人工智能 / Artificial Intelligence

智能体工程 / Agent Engineering

1. Agent 工程体系全景 / Agent Engineering System Overview

2. Function Calling - 让 LLM 具备行动能力 / Function Calling for Giving LLMs the Ability to Act

3. Agent 框架演进 - 从裸 SDK 到 LangGraph / The Evolution of Agent Frameworks from Raw SDKs to LangGraph

4. RAG 基础 - 让 Agent 拥有"知识" / Retrieval-Augmented Generation Fundamentals for Agent Knowledge

5. 记忆管理 - Agent 的大脑 / Memory Management as the Brain of an Agent

6. Agent 工作流 - 从单步到复杂的执行编排 / Agent Workflows from Single Steps to Complex Orchestration

7. 多 Agent 系统 - 多个 Agent 协作 / Multi-Agent Systems and Agent Collaboration

8. RAG 进阶 - 企业级知识库实战 / Advanced RAG for Enterprise Knowledge Bases

9. 真实 Agent 应用场景 / Real-World AI Agent Applications

10. Structured Output - 让 LLM 输出可控的结构化数据 / Structured Output for Controllable, Machine-Readable LLM Responses

11. Tools Design Best Practices - AI Agent 工具设计最佳实践 / Tools Design Best Practices for AI Agents

12. Agent 架构模式 - 从单 Agent 到多 Agent 的工程范式 / Agent Architecture Patterns

13. Agent Modes — 编程 Agent 的交互模式设计 / Designing Interaction Modes for Coding Agents

14. Agent Workflow 编排:从循环到持久化执行的演进

15. Context Engineering - 从 Prompt 设计到上下文编排 / Context Engineering: From Prompt Design to Context Orchestration

16. Agent 缓存工程:从 KV Cache、Prompt Cache 到语义缓存 / Agent Caching Engineering

17. Harness Engineering, Skills, and Loop Engineering — 从信任模型到验证系统 / From Trusting Models to Verifying Systems

18. MCP 协议 - AI 工具的"USB 接口" / Model Context Protocol for AI Tool Integration

19. Agent 评估与测试 — 如何衡量一个"不可预测"的系统 / Agent Evaluation and Testing — How to Measure an "Unpredictable" System

20. 安全沙箱 - Agent 的安全边界 / Secure Sandboxes as Agent Safety Boundaries

21. 权限与门卫 - Agent 的安全控制中枢 / Permissions and Policy Gates for Agent Control

22. API Key 管理与安全 - Agent 的密钥生命周期的管理 / API Key Lifecycle Management and Security for Agents

23. 提示词注入防护 - Agent 的防御前沿 / Prompt Injection Defense for AI Agents

24. 可观测性与调试 - Agent 运行的透明度保障 / Observability and Debugging for Transparent Agent Operations

25. 模型路由 - 让正确的模型做正确的事 / Model Routing for Matching Models to Tasks

26. OpenClaw 设计深度分析 - 为什么它让人觉得"活"了 / OpenClaw Design Analysis and the Illusion of Liveliness

27. Claude Code 泄露源码深度分析 - 512,000 行代码揭示的生产级 Agent 架构 / Claude Code Source Analysis and Production Agent Architecture

28. LobeChat 设计深度分析 - 全栈 Agent Chat 应用工程实践 / LobeChat Design Analysis and Full-Stack Agent Chat Engineering

29. 编程 Agent 全面对比:从 Claude Code 到 Pi 的设计哲学 / Coding Agents Comparison: Design Philosophies from Claude Code to Pi

30. 领域 Agent 的确定性工具编译与延迟执行——从自然语言规格到单次 CAE 提交

31. Agent 工程学习指南 / An AI Agent Engineering Learning Guide

本页目录

LobeChat 设计深度分析 - 全栈 Agent Chat 应用工程实践 / LobeChat Design Analysis and Full-Stack Agent Chat Engineering ​

📅 创建时间:2026-05-08 🏷️ 标签:#LobeChat #全栈 #Agent #ModelRuntime #RAG #多部署 📚 前置知识:[[00-agent-overview]]


前言 ​

在开源 AI Chat 应用领域,LobeChat 是一个独特的存在。

不同于 OpenClaw 的"存在感优先"架构,也不同于 Claude Code 的"工具执行"导向,LobeChat 解决了一个更实际的问题:如何让普通用户也能轻松部署一个功能完整的 AI Chat 应用,同时支持多模型、多 Agent、插件、知识库。

到 2026 年初,LobeChat 在 GitHub 上拥有超过 75,000 颗星,配套的 Agent 市场仓库 lobe-chat-agents 超过 1,000 颗星。它的核心设计哲学是:做减法,让部署简单;做模块化,让功能可扩展。

本文基于对 LobeChat 源码架构文档的深度解析,剖析其关键技术设计。


第1部分:技术栈全景 ​

1.1 核心数据 ​

┌─────────────────────────────────────────────────────────────┐
│                    LobeChat 关键数据                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  GitHub Stars:        75,643                              │
│  Fork 数:           14,990                               │
│  Agent 市场仓库 Stars: 1,051                               │
│  TypeScript 覆盖率:   98.7%                               │
│                                                             │
│  支持 AI Provider:  25+                                   │
│  内置工具包:        10+                                   │
│  数据库 Migration:   75 次迭代                             │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.2 技术栈一览 ​

┌─────────────────────────────────────────────────────────────┐
│                    LobeChat 技术栈                           │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  前端:                                                    │
│  • Next.js 16 + React 19                                │
│  • 混合路由:Next.js App Router(SSR)+ React Router( SPA)│
│  • Zustand(状态管理,slice 模式)                         │
│  • SWR + tRPC(数据获取)                                 │
│  • Ant Design + @lobehub/ui                             │
│  • TanStack Query v5                                    │
│  • i18next(国际化,25 种语言)                            │
│                                                             │
│  后端:                                                    │
│  • Node.js 24                                            │
│  • tRPC Server(类型安全的 RPC)                          │
│  • Better Auth(认证:邮箱/密码 + SSO)                    │
│  • Drizzle ORM                                          │
│                                                             │
│  数据库 & 存储:                                          │
│  • PostgreSQL 17 + PGVector(向量检索)                   │
│  • Redis(缓存)                                         │
│  • S3 存储(文件)                                       │
│  • PGlite WASM(桌面端本地数据库)                       │
│                                                             │
│  AI & Agent:                                            │
│  • @lobechat/model-runtime(25+ AI Provider 抽象)       │
│  • @lobechat/agent-runtime(Agent 编排 + 流式)          │
│  • MCP SDK(Model Context Protocol 支持)                  │
│  • Langfuse(可观测性)                                   │
│                                                             │
│  部署:                                                   │
│  • Docker(四阶段构建)                                    │
│  • Vercel(Serverless)                                  │
│  • Electron(桌面应用)                                   │
│  • PWA(离线支持)                                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

第2部分:Monorepo 结构 ​

2.1 包组织 ​

LobeChat 采用 pnpm monorepo 结构,核心包分为三类:

┌─────────────────────────────────────────────────────────────┐
│                    LobeChat Monorepo 结构                     │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  packages/ 下的核心业务包:                                 │
│                                                             │
│  模型运行时:                                              │
│  • @lobechat/model-runtime                               │
│    → 统一抽象 25+ AI Provider(OpenAI / Anthropic / ...)  │
│                                                             │
│  Agent 运行时:                                            │
│  • @lobechat/agent-runtime                               │
│    → Agent 编排、工具调用、流式响应                          │
│                                                             │
│  数据库:                                                  │
│  • @lobechat/database                                    │
│    → Drizzle ORM,PostgreSQL/PGlite 统一接口               │
│                                                             │
│  内置工具包:                                             │
│  • @lobechat/builtin-tool-* (10+ 个)                    │
│    → Agent Builder / Web 浏览器 / 知识库 / 记忆             │
│                                                             │
│  上下文 & 会话:                                          │
│  • @lobechat/context-engine  → 上下文剪枝、压缩            │
│  • @lobechat/conversation-flow → 多 Agent 编排              │
│                                                             │
│  应用入口:                                                │
│  • src/app  → Next.js Web 应用                           │
│  • apps/desktop → Electron 桌面应用                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2.2 包间依赖关系 ​

关键依赖链:

@lobechat/agent-runtime
  ├── @lobechat/model-runtime     → 发起 LLM 调用
  ├── @lobechat/context-engine   → 管理上下文
  └── @lobechat/database         → 存储消息/会话

src/app(Next.js)
  ├── @lobechat/agent-runtime   → Agent 功能
  ├── @lobechat/database        → 数据持久化
  ├── @lobechat/builtin-tool-*  → 工具能力
  └── Zustand stores             → 前端状态

apps/desktop(Electron)
  ├── src/app                   → 复用 Next.js 代码
  ├── @lobechat/desktop-bridge → IPC 通信
  └── PGlite                     → 本地数据库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

第3部分:三层部署面——同一个代码库,三个入口 ​

3.1 客户端三层架构 ​

LobeChat 最有特色的设计之一:同一套 React 代码库,通过不同的入口和服务适配,支持三种部署模式。

┌─────────────────────────────────────────────────────────────┐
│                    LobeChat 三层部署面                        │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  Web 应用(Next.js SSR)                                  │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ src/app 入口                                         │   │
│  │ 通过浏览器访问,支持服务端渲染                        │   │
│  │ → Vercel / Docker 部署                            │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  PWA(Service Worker)                                    │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ Serwist(Workbox 替代品)                            │   │
│  │ 可安装、离线使用、后台运行                           │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  桌面应用(Electron)                                     │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ apps/desktop 入口                                    │   │
│  │ Next.js 静态导出 + Electron 包装                    │   │
│  │ PGlite WASM 作为本地数据库                        │   │
│  │ → macOS / Windows / Linux 桌面客户端              │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  三层共享同一套 React 组件                                 │
│  但数据持久化策略不同:                                   │
│  • Web:PostgreSQL + Redis                              │
│  • PWA:同上,但支持离线缓存                             │
│  • Desktop:PGlite WASM(完全本地,无网络依赖)           │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

3.2 PGlite 的本地优先设计 ​

PGlite = PostgreSQL 编译为 WebAssembly,在浏览器/Electron 中运行完整 PostgreSQL。

┌─────────────────────────────────────────────────────────────┐
│                    PGlite vs 传统本地存储                      │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  传统方案(LocalStorage / IndexedDB):                     │
│  ❌ 没有事务支持                                          │
│  ❌ 没有外键约束                                          │
│  ❌ 没有向量检索                                          │
│  ❌ SQL 支持残缺                                          │
│                                                             │
│  PGlite:                                                │
│  ✅ 完整 PostgreSQL(事务、约束、索引)                    │
│  ✅ PGVector(向量检索)                                  │
│  ✅ 与服务器端 schema 完全兼容                             │
│  ✅ 零配置,不需要安装数据库服务                          │
│                                                             │
│  关键洞察:                                               │
│  LobeChat 的服务器版和桌面版共享同一个 Drizzle schema。    │
│  切换部署模式不需要改一行代码。                          │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

第4部分:Model Runtime——25+ AI Provider 的统一抽象 ​

4.1 Provider 抽象层 ​

LobeChat 的 @lobechat/model-runtime 为所有 AI Provider 提供了统一接口:

┌─────────────────────────────────────────────────────────────┐
│                    Model Runtime 架构                        │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  对外统一接口:                                            │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ interface LobeAI {                                 │   │
│  │   chat(messages, options): Promise<ChatResult>      │   │
│  │   embeddings(texts): Promise<EmbeddingsResult>      │   │
│  │   models(): Promise<Model[]>                         │   │
│  │ }                                                   │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  实现层:                                                │
│  ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌──────────┐│
│  │LobeOpenAI │ │LobeAnthropic│LobeGoogle│  │LobeAzure ││
│  │LobeOllama │ │ LobeGroq   │LobeDeepseek│ │LobeClaude ││
│  │  ...      │ │  ...      │  ...      │  │  ...    ││
│  └────────────┘ └────────────┘ └────────────┘ └──────────┘│
│                                                             │
│  每个 Provider 实现统一的接口,但底层调用各自 SDK:        │
│  OpenAI SDK v4 / Anthropic SDK / Google GenAI / ...      │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.2 模型列表自定义 ​

LobeChat 支持通过配置文件自定义可用模型列表:

┌─────────────────────────────────────────────────────────────┐
│                    模型列表配置                             │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  # 环境变量配置(支持 CDN URL 或本地文件)                  │
│  OPENAI_MODEL_LIST=https://your-cdn.com/model-list.json    │
│  ANTHROPIC_MODEL_LIST=https://your-cdn.com/model-list.json │
│                                                             │
│  模型列表 JSON 格式:                                    │
│  {                                                       │
│    "provider": "openai",                                 │
│    "models": [                                           │
│      {                                                    │
│        "id": "gpt-4o",                                  │
│        "name": "GPT-4o",                                  │
│        "enabled": true,                                  │
│        "description": {                                    │
│          "zh_CN": "最新最强模型",                         │
│          "en_US": "Latest flagship model"                 │
│        },                                                 │
│        "abilities": {                                    │
│          "vision": true,                                 │
│          "functionCall": true,                           │
│          "streaming": true                               │
│        }                                                  │
│      }                                                    │
│    ]                                                     │
│  }                                                       │
│                                                             │
│  亮点:每个模型的描述支持多语言国际化                    │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

第5部分:Agent Runtime——工具编排与流式响应 ​

5.1 Agent 执行流程 ​

┌─────────────────────────────────────────────────────────────┐
│                    Agent Runtime 执行流程                     │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  用户消息 → 构建 Prompt → LLM 调用                          │
│                      ↓                                      │
│              解析 Tool Calls                                │
│                      ↓                                      │
│         ┌─────────┴─────────┐                              │
│         ↓                   ↓                              │
│    不需要工具          需要工具                            │
│         ↓                   ↓                              │
│      返回文本        工具执行                               │
│                             ↓                              │
│                    ┌─────┴─────┐                          │
│                    ↓             ↓                         │
│               内置工具        MCP 工具                     │
│                    ↓             ↓                          │
│                    └───┬─────┘                            │
│                        ↓                                   │
│                    结果返回 LLM                             │
│                        ↓                                   │
│                    流式输出给用户                           │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

5.2 流式响应架构 ​

LobeChat 使用 Server-Sent Events(SSE) 实现流式响应:

┌─────────────────────────────────────────────────────────────┐
│                    SSE 流式响应链路                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  LLM(Streaming API)                                      │
│       ↓                                                    │
│  Agent Runtime                                            │
│       ↓ SSE events                                        │
│  tRPC Router                                             │
│       ↓ SSE events                                        │
│  Next.js API Route                                        │
│       ↓ SSE events                                        │
│  前端(ReadableStream)                                    │
│       ↓                                                    │
│  React 组件流式渲染(打字机效果)                         │
│                                                             │
│  支持的 event 类型:                                      │
│  • text.delta  → 文本增量                                │
│  • tool.call   → 工具调用                               │
│  • tool.result → 工具返回                               │
│  • reasoning.delta → 推理过程(Claude)                  │
│  • done        → 完成                                    │
│  • error       → 错误                                   │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

第6部分:插件系统——MCP 支持 ​

6.1 MCP 集成 ​

LobeChat 全面支持 Model Context Protocol(MCP),这是一个让 AI 模型与外部工具交互的标准协议:

┌─────────────────────────────────────────────────────────────┐
│                    MCP 集成架构                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  MCP SDK (@modelcontextprotocol/sdk)                       │
│       ↓                                                    │
│  MCP Server 定义工具                                       │
│       ↓ JSON-RPC                                         │
│  LobeChat Agent Runtime                                   │
│       ↓ 转换为统一工具接口                                │
│  LLM 看到的是标准化工具                                   │
│                                                             │
│  内置 MCP 工具示例:                                      │
│  • @lobechat/builtin-tool-memory                        │
│    → 用户记忆搜索                                        │
│  • @lobechat/builtin-tool-knowledge                     │
│    → 知识库检索                                         │
│  • @lobechat/builtin-tool-web-search                    │
│    → 网页搜索                                           │
│  • @lobechat/builtin-tool-file                          │
│    → 文件读取                                           │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

6.2 LobeHub Agent 市场 ​

LobeChat 配套的 lobe-chat-agents 仓库收录了大量预配置的 Agent 提示词,支持一键导入:

格式:AGENTS.md

---
name: 翻译助手
role: 专业翻译
description: ...
tools: [file, web_search]
---
# 角色定义
你是一个专业翻译...

---
name: 代码审查
role: ...
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

第7部分:知识库与 RAG ​

7.1 RAG 管道 ​

┌─────────────────────────────────────────────────────────────┐
│                    LobeChat RAG 管道                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  文件上传                                                   │
│      ↓                                                      │
│  文件解析(PDF / Markdown / TXT / HTML / DOCX)           │
│      ↓                                                      │
│  文本分割(Chunking)                                     │
│      ↓                                                      │
│  Embedding 生成(调用 LLM 的 embedding API)              │
│      ↓                                                      │
│  存入 PostgreSQL + PGVector                               │
│      ↓                                                      │
│  检索时:Query Embedding → 向量相似度搜索                 │
│      ↓                                                      │
│  检索结果 + 用户问题 → LLM → 生成回答                    │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

7.2 数据库中的 RAG 表结构 ​

┌─────────────────────────────────────────────────────────────┐
│                    RAG 相关数据模型                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  files              → 上传的文件元数据                     │
│  documents         → 解析后的文档内容                       │
│  chunks            → 文本分块(document/file/message 三种来源)│
│  embeddings       → 向量数据(1024 维)+ 元信息           │
│  knowledge_bases  → 知识库定义                           │
│  knowledge_base_files → 知识库与文件的关联               │
│                                                             │
│  PGVector 能力:                                         │
│  • <-> L2 距离(欧氏距离)                              │
│  • <#> 内积距离                                          │
│  • <=> 余弦距离                                          │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

第8部分:用户记忆系统——六维记忆架构 ​

8.1 六维记忆 ​

LobeChat 实现了一个六维用户记忆系统,每种记忆类型都配有 PGVector 向量检索:

┌─────────────────────────────────────────────────────────────┐
│                    六维用户记忆系统                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  1. Activities(活动)                                    │
│     → 时间范围内发生的事件                                 │
│     例:用户上周在学习 Python                              │
│                                                             │
│  2. Contexts(上下文)                                   │
│     → 目标和项目                                          │
│     例:用户正在准备面试                                   │
│                                                             │
│  3. Experiences(经历)                                  │
│     → 学到的东西和互动记录                                 │
│     例:用户之前用过 React                                 │
│                                                             │
│  4. Identities(身份)                                   │
│     → 人物和关系                                          │
│     例:用户的项目经理是张总                               │
│                                                             │
│  5. Preferences(偏好)                                  │
│     → 喜好和指令                                          │
│     例:用户喜欢简洁的回答                                 │
│                                                             │
│  6. Personas(人格)                                    │
│     → 用户的人格画像                                      │
│     例:用户比较严谨,喜欢有数据支撑的分析                 │
│                                                             │
│  每种记忆都支持向量检索(语义相似度匹配)                 │
│  Agent 可以主动检索记忆,在对话中引用                      │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

8.2 记忆与上下文的区别 ​

记忆(User Memory)    vs    上下文(Context)
用户维度的长期知识     vs    当前会话的状态
跨会话持久化          vs    会话内临时
Agent 主动检索        vs    自动注入
向量检索              vs    直接引用
1
2
3
4
5

第9部分:状态管理——Zustand + 双持久化 ​

9.1 多 Store 架构 ​

LobeChat 的前端状态管理采用 Zustand,每个领域独立 Store:

┌─────────────────────────────────────────────────────────────┐
│                    Zustand Store 划分                       │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  useGlobalStore   → 全局 UI 状态(侧边栏、面板、主题)     │
│                                                             │
│  useChatStore    → 对话状态                               │
│  ├── messages    → 消息 Map                              │
│  ├── topics     → 会话话题                               │
│  ├── plugin     → 插件状态                               │
│  └── operation  → 操作上下文追踪                          │
│                                                             │
│  useAgentStore   → Agent 配置                            │
│  useFileStore    → 文件上传状态                           │
│  useKnowledgeStore → 知识库状态                          │
│  useAIInfraStore → AI Provider 状态                      │
│                                                             │
│  设计原则:                                               │
│  • Store 之间不相互引用,通过 selector 读取               │
│  • Store 不直接调用 API,通过 service 层                 │
│  • 操作上下文追踪(operation context)确保并发安全         │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

9.2 双持久化策略 ​

┌─────────────────────────────────────────────────────────────┐
│                    双持久化架构                             │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  LocalStorage(UI 状态)                                   │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ SystemStatus(面板宽度、主题、语言偏好)                │   │
│  │ • 立即持久化到浏览器 LocalStorage                    │   │
│  │ • 页面刷新后恢复                                  │   │
│  │ • 无需网络                                        │   │
│  └─────────────────────────────────────────────────────┘   │
│                          ↓                                 │
│  数据库(应用数据)                                       │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ messages / sessions / topics / agents / files        │   │
│  │ • 通过 service 层异步写入数据库                     │   │
│  │ • Optimistic Update(乐观更新)                     │   │
│  │ • 乐观更新失败 → 自动回滚                         │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  SWR 的 stale-while-revalidate 机制:                    │
│  • 先显示缓存数据(stale)                               │
│  • 后台发起请求验证(revalidate)                        │
│  • 多个组件请求同一数据 → 自动去重(只发一次请求)       │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

9.3 乐观更新实现 ​

┌─────────────────────────────────────────────────────────────┐
│                    乐观更新流程                             │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  用户发送消息                                               │
│      ↓                                                      │
│  1. 立即更新 UI(添加"pending"状态的消息)               │
│      ↓                                                      │
│  2. 发送 API 请求到服务器                                 │
│      ↓                                                      │
│  ┌─────────────┴─────────────┐                            │
│  ↓                           ↓                            │
│  成功                        失败                          │
│  ↓                           ↓                            │
│  替换为服务器返回的消息     自动回滚 UI                   │
│  触发 SWR 重新验证         提示用户重试                   │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

第10部分:认证与授权 ​

10.1 Better Auth 认证系统 ​

LobeChat 使用 Better Auth 作为认证框架,支持:

┌─────────────────────────────────────────────────────────────┐
│                    认证能力                                 │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  本地认证:                                              │
│  • 邮箱 + 密码                                          │
│  • Passkey(WebAuthn)                                   │
│  • 双因素认证(2FA)                                    │
│                                                             │
│  SSO(单点登录):                                       │
│  • OAuth 2.0(GitHub / Google / Apple / ...)           │
│  • OIDC                                                  │
│  • 企业 SSO(通过 Casdoor)                              │
│                                                             │
│  数据库表:                                              │
│  • accounts         → OAuth 账户关联                    │
│  • auth_sessions    → 会话管理                         │
│  • passkey          → Passkey 凭证                     │
│  • two_factor       → 2FA 配置                         │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

10.2 RBAC 授权 ​

基于角色的访问控制:

┌─────────────────────────────────────────────────────────────┐
│                    角色与权限                               │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  管理员:                                                 │
│  • 管理所有用户                                          │
│  • 配置系统设置                                          │
│  • 管理知识库                                            │
│                                                             │
│  普通用户:                                              │
│  • 创建和使用自己的 Agent                                │
│  • 上传和管理文件                                       │
│  • 创建知识库                                            │
│                                                             │
│  访客(无登录):                                       │
│  • 使用基础对话功能                                      │
│  • 受限的 Agent/知识库访问                              │
│                                                             │
│  ACCESS_CODE(访问码):                                 │
│  用于无数据库模式下的简单访问控制                        │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

第11部分:多 Agent 协作 ​

11.1 群组聊天模式 ​

┌─────────────────────────────────────────────────────────────┐
│                    多 Agent 协作模式                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  单 Agent 模式                                            │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ User ↔ Agent                                        │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  群组 Agent 模式                                         │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ User ↔ Agent A ↔ Agent B ↔ Agent C                 │   │
│  │       ↕ Supervisor(监督者)                          │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  数据库表:                                              │
│  • chat_groups         → 群组定义                        │
│  • chat_groups_agents   → 群组与 Agent 的关联            │
│  • agent_cron_jobs     → 定时 Agent 任务                 │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

第12部分:部署架构 ​

12.1 三种部署模式对比 ​

┌─────────────────────────────────────────────────────────────┐
│                    部署模式对比                             │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  │ 方面          │ Vercel       │ Docker Compose │ Electron │
│  ├───────────────┼──────────────┼───────────────┼──────────┤
│  │ 数据库        │ Vercel Postgres│ PostgreSQL   │ PGlite   │
│  │ 缓存          │ Vercel KV/Redis│ Redis        │ 内存     │
│  │ 文件存储      │ Vercel Blob   │ MinIO/S3    │ 本地文件系统│
│  │ 认证          │ Better-Auth   │ Better-Auth + Casdoor│ 云同步(可选)│
│  │ 扩缩容        │ 自动          │ 手动水平扩展  │ 单用户   │
│  │ 适用          │ 快速上线      │ 企业自托管    │ 离线/隐私│
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14

12.2 Docker 四阶段构建 ​

┌─────────────────────────────────────────────────────────────┐
│                    Docker 四阶段构建                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  Stage 1: base (node:24-slim)                            │
│  ├── 安装系统依赖                                         │
│  ├── 准备 distroless 文件                                │
│  └── 设置 proxychains                                    │
│                                                             │
│  Stage 2: builder (FROM base)                            │
│  ├── 安装 pnpm 和工作区依赖                               │
│  ├── 构建 Next.js(standalone output)                   │
│  └── 准备数据库迁移脚本                                   │
│                                                             │
│  Stage 3: app (busybox:latest)                          │
│  ├── 从 builder 复制 standalone 输出                      │
│  ├── 复制数据库迁移文件                                  │
│  ├── 复制运行时依赖                                      │
│  └── 创建 nextjs 用户(UID 1001)                        │
│                                                             │
│  Stage 4: production (FROM scratch)                      │
│  ├── 复制 app 阶段的所有内容                             │
│  ├── 设置环境变量                                         │
│  ├── 暴露端口 3210                                       │
│  └── 入口:/bin/node /app/startServer.js                 │
│                                                             │
│  最终镜像:极简(无 shell,无包管理器)                   │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

第13部分:与 OpenClaw 和 Claude Code 的横向对比 ​

┌─────────────────────────────────────────────────────────────┐
│                    三项目横向对比                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  │ 维度           │ LobeChat     │ OpenClaw      │ Claude Code│
│  ├────────────────┼──────────────┼───────────────┼───────────┤
│  │ 定位           │ AI Chat 应用 │ 自主 Agent   │ 代码助手  │
│  │ GitHub Stars  │ 75K+       │ 180K+        │ 闭源       │
│  │ 技术栈         │ Next.js    │ Node.js/TypeScript│ TypeScript│
│  │ 模型抽象       │ 25+ Provider│ 1 (Claude)  │ 1 (Claude)│
│  │ 数据库         │ PostgreSQL +│ 文件(JSONL) │  文件      │
│  │               │ PGVector    │               │           │
│  │ 本地存储       │ PGlite WASM │ 原生文件系统  │ 原生文件系统│
│  │ 部署难度       │ 低(三键部署)│ 中           │ 仅 CLI    │
│  │ 多 Agent       │ 群组模式    │ 多 Agent +   │ AgentTool │
│  │               │             │  技能系统     │           │
│  │ RAG 能力       │ 完整 RAG   │ 无原生支持    │ 无        │
│  │ 用户记忆       │ 六维向量系统 │ Bootstrap 文件│ MEMORY.md │
│  │ 国际化         │ 25 种语言   │ 仅英文        │ 仅英文    │
│  │ 安全沙箱       │ 无(API Key 自管)│ Docker 三档│ bashSecurity│
│  │ 自主性         │ 低(被动响应)│ 高(心跳+  │ 中(用户触发)│
│  │               │             │  Cron 自调) │           │
│                                                             │
│  核心洞察:                                               │
│  • LobeChat = 最好用的 AI Chat 部署方案(用户体验优先)   │
│  • OpenClaw = 最自主的 Agent 平台(存在感优先)          │
│  • Claude Code = 最强的代码 Agent(Harness 优先)        │
│                                                             │
└─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

第14部分:核心设计启示 ​

启示1:Provider 抽象是标配 ​

如果你的 Agent 应用需要支持多模型,参考 LobeChat 的 @lobechat/model-runtime 模式:统一接口 + Provider 实现层。这样换模型只需要改配置,不用改代码。

启示2:本地优先不等于功能残缺 ​

PGlite 让桌面版拥有和服务器版一样的数据库能力(事务、向量检索、SQL)。本地优先不是功能降级,而是架构能力的平移。

启示3:Schema 就是文档 ​

LobeChat 用 Drizzle ORM 定义 schema,75 个 migration 完整记录了产品演进。Schema 是代码,是文档,是迁移脚本,是 TypeScript 类型——四件事做一件。

启示4:乐观更新是交互体验的基础 ​

聊天场景对延迟极度敏感。乐观更新 + 自动回滚 + SWR 重新验证的组合,让 UI 响应和服务器一致性可以兼得。

启示5:六维记忆比单维更实用 ​

用户记忆的六维划分(活动 / 上下文 / 经历 / 身份 / 偏好 / 人格)比一个通用的"记忆表"更实用。向量检索 + 领域知识的结合,让 Agent 能真正理解用户。


相关笔记 ​

  • [[00-agent-overview]] - Agent 整体学习路线
  • [[03-rag-basics]] - LobeChat 的 RAG 管道参考
  • [[04-memory-management]] - 六维记忆系统的设计参考
  • [[06-multi-agent]] - 多 Agent 群组模式参考
  • [[15-openclaw-design-analysis]] - OpenClaw 对比
  • [[16-claude-code-leak-analysis]] - Claude Code 对比

学习状态:🟡 开始学习

最后更新于:

Pager
上一篇27. Claude Code 泄露源码深度分析 - 512,000 行代码揭示的生产级 Agent 架构 / Claude Code Source Analysis and Production Agent Architecture
下一篇29. 编程 Agent 全面对比:从 Claude Code 到 Pi 的设计哲学 / Coding Agents Comparison: Design Philosophies from Claude Code to Pi

持续记录,持续成长

Copyright © Tidenflow