Custom Components
Langflow components can be created from within the platform, allowing users to extend the platform's functionality using Python code. They encapsulate are designed to be independent units, reusable across different workflows.
-These components can be easily connected within a language model pipeline, adding freedom and flexibility to what can be included in between user and AI messages.
-
Since Langflow operates with Python behind the scenes, you can implement any Python function within a Custom Component. This means you can leverage the power of libraries such as Pandas, Scikit-learn, Numpy, and thousands of packages to create components that handle data processing in unlimited ways.
-Custom Components are not just about extending functionality; they also streamline the development process. By creating reusable and configurable components, you can enhance the capabilities of Langflow, making it a powerful tool for developing complex workflows.
-Key Characteristics:
+Custom Components
+Custom components are created within Langflow and extend the platform's functionality with custom, resusable Python code.
+Since Langflow operates with Python behind the scenes, you can implement any Python function within a Custom Component. This means you can leverage the power of libraries such as Pandas, Scikit-learn, Numpy, and thousands of other packages to create components that handle data processing in unlimited ways. You can use any type as long as the type is properly annotated in the output methods (e.g., > list[int]).
Custom Components create reusable and configurable components to enhance the capabilities of Langflow, making it a powerful tool for developing complex processing between user and AI messages.
+How to Create Custom Components
+Creating custom components in Langflow involves creating a Python class that defines the component's functionality, inputs, and outputs. +The default code provides a working structure for your custom component.
+
_25# from langflow.field_typing import Data_25from langflow.custom import Component_25from langflow.io import MessageTextInput, Output_25from langflow.schema import Data_25_25_25class CustomComponent(Component):_25 display_name = "Custom Component"_25 description = "Use as a template to create your own component."_25 documentation: str = "http://docs.langflow.org/components/custom"_25 icon = "custom_components"_25 name = "CustomComponent"_25_25 inputs = [_25 MessageTextInput(name="input_value", display_name="Input Value", value="Hello, World!"),_25 ]_25_25 outputs = [_25 Output(display_name="Output", name="output", method="build_output"),_25 ]_25_25 def build_output(self) -> Data:_25 data = Data(value=self.input_value)_25 self.status = data_25 return data
You can create your class in your favorite text editor outside of Langflow and paste it in later, or just follow along in the code pane.
-
-
- Modular and Reusable: Designed as independent units, components encapsulate specific functionality, making them reusable across different projects and workflows. -
- Integration with Python Libraries: You can import libraries like Pandas, Scikit-learn, Numpy, etc., to build components that handle data processing, machine learning, numerical computations, and more. -
- Flexible Inputs and Outputs: While Langflow offers native input and output types, you can use any type as long as they are properly annotated in the output methods (e.g.,
> list[int]).
- - Python-Powered: Since Langflow operates with Python behind the scenes, any Python function can be implemented within a custom component. -
- Enhanced Workflow: Custom components serve as reusable building blocks, enabling you to create pre-processing visual blocks with ease and integrate them into your language model pipeline. +
- In Langflow, from under Helpers, drag a Custom Component into the workspace. +
- Open the component's code pane. +
- Import dependencies.
+Your custom component inherits from the langflow
Componentclass so you need to include it.
Why Use Custom Components?
--
-
- Customization: Tailor the functionality to your specific needs by writing Python code that suits your workflow. -
- Flexibility: Add any Python-based logic or processing step between user/AI messages, enhancing the flexibility of Langflow. -
- Efficiency: Streamline your development process by creating reusable, configurable components that can be easily deployed. -
How to Write Them
--
Writing custom components in Langflow involves creating a Python class that defines the component's functionality, inputs, and outputs. The process involves a few key steps:
--
+
- Define the Class: Start by defining a Python class that inherits from
Component. This class will encapsulate the functionality of your custom component.
- - Specify Inputs and Outputs: Use Langflow's input and output classes to define the inputs and outputs of your component. They should be declared as class attributes. -
- Implement Output Methods: Implement methods for each output, which contains the logic of your component. These methods can access input values using
self.<input_name>, return processed values and define what to be displayed in the component with theself.statusattribute.
- - Use Proper Annotations: Ensure that output methods are properly annotated with their types. Langflow uses these annotations to validate and handle data correctly.
- Specify Inputs and Outputs: Use Langflow's input and output classes to define the inputs and outputs of your component. They should be declared as class attributes. +
- Implement Output Methods: Implement methods for each output, which contains the logic of your component. These methods can access input values using
self.<input_name>, return processed values and define what to be displayed in the component with theself.statusattribute.
+ - Use Proper Annotations: Ensure that output methods are properly annotated with their types. Langflow uses these annotations to validate and handle data correctly. For example, this method is annotated to output
Data.
+ - Click Check & Save to confirm your component works. +You now have an operational custom component. +
- Attributes:
file_typesto specify the types of files that can be uploaded. - Input Types:
["File"]
- load_from_db: Boolean indicating if the field should load from the database. Default isFalse.title_case: Boolean indicating if the display name should be in title case. Default isTrue.
-- The
input_textinput is a required multi-line text field.
- - The
max_lengthinput is an optional integer field with a range specification.
- - The
optionsinput is a list of strings with predefined options.
+ -
+
The
+input_textinput is a required multi-line text field that accepts a Message object or a string. It's used to provide the text for analysis.
+ -
+
The
+include_word_countinput is an optional boolean field. When set to True, it adds a word count to the analysis results.
+ -
+
The
+perform_sentiment_analysisinput is an optional boolean field. When set to True, it triggers a basic sentiment analysis of the input text. - Definition of Outputs: Each output is defined in the
outputslist of the component. Each output is associated with a display name, an internal name, and a method that gets called to generate the output. - Output Methods: The methods associated with outputs are responsible for generating the data for that particular output. These methods are called when the component is executed, and each method can independently produce its result.
process_data: Processes the input text (e.g., converts it to uppercase) and returns it.get_processing_function: Returns theprocess_datamethod itself to be reused in composition.
@@ -198,8 +217,7 @@
self.inputs: Access all defined inputs. Useful when an output method needs to interact with multiple inputs.
@@ -207,6 +225,8 @@
self.status: Use this to update the component's status or intermediate results. It helps track the component's internal state or store temporary data.self.graph.flow_id: Retrieve the flow ID, useful for maintaining context or debugging.self.stop("output_name"): Use this method within an output function to prevent data from being sent through other components. This method stops next component execution and is particularly useful for specific operations where a component should stop from running based on specific conditions.
-
_10from langflow.custom import Component_10from langflow.io import MessageTextInput, Output_10from langflow.schema import Data
Here's a basic structure of a custom component:
-
_31from langflow.custom import Component_31from langflow.inputs import StrInput, IntInput_31from langflow.template import Output_31_31class MyCustomComponent(Component):_31 icon = "coffee" # check lucide.dev/icons or pass an emoji_31_31 inputs = [_31 StrInput(_31 name="input_text",_31 display_name="Input Text",_31 info="Text to be processed.",_31 ),_31 IntInput(_31 name="input_number",_31 display_name="Input Number",_31 info="Number to be processed.",_31 ),_31 ]_31_31 outputs = [_31 Output(display_name="Processed Text", name="processed_text", method="process_text"),_31 ]_31_31 def process_text(self) -> str:_31 input_text = self.input_text_31 input_number = self.input_number_31 # Implement your logic here_31 processed_text = f"{input_text} processed with number {input_number}"_31 self.status = processed_text_31 return processed_text
Paste that code into the Custom Component code snippet and click Check & Save.
-
You should see something like the component below. Double click the name or description areas to edit them.
-
_10class CustomComponent(Component):_10 display_name = "Custom Component"_10 description = "Use as a template to create your own component."_10 documentation: str = "http://docs.langflow.org/components/custom"_10 icon = "custom_components"_10 name = "CustomComponent"
-
+
_10 inputs = [_10 MessageTextInput(name="input_value", display_name="Input Value", value="Hello, World!"),_10 ]_10_10 outputs = [_10 Output(display_name="Output", name="output", method="build_output"),_10 ]
-
+
_10 def build_output(self) -> Data:_10 data = Data(value=self.input_value)_10 self.status = data_10 return data
-
+
_10 def build_output(self) -> Data:
-
+
Add inputs and modify output methods
+This code defines a custom component that accepts 5 inputs and outputs a Message.
+Copy and paste it into the Custom Component code pane and click Check & Save.
+
_55from langflow.custom import Component_55from langflow.inputs import StrInput, MultilineInput, SecretStrInput, IntInput, DropdownInput_55from langflow.template import Output, Input_55from langflow.schema.message import Message_55_55class MyCustomComponent(Component):_55 display_name = "My Custom Component"_55 description = "An example of a custom component with various input types."_55_55 inputs = [_55 StrInput(_55 name="username",_55 display_name="Username",_55 info="Enter your username."_55 ),_55 SecretStrInput(_55 name="password",_55 display_name="Password",_55 info="Enter your password."_55 ),_55 MessageTextInput(_55 name="special_message",_55 display_name="special_message",_55 info="Enter a special message.",_55 ),_55 IntInput(_55 name="age",_55 display_name="Age",_55 info="Enter your age."_55 ),_55 DropdownInput(_55 name="gender",_55 display_name="Gender",_55 options=["Male", "Female", "Other"],_55 info="Select your gender."_55 )_55 ]_55_55 outputs = [_55 Output(display_name="Result", name="result", method="process_inputs"),_55 ]_55_55 def process_inputs(self) -> Message:_55 """_55 Process the user inputs and return a Message object._55_55 Returns:_55 Message: A Message object containing the processed information._55 """_55 try:_55 processed_text = f"User {self.username} (Age: {self.age}, Gender: {self.gender}) " \_55 f"sent the following special message: {self.special_message}"_55 return Message(text=processed_text)_55 except AttributeError as e:_55 return Message(text=f"Error processing inputs: {str(e)}")
Since the component outputs a Message, you can wire it into a chat and pass messages to yourself.
Your Custom Component accepts the Chat Input message through MessageTextInput, fills in the variables with the process_inputs method, and finally passes the message User Username (Age: 49, Gender: Male) sent the following special message: Hello! to Chat Output.
By defining inputs this way, Langflow can automatically handle the validation and display of these fields in the user interface, making it easier to create robust and user-friendly custom components.
+All of the types detailed above derive from a general class that can also be accessed through the generic Input class.
Use MessageInput to get the entire Message object instead of just the text.
Input Types
Langflow provides several higher-level input types to simplify the creation of custom components. These input types standardize how inputs are defined, validated, and used. Here’s a guide on how to use these inputs and their primary purposes:
@@ -141,10 +154,6 @@Here is an example of how these inputs can be defined in a custom component:
-
_44from langflow.custom import Component_44from langflow.inputs import StrInput, MultilineInput, SecretStrInput, IntInput, DropdownInput_44from langflow.template import Output, Input_44_44class MyCustomComponent(Component):_44 display_name = "My Custom Component"_44 description = "An example of a custom component with various input types."_44_44 inputs = [_44 StrInput(_44 name="username",_44 display_name="Username",_44 info="Enter your username."_44 ),_44 SecretStrInput(_44 name="password",_44 display_name="Password",_44 info="Enter your password."_44 ),_44 MultilineInput(_44 name="description",_44 display_name="Description",_44 info="Enter a detailed description.",_44 ),_44 IntInput(_44 name="age",_44 display_name="Age",_44 info="Enter your age."_44 ),_44 DropdownInput(_44 name="gender",_44 display_name="Gender",_44 options=["Male", "Female", "Other"],_44 info="Select your gender."_44 )_44 ]_44_44 outputs = [_44 Output(display_name="Result", name="result", method="process_inputs"),_44 ]_44_44 def process_inputs(self):_44 # Your processing logic here_44 return "Processed"
By defining inputs this way, Langflow can automatically handle the validation and display of these fields in the user interface, making it easier to create robust and user-friendly custom components.
-All of the types detailed above derive from a general class that can also be accessed through the generic Input class.
Generic Input
Langflow offers native input types, but you can use any type as long as they are properly annotated in the output methods (e.g., -> list[int]).
Below is an example of how to define inputs for a component using the Input class:
_48from langflow.template import Input, Output_48from langflow.custom import Component_48from langflow.field_typing import Text_48_48class ExampleComponent(Component):_48 display_name = "Example Component"_48 description = "An example component demonstrating input fields."_48_48 inputs = [_48 Input(_48 name="input_text",_48 display_name="Input Text",_48 field_type="str",_48 required=True,_48 placeholder="Enter some text",_48 multiline=True,_48 info="This is a required text input.",_48 input_types=["Text"]_48 ),_48 Input(_48 name="max_length",_48 display_name="Max Length",_48 field_type="int",_48 required=False,_48 placeholder="Maximum length",_48 info="Enter the maximum length of the text.",_48 range_spec={"min": 0, "max": 1000},_48 ),_48 Input(_48 name="options",_48 display_name="Options",_48 field_type="str",_48 is_list=True,_48 options=["Option 1", "Option 2", "Option 3"],_48 info="Select one or more options."_48 ),_48 ]_48_48 outputs = [_48 Output(display_name="Result", name="result", method="process_input"),_48 ]_48_48 def process_input(self) -> Text:_48 # Process the inputs and generate output_48 return Text(value=f"Processed: {self.input_text}, Max Length: {self.max_length}, Options: {self.options}")_48_48# Define how to use the inputs and outputs_48component = ExampleComponent()
In this example:
+Create a Custom Component with Generic Input
+Here is an example of how to define inputs for a component using the Input class.
Copy and paste it into the Custom Component code pane and click Check & Save.
+
_76from langflow.template import Input, Output_76from langflow.custom import Component_76from langflow.field_typing import Text_76from langflow.schema.message import Message_76from typing import Dict, Any_76_76class TextAnalyzerComponent(Component):_76 display_name = "Text Analyzer"_76 description = "Analyzes input text and provides basic statistics."_76_76 inputs = [_76 Input(_76 name="input_text",_76 display_name="Input Text",_76 field_type="Message",_76 required=True,_76 placeholder="Enter text to analyze",_76 multiline=True,_76 info="The text you want to analyze.",_76 input_types=["Text"]_76 ),_76 Input(_76 name="include_word_count",_76 display_name="Include Word Count",_76 field_type="bool",_76 required=False,_76 info="Whether to include word count in the analysis.",_76 ),_76 Input(_76 name="perform_sentiment_analysis",_76 display_name="Perform Sentiment Analysis",_76 field_type="bool",_76 required=False,_76 info="Whether to perform basic sentiment analysis.",_76 ),_76 ]_76_76 outputs = [_76 Output(display_name="Analysis Results", name="results", method="analyze_text"),_76 ]_76_76 def analyze_text(self) -> Message:_76 # Extract text from the Message object_76 if isinstance(self.input_text, Message):_76 text = self.input_text.text_76 else:_76 text = str(self.input_text)_76_76 results = {_76 "character_count": len(text),_76 "sentence_count": text.count('.') + text.count('!') + text.count('?')_76 }_76_76 if self.include_word_count:_76 results["word_count"] = len(text.split())_76_76 if self.perform_sentiment_analysis:_76 # Basic sentiment analysis_76 text_lower = text.lower()_76 if "happy" in text_lower or "good" in text_lower:_76 sentiment = "positive"_76 elif "sad" in text_lower or "bad" in text_lower:_76 sentiment = "negative"_76 else:_76 sentiment = "neutral"_76_76 results["sentiment"] = sentiment_76_76 # Convert the results dictionary to a formatted string_76 formatted_results = "\n".join([f"{key}: {value}" for key, value in results.items()])_76_76 # Return a Message object_76 return Message(text=formatted_results)_76_76# Define how to use the inputs and outputs_76component = TextAnalyzerComponent()
In this custom component:
-
-
These attributes allow for a high degree of customization, making it easy to create input fields that suit the needs of your specific component.
-Multiple Outputs
+The component performs basic text analysis, including character count and sentence count (based on punctuation marks). If word count is enabled, it splits the text and counts the words. If sentiment analysis is enabled, it performs a simple keyword-based sentiment classification (positive, negative, or neutral).
+Since the component inputs and outputs a Message, you can wire the component into a chat and see how the basic custom component logic interacts with your input.
Create a Custom Component with Multiple Outputs
In Langflow, custom components can have multiple outputs. Each output can be associated with a specific method in the component, allowing you to define distinct behaviors for each output path. This feature is particularly useful when you want to route data based on certain conditions or process it in multiple ways.
Below is an example of a component with two outputs:
+This example component has two outputs:
_33from typing import Callable_33from langflow.custom import Component_33from langflow.inputs import StrInput_33from langflow.template import Output_33from langflow.field_typing import Text_33_33class DualOutputComponent(Component):_33 display_name = "Dual Output"_33 description = "Processes input text and returns both the result and the processing function."_33 icon = "double-arrow"_33_33 inputs = [_33 StrInput(_33 name="input_text",_33 display_name="Input Text",_33 info="The text input to be processed.",_33 ),_33 ]_33_33 outputs = [_33 Output(display_name="Processed Data", name="processed_data", method="process_data"),_33 Output(display_name="Processing Function", name="processing_function", method="get_processing_function"),_33 ]_33_33 def process_data(self) -> Text:_33 # Process the input text (e.g., convert to uppercase)_33 processed = self.input_text.upper()_33 self.status = processed_33 return processed_33_33 def get_processing_function(self) -> Callable[[], Text]:_33 # Return the processing function itself_33 return self.process_data
This example shows how to define multiple outputs in a custom component. The first output returns the processed data, while the second output returns the processing function itself.
The processing_function output can be used in scenarios where the function itself is needed for further processing or dynamic flow control. Notice how both outputs are properly annotated with their respective types, ensuring clarity and type safety.
Special Operations
-+
Special Operations
Advanced methods and attributes offer additional control and functionality. Understanding how to leverage these can enhance your custom components' capabilities.
Hi, how can I help you?
Contribute Custom Components to Langflow
+See How to Contribute to contribute your custom component to Langflow.