Creating custom components without the UI

[Alexander-Mark]

Hi there

Is it possible to create custom components without using the UI? We need to dev the components in an IDE for auto-complete, linting, testing etc purposes.

[dosubot[bot]]

Hey @Alexander-Mark! I'm here to assist you with any bugs, questions, or contributions you have. Let's squash those bugs together! 😊

I found a similar solved discussion that might be helpful: Build local tools without frontend ^[1].

To create custom components without using the UI, you can follow these steps:

1. Create a Custom Component:
   Use a template to define your custom component. Here's a basic example:

   from langflow.custom import Component
   from langflow.inputs import MessageTextInput
   from langflow.template import Output
   from langflow.schema import Data
   
   class MyCustomComponent(Component):
       display_name = "My Custom Component"
       description = "A simple custom component example."
       icon = "icon-name"
   
       inputs = [
           MessageTextInput(
               name="input_text",
               display_name="Input Text",
               info="Text input for the component.",
           ),
       ]
   
       outputs = [
           Output(display_name="Output Data", name="output_data", method="process_data"),
       ]
   
       def process_data(self) -> Data:
           input_text = self.input_text
           result = f"Processed: {input_text}"
           self.status = result
           return Data(data={"result": result})

2. Use build_tool Method:
   This method constructs a Tool object from Python code, allowing you to dynamically execute and integrate custom functions.

3. Implement run_model Method:
   Implement this method in your custom component to execute specific model logic.

4. Test Independently:
   Write unit tests to verify your component's functionality using tools like pytest.

By following these steps, you can develop and test your custom components in an IDE with features like auto-complete and linting, without needing to use the UI.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[Alexander-Mark]

@dosu I want to create a set of custom components without using Langflow server's front-end UI. In other words: how/where can I create components so that they will be available when I start the app?

[dosubot[bot]]

To create a set of custom components without using Langflow server's front-end UI and have them available when you start the app, follow these steps:

1. Create a Folder Structure: Set up a directory structure for your custom components. Inside your main directory, create a custom_components subdirectory for your custom components. Each component should be a separate Python file within this directory.

   Example structure:

   .
   └── custom_components
       ├── document_processor.py
       └── ...
   

2. Write Custom Component Code: Each Python file should define a class that inherits from CustomComponent and implements the necessary methods for processing data. Define the component's metadata, inputs, and outputs.

   Example component code:

   from langflow.custom import CustomComponent
   from langchain.schema import Document
   
   class DocumentProcessor(CustomComponent):
       display_name = "Document Processor"
       description = "This component processes a document"
   
       def build_config(self) -> dict:
           options = ["Uppercase", "Lowercase", "Titlecase"]
           return {
               "function": {"options": options, "value": options[0], "display_name": "Function"},
               "document": {"display_name": "Document"}
           }
   
       def build(self, document: Document, function: str) -> Document:
           if isinstance(document, list):
               document = document[0]
           page_content = document.page_content
           if function == "Uppercase":
               page_content = page_content.upper()
           elif function == "Lowercase":
               page_content = page_content.lower()
           elif function == "Titlecase":
               page_content = page_content.title()
           self.repr_value = f"Result of {function} function: {page_content}"
           return Document(page_content=page_content)

3. Load Custom Components: Use the Langflow CLI to load your custom components by setting the LANGFLOW_COMPONENTS_PATH environment variable to the path of your custom components directory.

   Example command:

   export LANGFLOW_COMPONENTS_PATH='["/path/to/components"]'
   langflow run

   Alternatively, specify the path using the --components-path argument:

   langflow run --components-path /path/to/components

By following these steps, your custom components will be available in Langflow's sidebar when you start the app. Ensure your code is error-free before attempting to load components, as Langflow will print an error message for any components that fail to load but will continue loading the rest ^[1][2][3].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[nirvitarka]

@dosu with the help of this discussion, I am trying to create a custom component.
The input processing method of this component needs to connect to a remote server database.
I have function with this signature which includes database connection logic as part of it.

def build_output(self) -> list[Data]

While starting langflow, when components are being built, this gives error as the database is turned off temporarily.

So is this the correct way to connect to db? Or the right place is somewhere else for such things in case of custom components?

I basically want the connection to happen only while executing the flow which uses this component.

[dosubot[bot]]

To ensure that the database connection in your custom component only occurs during the execution of a flow, you should move the database connection logic from the build_output method to the execution method. This way, the connection is established only when the flow is executed, not when the component is being built. Here's how you can modify your component:

1. Move the Database Connection Logic: Place the database connection logic inside the method that is responsible for executing the flow, rather than in the build_output method.

2. Example Modification: If your component has an execute method or similar, move the connection logic there. Here's a conceptual example:

   class MyCustomComponent(CustomComponent):
       # ... (other parts of the class)
   
       def execute(self, *args, **kwargs) -> list[Data]:
           try:
               # Establish the database connection here
               database = connect_to_database()
               # Perform operations using the database
               result = perform_query(database, *args, **kwargs)
           except Exception as e:
               # Handle exceptions
               result = handle_error(e)
           finally:
               # Ensure the database connection is closed
               close_database_connection(database)
           
           return result

By moving the connection logic to the execution phase, you ensure that the database is only accessed when the flow is actively running, thus avoiding errors when the database is temporarily turned off during the component build phase ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[anovazzi1]

hey @Alexander-Mark it's totally possible, create a python file inside the components folder for the selfhosted version, your IDE will have access to all the types and classes Langflow provide