Langflow

用 React 19 + Vite + Zustand + Python/FastAPI 构建的可视化 Agent / RAG / 工作流平台；与 BodySense 前端技术栈匹配度最高。本篇记录其 graph 执行模型、流式交互与 React↔Python 垂直切片。

#type / resource #status / growing #tech / dev / backend #tech / dev / frontend #resource / python

[!info] related notes

  • 所属 MOC：源码阅读 MOC
  • 同栈并列：Onyx（完整 Python 产品）· OpenHands（Agent event stream UI）· Dify（React+Go+Python）
  • BodySense 对照流：React consultation UI → Go consultation API → Python LangGraph runtime → SSE → React reducer
  • 工程说明：仓库自带 AGENTS.md

Langflow

这是什么

可视化构建 Agent / RAG / 工作流的平台（约 149k stars）。它的技术组合几乎就是 BodySense 的 Python + React 组合：

Python + FastAPI（src/backend）
React 19 + TypeScript + Vite + Zustand + Tailwind（src/frontend）
uv（后端）

[!warning] 噪音提示 integrations 与组件数量极多（icons/ 下几百个组件图标），核心代码容易被插件噪音淹没。只学 graph 执行、streaming、Zustand store、React Flow 状态建模、Python component contract、图执行测试。

在你三层参考架构里的位置

用户定位：与 BodySense 前端技术栈匹配度最高的 React + Python 项目。最值得学的是一条完整 vertical slice：

React 节点组件 → Zustand 工作流状态 → API → Python graph → component/tool → 流式执行结果 → React 状态更新

这与 BodySense 的咨询流（React → Go → Python LangGraph → SSE → React reducer）非常接近。

版本快照

项值
分支main
commit3325c4642c48（2026-08-08）
抓取日期2026-08-11
语言Python >=3.10,<3.15（pyproject.toml：name = "langflow"，version = "1.11.3"）
前端React 19 + Vite + Zustand + Tailwind
包管理uv（后端 uv.lock）/ yarn（前端 package-lock.json）

仓库鸟瞰：顶层目录结构

langflow/
├── src/
│   ├── backend/             # Python/FastAPI
│   │   └── base/langflow/   # 真正的应用代码
│   ├── frontend/            # React 19 前端
│   │   └── src/
│   ├── bundles/  sdk/  langflow-stepflow/  lfx/
├── docs/                    # docusaurus 文档站
├── docker/  deploy/  scripts/  tests/  regressions/
├── pyproject.toml  package.json  Makefile

src/backend/base/langflow/（核心后端，depth 1，节选）：

base/langflow/
├── main.py  server.py  langflow_launcher.py   # 入口与装配
├── graph/                   # 图执行引擎（核心）
├── api/                     # FastAPI 路由（build / router / v1 / v2）
├── interface/               # 组件导入 / 初始化 / 运行
├── base/                    # agents / tools / memory / models / vectorstores
├── components/  custom/     # 组件与自定义组件
├── schema/                  # 数据结构（graph / message / artifact …）
├── services/                # auth / chat / flow / cache / job_queue / session …
├── processing/              # 流展开与处理
├── serialization/           # 图序列化
├── events/                  # 事件管理（流式）
├── worker.py  middleware.py  settings.py

src/frontend/src/（核心前端，depth 1，节选）：

frontend/src/
├── CustomNodes/             # React Flow 自定义节点（GenericNode / NoteNode）
├── components/  modals/  pages/
├── stores/                  # Zustand：flowStore / messagesStore / flowBuilderWelcomeStore …
├── contexts/  controllers/  hooks/  utils/  types/
├── routes.tsx  index.tsx  App.tsx
└── icons/                   # 几百个组件/provider 图标（噪音区）

顶层边界职责

