How do i add new components into the sidebar?

[Warit314]

Hi, i'm using one of my custom component a lot. and i'm tired of having to copy the components every time. So, Do you guys know how i add my own custom components into the side bar?

[dosubot[bot]]

Hey @Warit314, great to see you back here! Hope you've been doing well since our last chat. 😊

To add your custom components to the sidebar in Langflow, you need to follow these steps:

1. Define Your Custom Component: Create a Python class for your custom component that inherits from CustomComponent. This class should define the component's behavior, including its input fields (arguments) and output types. Use the CustomComponent class as a base for creating your components.

2. Implement Required Methods: Implement the necessary methods in your custom component class, such as build_config to define the component's configuration and get_function_entrypoint_args to specify the input arguments. Also, define the return type of your component's main function using get_function_entrypoint_return_type.

3. Add Component to Sidebar Configuration: Use the build_custom_components function to build and load your custom components from the specified paths. Ensure your custom component files are placed in the directory specified by settings_service.settings.COMPONENTS_PATH. This function processes each path, builds custom components from the files found, and merges them into the application's configuration.

4. Register Your Component: Ensure your custom component is properly registered and recognized by the system. This involves making sure the component's code is evaluated and instantiated correctly using eval_custom_component_code and that the component template is built using build_custom_component_template.

5. Update Sidebar Configuration: After defining and registering your custom component, update the application's sidebar configuration to include your new component. This might involve modifying the application's frontend to recognize and display your custom component in the sidebar based on its category or other attributes.

Here's a simplified example of how you might define a custom component:

class MyCustomComponent(CustomComponent):
    def build_config(self):
        # Define the configuration for your custom component
        return {
            "field_name": TemplateField(
                name="field_name",
                field_type="text",
                value="",
                required=True,
                placeholder="Enter some text",
            )
        }

    @property
    def get_function_entrypoint_args(self):
        # Define the input arguments for your component
        return [{"name": "field_name", "type": "str"}]

    @property
    def get_function_entrypoint_return_type(self):
        # Define the return type of your component's main function
        return ["str"]

Ensure your custom component class is correctly implemented and placed in the directory specified by COMPONENTS_PATH in your settings. The system will automatically process and load your custom components into the sidebar based on the configuration and methods you define in your component class.

On the frontend, components are added to the sidebar by passing an array of items to the SidebarNav component. Each item in the array should be an object containing href, title, and icon properties. The href property is a string representing the path to which the sidebar item should link, title is a string representing the text to be displayed for the sidebar item, and icon is a ReactNode representing the icon to be displayed alongside the title. These items are then mapped to Link components, which are rendered as part of the sidebar navigation.

You can find more details in the source code:

• src/backend/langflow/interface/custom/utils.py
• src/frontend/src/components/sidebarComponent/index.tsx

Please note that you might need to adjust the frontend code to properly display your custom components in the sidebar.

Sources

• src/backend/langflow/interface/custom/utils.py
• src/backend/langflow/api/router.py
• src/frontend/src/components/sidebarComponent/index.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[Warit314]

Where is the COMPONENTS_PATH?

[ayubSubhaniya]

Are there any plans to make adding new type of agent/document loader etc config driven without doing code change? I was just thinking if this could be driven by config.yaml entirely