diff --git a/docs/docs/Components/components-custom-components.md b/docs/docs/Components/components-custom-components.md index 7a34df476..52c7f5f78 100644 --- a/docs/docs/Components/components-custom-components.md +++ b/docs/docs/Components/components-custom-components.md @@ -1,5 +1,5 @@ --- -title: Create custom components +title: Create custom Python components slug: /components-custom-components --- @@ -9,6 +9,46 @@ Since Langflow operates with Python behind the scenes, you can implement any Pyt 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. +## Directory structure requirements + +By default, Langflow looks for custom components in the `langflow/components` directory. + +If you're creating custom components in a different location using the [LANGFLOW_COMPONENTS_PATH](/environment-variables#LANGFLOW_COMPONENTS_PATH) +`LANGFLOW_COMPONENTS_PATH` environment variable, components must be organized in a specific directory structure to be properly loaded and displayed in the UI: + +``` +/your/custom/components/path/ # Base directory (set by LANGFLOW_COMPONENTS_PATH) + └── category_name/ # Required category subfolder (determines menu name) + └── custom_component.py # Component file +``` + +Components must be placed inside **category folders**, not directly in the base directory. +The category folder name determines where the component appears in the UI menu. + +For example, to add a component to the **Helpers** menu, place it in a `helpers` subfolder: + +``` +/app/custom_components/ # LANGFLOW_COMPONENTS_PATH + └── helpers/ # Shows up as "Helpers" menu + └── custom_component.py # Your component +``` + +You can have **multiple category folders** to organize components into different menus: +``` +/app/custom_components/ + ├── helpers/ + │ └── helper_component.py + └── tools/ + └── tool_component.py +``` + +This folder structure is required for Langflow to properly discover and load your custom components. Components placed directly in the base directory will not be loaded. + +``` +/app/custom_components/ # LANGFLOW_COMPONENTS_PATH + └── custom_component.py # Won't be loaded - missing category folder! +``` + ## Create a custom component in Langflow Creating custom components in Langflow involves creating a Python class that defines the component's functionality, inputs, and outputs. @@ -23,7 +63,7 @@ from langflow.schema import Data class CustomComponent(Component): display_name = "Custom Component" description = "Use as a template to create your own component." - documentation: str = "http://docs.langflow.org/components/custom" + documentation: str = "https://docs.langflow.org/components-custom-components" icon = "custom_components" name = "CustomComponent" @@ -44,7 +84,7 @@ class CustomComponent(Component): 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. -1. In Langflow, from under **Helpers**, drag a **Custom Component** into the workspace. +1. In Langflow, click **+ Custom Component** to add a custom component into the workspace. 2. Open the component's code pane. 3. Import dependencies. Your custom component inherits from the langflow `Component` class so you need to include it.