How to save a custom component to the sidebar?

[MarcosAndre01]

@dosu How do i add a custom component to the sidebar, so i dont need to copy and paste the code to reuse it ?

[dosubot[bot]]

Hello @MarcosAndre01! I'm here to help you with any bugs, questions, or contributions you have. Let's solve this together!

To add a custom component to the sidebar and avoid copying and pasting the code for reuse, you can use the existing functionality in the FlowSidebarComponent. Here's how you can do it:

1. Define Your Custom Component: Ensure that your custom component is defined in the data structure that the sidebar uses. This is referenced in the code as data?.["custom_component"]?.["CustomComponent"].

2. Add the Custom Component Button: The sidebar footer includes a button that, when clicked, will add the custom component. This is done using the addComponent function:

   <SidebarMenuButton asChild>
     <Button
       unstyled
       onClick={() => {
         if (customComponent) {
           addComponent(customComponent, "CustomComponent");
         }
       }}
       data-testid="sidebar-custom-component-button"
       className="flex items-center gap-2"
     >
       <ForwardedIconComponent
         name="Plus"
         className="h-4 w-4 text-muted-foreground"
       />
       <span className="group-data-[state=open]/collapsible:font-semibold">
         Custom Component
       </span>
     </Button>
   </SidebarMenuButton>

3. Ensure Data Availability: Make sure that the customComponent is available in the data object. This is done using a useMemo hook:

   const customComponent = useMemo(() => {
     return data?.["custom_component"]?.["CustomComponent"] ?? null;
   }, [data]);

By following these steps, you can add a custom component to the sidebar without needing to copy and paste code for reuse. The existing structure and hooks in the FlowSidebarComponent facilitate this functionality ^[1].

To continue talking to Dosu, mention @dosu.

[dosubot[bot]]

Ensure that your custom component is correctly set up and loaded in Langflow by following these steps:

1. Folder Structure: Verify that your custom component is placed in a custom_components subdirectory within a main directory that follows the structural conventions of the config.yaml file. Each component should be in its own Python file within this directory ^[1].

2. Environment Variable: Make sure the LANGFLOW_COMPONENTS_PATH environment variable is set to the path of your custom components directory. Alternatively, use the --components-path argument when running the Langflow CLI to specify the path ^[2].

3. Component Code: Ensure your component class inherits from CustomComponent and includes the necessary methods like build. Check for any errors in the code, as Langflow will not load components with errors ^[1].

4. Run Langflow CLI: After setting the environment variable or using the --components-path argument, run the Langflow CLI to load your components. If everything is set up correctly, your custom component should appear in the Langflow UI sidebar ^[2].

If your component still doesn't appear, double-check for any errors in the console output, as Langflow will print error messages for components that fail to load.

To continue talking to Dosu, mention @dosu.

[MarcosAndre01]

@dosu show a complete example

[dosubot[bot]]

To set up and load a custom component in Langflow, follow these steps:

1. Create the Custom Component:

   Create a Python script for your custom component. Here's a complete example of a DocumentProcessor component:

   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)

2. Organize the Folder Structure:

   Create a folder structure for your custom components:

   .
   └── custom_components
       ├── document_processor.py
   

3. Load the Custom Component:

   Set the LANGFLOW_COMPONENTS_PATH environment variable to the path of your custom components directory and run the Langflow CLI:

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

   Alternatively, use the --components-path argument:

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

4. Interact with the Custom Component:

   Once loaded, your custom component will appear in Langflow's sidebar, ready to be added to your workspace. Ensure your code is error-free before attempting to load components, as components with errors will not be available for addition to the canvas ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[MarcosAndre01]

@dosu error has no attribute build_results

[dosubot[bot]]

To resolve the "error has no attribute build_results" issue in your custom component, ensure the following:

1. Correct Class Usage: Verify that you are using the correct class that includes the build_results method. The class should be Component, which has this method defined.

2. Namespace and Imports: Check for any namespace issues or import errors that might cause the wrong class to be referenced.

3. Code Version: Ensure your code is up-to-date with the latest version where the build_results method is present in the class definition.

4. Inheritance: If you have subclassed Component, make sure the subclass does not override or remove the build_results method ^[1].

To continue talking to Dosu, mention @dosu.

[viniciossilva3]

Hi @MarcosAndre01 !

How to save your components in Sidebar

To save your component to the sidebar, you can follow one of these methods:

1. Select the component and use the shortcut CTRL + ALT + S.

Or

2. Select the component, click on the three dots in the drop-down menu above it and then click Save.

Choose the method that is easiest for you!

Optional: Sharing Components

You can share your components with other people! To do this, create an account on the Langflow Store, copy your API Key and add it to the Langflow settings. Then, select the component, open the drop-down menu above it and click on Share and then on Share Component. This will share your component and also save it in the Store.

If you want to use it again in the future, just go to the Store and install or download the component.

If this solution helped you, mark the answer as correct to help others with the same question!

Good luck!

save-component.mp4