The Component System is the core architectural pattern in Langflow that enables modular, reusable AI workflow building blocks. This document covers component structure, registration, loading, input/output types, and the versioning system. For information about how components are executed within flows, see Flow Execution Engine. For creating custom components, see Custom Component Development.
Components are self-contained units of functionality that can be connected together in the visual flow editor. Each component has:
All components are registered in a central index that is loaded at runtime. The system supports both built-in components (from the lfx package) and custom user-defined components.
Component Registry and Runtime Loading
Sources: src/lfx/src/lfx/_assets/component_index.json1-277 src/lfx/src/lfx/_assets/stable_hash_history.json1-100 src/backend/base/langflow/interface/initialize/loading.py25-51
Each component entry in component_index.json follows a nested structure:
| Field | Description | Example |
|---|---|---|
display_name | Human-readable name | "FAISS", "Chat Input" |
description | Component purpose | "FAISS Vector Store with search capabilities" |
icon | Icon identifier | "FAISS", "MessagesSquare" |
base_classes | Output types this component produces | ["Data", "DataFrame"] |
template | Input field definitions and code | See Input Types section |
outputs | Output method definitions | [{method: "search_documents", types: ["Data"]}] |
metadata.module | Python module path | "lfx.components.FAISS.faiss.FaissVectorStoreComponent" |
metadata.code_hash | Stable hash for versioning | "2bd7a064d724" |
metadata.dependencies | Required packages | [{name: "langchain_community", version: "0.3.31"}] |
Component Definition Example from FAISS:
Sources: src/lfx/src/lfx/_assets/component_index.json1-263
The template.code field contains the complete Python class definition for each component. This code is evaluated dynamically at runtime.
Code Evaluation Process
Example Component Code Structure (FAISS):
The embedded code defines a complete Python class inheriting from a base component:
The complete code is stored in src/lfx/src/lfx/_assets/component_index.json96-112
Sources: src/lfx/src/lfx/_assets/component_index.json96-112
Langflow supports 30+ input types that determine how fields are rendered in the UI and how data is validated. Each input type is defined as a class in the lfx.inputs.inputs module and re-exported from lfx.io. The langflow-base package re-exports all of them from langflow.inputs.inputs for backward compatibility.
The FieldTypes enum in lfx.inputs.input_mixin declares the serialized type string for each input kind (e.g. FieldTypes.PROMPT, FieldTypes.MUSTACHE_PROMPT, FieldTypes.STR). These values appear in the serialized component JSON as the type field on each input definition and drive frontend widget selection.
Input Type Hierarchy and Properties
Common Input Properties:
| Property | Type | Description | Example |
|---|---|---|---|
name | str | Field identifier | "index_name" |
display_name | str | UI label | "Index Name" |
info | str | Tooltip text | "Path to save the FAISS index" |
value | any | Default value | "langflow_index", 4, true |
required | bool | Field is mandatory | true, false |
advanced | bool | Show in advanced section | true, false |
list | bool | Accept multiple values | true, false |
dynamic | bool | Value computed at runtime | true, false |
input_types | list | Accepted connection types | ["Message", "Text"] |
trace_as_metadata | bool | Include value in trace metadata | true, false |
tool_mode | bool | Exposed when component is used as a tool | true, false |
load_from_db | bool | Value resolved from DB secrets at runtime | true, false |
HandleInput is used for component-to-component connections. The input_types list declares which output types a port can accept:
SecretStrInput sets load_from_db: true, causing update_params_with_load_from_db_fields() in loading.py to substitute the stored credential at build time rather than passing the raw value through the API.
Sources: src/lfx/src/lfx/_assets/component_index.json114-133 src/lfx/src/lfx/_assets/component_index.json74-95 src/backend/base/langflow/inputs/inputs.py1-76 src/backend/base/langflow/inputs/input_mixin.py1-44 src/backend/base/langflow/interface/initialize/loading.py111-130
Input fields in the template object map to Python class attributes:
Field Definition to Runtime Attribute Mapping
Example: FAISS Component Inputs
From src/lfx/src/lfx/_assets/component_index.json134-154:
This maps to the Python definition in the embedded code:
Sources: src/lfx/src/lfx/_assets/component_index.json134-154
Components can define multiple output methods, each producing data of specific types. Outputs are defined in the outputs array.
Output Definition and Execution Flow
Output Definition Structure:
| Field | Description | Example |
|---|---|---|
method | Python method to call | "search_documents", "message_response" |
name | Output identifier | "search_results", "message" |
display_name | UI label | "Search Results", "Chat Message" |
types | Allowed output types | ["Data"], ["Message"] |
cache | Cache output for reuse | true, false |
tool_mode | Expose as LangChain tool | true, false |
allows_loop | Support loop connections | true, false |
Example: FAISS Component Outputs
From src/lfx/src/lfx/_assets/component_index.json46-72:
Sources: src/lfx/src/lfx/_assets/component_index.json46-72
Components are organized into functional categories:
Component Organization by Function
Component Counts by Category:
From the component index, approximate distribution:
Sources: src/lfx/src/lfx/_assets/component_index.json1-10000
The stable_hash_history.json file tracks component versions using content-based hashing:
Component Version Tracking Flow
Hash History Structure:
From src/lfx/src/lfx/_assets/stable_hash_history.json1-50:
Version Rules:
Nightly Build Process:
From high-level diagrams, the nightly process at 00:00 UTC:
.devN version tagsstable_hash_history.json with new hashesSources: src/lfx/src/lfx/_assets/stable_hash_history.json1-100
Additional metadata fields control component behavior and appearance:
| Field | Type | Description | Example |
|---|---|---|---|
beta | bool | Component in beta | false |
legacy | bool | Deprecated component | false |
frozen | bool | Locked for editing | false |
edited | bool | User has modified | false |
minimized | bool | Collapsed in UI | true |
pinned | bool | Pinned to top | false |
tool_mode | bool | Available as tool | false |
lf_version | str | Langflow version | "1.4.2" |
documentation | str | Documentation URL | "https://docs.langflow.org/..." |
field_order | array | Input field ordering | ["input_value", "sender"] |
custom_fields | dict | Dynamic fields | {"template": ["context", "question"]} |
ChatInput Example:
From src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json294-337:
Sources: src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json294-337
Components declare their dependencies in the metadata.dependencies field:
Component Dependency Resolution
Example: Notion Component Dependencies
From src/lfx/src/lfx/_assets/component_index.json280-310:
Dependency Management:
lfx dependency is marked with version: null (local package)Sources: src/lfx/src/lfx/_assets/component_index.json280-310
Some components support dynamic fields that are generated based on user input:
Prompt Component Dynamic Variables:
The PromptComponent extracts variables from template strings and dynamically creates input fields:
From src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json560-569:
When a user enters a prompt template like:
Answer the question based on the context:
Context: {context}
Question: {question}
The system:
{variable} patternscontext and questioncustom_fields.template arrayMustache Template Support:
The component also supports {{variable}} syntax (Mustache) for enhanced security:
Sources: src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json560-569 src/lfx/src/lfx/_assets/component_index.json96-112
The pipeline from stored code to a running component instance spans three modules:
Component Loading and Instantiation Pipeline
Key code entities:
| Entity | Location | Role |
|---|---|---|
eval_custom_component_code() | lfx.custom.eval | Compiles and executes embedded code string, returns class |
instantiate_class() | langflow.interface.initialize.loading | Constructs component instance from vertex params |
get_instance_results() | langflow.interface.initialize.loading | Resolves load_from_db fields, calls build_component() |
update_params_with_load_from_db_fields() | langflow.interface.initialize.loading | Substitutes secret values from the database |
Vertex.build() | lfx.graph.vertex.base | Top-level orchestrator for building a single graph node |
Sources: src/backend/base/langflow/interface/initialize/loading.py1-76
The frontend fetches component definitions via the /api/v1/all endpoint. This endpoint returns the complete component type dictionary, compressed, to the browser.
Component API Flow
The endpoint is defined at src/backend/base/langflow/api/v1/endpoints.py97-111 The response drives how the frontend sidebar is populated and which node types are available for drag-and-drop.
Custom component code evaluation (for the /custom_component endpoint) uses helpers imported from lfx.custom.utils:
build_custom_component_template() — builds the UI template from submitted component codeupdate_component_build_config() — updates field configuration when a field value changesget_instance_name() — derives the component's display name from codeSources: src/backend/base/langflow/api/v1/endpoints.py16-23 src/backend/base/langflow/api/v1/endpoints.py97-111
Starter projects demonstrate common component patterns:
Vector Store RAG Pattern:
From src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json1-300:
ChatInput → Prompt → LanguageModel → ChatOutput
↓ ↑
↓ Parser ← AstraDB
↓ ↑
File → SplitText → AstraDB + Embedding
Components used:
ChatInput: User query inputFile: Document uploadSplitText: Text chunkingAstraDB: Vector storage (appears twice - ingest and search)EmbeddingModel: Text vectorizationParserComponent: Format search resultsPrompt: Combine context and questionLanguageModelComponent: Generate answerChatOutput: Display responseBlog Writer Pattern:
From src/backend/base/langflow/initial_setup/starter_projects/Blog Writer.json1-150:
TextInput → Prompt → LanguageModel → ChatOutput
↑
URLComponent → ParserComponent
Components used:
TextInput: Writing instructionsURLComponent: Fetch reference contentParserComponent: Extract textPrompt: Combine instructions and referencesLanguageModelComponent: Generate blog postChatOutput: Display resultStructured Output Pattern:
From src/backend/base/langflow/initial_setup/starter_projects/Financial Report Parser.json1-100:
ChatInput → StructuredOutput → ParserComponent → ChatOutput
Components used:
ChatInput: Input text/documentStructuredOutput: Generate DataFrame from unstructured textParserComponent: Format DataFrame as textChatOutput: Display formatted resultSources: src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json1-300 src/backend/base/langflow/initial_setup/starter_projects/Blog Writer.json1-150 src/backend/base/langflow/initial_setup/starter_projects/Financial Report Parser.json1-100
When a component is executed, it has access to:
Component Execution Environment
Example: ChatInput Component Context Usage
From src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json372-373:
The component:
self.input_value (resolved from input field)self.session_id (user-provided parameter)self.graph.session_id (graph context)self.status for progress displayMessage objectSources: src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json300-400
Components inherit from base classes that provide common functionality:
| Base Class | Module | Purpose | Key Methods |
|---|---|---|---|
Component | lfx.custom.custom_component.component | Generic component | build(), update_build_config() |
LCVectorStoreComponent | lfx.base.vectorstores.model | Vector store pattern | build_vector_store(), search_documents() |
LCToolComponent | lfx.base.langchain_utilities.model | Tool wrapping | run_model(), build_tool() |
ChatComponent | lfx.base.io.chat | Chat I/O | send_message(), message_response() |
TextComponent | lfx.base.io.text | Text I/O | text_response() |
The Component class is defined in lfx and re-exported by langflow-base for backward compatibility:
Sources: src/backend/base/langflow/custom/custom_component/component.py1-24 src/lfx/src/lfx/_assets/component_index.json96-112
langflow-base wraps the lfx implementation using thin re-export modules. Code that previously imported from langflow continues to work without modification:
langflow-base module | Re-exports from |
|---|---|
langflow.custom.custom_component.component | lfx.custom.custom_component.component |
langflow.custom.custom_component.custom_component | lfx.custom.custom_component.custom_component |
langflow.inputs.inputs | lfx.inputs.inputs |
langflow.inputs.input_mixin | lfx.inputs.input_mixin |
langflow.custom.utils | lfx.custom.utils |
langflow.template.field.base | lfx.template.field.base |
langflow.schema.schema | lfx.schema.schema |
Sources: src/backend/base/langflow/custom/custom_component/component.py1-24 src/backend/base/langflow/custom/custom_component/custom_component.py1 src/backend/base/langflow/inputs/inputs.py1-76 src/backend/base/langflow/inputs/input_mixin.py1-44 src/backend/base/langflow/custom/utils.py1 src/backend/base/langflow/template/field/base.py1-3 src/backend/base/langflow/schema/schema.py1-24
Components can expose their functionality as LangChain tools for agent usage:
Component Tool Integration
Example: Notion AddContentToPage as Tool
From src/lfx/src/lfx/_assets/component_index.json315-340:
The component implements:
Agents can then use this tool by name to add content to Notion pages.
Sources: src/lfx/src/lfx/_assets/component_index.json315-340 src/lfx/src/lfx/_assets/component_index.json365-382
Refresh this wiki
This wiki was recently refreshed. Please wait 3 days to refresh again.