Can't find custom components

[dylanwe]

Bug Description

I don't see my custom components. I have the following dockerfile and docker compose configuration:

FROM langflowai/langflow:1.0.19
CMD ["langflow", "run"]

version: "3.9"

services:
  langflow:
    build:
      context: .
      dockerfile: dev.Dockerfile
    ports:
      - "7860:7860"
    depends_on:
      - postgres
    environment:
      - LANGFLOW_DATABASE_URL=postgresql://langflow:langflow@postgres:5432/langflow
      - LANGFLOW_SECRET_KEY=superSecretKey
      - LANGFLOW_PORT=7860
      - LANGFLOW_HOST=0.0.0.0
    volumes:
      - langflow-data:/app/langflow

  postgres:
    image: postgres:16
    environment:
      POSTGRES_USER: langflow
      POSTGRES_PASSWORD: langflow
      POSTGRES_DB: langflow
    ports:
      - "5432:5432"
    volumes:
      - langflow-postgres:/var/lib/postgresql/data

volumes:
  langflow-postgres:
  langflow-data:

With the following component to test:

from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES
from langflow.base.io.chat import ChatComponent
from langflow.inputs import BoolInput
from langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output
from langflow.memory import store_message
from langflow.schema.message import Message
from langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER

class ChatInput(ChatComponent):
    display_name = "Dylan Component"
    description = "This is a an example of a custom component."
    icon = "ChatInput"
    name = "Dylan Component"

    inputs = [
        MultilineInput(
            name="input_value",
            display_name="Text",
            value="",
            info="Message to be passed as input.",
        ),
        BoolInput(
            name="should_store_message",
            display_name="Store Messages",
            info="Store the message in the history.",
            value=True,
            advanced=True,
        ),
        DropdownInput(
            name="sender",
            display_name="Sender Type",
            options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],
            value=MESSAGE_SENDER_USER,
            info="Type of sender.",
            advanced=True,
        ),
        MessageTextInput(
            name="sender_name",
            display_name="Sender Name",
            info="Name of the sender.",
            value=MESSAGE_SENDER_NAME_USER,
            advanced=True,
        ),
        MessageTextInput(
            name="session_id",
            display_name="Session ID",
            info="The session ID of the chat. If empty, the current session ID parameter will be used.",
            advanced=True,
        ),
        FileInput(
            name="files",
            display_name="Files",
            file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,
            info="Files to be sent with the message.",
            advanced=True,
            is_list=True,
        ),
    ]
    outputs = [
        Output(display_name="Message", name="message", method="message_response"),
    ]

    def message_response(self) -> Message:
        message = Message(
            text=self.input_value,
            sender=self.sender,
            sender_name=self.sender_name,
            session_id=self.session_id,
            files=self.files,
        )

        if (
                self.session_id
                and isinstance(message, Message)
                and isinstance(message.text, str)
                and self.should_store_message
        ):
            store_message(
                message,
                flow_id=self.graph.flow_id,
            )
            self.message.value = message

        self.status = message
        return message

I see my component in the volume, but it doesn't show up when searching in the UI and I don't see an error in the logs

Reproduction

Run the dockerfile

Expected behavior

Be able to use the component in langflow.

Who can help?

@ogabrielluiz

Operating System

MacOS

Langflow Version

1.0.19

Python Version

3.12

Screenshot

Flow File

No response

[dosubot[bot]]

There are a few similar issues that might help you resolve the problem with your custom components not appearing in Langflow.

1. Custom Components Not Appearing After Upgrade: One issue was related to custom components not appearing after upgrading to a new version. The solution involved ensuring that the __init__.py file in the custom_component directory correctly imports and exposes the necessary components. Additionally, the LANGFLOW_COMPONENTS_PATH environment variable should be correctly set to the path of your custom components directory ^[1].

2. Components Overwriting Each Other: Another issue was that components with the same return type were overwriting each other in the UI. A temporary solution was to wrap each CustomComponent's return value to ensure they have unique return types ^[2].

For your specific case, ensure that:

• The __init__.py file in your custom components directory is set up correctly.
• The LANGFLOW_COMPONENTS_PATH is correctly set in your Dockerfile or environment.
• Check for any console errors when Langflow starts, as they might indicate issues with loading the component.

These steps should help in troubleshooting the issue with your custom components not appearing in the UI.

To continue talking to Dosu, mention @dosu.

[ogabrielluiz]

Hey @dylanwe

How are you?

You should probably add them to an existing category (i.e one of the folder names in the repo's src/backend/base/langflow/components folder).

Let me know if that works.

[dylanwe]

Hey @dylanwe

How are you?

You should probably add them to an existing category (i.e one of the folder names in the repo's src/backend/base/langflow/components folder).

Let me know if that works.

Hey @ogabrielluiz, I'm good thanks for asking :).

I've changed my config to use a folder name from the components folder but I'm still not seeing it, now it looks like this:

FROM langflowai/langflow:1.0.19
COPY ./custom_components/components langflow/components
CMD ["langflow", "run"]

version: "3.9"

services:
  langflow:
    build:
      context: .
      dockerfile: dev.Dockerfile
    ports:
      - "7860:7860"
    depends_on:
      - postgres
    environment:
      - LANGFLOW_DATABASE_URL=postgresql://langflow:langflow@postgres:5432/langflow
      - LANGFLOW_SECRET_KEY=superSecretKey
      - LANGFLOW_PORT=7860
      - LANGFLOW_HOST=0.0.0.0

  postgres:
    image: postgres:16
    environment:
      POSTGRES_USER: langflow
      POSTGRES_PASSWORD: langflow
      POSTGRES_DB: langflow
    ports:
      - "5432:5432"
    volumes:
      - langflow-postgres:/var/lib/postgresql/data

volumes:
  langflow-postgres:

The copied folder looks like this:

If i check the container I can see it:

I've also tried adding this env variableLANGFLOW_COMPONENTS_PATH=/app/langflow/components but that also didn't work.

Could it be that it's wrong to use the custom_component folder instead of another one like helpers? It seems like it, I've changed my directory from custom_component to agents and that worked! thank you for the help.