This page covers the structure, technology choices, major subsystems, and data-flow patterns of the React/TypeScript frontend located in src/frontend/. It is a high-level map intended for developers working on or integrating with the UI.
For specific subsystem details, see the child pages: visual flow editor (5.2), GenericNode (5.3), state management stores (5.5), API client (5.7), authentication (5.8), chat interface (5.10), and settings (5.12).
| Layer | Library / Tool | Version range |
|---|---|---|
| UI framework | React 18 (with Suspense) | 18.x |
| Language | TypeScript | 5.x |
| Routing | React Router v6 (createBrowserRouter) | 6.x |
| Canvas | ReactFlow (@xyflow/react) | latest |
| State management | Zustand | 4.x |
| Server state / caching | TanStack Query (@tanstack/react-query) | 5.x |
| HTTP client | Axios | 1.x |
| Styling | Tailwind CSS + shadcn/ui | — |
| Build | Vite | — |
| Lint / format | Biome | — |
App.tsx is the root component. It mounts a RouterProvider with the router defined in routes.tsx, wraps it in a Suspense boundary that falls back to LoadingPage, and applies the dark-mode class to <body> via useDarkStore.
Application bootstrap and route hierarchy
Sources: src/frontend/src/App.tsx1-22 src/frontend/src/routes.tsx1-130
Three guard components wrap route segments to enforce access control:
| Component | File | Behavior |
|---|---|---|
ProtectedRoute | components/authorization/authGuard | Redirects unauthenticated users to /login |
ProtectedAdminRoute | components/authorization/authAdminGuard | Redirects non-superusers |
ProtectedLoginRoute | components/authorization/authLoginGuard | Redirects already-authenticated users away from /login |
AuthSettingsGuard | components/authorization/authSettingsGuard | Blocks settings in auto-login mode |
Sources: src/frontend/src/routes.tsx8-12
The frontend uses Zustand for all global state. Each store is a create<T>() call that returns a hook. Components subscribe with selector functions to avoid unnecessary re-renders.
Zustand store responsibilities
Sources: src/frontend/src/stores/flowStore.ts1-65 src/frontend/src/types/zustand/flow/index.ts64-200
flowStore State ShapeThe FlowStoreType interface (defined in src/frontend/src/types/zustand/flow/index.ts) exposes:
| Field | Type | Purpose |
|---|---|---|
nodes | AllNodeType[] | Current canvas nodes |
edges | EdgeType[] | Current canvas edges |
currentFlow | FlowType | undefined | Flow object being edited |
isBuilding | boolean | Build in progress flag |
flowPool | FlowPoolType | Per-node build result cache |
inputs / outputs | Array<{type, id, displayName}> | IO summary for chat/playground |
reactFlowInstance | ReactFlowInstance | ReactFlow API handle |
componentsToUpdate | ComponentsToUpdateType[] | Outdated nodes awaiting upgrade |
The resetFlow action loads a FlowType object, runs cleanEdges to remove stale connections, and resets build state. setNodes and setEdges call cleanEdges and trigger autoSaveFlow.
Sources: src/frontend/src/stores/flowStore.ts221-336 src/frontend/src/types/zustand/flow/index.ts64-200
The canvas page is src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx. It renders a <ReactFlow> element configured with custom node and edge types.
PageComponent data and event flow
Sources: src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx86-93 src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx385-555
Components are dragged from the sidebar onto the canvas. The onDrop handler in PageComponent reads the dataTransfer payload, extracts the component type and APIClassType data, then calls useAddComponent which calls flowStore.setNodes.
If the dropped item is a .json file, useUploadFlow is called instead to import a flow.
When a user draws an edge between two handles, isValidConnection (from src/frontend/src/utils/reactflowUtils.ts) is called. It:
sourceHandle and targetHandle JSON strings into sourceHandleType and targetHandleType objects.output_types of the source overlaps with inputTypes or type of the target.list field).Sources: src/frontend/src/utils/reactflowUtils.ts325-438
Every flow component is rendered by GenericNode (src/frontend/src/CustomNodes/GenericNode/index.tsx). It is wrapped with memo() and uses heavily memoized sub-components.
GenericNode component tree
Sources: src/frontend/src/CustomNodes/GenericNode/index.tsx36-42 src/frontend/src/CustomNodes/GenericNode/index.tsx486-673 src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx44-815
GenericNode receives data: NodeDataType (containing the APIClassType template) and selected: boolean from ReactFlow. It reads additional state from:
useTypesStore → types, templatesuseFlowStore → edges, setEdges, setNode, deleteNodeuseFlowsManagerStore → takeSnapshotuseShortcutsStore → keyboard shortcut stringsuseBuildStatus(data, data.id) → build result for this nodeOn mount and when nodes change, flowStore.updateComponentsToUpdate compares each node's embedded code hash against the current template in typesStore. Nodes that differ appear in componentsToUpdate. GenericNode reads componentUpdate via useShallow and shows NodeUpdateComponent if isOutdated && !isUserEdited && !dismissAll.
Sources: src/frontend/src/CustomNodes/GenericNode/index.tsx125-218 src/frontend/src/stores/flowStore.ts95-113
All HTTP requests go through a single Axios instance created in src/frontend/src/controllers/API/api.tsx. A React component ApiInterceptor mounts the interceptors.
Axios instance and interceptor chain
Sources: src/frontend/src/controllers/API/api.tsx25-98 src/frontend/src/controllers/API/index.ts1-306
| Function | Endpoint | Purpose |
|---|---|---|
getVerticesOrder | POST /build/{flowId}/vertices | Get topological execution order |
postBuildVertex | POST /build/{flowId}/vertices/{vertexId} | Execute a single vertex |
getStoreComponents | GET /store/components/ | Fetch store marketplace items |
saveFlowStore | POST /store/components/ | Publish a flow/component |
createApiKey | POST /api_key/ | Create an API key |
performStreamingRequest | SSE endpoint | Stream build events via fetch + ReadableStream |
Sources: src/frontend/src/controllers/API/index.ts43-306
Individual queries and mutations live under src/frontend/src/controllers/API/queries/. Each exports a use* hook wrapping useQuery or useMutation. This provides automatic caching, deduplication, and background refetching.
Examples:
usePostValidateComponentCode – validates custom component Python codeusePostRetrieveVertexOrder – retrieves vertex execution orderuseGetBuildsQuery – polls build statusWhen the user clicks "Run", the frontend triggers flow execution through a multi-step process:
Flow build sequence
Sources: src/frontend/src/utils/buildUtils.ts155-400 src/frontend/src/utils/buildUtils.ts56-62
Events end_vertex, build_start, and build_end are batched (see BATCHABLE_EVENTS in buildUtils.ts) so React 18 commits all resulting Zustand state updates in a single render. A BATCH_YIELD_MS = 50 delay is used to collect synchronous events before flushing.
Sources: src/frontend/src/utils/buildUtils.ts56-62
Authentication state is split between a React context (AuthContext) for component-level access and a Zustand store (authStore) for low-level interceptor access.
Authentication data flow
The clearAuthSession function on AuthContext removes all auth cookies and resets authStore.
Sources: src/frontend/src/contexts/authContext.tsx32-130 src/frontend/src/controllers/API/api.tsx65-98 src/frontend/src/types/contexts/auth.ts1-18
The TypeScript types that pass between backend API responses, store state, and UI components are defined in src/frontend/src/types/.
Core type relationships
Sources: src/frontend/src/types/flow/index.ts1-75 src/frontend/src/types/api/index.ts10-128
ReactFlow edges identify handles by string IDs. Langflow encodes handle metadata as JSON-stringified objects via scapedJSONStringfy and parses them with scapeJSONParse (both from reactflowUtils.ts). This means the sourceHandle string is a JSON-escaped representation of sourceHandleType, and targetHandle is a JSON-escaped targetHandleType. Connection validation and edge cleanup depend on round-tripping these objects.
Sources: src/frontend/src/utils/reactflowUtils.ts83-255
| File | Key Exports | Purpose |
|---|---|---|
utils/reactflowUtils.ts | isValidConnection, cleanEdges, validateNodes, processDataFromFlow, updateIds, generateFlow | Core graph operations |
utils/buildUtils.ts | buildFlowVerticesWithFallback, updateVerticesOrder | Build orchestration |
utils/utils.ts | cn, classNames, toTitleCase, buildTweakObject | General-purpose helpers |
utils/styleUtils.ts | nodeColorsName | Node color lookup |
utils/layoutUtils.ts | getLayoutedNodes | Auto-layout for imported flows |
Sources: src/frontend/src/utils/reactflowUtils.ts1-75 src/frontend/src/utils/buildUtils.ts1-55 src/frontend/src/utils/utils.ts1-40
Refresh this wiki
This wiki was recently refreshed. Please wait 3 days to refresh again.