顶层目录回答什么问题备注
base/langflow/graph/一张图怎么执行最该读的核心
base/langflow/api/前端请求怎么进来FastAPI 路由
base/langflow/services/聊天/流/作业怎么编排含 background_execution
base/langflow/schema/节点/边/消息怎么建模图的数据结构
frontend/src/CustomNodes/节点怎么渲染React Flow
frontend/src/stores/工作流状态怎么存Zustand
frontend/src/pages/FlowPage/编辑画布主页面主交互

分层与依赖方向

flowchart TB
    RN[React 节点组件 CustomNodes] --> ST[Zustand stores]
    ST --> API[FastAPI api/]
    API --> GRAPH[graph/ 执行引擎]
    GRAPH --> COMP[components/ tools/]
    COMP --> EVT[events/ 流式]
    EVT --> ST

关键入口与调用链

入口路径说明
后端入口src/backend/base/langflow/main.pyFastAPI 装配
图执行src/backend/base/langflow/graph/节点拓扑执行
前端主页面src/frontend/src/pages/FlowPage/画布
节点渲染src/frontend/src/CustomNodes/React Flow 节点
状态src/frontend/src/stores/flowStore.ts工作流状态

阅读路线（用户建议：只学六样）

  1. graph/ 执行模型（节点如何被调度）
  2. events/ + API 的 streaming（结果如何流式回来）
  3. stores/（Zustand 工作流状态）
  4. CustomNodes/（React Flow 状态建模）
  5. base/ 的 component / tool contract（Python 组件契约）
  6. 图执行测试（tests/ 下）

深挖一条线：从点击节点到流式结果（一条 vertical slice）

选「在前端画布点一次『运行』，看一个节点执行并把结果流式回来」作为主线——它把 React 节点 → Zustand → API → Python graph → component → 事件流 → React 更新 整条垂直切片穿了一遍，和 BodySense 的咨询流（React → Go → Python LangGraph → SSE → React）同构。

src/frontend/src/CustomNodes/        React Flow 节点被点击「运行」
  → src/frontend/src/stores/flowStore.ts   Zustand 写入工作流状态
       → src/backend/base/langflow/api/     FastAPI 收到运行请求
            → src/backend/base/langflow/graph/   图执行引擎：按拓扑调度节点
                 → src/backend/base/langflow/components/ 或 custom/   执行该节点的 component/tool
                      → 产生结果
                 → src/backend/base/langflow/events/   事件管理（流式）
                      → SSE 把结果流式推回
       → src/frontend/src/stores/flowStore.ts / messagesStore    React 状态更新
  → CustomNodes/ 增量重渲染

跟读要点：

  • graph/ 是核心：断在节点调度处，看一个图如何被展开成执行顺序（对照 BodySense 的 LangGraph runtime）
  • events/ + API 的 streaming：确认是 SSE 还是 WebSocket（待验证），结果如何被切片推回
  • stores/flowStore.ts：前端工作流状态如何被后端事件增量更新（对照 BodySense 的 React reducer 消费 SSE）
  • components/ 的 component contract：Python 组件怎么被统一调用（插件化契约）

自检：点一次运行，前端状态、后端图执行、流式事件三者如何对齐？BodySense 的 SSE→reducer 能否照这个范式收紧？

值得偷师 / 不建议照抄

做法评价我的判断
graph 执行引擎 + 流式事件强直接对照 BodySense 的 LangGraph runtime + SSE
Zustand 管理工作流状态强BodySense React 侧可参考
React Flow 节点建模强可视化编排范式
Python component contract强插件化组件的契约设计
几百个组件/provider 注册弱噪音，不要搬进 BodySense

我的疑问与待验证

  • Langflow 的 streaming 用 SSE 还是 WebSocket？与 BodySense 当前的 SSE 方案如何对齐？
  • 图执行测试如何 mock 外部 provider？对照 BodySense 的 eval 体系。

沉淀出的笔记

相关链接 / 官方入口

入口地址
仓库https://github.com/langflow-ai/langflow
工程说明https://github.com/langflow-ai/langflow/blob/main/AGENTS.md
创建于 2026/8/11 更新于 2026/8/11