This page covers the frontend-side configuration system: the central constants file, API base URL resolution, environment variable reading, token key names, timing defaults, feature flag hooks, and the keyboard shortcut store. For backend settings served to the frontend at startup, see the Backend Settings Service (7.2). For the API client that consumes these constants, see the API Client Layer (5.7). For the authentication context that uses the token constants, see Authentication Context (5.8).
The frontend resolves its configuration from three layers, in decreasing order of priority:
Configuration source resolution diagram
Sources: src/frontend/src/constants/constants.ts1-10
constants.ts — Central Defaults FileAll application-wide defaults live in src/frontend/src/constants/constants.ts. Components and stores import directly from this file.
The file defines a private helper getEnvVar that reads from both Node.js (process.env) and Vite (import.meta.env) environments, with an optional fallback:
src/frontend/src/constants/constants.ts14-27
This function is used internally to resolve LANGFLOW_AUTO_LOGIN, ACCESS_TOKEN_EXPIRE_SECONDS, and similar values that may be injected at build time.
API URL resolution chain diagram
src/frontend/src/constants/constants.ts608-610
If customization/config-constants.ts exports a non-empty string for BASE_URL_API or BASE_URL_API_V2, those values override the defaults. Otherwise the frontend assumes the backend is colocated and uses the root-relative paths /api/v1/ and /api/v2/.
The following URLs are excluded from automatic error-retry logic to avoid duplicate side effects:
| Constant | URL |
|---|---|
URL_EXCLUDED_FROM_ERROR_RETRIES[0] | {BASE_URL_API}validate/code |
URL_EXCLUDED_FROM_ERROR_RETRIES[1] | {BASE_URL_API}custom_component |
URL_EXCLUDED_FROM_ERROR_RETRIES[2] | {BASE_URL_API}validate/prompt |
URL_EXCLUDED_FROM_ERROR_RETRIES[3] | {BASE_URL_API}/login |
URL_EXCLUDED_FROM_ERROR_RETRIES[4] | {BASE_URL_API}api_key/store |
Sources: src/frontend/src/constants/constants.ts617-623
Similarly, these URLs are allowed to issue duplicate concurrent requests:
src/frontend/src/constants/constants.ts813-820
The frontend uses named cookie/storage keys rather than bare strings. These are defined centrally to ensure consistency across auth guards, the API client interceptors, and the auth context.
| Constant | Value | Purpose |
|---|---|---|
LANGFLOW_ACCESS_TOKEN | "access_token_lf" | Cookie key for JWT access token |
LANGFLOW_REFRESH_TOKEN | "refresh_token_lf" | Cookie key for refresh token |
LANGFLOW_API_TOKEN | "apikey_tkn_lflw" | Cookie key for API key |
LANGFLOW_AUTO_LOGIN_OPTION | "auto_login_lf" | Cookie key for auto-login flag |
LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS | 3240 (90% of 3600) | Hardcoded expiry for token refresh |
LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS_ENV | Derived from ACCESS_TOKEN_EXPIRE_SECONDS env var | Env-driven expiry, also at 90% |
IS_AUTO_LOGIN | Derived from LANGFLOW_AUTO_LOGIN env var | Whether to bypass login screen |
Sources: src/frontend/src/constants/constants.ts874-951
IS_AUTO_LOGIN evaluates to true if the LANGFLOW_AUTO_LOGIN environment variable is absent or any value other than "false".
| Constant | Value | Usage |
|---|---|---|
SERVER_HEALTH_INTERVAL | 10000 ms | Interval for background health-check polling |
REFETCH_SERVER_HEALTH_INTERVAL | 20000 ms | Retry interval after health-check failure |
BUILD_POLLING_INTERVAL | 25 ms | SSE build-progress polling rate |
DEFAULT_POLLING_INTERVAL | 5000 ms | Generic polling fallback |
DEFAULT_TIMEOUT | 30000 ms | General HTTP request timeout |
DEFAULT_FILE_PICKER_TIMEOUT | 60000 ms | File picker request timeout |
AUTO_LOGIN_RETRY_DELAY | 2000 ms | Initial retry delay for auto-login |
AUTO_LOGIN_MAX_RETRY_DELAY | 60000 ms | Max exponential back-off for auto-login |
SAVE_DEBOUNCE_TIME | 300 ms | Debounce delay before saving flow state |
SLIDING_TRANSITION_MS | 300 ms | Panel slide animation duration |
Sources: src/frontend/src/constants/constants.ts826-995
| Constant | Value | Purpose |
|---|---|---|
NODE_WIDTH | 384 px | Default width of all flow nodes |
NODE_HEIGHT | NODE_WIDTH * 3 | Default height of all flow nodes |
NOTE_NODE_MIN_WIDTH | 280 px | Minimum width of note (sticky) nodes |
NOTE_NODE_MIN_HEIGHT | 140 px | Minimum height of note nodes |
DEFAULT_NOTE_SIZE | 324 px | Default note node size |
CHAT_INPUT_MIN_HEIGHT | 24 px | Minimum chat textarea height |
CHAT_INPUT_MAX_HEIGHT | 200 px | Maximum chat textarea height |
Sources: src/frontend/src/constants/constants.ts884-900
| Constant | Value | Purpose |
|---|---|---|
PAGINATION_SIZE | 12 | Default items per page (flow list) |
PAGINATION_PAGE | 1 | Default starting page |
STORE_PAGINATION_SIZE | 12 | Items per page in the Store |
PAGINATION_ROWS_COUNT | [12, 24, 48, 96] | Available page-size options |
maxSizeFilesInBytes | 10 * 1024 * 1024 | 10 MB file upload limit |
MAX_TEXT_LENGTH | 99999 | Max characters in text fields |
MAX_BATCH_SIZE | 50 | Max items per bulk API request |
Sources: src/frontend/src/constants/constants.ts844-923
The constants INPUT_TYPES and OUTPUT_TYPES are Set<string> values used by the canvas to determine which nodes participate in the chat playground.
src/frontend/src/constants/constants.ts708-726
LANGFLOW_SUPPORTED_TYPES is a Set<string> of all field type identifiers the frontend renders natively (e.g., "str", "bool", "file", "prompt", "mcp", "tools", etc.).
src/frontend/src/constants/constants.ts681-702
Feature toggles are imported from src/frontend/src/customization/feature-flags.ts. The constants file itself does not define feature flags, but styleUtils.ts consumes them to conditionally rename sidebar categories:
src/frontend/src/utils/styleUtils.ts5-6 src/frontend/src/utils/styleUtils.ts288-290
When ENABLE_KNOWLEDGE_BASES is true, the "Files" sidebar category is displayed as "Files & Knowledge".
styleUtils.ts)src/frontend/src/utils/styleUtils.ts provides all visual configuration that is shared across the node canvas, sidebar, and flow editor.
Visual constants relationships diagram
Sources: src/frontend/src/utils/styleUtils.ts85-134 src/frontend/src/utils/styleUtils.ts278-424
nodeColorsMaps component category names and output type names to hex color strings. Used by GenericNode to set the node's accent color.
Examples:
| Key | Color |
|---|---|
inputs | #10B981 |
models | #ab11ab |
agents | #903BBE |
Message | #4f46e5 |
Data | #dc2626 |
unknown | #9CA3AF |
Sources: src/frontend/src/utils/styleUtils.ts85-134
SIDEBAR_CATEGORIESAn ordered array of objects { display_name, name, icon } that drives the main "components" sidebar grouping. The name field matches the category names used in nodeColors. This array is statically defined and controls what the user sees in the sidebar panel.
Sources: src/frontend/src/utils/styleUtils.ts278-318
SIDEBAR_BUNDLESAn ordered array of vendor/integration bundles rendered as a separate section of the sidebar. Each entry references an icon by string name resolved via getNodeIcon.
Sources: src/frontend/src/utils/styleUtils.ts320-424
The getNodeIcon(name) async function follows this resolution order:
Sources: src/frontend/src/utils/styleUtils.ts616-662
Default shortcuts are defined in src/frontend/src/customization/constants.ts (as customDefaultShortcuts), re-exported from constants.ts as defaultShortcuts, and loaded into useShortcutsStore on first render.
Shortcut configuration flow diagram
Sources: src/frontend/src/stores/shortcuts.ts1-58 src/frontend/src/constants/constants.ts831
The useShortcutsStore (Zustand) holds both the structured shortcut array (shortcuts) and individual named keys for direct lookup (e.g., flow, undo, redo, copy). At module load time, getShortcutsFromStorage() is called automatically; if langflow-shortcuts exists in localStorage, those values override the defaults.
Default shortcuts (from shortcuts.ts initial state):
| Action | Default Combination |
|---|---|
flow (build) | mod+shift+b |
undo | mod+z |
redo | mod+y |
openPlayground | mod+k |
advancedSettings | mod+shift+a |
copy | mod+c |
paste | mod+v |
duplicate | mod+d |
delete | backspace |
toggleSidebar | mod+b |
searchComponentsSidebar | / |
changesSave | mod+s |
freezePath | mod+shift+f |
toolMode | mod+shift+m |
Sources: src/frontend/src/stores/shortcuts.ts11-37
User-edited shortcuts are saved to localStorage as "langflow-shortcuts" (a JSON array). The ShortcutsPage settings page reads from and writes to this key.
useGlobalVariablesStore (src/frontend/src/stores/globalVariablesStore/globalVariables.ts) holds server-fetched global variable state used by parameter input fields:
| Field | Type | Purpose |
|---|---|---|
globalVariablesEntries | string[] | undefined | List of variable names |
globalVariablesEntities | GlobalVariable[] | undefined | Full variable objects |
unavailableFields | { [name: string]: string } | Fields already bound to a variable |
Sources: src/frontend/src/stores/globalVariablesStore/globalVariables.ts1-19 src/frontend/src/types/zustand/globalVariables/index.ts1-10
This store is populated at runtime from the /api/v1/variables endpoint response, not from static configuration.
The following sequence illustrates how configuration is resolved when the application first loads:
Sources: src/frontend/src/constants/constants.ts608-611 src/frontend/src/constants/constants.ts949-951 src/frontend/src/stores/shortcuts.ts43-56 src/frontend/src/stores/typesStore.ts1-41
Refresh this wiki
This wiki was recently refreshed. Please wait 3 days to refresh again.