docs: update custom components documentation (Fixes #5595) (#5626)

* Update custom components documentation (Fixes #5595)

* docs: cleanup

---------

Co-authored-by: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
This commit is contained in:
ThomaciousD 2025-01-10 23:19:11 +01:00 committed by GitHub
commit 05386301c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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.