This page documents the frontend settings UI in Langflow: the individual settings pages found under the /settings/ route, their data sources, state management, and how each page interacts with backend APIs. This is specifically about the frontend UI for settings. For backend environment variables and the Settings Pydantic model, see Backend Settings Service and Environment Variables. For the authentication context and login flow, see Authentication Context.
The settings area lives under the src/frontend/src/pages/SettingsPage/ directory and is organized as a set of sub-pages, each mounted under a nested route. The parent layout provides a navigation sidebar and a content area for the active sub-page.
Diagram: Settings Pages — Routes to Components
Sources: src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx src/frontend/src/constants/constants.ts842
File: src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
The Global Variables page allows users to define named values that can be automatically injected into component fields, eliminating repeated manual entry of credentials or configuration strings.
Each global variable has the following shape (as inferred from GlobalVariable type and column definitions):
| Field | Description |
|---|---|
id | Unique identifier |
name | Variable name as referenced in flows |
type | "Generic" or "Credential" |
value | Stored value; masked in the UI for Credential type |
default_fields | List of component field names this variable is auto-applied to |
is_valid | Boolean set by backend validation for provider credentials |
validation_error | Error message if is_valid === false |
The constants file defines three categories for organizing variables:
CATEGORY_GLOBAL = "Global"
CATEGORY_LLM = "LLM"
CATEGORY_SETTINGS = "Settings"
VALID_CATEGORIES = [CATEGORY_GLOBAL, CATEGORY_LLM, CATEGORY_SETTINGS]
src/frontend/src/constants/constants.ts1007-1015
The page fetches all global variables via useGetGlobalVariables (React Query). It then applies a filter: variables of type Credential whose name appears in PROVIDER_VARIABLE_MAPPING and have is_valid === false are excluded from the table and trigger an error notification via useAlertStore.
The table uses TableComponent (AG Grid) with these columns:
| Column | Field | Notes |
|---|---|---|
| Variable Name | name | Sortable, 2× width |
| Type | type | Badge renderer; editable via DropdownEditor (Generic/Credential) |
| Value | value | Masked to ***** for Credential type |
| Apply To Fields | default_fields | Comma-joined list of field names |
Row click opens GlobalVariableModal in edit mode, pre-populated with the clicked row's data. The Add New button opens GlobalVariableModal in create mode. Deletion uses useDeleteGlobalVariables.
src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx49-85
The Zustand store useGlobalVariablesStore (defined in src/frontend/src/stores/globalVariablesStore/globalVariables.ts) holds:
| State field | Type | Purpose |
|---|---|---|
globalVariablesEntries | string[] | Variable names only (for quick lookup) |
globalVariablesEntities | GlobalVariable[] | Full variable objects |
unavailableFields | {[name]: string} | Maps field names → variable name for fields already claimed |
The getUnavailableFields utility (src/frontend/src/stores/globalVariablesStore/utils/get-unavailable-fields.tsx) builds the unavailableFields map by iterating each variable's default_fields list.
Diagram: Global Variables Data Flow
Sources: src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx src/frontend/src/stores/globalVariablesStore/globalVariables.ts src/frontend/src/stores/globalVariablesStore/utils/get-unavailable-fields.tsx src/frontend/src/types/zustand/globalVariables/index.ts
File: src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
The Shortcuts page displays the full list of keyboard shortcuts and allows users to customize or restore them to defaults.
The useShortcutsStore Zustand store (src/frontend/src/stores/shortcuts.ts) owns the canonical shortcut state. It has two layers:
undo, redo, copy, etc., each holding a key-combination string. These are used directly by components via useShortcutsStore((s) => s.undo).shortcuts array — an array of {name, display_name, shortcut} objects used to drive the table UI.Default shortcut bindings (from src/frontend/src/stores/shortcuts.ts):
| Shortcut Name | Default Binding |
|---|---|
undo | mod+z |
redo | mod+y |
redoAlt | mod+shift+z |
openPlayground | mod+k |
flow | mod+shift+b |
advancedSettings | mod+shift+a |
minimize | mod+. |
copy | mod+c |
duplicate | mod+d |
cut | mod+x |
paste | mod+v |
delete | backspace |
group | mod+g |
changesSave | mod+s |
saveComponent | mod+alt+s |
toggleSidebar | mod+b |
searchComponentsSidebar | / |
toolMode | mod+shift+m |
freezePath | mod+shift+f |
download | mod+j |
update | mod+u |
play | p |
outputInspection | o |
api | r |
code | space |
mod resolves to Ctrl on Windows/Linux and Cmd on macOS (detected via IS_MAC in constants.ts).
Shortcuts are persisted to localStorage under the key langflow-shortcuts as a JSON array. On store initialization, getShortcutsFromStorage() is called immediately to restore any saved customizations:
useShortcutsStore.getState().getShortcutsFromStorage();
src/frontend/src/stores/shortcuts.ts43-58
The Restore button calls handleRestore(), which resets the store to defaultShortcuts and removes the langflow-shortcuts key from localStorage.
Double-clicking a row in the shortcuts table opens EditShortcutButton — a modal built on BaseModal. The modal captures raw keyboard events via a keydown listener and builds a combination string. The editCombination() function:
Ctrl/Cmd to mod.canEditCombination().updateUniqueShortcut(name, combination) on the store to update the named property.setShortcuts(newCombination) to update the array.localStorage.src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx56-99
CellRenderShortcuts (src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/CellRenderWrapper/index.tsx) is an AG Grid cell renderer that splits the shortcut string by + and renders each key token using RenderIcons. The ShortcutDisplay component (src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/shortcutDisplay/index.tsx) renders the same visual key badges inline in menus and toolbars, driven by the same store values.
Diagram: Shortcut System Architecture
Sources: src/frontend/src/stores/shortcuts.ts src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/CellRenderWrapper/index.tsx src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/shortcutDisplay/index.tsx src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
File: Inferred from src/frontend/src/constants/constants.ts
The API Keys page lists the current user's Langflow API tokens. It is described in constants:
API_PAGE_PARAGRAPH — the introductory description displayed at the top of the pageAPI_PAGE_USER_KEYS — message shown when no keys existLAST_USED_SPAN_1 / LAST_USED_SPAN_2 — tooltip text for the "Last Used" columnsrc/frontend/src/constants/constants.ts670-679
The page interacts with the /api/v1/api_key/ backend routes documented in API Endpoints. Token values are stored in the LANGFLOW_API_TOKEN cookie (apikey_tkn_lflw).
src/frontend/src/constants/constants.ts874-876
File: src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
The Messages page provides a read-only session message log. It uses useGetMessagesQuery({ mode: "union" }) to load all stored messages and renders them with SessionView (the same component used in the chat playground, described in Chat Interface).
HeaderMessagesComponent provides filter and delete controls for clearing message history by session.
Sources: src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
The Model Providers settings surface allows users to configure API credentials for supported LLM providers. These credentials are stored as Credential-type global variables whose names match entries in the PROVIDER_VARIABLE_MAPPING constant (defined in src/frontend/src/constants/providerConstants.ts).
When the GlobalVariablesPage detects that a provider credential has is_valid === false, it filters that entry from the table and emits an error via useAlertStore. This validation is performed by the backend during credential creation or update.
The validGlobalVariables filtering logic is in:
src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx99-117
The MCP (Model Context Protocol) servers settings page allows users to register external MCP server endpoints that flows can connect to as tool sources. For the full technical description of MCP integration, see Model Context Protocol.
The constant MAX_MCP_SERVER_NAME_LENGTH = 30 enforces a name length limit for registered MCP server entries:
src/frontend/src/constants/constants.ts591
The General settings page covers application-level preferences. Relevant constants that drive its behavior include:
| Constant | Value | Purpose |
|---|---|---|
IS_AUTO_LOGIN | boolean | Derived from LANGFLOW_AUTO_LOGIN env var; controls whether auth is skipped |
LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS | 3240 | Session token lifetime used in auto-refresh logic |
ALL_LANGUAGES | array | Supported locale values for language selection |
src/frontend/src/constants/constants.ts948-969
Diagram: Settings Pages, Stores, and Backend Resources
Sources: src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx src/frontend/src/stores/shortcuts.ts src/frontend/src/stores/globalVariablesStore/globalVariables.ts src/frontend/src/stores/messagesStore.ts src/frontend/src/constants/constants.ts
Refresh this wiki
This wiki was recently refreshed. Please wait 3 days to refresh again.