Merge dev into types_refactor

src/backend/langflow/__init__.py

@@ -1,6 +1,7 @@
 from importlib import metadata
-from langflow.cache import cache_manager  # noqa: E402
-from langflow.processing.process import load_flow_from_json  # noqa: E402
+from langflow.cache import cache_manager
+from langflow.processing.process import load_flow_from_json
+from langflow.interface.custom.custom_component import CustomComponent
 
 try:
     __version__ = metadata.version(__package__)
@@ -9,5 +10,4 @@ except metadata.PackageNotFoundError:
     __version__ = ""
 del metadata  # optional, avoids polluting the results of dir(__package__)
 
-
-__all__ = ["load_flow_from_json", "cache_manager"]
+__all__ = ["load_flow_from_json", "cache_manager", "CustomComponent"]

src/backend/langflow/__main__.py

@@ -2,7 +2,8 @@ import os
 import sys
 import time
 import httpx
-from multiprocess import Process, cpu_count  # type: ignore
+from langflow.utils.util import get_number_of_workers
+from multiprocess import Process  # type: ignore
 import platform
 from pathlib import Path
 from typing import Optional
@@ -20,18 +21,13 @@ from dotenv import load_dotenv
 app = typer.Typer()
 
 
-def get_number_of_workers(workers=None):
-    if workers == -1:
-        workers = (cpu_count() * 2) + 1
-    return workers
-
-
 def update_settings(
     config: str,
     cache: str,
     dev: bool = False,
     database_url: Optional[str] = None,
     remove_api_keys: bool = False,
+    components_path: Optional[Path] = None,
 ):
     """Update the settings from a config file."""
 
@@ -39,13 +35,19 @@ def update_settings(
     database_url = database_url or os.getenv("langflow_database_url")
 
     if config:
+        logger.debug(f"Loading settings from {config}")
         settings.update_from_yaml(config, dev=dev)
     if database_url:
         settings.update_settings(database_url=database_url)
     if remove_api_keys:
+        logger.debug(f"Setting remove_api_keys to {remove_api_keys}")
         settings.update_settings(remove_api_keys=remove_api_keys)
     if cache:
+        logger.debug(f"Setting cache to {cache}")
         settings.update_settings(cache=cache)
+    if components_path:
+        logger.debug(f"Adding component path {components_path}")
+        settings.update_settings(components_path=components_path)
 
 
 def load_params():
@@ -120,10 +122,15 @@ def serve(
         "127.0.0.1", help="Host to bind the server to.", envvar="LANGFLOW_HOST"
     ),
     workers: int = typer.Option(
-        1, help="Number of worker processes.", envvar="LANGFLOW_WORKERS"
+        2, help="Number of worker processes.", envvar="LANGFLOW_WORKERS"
     ),
-    timeout: int = typer.Option(60, help="Worker timeout in seconds."),
+    timeout: int = typer.Option(300, help="Worker timeout in seconds."),
     port: int = typer.Option(7860, help="Port to listen on.", envvar="LANGFLOW_PORT"),
+    components_path: Optional[Path] = typer.Option(
+        Path(__file__).parent / "components",
+        help="Path to the directory containing custom components.",
+        envvar="LANGFLOW_COMPONENTS_PATH",
+    ),
     config: str = typer.Option("config.yaml", help="Path to the configuration file."),
     # .env file param
     env_file: Path = typer.Option(
@@ -181,6 +188,7 @@ def serve(
         database_url=database_url,
         remove_api_keys=remove_api_keys,
         cache=cache,
+        components_path=components_path,
     )
     # create path object if path is provided
     static_files_dir: Optional[Path] = Path(path) if path else None
@@ -298,7 +306,7 @@ def run_langflow(host, port, log_level, options, app):
     Run Langflow server on localhost
     """
     try:
-        if platform.system() in ["Darwin", "Windows"]:
+        if platform.system() in ["Windows"]:
             # Run using uvicorn on MacOS and Windows
             # Windows doesn't support gunicorn
             # MacOS requires an env variable to be set to use gunicorn

src/backend/langflow/api/router.py

@@ -6,6 +6,7 @@ from langflow.api.v1 import (
     validate_router,
     flows_router,
     flow_styles_router,
+    component_router,
 )
 
 router = APIRouter(
@@ -14,5 +15,6 @@ router = APIRouter(
 router.include_router(chat_router)
 router.include_router(endpoints_router)
 router.include_router(validate_router)
+router.include_router(component_router)
 router.include_router(flows_router)
 router.include_router(flow_styles_router)

src/backend/langflow/api/utils.py

@@ -57,3 +57,12 @@ def build_input_keys_response(langchain_object, artifacts):
         input_keys_response["template"] = langchain_object.prompt.template
 
     return input_keys_response
+
+
+def merge_nested_dicts(dict1, dict2):
+    for key, value in dict2.items():
+        if isinstance(value, dict) and isinstance(dict1.get(key), dict):
+            dict1[key] = merge_nested_dicts(dict1[key], value)
+        else:
+            dict1[key] = value
+    return dict1

src/backend/langflow/api/v1/__init__.py

@@ -3,10 +3,12 @@ from langflow.api.v1.validate import router as validate_router
 from langflow.api.v1.chat import router as chat_router
 from langflow.api.v1.flows import router as flows_router
 from langflow.api.v1.flow_styles import router as flow_styles_router
+from langflow.api.v1.components import router as component_router
 
 __all__ = [
     "chat_router",
     "endpoints_router",
+    "component_router",
     "validate_router",
     "flows_router",
     "flow_styles_router",

src/backend/langflow/api/v1/callback.py

@@ -91,8 +91,8 @@ class AsyncStreamingLLMCallbackHandler(AsyncCallbackHandler):
             # This is to emulate the stream of tokens
             for resp in resps:
                 await self.websocket.send_json(resp.dict())
-        except Exception as e:
-            logger.error(e)
+        except Exception as exc:
+            logger.error(f"Error sending response: {exc}")
 
     async def on_tool_error(
         self, error: Union[Exception, KeyboardInterrupt], **kwargs: Any

src/backend/langflow/api/v1/chat.py

@@ -26,7 +26,7 @@ async def chat(client_id: str, websocket: WebSocket):
             message = "Please, build the flow before sending messages"
             await websocket.close(code=status.WS_1011_INTERNAL_ERROR, reason=message)
     except WebSocketException as exc:
-        logger.error(exc)
+        logger.error(f"Websocket error: {exc}")
         await websocket.close(code=status.WS_1011_INTERNAL_ERROR, reason=str(exc))
 
 
@@ -56,7 +56,7 @@ async def init_build(graph_data: dict, flow_id: str):
 
         return InitResponse(flowId=flow_id)
     except Exception as exc:
-        logger.error(exc)
+        logger.error(f"Error initializing build: {exc}")
         return HTTPException(status_code=500, detail=str(exc))
 
 
@@ -74,7 +74,7 @@ async def build_status(flow_id: str):
         )
 
     except Exception as exc:
-        logger.error(exc)
+        logger.error(f"Error checking build status: {exc}")
         return HTTPException(status_code=500, detail=str(exc))
 
 
@@ -177,5 +177,5 @@ async def stream_build(flow_id: str):
     try:
         return StreamingResponse(event_stream(flow_id), media_type="text/event-stream")
     except Exception as exc:
-        logger.error(exc)
+        logger.error(f"Error streaming build: {exc}")
         raise HTTPException(status_code=500, detail=str(exc))

src/backend/langflow/api/v1/components.py

@@ -0,0 +1,77 @@
+from datetime import timezone
+from typing import List
+from uuid import UUID
+from langflow.database.models.component import Component, ComponentModel
+from langflow.database.base import get_session
+from sqlmodel import Session, select
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.exc import IntegrityError
+from datetime import datetime
+
+
+COMPONENT_NOT_FOUND = "Component not found"
+COMPONENT_ALREADY_EXISTS = "A component with the same id already exists."
+COMPONENT_DELETED = "Component deleted"
+
+
+router = APIRouter(prefix="/components", tags=["Components"])
+
+
+@router.post("/", response_model=Component)
+def create_component(component: ComponentModel, db: Session = Depends(get_session)):
+    db_component = Component(**component.dict())
+    try:
+        db.add(db_component)
+        db.commit()
+        db.refresh(db_component)
+    except IntegrityError as e:
+        db.rollback()
+        raise HTTPException(
+            status_code=400,
+            detail=COMPONENT_ALREADY_EXISTS,
+        ) from e
+    return db_component
+
+
+@router.get("/{component_id}", response_model=Component)
+def read_component(component_id: UUID, db: Session = Depends(get_session)):
+    if component := db.get(Component, component_id):
+        return component
+    else:
+        raise HTTPException(status_code=404, detail=COMPONENT_NOT_FOUND)
+
+
+@router.get("/", response_model=List[Component])
+def read_components(skip: int = 0, limit: int = 50, db: Session = Depends(get_session)):
+    query = select(Component)
+    query = query.offset(skip).limit(limit)
+
+    return db.execute(query).fetchall()
+
+
+@router.patch("/{component_id}", response_model=Component)
+def update_component(
+    component_id: UUID, component: ComponentModel, db: Session = Depends(get_session)
+):
+    db_component = db.get(Component, component_id)
+    if not db_component:
+        raise HTTPException(status_code=404, detail=COMPONENT_NOT_FOUND)
+    component_data = component.dict(exclude_unset=True)
+
+    for key, value in component_data.items():
+        setattr(db_component, key, value)
+
+    db_component.update_at = datetime.now(timezone.utc)
+    db.commit()
+    db.refresh(db_component)
+    return db_component
+
+
+@router.delete("/{component_id}")
+def delete_component(component_id: UUID, db: Session = Depends(get_session)):
+    component = db.get(Component, component_id)
+    if not component:
+        raise HTTPException(status_code=404, detail=COMPONENT_NOT_FOUND)
+    db.delete(component)
+    db.commit()
+    return {"detail": COMPONENT_DELETED}

src/backend/langflow/api/v1/endpoints.py

@@ -1,17 +1,34 @@
-from typing import Optional
+from http import HTTPStatus
+from typing import Annotated, Optional
+
 from langflow.cache.utils import save_uploaded_file
 from langflow.database.models.flow import Flow
 from langflow.processing.process import process_graph_cached, process_tweaks
 from langflow.utils.logger import logger
+from langflow.settings import settings
 
-from fastapi import APIRouter, Depends, HTTPException, UploadFile
+from fastapi import APIRouter, Depends, HTTPException, UploadFile, Body
+
+from langflow.interface.custom.custom_component import CustomComponent
+
+from langflow.interface.custom.directory_reader import (
+    CustomComponentPathValueError,
+)
 
 from langflow.api.v1.schemas import (
     ProcessResponse,
     UploadFileResponse,
+    CustomComponentCode,
+)
+
+from langflow.api.utils import merge_nested_dicts
+
+from langflow.interface.types import (
+    build_langchain_types_dict,
+    build_langchain_template_custom_component,
+    build_langchain_custom_component_list_from_path,
 )
 
-from langflow.interface.types import langchain_types_dict
 from langflow.database.base import get_session
 from sqlmodel import Session
 
@@ -21,7 +38,47 @@ router = APIRouter(tags=["Base"])
 
 @router.get("/all")
 def get_all():
-    return langchain_types_dict
+    native_components = build_langchain_types_dict()
+
+    # custom_components is a list of dicts
+    # need to merge all the keys into one dict
+    custom_components_from_file = {}
+    if settings.components_path:
+        custom_component_dicts = [
+            build_langchain_custom_component_list_from_path(str(path))
+            for path in settings.components_path
+        ]
+        for custom_component_dict in custom_component_dicts:
+            custom_components_from_file = merge_nested_dicts(
+                custom_components_from_file, custom_component_dict
+            )
+    return merge_nested_dicts(native_components, custom_components_from_file)
+
+
+@router.get("/load_custom_component_from_path")
+def get_load_custom_component_from_path(path: str):
+    try:
+        data = build_langchain_custom_component_list_from_path(path)
+    except CustomComponentPathValueError as err:
+        raise HTTPException(
+            status_code=400,
+            detail={"error": type(err).__name__, "traceback": str(err)},
+        ) from err
+
+    return data
+
+
+@router.get("/load_custom_component_from_path_TEST")
+def get_load_custom_component_from_path_test(path: str):
+    from langflow.interface.custom.directory_reader import (
+        DirectoryReader,
+    )
+
+    reader = DirectoryReader(path, False)
+    file_list = reader.get_files()
+    data = reader.build_component_menu_list(file_list)
+
+    return reader.filter_loaded_components(data, True)
 
 
 # For backwards compatibility we will keep the old endpoint
@@ -31,6 +88,7 @@ async def process_flow(
     flow_id: str,
     inputs: Optional[dict] = None,
     tweaks: Optional[dict] = None,
+    clear_cache: Annotated[bool, Body(embed=True)] = False,  # noqa: F821
     session: Session = Depends(get_session),
 ):
     """
@@ -50,7 +108,7 @@ async def process_flow(
                 graph_data = process_tweaks(graph_data, tweaks)
             except Exception as exc:
                 logger.error(f"Error processing tweaks: {exc}")
-        response = process_graph_cached(graph_data, inputs)
+        response = process_graph_cached(graph_data, inputs, clear_cache)
         return ProcessResponse(
             result=response,
         )
@@ -60,7 +118,11 @@ async def process_flow(
         raise HTTPException(status_code=500, detail=str(e)) from e
 
 
-@router.post("/upload/{flow_id}", response_model=UploadFileResponse, status_code=201)
+@router.post(
+    "/upload/{flow_id}",
+    response_model=UploadFileResponse,
+    status_code=HTTPStatus.CREATED,
+)
 async def create_upload_file(file: UploadFile, flow_id: str):
     # Cache file
     try:
@@ -81,3 +143,13 @@ def get_version():
     from langflow import __version__
 
     return {"version": __version__}
+
+
+@router.post("/custom_component", status_code=HTTPStatus.OK)
+async def custom_component(
+    raw_code: CustomComponentCode,
+):
+    extractor = CustomComponent(code=raw_code.code)
+    extractor.is_check_valid()
+
+    return build_langchain_template_custom_component(extractor)

src/backend/langflow/api/v1/schemas.py

@@ -116,3 +116,20 @@ class StreamData(BaseModel):
 
     def __str__(self) -> str:
         return f"event: {self.event}\ndata: {json.dumps(self.data)}\n\n"
+
+
+class CustomComponentCode(BaseModel):
+    code: str
+
+
+class CustomComponentResponseError(BaseModel):
+    detail: str
+    traceback: str
+
+
+class ComponentListCreate(BaseModel):
+    flows: List[FlowCreate]
+
+
+class ComponentListRead(BaseModel):
+    flows: List[FlowRead]

src/backend/langflow/chat/manager.py

@@ -111,7 +111,7 @@ class ChatManager:
                 # This is to catch the following error:
                 #  Unexpected ASGI message 'websocket.close', after sending 'websocket.close'
                 if "after sending" in str(exc):
-                    logger.error(exc)
+                    logger.error(f"Error closing connection: {exc}")
 
     async def process_message(
         self, client_id: str, payload: Dict, langchain_object: Any
@@ -197,13 +197,13 @@ class ChatManager:
                     langchain_object = self.in_memory_cache.get(client_id)
                     await self.process_message(client_id, payload, langchain_object)
 
-        except Exception as e:
+        except Exception as exc:
             # Handle any exceptions that might occur
-            logger.error(e)
+            logger.error(f"Error handling websocket: {exc}")
             await self.close_connection(
                 client_id=client_id,
                 code=status.WS_1011_INTERNAL_ERROR,
-                reason=str(e)[:120],
+                reason=str(exc)[:120],
             )
         finally:
             try:
@@ -212,6 +212,6 @@ class ChatManager:
                     code=status.WS_1000_NORMAL_CLOSURE,
                     reason="Client disconnected",
                 )
-            except Exception as e:
-                logger.error(e)
+            except Exception as exc:
+                logger.error(f"Error closing connection: {exc}")
             self.disconnect(client_id)

src/backend/langflow/config.yaml

@@ -153,6 +153,8 @@ memories:
     documentation: "https://python.langchain.com/docs/modules/memory/how_to/vectorstore_retriever_memory"
   MongoDBChatMessageHistory:
     documentation: "https://python.langchain.com/docs/modules/memory/integrations/mongodb_chat_message_history"
+  MotorheadMemory:
+    documentation: "https://python.langchain.com/docs/integrations/memory/motorhead_memory"
 prompts:
   ChatMessagePromptTemplate:
     documentation: "https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/msg_prompt_templates"
@@ -290,3 +292,6 @@ output_parsers:
     documentation: "https://python.langchain.com/docs/modules/model_io/output_parsers/structured"
   ResponseSchema:
     documentation: "https://python.langchain.com/docs/modules/model_io/output_parsers/structured"
+custom_components:
+  CustomComponent:
+    documentation: ""

src/backend/langflow/custom/customs.py

@@ -31,6 +31,9 @@ CUSTOM_NODES = {
         "MidJourneyPromptChain": frontend_node.chains.MidJourneyPromptChainNode(),
         "load_qa_chain": frontend_node.chains.CombineDocsChainNode(),
     },
+    "custom_components": {
+        "CustomComponent": frontend_node.custom_components.CustomComponentFrontendNode(),
+    },
 }
 
 

src/backend/langflow/database/base.py

@@ -1,3 +1,4 @@
+from contextlib import contextmanager
 from langflow.settings import settings
 from sqlmodel import SQLModel, Session, create_engine
 from langflow.utils.logger import logger
@@ -32,6 +33,19 @@ def create_db_and_tables():
         logger.debug("Database and tables created successfully")
 
 
-def get_session():
-    with Session(engine) as session:
+@contextmanager
+def session_getter():
+    try:
+        session = Session(engine)
+        yield session
+    except Exception as e:
+        print("Session rollback because of exception:", e)
+        session.rollback()
+        raise
+    finally:
+        session.close()
+
+
+def get_session():
+    with session_getter() as session:
         yield session

src/backend/langflow/database/models/component.py

@@ -0,0 +1,29 @@
+from langflow.database.models.base import SQLModelSerializable, SQLModel
+from sqlmodel import Field
+from typing import Optional
+from datetime import datetime
+import uuid
+
+
+class Component(SQLModelSerializable, table=True):
+    id: uuid.UUID = Field(default_factory=uuid.uuid4, primary_key=True)
+    frontend_node_id: uuid.UUID = Field(index=True)
+    name: str = Field(index=True)
+    description: Optional[str] = Field(default=None)
+    python_code: Optional[str] = Field(default=None)
+    return_type: Optional[str] = Field(default=None)
+    is_disabled: bool = Field(default=False)
+    is_read_only: bool = Field(default=False)
+    create_at: datetime = Field(default_factory=datetime.utcnow)
+    update_at: datetime = Field(default_factory=datetime.utcnow)
+
+
+class ComponentModel(SQLModel):
+    id: uuid.UUID = Field(default_factory=uuid.uuid4)
+    frontend_node_id: uuid.UUID = Field(default=uuid.uuid4())
+    name: str = Field(default="")
+    description: Optional[str] = None
+    python_code: Optional[str] = None
+    return_type: Optional[str] = None
+    is_disabled: bool = False
+    is_read_only: bool = False

src/backend/langflow/graph/graph/base.py

@@ -77,6 +77,8 @@ class Graph:
 
     def _validate_nodes(self) -> None:
         """Check that all nodes have edges"""
+        if len(self.nodes) == 1:
+            return
         for node in self.nodes:
             if not self._validate_node(node):
                 raise ValueError(

src/backend/langflow/graph/graph/constants.py

@@ -14,7 +14,7 @@ from langflow.interface.vector_store.base import vectorstore_creator
 from langflow.interface.wrappers.base import wrapper_creator
 from langflow.interface.output_parsers.base import output_parser_creator
 from langflow.interface.retrievers.base import retriever_creator
-
+from langflow.interface.custom.base import custom_component_creator
 from typing import Dict, Type
 
 
@@ -32,5 +32,6 @@ VERTEX_TYPE_MAP: Dict[str, Type[Vertex]] = {
     **{t: types.DocumentLoaderVertex for t in documentloader_creator.to_list()},
     **{t: types.TextSplitterVertex for t in textsplitter_creator.to_list()},
     **{t: types.OutputParserVertex for t in output_parser_creator.to_list()},
+    **{t: types.CustomComponentVertex for t in custom_component_creator.to_list()},
     **{t: types.RetrieverVertex for t in retriever_creator.to_list()},
 }

src/backend/langflow/graph/vertex/types.py

@@ -239,3 +239,12 @@ class PromptVertex(Vertex):
 class OutputParserVertex(Vertex):
     def __init__(self, data: Dict):
         super().__init__(data, base_type="output_parsers")
+
+
+class CustomComponentVertex(Vertex):
+    def __init__(self, data: Dict):
+        super().__init__(data, base_type="custom_components")
+
+    def _built_object_repr(self):
+        if self.artifacts and "repr" in self.artifacts:
+            return self.artifacts["repr"] or super()._built_object_repr()

src/backend/langflow/interface/base.py

@@ -34,7 +34,7 @@ class LangChainTypeCreator(BaseModel, ABC):
                     for name, value_dict in type_settings.items()
                 }
             except AttributeError as exc:
-                logger.error(exc)
+                logger.error(f"Error getting settings for {self.type_name}: {exc}")
 
                 self.name_docs_dict = {}
         return self.name_docs_dict

src/backend/langflow/interface/custom/__init__.py

@@ -0,0 +1,4 @@
+from langflow.interface.custom.base import CustomComponentCreator
+from langflow.interface.custom.custom_component import CustomComponent
+
+__all__ = ["CustomComponentCreator", "CustomComponent"]

src/backend/langflow/interface/custom/base.py

@@ -0,0 +1,48 @@
+from typing import Any, Dict, List, Optional, Type
+
+
+from langflow.interface.base import LangChainTypeCreator
+
+# from langflow.interface.custom.custom import CustomComponent
+from langflow.interface.custom.custom_component import CustomComponent
+from langflow.template.frontend_node.custom_components import (
+    CustomComponentFrontendNode,
+)
+from langflow.utils.logger import logger
+
+# Assuming necessary imports for Field, Template, and FrontendNode classes
+
+
+class CustomComponentCreator(LangChainTypeCreator):
+    type_name: str = "custom_components"
+
+    @property
+    def frontend_node_class(self) -> Type[CustomComponentFrontendNode]:
+        return CustomComponentFrontendNode
+
+    @property
+    def type_to_loader_dict(self) -> Dict:
+        if self.type_dict is None:
+            self.type_dict: dict[str, Any] = {
+                "CustomComponent": CustomComponent,
+            }
+        return self.type_dict
+
+    def get_signature(self, name: str) -> Optional[Dict]:
+        from langflow.custom.customs import get_custom_nodes
+
+        try:
+            if name in get_custom_nodes(self.type_name).keys():
+                return get_custom_nodes(self.type_name)[name]
+        except ValueError as exc:
+            raise ValueError(f"CustomComponent {name} not found: {exc}") from exc
+        except AttributeError as exc:
+            logger.error(f"CustomComponent {name} not loaded: {exc}")
+            return None
+        return None
+
+    def to_list(self) -> List[str]:
+        return list(self.type_to_loader_dict.keys())
+
+
+custom_component_creator = CustomComponentCreator()

src/backend/langflow/interface/custom/code_parser.py

@@ -0,0 +1,272 @@
+import ast
+import inspect
+import traceback
+
+from typing import Dict, Any, List, Type, Union
+from fastapi import HTTPException
+from langflow.interface.custom.schema import CallableCodeDetails, ClassCodeDetails
+
+
+class CodeSyntaxError(HTTPException):
+    pass
+
+
+class CodeParser:
+    """
+    A parser for Python source code, extracting code details.
+    """
+
+    def __init__(self, code: Union[str, Type]) -> None:
+        """
+        Initializes the parser with the provided code.
+        """
+        if isinstance(code, type):
+            if not inspect.isclass(code):
+                raise ValueError("The provided code must be a class.")
+            # If the code is a class, get its source code
+            code = inspect.getsource(code)
+        self.code = code
+        self.data: Dict[str, Any] = {
+            "imports": [],
+            "functions": [],
+            "classes": [],
+            "global_vars": [],
+        }
+        self.handlers = {
+            ast.Import: self.parse_imports,
+            ast.ImportFrom: self.parse_imports,
+            ast.FunctionDef: self.parse_functions,
+            ast.ClassDef: self.parse_classes,
+            ast.Assign: self.parse_global_vars,
+        }
+
+    def __get_tree(self):
+        """
+        Parses the provided code to validate its syntax.
+        It tries to parse the code into an abstract syntax tree (AST).
+        """
+        try:
+            tree = ast.parse(self.code)
+        except SyntaxError as err:
+            raise CodeSyntaxError(
+                status_code=400,
+                detail={"error": err.msg, "traceback": traceback.format_exc()},
+            ) from err
+
+        return tree
+
+    def parse_node(self, node: Union[ast.stmt, ast.AST]) -> None:
+        """
+        Parses an AST node and updates the data
+        dictionary with the relevant information.
+        """
+        if handler := self.handlers.get(type(node)):  # type: ignore
+            handler(node)  # type: ignore
+
+    def parse_imports(self, node: Union[ast.Import, ast.ImportFrom]) -> None:
+        """
+        Extracts "imports" from the code.
+        """
+        if isinstance(node, ast.Import):
+            for alias in node.names:
+                self.data["imports"].append(alias.name)
+        elif isinstance(node, ast.ImportFrom):
+            for alias in node.names:
+                self.data["imports"].append((node.module, alias.name))
+
+    def parse_functions(self, node: ast.FunctionDef) -> None:
+        """
+        Extracts "functions" from the code.
+        """
+        self.data["functions"].append(self.parse_callable_details(node))
+
+    def parse_arg(self, arg, default):
+        """
+        Parses an argument and its default value.
+        """
+        arg_dict = {"name": arg.arg, "default": default}
+        if arg.annotation:
+            arg_dict["type"] = ast.unparse(arg.annotation)
+        return arg_dict
+
+    def parse_callable_details(self, node: ast.FunctionDef) -> Dict[str, Any]:
+        """
+        Extracts details from a single function or method node.
+        """
+        func = CallableCodeDetails(
+            name=node.name,
+            doc=ast.get_docstring(node),
+            args=[],
+            body=[],
+            return_type=ast.unparse(node.returns) if node.returns else None,
+        )
+
+        func.args = self.parse_function_args(node)
+        func.body = self.parse_function_body(node)
+
+        return func.dict()
+
+    def parse_function_args(self, node: ast.FunctionDef) -> List[Dict[str, Any]]:
+        """
+        Parses the arguments of a function or method node.
+        """
+        args = []
+
+        args += self.parse_positional_args(node)
+        args += self.parse_varargs(node)
+        args += self.parse_keyword_args(node)
+        args += self.parse_kwargs(node)
+
+        return args
+
+    def parse_positional_args(self, node: ast.FunctionDef) -> List[Dict[str, Any]]:
+        """
+        Parses the positional arguments of a function or method node.
+        """
+        num_args = len(node.args.args)
+        num_defaults = len(node.args.defaults)
+        num_missing_defaults = num_args - num_defaults
+        missing_defaults = [None] * num_missing_defaults
+        default_values = [
+            ast.unparse(default).strip("'") if default else None
+            for default in node.args.defaults
+        ]
+        # Now check all default values to see if there
+        # are any "None" values in the middle
+        default_values = [
+            None if value == "None" else value for value in default_values
+        ]
+
+        defaults = missing_defaults + default_values
+
+        args = [
+            self.parse_arg(arg, default)
+            for arg, default in zip(node.args.args, defaults)
+        ]
+        return args
+
+    def parse_varargs(self, node: ast.FunctionDef) -> List[Dict[str, Any]]:
+        """
+        Parses the *args argument of a function or method node.
+        """
+        args = []
+
+        if node.args.vararg:
+            args.append(self.parse_arg(node.args.vararg, None))
+
+        return args
+
+    def parse_keyword_args(self, node: ast.FunctionDef) -> List[Dict[str, Any]]:
+        """
+        Parses the keyword-only arguments of a function or method node.
+        """
+        kw_defaults = [None] * (
+            len(node.args.kwonlyargs) - len(node.args.kw_defaults)
+        ) + [
+            ast.unparse(default) if default else None
+            for default in node.args.kw_defaults
+        ]
+
+        args = [
+            self.parse_arg(arg, default)
+            for arg, default in zip(node.args.kwonlyargs, kw_defaults)
+        ]
+        return args
+
+    def parse_kwargs(self, node: ast.FunctionDef) -> List[Dict[str, Any]]:
+        """
+        Parses the **kwargs argument of a function or method node.
+        """
+        args = []
+
+        if node.args.kwarg:
+            args.append(self.parse_arg(node.args.kwarg, None))
+
+        return args
+
+    def parse_function_body(self, node: ast.FunctionDef) -> List[str]:
+        """
+        Parses the body of a function or method node.
+        """
+        return [ast.unparse(line) for line in node.body]
+
+    def parse_assign(self, stmt):
+        """
+        Parses an Assign statement and returns a dictionary
+        with the target's name and value.
+        """
+        for target in stmt.targets:
+            if isinstance(target, ast.Name):
+                return {"name": target.id, "value": ast.unparse(stmt.value)}
+
+    def parse_ann_assign(self, stmt):
+        """
+        Parses an AnnAssign statement and returns a dictionary
+        with the target's name, value, and annotation.
+        """
+        if isinstance(stmt.target, ast.Name):
+            return {
+                "name": stmt.target.id,
+                "value": ast.unparse(stmt.value) if stmt.value else None,
+                "annotation": ast.unparse(stmt.annotation),
+            }
+
+    def parse_function_def(self, stmt):
+        """
+        Parses a FunctionDef statement and returns the parsed
+        method and a boolean indicating if it's an __init__ method.
+        """
+        method = self.parse_callable_details(stmt)
+        return (method, True) if stmt.name == "__init__" else (method, False)
+
+    def parse_classes(self, node: ast.ClassDef) -> None:
+        """
+        Extracts "classes" from the code, including inheritance and init methods.
+        """
+
+        class_details = ClassCodeDetails(
+            name=node.name,
+            doc=ast.get_docstring(node),
+            bases=[ast.unparse(base) for base in node.bases],
+            attributes=[],
+            methods=[],
+            init=None,
+        )
+
+        for stmt in node.body:
+            if isinstance(stmt, ast.Assign):
+                if attr := self.parse_assign(stmt):
+                    class_details.attributes.append(attr)
+            elif isinstance(stmt, ast.AnnAssign):
+                if attr := self.parse_ann_assign(stmt):
+                    class_details.attributes.append(attr)
+            elif isinstance(stmt, ast.FunctionDef):
+                method, is_init = self.parse_function_def(stmt)
+                if is_init:
+                    class_details.init = method
+                else:
+                    class_details.methods.append(method)
+
+        self.data["classes"].append(class_details.dict())
+
+    def parse_global_vars(self, node: ast.Assign) -> None:
+        """
+        Extracts global variables from the code.
+        """
+        global_var = {
+            "targets": [
+                t.id if hasattr(t, "id") else ast.dump(t) for t in node.targets
+            ],
+            "value": ast.unparse(node.value),
+        }
+        self.data["global_vars"].append(global_var)
+
+    def parse_code(self) -> Dict[str, Any]:
+        """
+        Runs all parsing operations and returns the resulting data.
+        """
+        tree = self.__get_tree()
+
+        for node in ast.walk(tree):
+            self.parse_node(node)
+        return self.data

src/backend/langflow/interface/custom/component.py

@@ -0,0 +1,72 @@
+import ast
+from typing import Optional
+from pydantic import BaseModel
+from fastapi import HTTPException
+
+from langflow.utils import validate
+from langflow.interface.custom.code_parser import CodeParser
+
+
+class ComponentCodeNullError(HTTPException):
+    pass
+
+
+class ComponentFunctionEntrypointNameNullError(HTTPException):
+    pass
+
+
+class Component(BaseModel):
+    ERROR_CODE_NULL = "Python code must be provided."
+    ERROR_FUNCTION_ENTRYPOINT_NAME_NULL = (
+        "The name of the entrypoint function must be provided."
+    )
+
+    code: Optional[str]
+    function_entrypoint_name = "build"
+    field_config: dict = {}
+
+    def __init__(self, **data):
+        super().__init__(**data)
+
+    def get_code_tree(self, code: str):
+        parser = CodeParser(code)
+        return parser.parse_code()
+
+    def get_function(self):
+        if not self.code:
+            raise ComponentCodeNullError(
+                status_code=400,
+                detail={"error": self.ERROR_CODE_NULL, "traceback": ""},
+            )
+
+        if not self.function_entrypoint_name:
+            raise ComponentFunctionEntrypointNameNullError(
+                status_code=400,
+                detail={
+                    "error": self.ERROR_FUNCTION_ENTRYPOINT_NAME_NULL,
+                    "traceback": "",
+                },
+            )
+
+        return validate.create_function(self.code, self.function_entrypoint_name)
+
+    def build_template_config(self, attributes) -> dict:
+        template_config = {}
+
+        for item in attributes:
+            item_name = item.get("name")
+
+            if item_value := item.get("value"):
+                if "display_name" in item_name:
+                    template_config["display_name"] = ast.literal_eval(item_value)
+
+                elif "description" in item_name:
+                    template_config["description"] = ast.literal_eval(item_value)
+
+                elif "field_config" in item_name:
+                    template_config["field_config"] = ast.literal_eval(item_value)
+
+        return template_config
+
+    def build(self):
+        raise NotImplementedError

src/backend/langflow/interface/custom/constants.py

@@ -0,0 +1,58 @@
+from langchain import PromptTemplate
+from langchain.chains.base import Chain
+from langchain.document_loaders.base import BaseLoader
+from langchain.embeddings.base import Embeddings
+from langchain.llms.base import BaseLLM
+from langchain.schema import BaseRetriever, Document
+from langchain.text_splitter import TextSplitter
+from langchain.tools import Tool
+from langchain.vectorstores.base import VectorStore
+
+
+LANGCHAIN_BASE_TYPES = {
+    "Chain": Chain,
+    "Tool": Tool,
+    "BaseLLM": BaseLLM,
+    "PromptTemplate": PromptTemplate,
+    "BaseLoader": BaseLoader,
+    "Document": Document,
+    "TextSplitter": TextSplitter,
+    "VectorStore": VectorStore,
+    "Embeddings": Embeddings,
+    "BaseRetriever": BaseRetriever,
+}
+
+# Langchain base types plus Python base types
+CUSTOM_COMPONENT_SUPPORTED_TYPES = {
+    **LANGCHAIN_BASE_TYPES,
+    "str": str,
+    "int": int,
+    "float": float,
+    "bool": bool,
+    "list": list,
+    "dict": dict,
+}
+
+
+DEFAULT_CUSTOM_COMPONENT_CODE = """from langflow import CustomComponent
+
+from langchain.llms.base import BaseLLM
+from langchain.chains import LLMChain
+from langchain import PromptTemplate
+from langchain.schema import Document
+
+import requests
+
+class YourComponent(CustomComponent):
+    display_name: str = "Custom Component"
+    description: str = "Create any custom component you want!"
+
+    def build_config(self):
+        return { "url": { "multiline": True, "required": True } }
+
+    def build(self, url: str, llm: BaseLLM, prompt: PromptTemplate) -> Document:
+        response = requests.get(url)
+        chain = LLMChain(llm=llm, prompt=prompt)
+        result = chain.run(response.text[:300])
+        return Document(page_content=str(result))
+"""

src/backend/langflow/interface/custom/custom_component.py

@@ -0,0 +1,194 @@
+from typing import Any, Callable, List, Optional
+from fastapi import HTTPException
+from langflow.interface.custom.constants import CUSTOM_COMPONENT_SUPPORTED_TYPES
+from langflow.interface.custom.component import Component
+from langflow.interface.custom.directory_reader import DirectoryReader
+
+from langflow.utils import validate
+
+from langflow.database.base import session_getter
+from langflow.database.models.flow import Flow
+from pydantic import Extra
+
+
+class CustomComponent(Component, extra=Extra.allow):
+    code: Optional[str]
+    field_config: dict = {}
+    code_class_base_inheritance = "CustomComponent"
+    function_entrypoint_name = "build"
+    function: Optional[Callable] = None
+    return_type_valid_list = list(CUSTOM_COMPONENT_SUPPORTED_TYPES.keys())
+    repr_value: Optional[str] = ""
+
+    def __init__(self, **data):
+        super().__init__(**data)
+
+    def custom_repr(self):
+        return str(self.repr_value)
+
+    def build_config(self):
+        return self.field_config
+
+    def _class_template_validation(self, code: str):
+        TYPE_HINT_LIST = ["Optional", "Prompt", "PromptTemplate", "LLMChain"]
+
+        if not code:
+            raise HTTPException(
+                status_code=400,
+                detail={
+                    "error": self.ERROR_CODE_NULL,
+                    "traceback": "",
+                },
+            )
+
+        reader = DirectoryReader("", False)
+
+        for type_hint in TYPE_HINT_LIST:
+            if reader.is_type_hint_used_but_not_imported(type_hint, code):
+                error_detail = {
+                    "error": "Type hint Error",
+                    "traceback": f"Type hint '{type_hint}' is used but not imported in the code.",
+                }
+                raise HTTPException(status_code=400, detail=error_detail)
+
+    def is_check_valid(self) -> bool:
+        return self._class_template_validation(self.code) if self.code else False
+
+    def get_code_tree(self, code: str):
+        return super().get_code_tree(code)
+
+    @property
+    def get_function_entrypoint_args(self) -> str:
+        if not self.code:
+            return ""
+        tree = self.get_code_tree(self.code)
+
+        component_classes = [
+            cls
+            for cls in tree["classes"]
+            if self.code_class_base_inheritance in cls["bases"]
+        ]
+        if not component_classes:
+            return ""
+
+        # Assume the first Component class is the one we're interested in
+        component_class = component_classes[0]
+        build_methods = [
+            method
+            for method in component_class["methods"]
+            if method["name"] == self.function_entrypoint_name
+        ]
+
+        if not build_methods:
+            return ""
+
+        build_method = build_methods[0]
+
+        return build_method["args"]
+
+    @property
+    def get_function_entrypoint_return_type(self) -> str:
+        if not self.code:
+            return ""
+        tree = self.get_code_tree(self.code)
+
+        component_classes = [
+            cls
+            for cls in tree["classes"]
+            if self.code_class_base_inheritance in cls["bases"]
+        ]
+        if not component_classes:
+            return ""
+
+        # Assume the first Component class is the one we're interested in
+        component_class = component_classes[0]
+        build_methods = [
+            method
+            for method in component_class["methods"]
+            if method["name"] == self.function_entrypoint_name
+        ]
+
+        if not build_methods:
+            return ""
+
+        build_method = build_methods[0]
+
+        return build_method["return_type"]
+
+    @property
+    def get_main_class_name(self):
+        tree = self.get_code_tree(self.code)
+
+        base_name = self.code_class_base_inheritance
+        method_name = self.function_entrypoint_name
+
+        classes = []
+        for item in tree.get("classes"):
+            if base_name in item["bases"]:
+                method_names = [method["name"] for method in item["methods"]]
+                if method_name in method_names:
+                    classes.append(item["name"])
+
+        # Get just the first item
+        return next(iter(classes), "")
+
+    @property
+    def build_template_config(self):
+        tree = self.get_code_tree(self.code)
+
+        attributes = [
+            main_class["attributes"]
+            for main_class in tree.get("classes")
+            if main_class["name"] == self.get_main_class_name
+        ]
+        # Get just the first item
+        attributes = next(iter(attributes), [])
+
+        return super().build_template_config(attributes)
+
+    @property
+    def get_function(self):
+        return validate.create_function(self.code, self.function_entrypoint_name)
+
+    def load_flow(self, flow_id: str, tweaks: Optional[dict] = None) -> Any:
+        from langflow.processing.process import build_sorted_vertices_with_caching
+        from langflow.processing.process import process_tweaks
+
+        with session_getter() as session:
+            graph_data = flow.data if (flow := session.get(Flow, flow_id)) else None
+        if not graph_data:
+            raise ValueError(f"Flow {flow_id} not found")
+        if tweaks:
+            graph_data = process_tweaks(graph_data=graph_data, tweaks=tweaks)
+        return build_sorted_vertices_with_caching(graph_data)
+
+    def list_flows(self, *, get_session: Optional[Callable] = None) -> List[Flow]:
+        get_session = get_session or session_getter
+        with get_session() as session:
+            flows = session.query(Flow).all()
+        return flows
+
+    def get_flow(
+        self,
+        *,
+        flow_name: Optional[str] = None,
+        flow_id: Optional[str] = None,
+        tweaks: Optional[dict] = None,
+        get_session: Optional[Callable] = None,
+    ) -> Flow:
+        get_session = get_session or session_getter
+
+        with get_session() as session:
+            if flow_id:
+                flow = session.query(Flow).get(flow_id)
+            elif flow_name:
+                flow = session.query(Flow).filter(Flow.name == flow_name).first()
+            else:
+                raise ValueError("Either flow_name or flow_id must be provided")
+
+        if not flow:
+            raise ValueError(f"Flow {flow_name or flow_id} not found")
+        return self.load_flow(flow.id, tweaks)
+
+    def build(self):
+        raise NotImplementedError

src/backend/langflow/interface/custom/directory_reader.py

@@ -0,0 +1,239 @@
+import os
+import ast
+import zlib
+
+
+class CustomComponentPathValueError(ValueError):
+    pass
+
+
+class StringCompressor:
+    def __init__(self, input_string):
+        """Initialize StringCompressor with a string to compress."""
+        self.input_string = input_string
+
+    def compress_string(self):
+        """
+        Compress the initial string and return the compressed data.
+        """
+        # Convert string to bytes
+        byte_data = self.input_string.encode("utf-8")
+        # Compress the bytes
+        self.compressed_data = zlib.compress(byte_data)
+
+        return self.compressed_data
+
+    def decompress_string(self):
+        """
+        Decompress the compressed data and return the original string.
+        """
+        # Decompress the bytes
+        decompressed_data = zlib.decompress(self.compressed_data)
+        # Convert bytes back to string
+        return decompressed_data.decode("utf-8")
+
+
+class DirectoryReader:
+    # Ensure the base path to read the files that contain
+    # the custom components from this directory.
+    base_path = ""
+
+    def __init__(self, directory_path, compress_code_field=False):
+        """
+        Initialize DirectoryReader with a directory path
+        and a flag indicating whether to compress the code.
+        """
+        self.directory_path = directory_path
+        self.compress_code_field = compress_code_field
+
+    def get_safe_path(self):
+        """Check if the path is valid and return it, or None if it's not."""
+        return self.directory_path if self.is_valid_path() else None
+
+    def is_valid_path(self) -> bool:
+        """Check if the directory path is valid by comparing it to the base path."""
+        fullpath = os.path.normpath(os.path.join(self.directory_path))
+        return fullpath.startswith(self.base_path)
+
+    def is_empty_file(self, file_content):
+        """
+        Check if the file content is empty.
+        """
+        return len(file_content.strip()) == 0
+
+    def filter_loaded_components(self, data: dict, with_errors: bool) -> dict:
+        items = [
+            {
+                "name": menu["name"],
+                "path": menu["path"],
+                "components": [
+                    component
+                    for component in menu["components"]
+                    if (component["error"] if with_errors else not component["error"])
+                ],
+            }
+            for menu in data["menu"]
+        ]
+        filtred = [menu for menu in items if menu["components"]]
+        return {"menu": filtred}
+
+    def validate_code(self, file_content):
+        """
+        Validate the Python code by trying to parse it with ast.parse.
+        """
+        try:
+            ast.parse(file_content)
+            return True
+        except SyntaxError:
+            return False
+
+    def validate_build(self, file_content):
+        """
+        Check if the file content contains a function named 'build'.
+        """
+        return "def build" in file_content
+
+    def read_file_content(self, file_path):
+        """
+        Read and return the content of a file.
+        """
+        if not os.path.isfile(file_path):
+            return None
+        with open(file_path, "r") as file:
+            return file.read()
+
+    def get_files(self):
+        """
+        Walk through the directory path and return a list of all .py files.
+        """
+        if not (safe_path := self.get_safe_path()):
+            raise CustomComponentPathValueError(
+                f"The path needs to start with '{self.base_path}'."
+            )
+
+        file_list = []
+        for root, _, files in os.walk(safe_path):
+            file_list.extend(
+                os.path.join(root, filename)
+                for filename in files
+                if filename.endswith(".py")
+            )
+        return file_list
+
+    def find_menu(self, response, menu_name):
+        """
+        Find and return a menu by its name in the response.
+        """
+        return next(
+            (menu for menu in response["menu"] if menu["name"] == menu_name),
+            None,
+        )
+
+    def _is_type_hint_imported(self, type_hint_name: str, code: str) -> bool:
+        """
+        Check if a specific type hint is imported
+        from the typing module in the given code.
+        """
+        module = ast.parse(code)
+
+        return any(
+            isinstance(node, ast.ImportFrom)
+            and node.module == "typing"
+            and any(alias.name == type_hint_name for alias in node.names)
+            for node in ast.walk(module)
+        )
+
+    def _is_type_hint_used_in_args(self, type_hint_name: str, code: str) -> bool:
+        """
+        Check if a specific type hint is used in the
+        function definitions within the given code.
+        """
+        module = ast.parse(code)
+
+        for node in ast.walk(module):
+            if isinstance(node, ast.FunctionDef):
+                for arg in node.args.args:
+                    if self._is_type_hint_in_arg_annotation(
+                        arg.annotation, type_hint_name
+                    ):
+                        return True
+        return False
+
+    def _is_type_hint_in_arg_annotation(self, annotation, type_hint_name: str) -> bool:
+        """
+        Helper function to check if a type hint exists in an annotation.
+        """
+        return (
+            annotation is not None
+            and isinstance(annotation, ast.Subscript)
+            and isinstance(annotation.value, ast.Name)
+            and annotation.value.id == type_hint_name
+        )
+
+    def is_type_hint_used_but_not_imported(
+        self, type_hint_name: str, code: str
+    ) -> bool:
+        """
+        Check if a type hint is used but not imported in the given code.
+        """
+        try:
+            return self._is_type_hint_used_in_args(
+                type_hint_name, code
+            ) and not self._is_type_hint_imported(type_hint_name, code)
+        except SyntaxError:
+            # Returns True if there's something wrong with the code
+            # TODO : Find a better way to handle this
+            return True
+
+    def process_file(self, file_path):
+        """
+        Process a file by validating its content and
+        returning the result and content/error message.
+        """
+        file_content = self.read_file_content(file_path)
+
+        if file_content is None:
+            return False, f"Could not read {file_path}"
+        elif self.is_empty_file(file_content):
+            return False, "Empty file"
+        elif not self.validate_code(file_content):
+            return False, "Syntax error"
+        elif not self.validate_build(file_content):
+            return False, "Missing build function"
+        elif self.is_type_hint_used_but_not_imported("Optional", file_content):
+            return False, "Type hint 'Optional' is used but not imported in the code."
+        else:
+            if self.compress_code_field:
+                file_content = str(StringCompressor(file_content).compress_string())
+            return True, file_content
+
+    def build_component_menu_list(self, file_paths):
+        """
+        Build a list of menus with their components
+        from the .py files in the directory.
+        """
+        response = {"menu": []}
+
+        for file_path in file_paths:
+            menu_name = os.path.basename(os.path.dirname(file_path))
+            filename = os.path.basename(file_path)
+            validation_result, result_content = self.process_file(file_path)
+
+            menu_result = self.find_menu(response, menu_name) or {
+                "name": menu_name,
+                "path": os.path.dirname(file_path),
+                "components": [],
+            }
+
+            component_info = {
+                "name": filename.split(".")[0],
+                "file": filename,
+                "code": result_content if validation_result else "",
+                "error": "" if validation_result else result_content,
+            }
+            menu_result["components"].append(component_info)
+
+            if menu_result not in response["menu"]:
+                response["menu"].append(menu_result)
+
+        return response

src/backend/langflow/interface/custom/schema.py

@@ -0,0 +1,29 @@
+from pydantic import BaseModel, Field
+
+
+from typing import Optional
+
+
+class ClassCodeDetails(BaseModel):
+    """
+    A dataclass for storing details about a class.
+    """
+
+    name: str
+    doc: Optional[str]
+    bases: list
+    attributes: list
+    methods: list
+    init: Optional[dict] = Field(default_factory=dict)
+
+
+class CallableCodeDetails(BaseModel):
+    """
+    A dataclass for storing details about a callable.
+    """
+
+    name: str
+    doc: Optional[str]
+    args: list
+    body: list
+    return_type: Optional[str]

src/backend/langflow/interface/importing/utils.py

@@ -9,6 +9,7 @@ from langchain.base_language import BaseLanguageModel
 from langchain.chains.base import Chain
 from langchain.chat_models.base import BaseChatModel
 from langchain.tools import BaseTool
+from langflow.interface.custom.custom_component import CustomComponent
 from langflow.utils import validate
 from langflow.interface.wrappers.base import wrapper_creator
 
@@ -47,6 +48,7 @@ def import_by_type(_type: str, name: str) -> Any:
         "utilities": import_utility,
         "output_parsers": import_output_parser,
         "retrievers": import_retriever,
+        "custom_components": import_custom_component,
     }
     if _type == "llms":
         key = "chat" if "chat" in name.lower() else "llm"
@@ -57,6 +59,13 @@ def import_by_type(_type: str, name: str) -> Any:
     return loaded_func(name)
 
 
+def import_custom_component(custom_component: str) -> CustomComponent:
+    """Import custom component from custom component name"""
+    return import_class(
+        f"langflow.interface.custom.custom_component.{custom_component}"
+    )
+
+
 def import_output_parser(output_parser: str) -> Any:
     """Import output parser from output parser name"""
     return import_module(f"from langchain.output_parsers import {output_parser}")
@@ -172,3 +181,8 @@ def get_function(code):
     function_name = validate.extract_function_name(code)
 
     return validate.create_function(code, function_name)
+
+
+def get_function_custom(code):
+    class_name = validate.extract_class_name(code)
+    return validate.create_class(code, class_name)

src/backend/langflow/interface/initialize/loading.py

@@ -1,21 +1,23 @@
-import contextlib
 import json
-from typing import Any, Callable, Dict, List, Sequence, Type
+from typing import Any, Callable, Dict, Sequence, Type
 
-from langchain.agents import ZeroShotAgent
 from langchain.agents import agent as agent_module
 from langchain.agents.agent import AgentExecutor
 from langchain.agents.agent_toolkits.base import BaseToolkit
 from langchain.agents.tools import BaseTool
 from langflow.interface.initialize.llm import initialize_vertexai
+from langflow.interface.initialize.utils import handle_format_kwargs, handle_node_type
 
 from langflow.interface.initialize.vector_store import vecstore_initializer
 
-from langchain.schema import Document, BaseOutputParser
 from pydantic import ValidationError
 
+from langflow.interface.importing.utils import (
+    get_function,
+    get_function_custom,
+    import_by_type,
+)
 from langflow.interface.custom_lists import CUSTOM_NODES
-from langflow.interface.importing.utils import get_function, import_by_type
 from langflow.interface.agents.base import agent_creator
 from langflow.interface.toolkits.base import toolkits_creator
 from langflow.interface.chains.base import chain_creator
@@ -95,12 +97,21 @@ def instantiate_based_on_type(class_object, base_type, node_type, params):
         return instantiate_retriever(node_type, class_object, params)
     elif base_type == "memory":
         return instantiate_memory(node_type, class_object, params)
+    elif base_type == "custom_components":
+        return instantiate_custom_component(node_type, class_object, params)
     elif base_type == "wrappers":
         return instantiate_wrapper(node_type, class_object, params)
     else:
         return class_object(**params)
 
 
+def instantiate_custom_component(node_type, class_object, params):
+    class_object = get_function_custom(params.pop("code"))
+    custom_component = class_object()
+    built_object = custom_component.build(**params)
+    return built_object, {"repr": custom_component.custom_repr()}
+
+
 def instantiate_wrapper(node_type, class_object, params):
     if node_type in wrapper_creator.from_method_nodes:
         method = wrapper_creator.from_method_nodes[node_type]
@@ -199,68 +210,8 @@ def instantiate_agent(node_type, class_object: Type[agent_module.Agent], params:
 
 
 def instantiate_prompt(node_type, class_object, params: Dict):
-    if node_type == "ZeroShotPrompt":
-        if "tools" not in params:
-            params["tools"] = []
-        return ZeroShotAgent.create_prompt(**params)
-    elif "MessagePromptTemplate" in node_type:
-        # Then we only need the template
-        from_template_params = {
-            "template": params.pop("prompt", params.pop("template", ""))
-        }
-
-        if not from_template_params.get("template"):
-            raise ValueError("Prompt template is required")
-        prompt = class_object.from_template(**from_template_params)
-
-    elif node_type == "ChatPromptTemplate":
-        prompt = class_object.from_messages(**params)
-    else:
-        prompt = class_object(**params)
-
-    format_kwargs: Dict[str, Any] = {}
-    for input_variable in prompt.input_variables:
-        if input_variable in params:
-            variable = params[input_variable]
-            if isinstance(variable, str):
-                format_kwargs[input_variable] = variable
-            elif isinstance(variable, BaseOutputParser) and hasattr(
-                variable, "get_format_instructions"
-            ):
-                format_kwargs[input_variable] = variable.get_format_instructions()
-            elif isinstance(variable, List) and all(
-                isinstance(item, Document) for item in variable
-            ):
-                # Format document to contain page_content and metadata
-                # as one string separated by a newline
-                if len(variable) > 1:
-                    content = "\n".join(
-                        [item.page_content for item in variable if item.page_content]
-                    )
-                else:
-                    content = variable[0].page_content
-                    # content could be a json list of strings
-                    with contextlib.suppress(json.JSONDecodeError):
-                        content = json.loads(content)
-                        if isinstance(content, list):
-                            content = ",".join([str(item) for item in content])
-                format_kwargs[input_variable] = content
-                # handle_keys will be a list but it does not exist yet
-                # so we need to create it
-
-            if (
-                isinstance(variable, List)
-                and all(isinstance(item, Document) for item in variable)
-            ) or (
-                isinstance(variable, BaseOutputParser)
-                and hasattr(variable, "get_format_instructions")
-            ):
-                if "handle_keys" not in format_kwargs:
-                    format_kwargs["handle_keys"] = []
-
-                # Add the handle_keys to the list
-                format_kwargs["handle_keys"].append(input_variable)
-
+    params, prompt = handle_node_type(node_type, class_object, params)
+    format_kwargs = handle_format_kwargs(prompt, params)
     return prompt, format_kwargs
 
 
@@ -363,6 +314,8 @@ def instantiate_textsplitter(
 ):
     try:
         documents = params.pop("documents")
+        if not isinstance(documents, list):
+            documents = [documents]
     except KeyError as exc:
         raise ValueError(
             "The source you provided did not load correctly or was empty."

src/backend/langflow/interface/initialize/utils.py

@@ -0,0 +1,103 @@
+import contextlib
+import json
+from typing import Any, Dict, List
+
+from langchain.agents import ZeroShotAgent
+
+
+from langchain.schema import Document, BaseOutputParser
+
+
+def handle_node_type(node_type, class_object, params: Dict):
+    if node_type == "ZeroShotPrompt":
+        params = check_tools_in_params(params)
+        prompt = ZeroShotAgent.create_prompt(**params)
+    elif "MessagePromptTemplate" in node_type:
+        prompt = instantiate_from_template(class_object, params)
+    elif node_type == "ChatPromptTemplate":
+        prompt = class_object.from_messages(**params)
+    else:
+        prompt = class_object(**params)
+    return params, prompt
+
+
+def check_tools_in_params(params: Dict):
+    if "tools" not in params:
+        params["tools"] = []
+    return params
+
+
+def instantiate_from_template(class_object, params: Dict):
+    from_template_params = {
+        "template": params.pop("prompt", params.pop("template", ""))
+    }
+    if not from_template_params.get("template"):
+        raise ValueError("Prompt template is required")
+    return class_object.from_template(**from_template_params)
+
+
+def handle_format_kwargs(prompt, params: Dict):
+    format_kwargs: Dict[str, Any] = {}
+    for input_variable in prompt.input_variables:
+        if input_variable in params:
+            format_kwargs = handle_variable(params, input_variable, format_kwargs)
+    return format_kwargs
+
+
+def handle_variable(params: Dict, input_variable: str, format_kwargs: Dict):
+    variable = params[input_variable]
+    if isinstance(variable, str):
+        format_kwargs[input_variable] = variable
+    elif isinstance(variable, BaseOutputParser) and hasattr(
+        variable, "get_format_instructions"
+    ):
+        format_kwargs[input_variable] = variable.get_format_instructions()
+    elif is_instance_of_list_or_document(variable):
+        format_kwargs = format_document(variable, input_variable, format_kwargs)
+    if needs_handle_keys(variable):
+        format_kwargs = add_handle_keys(input_variable, format_kwargs)
+    return format_kwargs
+
+
+def is_instance_of_list_or_document(variable):
+    return (
+        isinstance(variable, List)
+        and all(isinstance(item, Document) for item in variable)
+        or isinstance(variable, Document)
+    )
+
+
+def format_document(variable, input_variable: str, format_kwargs: Dict):
+    variable = variable if isinstance(variable, List) else [variable]
+    content = format_content(variable)
+    format_kwargs[input_variable] = content
+    return format_kwargs
+
+
+def format_content(variable):
+    if len(variable) > 1:
+        return "\n".join([item.page_content for item in variable if item.page_content])
+    content = variable[0].page_content
+    return try_to_load_json(content)
+
+
+def try_to_load_json(content):
+    with contextlib.suppress(json.JSONDecodeError):
+        content = json.loads(content)
+        if isinstance(content, list):
+            content = ",".join([str(item) for item in content])
+    return content
+
+
+def needs_handle_keys(variable):
+    return is_instance_of_list_or_document(variable) or (
+        isinstance(variable, BaseOutputParser)
+        and hasattr(variable, "get_format_instructions")
+    )
+
+
+def add_handle_keys(input_variable: str, format_kwargs: Dict):
+    if "handle_keys" not in format_kwargs:
+        format_kwargs["handle_keys"] = []
+    format_kwargs["handle_keys"].append(input_variable)
+    return format_kwargs

src/backend/langflow/interface/listing.py

@@ -13,6 +13,7 @@ from langflow.interface.vector_store.base import vectorstore_creator
 from langflow.interface.wrappers.base import wrapper_creator
 from langflow.interface.output_parsers.base import output_parser_creator
 from langflow.interface.retrievers.base import retriever_creator
+from langflow.interface.custom.base import custom_component_creator
 
 
 def get_type_dict():
@@ -32,6 +33,7 @@ def get_type_dict():
         "utilities": utility_creator.to_list(),
         "outputParsers": output_parser_creator.to_list(),
         "retrievers": retriever_creator.to_list(),
+        "custom_components": custom_component_creator.to_list(),
     }
 
 

src/backend/langflow/interface/tools/base.py

@@ -55,7 +55,7 @@ TOOL_INPUTS = {
         show=True,
         value="",
         suffixes=[".json", ".yaml", ".yml"],
-        fileTypes=["json", "yaml", "yml"],
+        file_types=["json", "yaml", "yml"],
     ),
 }
 

src/backend/langflow/interface/tools/constants.py

@@ -9,7 +9,10 @@ from langchain.agents.load_tools import (
 from langchain.tools.json.tool import JsonSpec
 
 from langflow.interface.importing.utils import import_class
-from langflow.interface.tools.custom import PythonFunctionTool, PythonFunction
+from langflow.interface.tools.custom import (
+    PythonFunctionTool,
+    PythonFunction,
+)
 
 FILE_TOOLS = {"JsonSpec": JsonSpec}
 CUSTOM_TOOLS = {

src/backend/langflow/interface/tools/custom.py

@@ -34,8 +34,6 @@ class Function(BaseModel):
 
 
 class PythonFunctionTool(Function, Tool):
-    """Python function"""
-
     name: str = "Custom Tool"
     description: str
     code: str
@@ -49,6 +47,4 @@ class PythonFunctionTool(Function, Tool):
 
 
 class PythonFunction(Function):
-    """Python function"""
-
     code: str

src/backend/langflow/interface/types.py

@@ -1,7 +1,10 @@
+from typing import Any
 from langflow.interface.agents.base import agent_creator
 from langflow.interface.chains.base import chain_creator
+from langflow.interface.custom.constants import CUSTOM_COMPONENT_SUPPORTED_TYPES
 from langflow.interface.document_loaders.base import documentloader_creator
 from langflow.interface.embeddings.base import embedding_creator
+from langflow.interface.importing.utils import get_function_custom
 from langflow.interface.llms.base import llm_creator
 from langflow.interface.memories.base import memory_creator
 from langflow.interface.prompts.base import prompt_creator
@@ -12,9 +15,28 @@ from langflow.interface.utilities.base import utility_creator
 from langflow.interface.vector_store.base import vectorstore_creator
 from langflow.interface.wrappers.base import wrapper_creator
 from langflow.interface.output_parsers.base import output_parser_creator
+from langflow.interface.custom.base import custom_component_creator
+from langflow.interface.custom.custom_component import CustomComponent
+
+from langflow.template.field.base import TemplateField
+from langflow.template.frontend_node.constants import CLASSES_TO_REMOVE
+from langflow.template.frontend_node.custom_components import (
+    CustomComponentFrontendNode,
+)
 from langflow.interface.retrievers.base import retriever_creator
 
+from langflow.interface.custom.directory_reader import DirectoryReader
+from langflow.utils.logger import logger
+from langflow.utils.util import get_base_classes
+from langflow.api.utils import merge_nested_dicts
 
+import re
+import warnings
+import traceback
+from fastapi import HTTPException
+
+
+# Used to get the base_classes list
 def get_type_list():
     """Get a list of all langchain types"""
     all_types = build_langchain_types_dict()
@@ -29,7 +51,6 @@ def get_type_list():
 
 def build_langchain_types_dict():  # sourcery skip: dict-assign-update-to-union
     """Build a dictionary of all langchain types"""
-
     all_types = {}
 
     creators = [
@@ -48,6 +69,7 @@ def build_langchain_types_dict():  # sourcery skip: dict-assign-update-to-union
         utility_creator,
         output_parser_creator,
         retriever_creator,
+        custom_component_creator,
     ]
 
     all_types = {}
@@ -55,7 +77,315 @@ def build_langchain_types_dict():  # sourcery skip: dict-assign-update-to-union
         created_types = creator.to_dict()
         if created_types[creator.type_name].values():
             all_types.update(created_types)
+
     return all_types
 
 
-langchain_types_dict = build_langchain_types_dict()
+def process_type(field_type: str):
+    return "prompt" if field_type == "Prompt" else field_type
+
+
+# TODO: Move to correct place
+def add_new_custom_field(
+    template,
+    field_name: str,
+    field_type: str,
+    field_value: Any,
+    field_required: bool,
+    field_config: dict,
+):
+    # Check field_config if any of the keys are in it
+    # if it is, update the value
+    display_name = field_config.pop("display_name", field_name)
+    field_type = field_config.pop("field_type", field_type)
+    field_type = process_type(field_type)
+    field_value = field_config.pop("value", field_value)
+    field_advanced = field_config.pop("advanced", False)
+
+    if field_type == "bool" and field_value is None:
+        field_value = False
+
+    # If options is a list, then it's a dropdown
+    # If options is None, then it's a list of strings
+    is_list = isinstance(field_config.get("options"), list)
+    field_config["is_list"] = is_list or field_config.get("is_list", False)
+
+    if "name" in field_config:
+        warnings.warn(
+            "The 'name' key in field_config is used to build the object and can't be changed."
+        )
+        field_config.pop("name", None)
+
+    required = field_config.pop("required", field_required)
+    placeholder = field_config.pop("placeholder", "")
+
+    new_field = TemplateField(
+        name=field_name,
+        field_type=field_type,
+        value=field_value,
+        show=True,
+        required=required,
+        advanced=field_advanced,
+        placeholder=placeholder,
+        display_name=display_name,
+        **field_config,
+    )
+    template.get("template")[field_name] = new_field.to_dict()
+    template.get("custom_fields")[field_name] = None
+
+    return template
+
+
+# TODO: Move to correct place
+def add_code_field(template, raw_code, field_config):
+    # Field with the Python code to allow update
+
+    code_field = {
+        "code": {
+            "dynamic": True,
+            "required": True,
+            "placeholder": "",
+            "show": True,
+            "multiline": True,
+            "value": raw_code,
+            "password": False,
+            "name": "code",
+            "advanced": field_config.pop("advanced", False),
+            "type": "code",
+            "list": False,
+        }
+    }
+    template.get("template")["code"] = code_field.get("code")
+
+    return template
+
+
+def extract_type_from_optional(field_type):
+    """
+    Extract the type from a string formatted as "Optional[<type>]".
+
+    Parameters:
+    field_type (str): The string from which to extract the type.
+
+    Returns:
+    str: The extracted type, or an empty string if no type was found.
+    """
+    match = re.search(r"\[(.*?)\]", field_type)
+    return match[1] if match else None
+
+
+def build_frontend_node(custom_component: CustomComponent):
+    """Build a frontend node for a custom component"""
+    try:
+        return (
+            CustomComponentFrontendNode().to_dict().get(type(custom_component).__name__)
+        )
+
+    except Exception as exc:
+        logger.error(f"Error while building base frontend node: {exc}")
+        return None
+
+
+def update_display_name_and_description(frontend_node, template_config):
+    """Update the display name and description of a frontend node"""
+    if "display_name" in template_config:
+        frontend_node["display_name"] = template_config["display_name"]
+
+    if "description" in template_config:
+        frontend_node["description"] = template_config["description"]
+
+
+def build_field_config(custom_component: CustomComponent):
+    """Build the field configuration for a custom component"""
+
+    try:
+        custom_class = get_function_custom(custom_component.code)
+    except Exception as exc:
+        logger.error(f"Error while getting custom function: {str(exc)}")
+        return {}
+
+    try:
+        return custom_class().build_config()
+    except Exception as exc:
+        logger.error(f"Error while building field config: {str(exc)}")
+        return {}
+
+
+def add_extra_fields(frontend_node, field_config, function_args):
+    """Add extra fields to the frontend node"""
+    if function_args is None or function_args == "":
+        return
+
+    # sort function_args which is a list of dicts
+    function_args.sort(key=lambda x: x["name"])
+
+    for extra_field in function_args:
+        if "name" not in extra_field or extra_field["name"] == "self":
+            continue
+
+        field_name, field_type, field_value, field_required = get_field_properties(
+            extra_field
+        )
+        config = field_config.get(field_name, {})
+        frontend_node = add_new_custom_field(
+            frontend_node,
+            field_name,
+            field_type,
+            field_value,
+            field_required,
+            config,
+        )
+
+
+def get_field_properties(extra_field):
+    """Get the properties of an extra field"""
+    field_name = extra_field["name"]
+    field_type = extra_field.get("type", "str")
+    field_value = extra_field.get("default", "")
+    field_required = "optional" not in field_type.lower()
+
+    if not field_required:
+        field_type = extract_type_from_optional(field_type)
+
+    return field_name, field_type, field_value, field_required
+
+
+def add_base_classes(frontend_node, return_type):
+    """Add base classes to the frontend node"""
+    if return_type not in CUSTOM_COMPONENT_SUPPORTED_TYPES or return_type is None:
+        raise HTTPException(
+            status_code=400,
+            detail={
+                "error": (
+                    "Invalid return type should be one of: "
+                    f"{list(CUSTOM_COMPONENT_SUPPORTED_TYPES.keys())}"
+                ),
+                "traceback": traceback.format_exc(),
+            },
+        )
+
+    return_type_instance = CUSTOM_COMPONENT_SUPPORTED_TYPES.get(return_type)
+    base_classes = get_base_classes(return_type_instance)
+
+    for base_class in base_classes:
+        if base_class not in CLASSES_TO_REMOVE:
+            frontend_node.get("base_classes").append(base_class)
+
+
+def build_langchain_template_custom_component(custom_component: CustomComponent):
+    """Build a custom component template for the langchain"""
+    frontend_node = build_frontend_node(custom_component)
+
+    if frontend_node is None:
+        return None
+
+    template_config = custom_component.build_template_config
+
+    update_display_name_and_description(frontend_node, template_config)
+
+    field_config = build_field_config(custom_component)
+    add_extra_fields(
+        frontend_node, field_config, custom_component.get_function_entrypoint_args
+    )
+
+    frontend_node = add_code_field(
+        frontend_node, custom_component.code, field_config.get("code", {})
+    )
+
+    add_base_classes(
+        frontend_node, custom_component.get_function_entrypoint_return_type
+    )
+
+    return frontend_node
+
+
+def load_files_from_path(path: str):
+    """Load all files from a given path"""
+    reader = DirectoryReader(path, False)
+
+    return reader.get_files()
+
+
+def build_and_validate_all_files(reader, file_list):
+    """Build and validate all files"""
+    data = reader.build_component_menu_list(file_list)
+
+    valid_components = reader.filter_loaded_components(data=data, with_errors=False)
+    invalid_components = reader.filter_loaded_components(data=data, with_errors=True)
+
+    return valid_components, invalid_components
+
+
+def build_valid_menu(valid_components):
+    """Build the valid menu"""
+    valid_menu = {}
+    for menu_item in valid_components["menu"]:
+        menu_name = menu_item["name"]
+        valid_menu[menu_name] = {}
+
+        for component in menu_item["components"]:
+            try:
+                component_name = component["name"]
+                component_code = component["code"]
+
+                component_extractor = CustomComponent(code=component_code)
+                component_extractor.is_check_valid()
+                component_template = build_langchain_template_custom_component(
+                    component_extractor
+                )
+
+                valid_menu[menu_name][component_name] = component_template
+
+            except Exception as exc:
+                logger.error(f"Error while building custom component: {exc}")
+
+    return valid_menu
+
+
+def build_invalid_menu(invalid_components):
+    """Build the invalid menu"""
+    invalid_menu = {}
+    for menu_item in invalid_components["menu"]:
+        menu_name = menu_item["name"]
+        invalid_menu[menu_name] = {}
+
+        for component in menu_item["components"]:
+            try:
+                component_name = component["name"]
+                component_code = component["code"]
+
+                component_template = (
+                    CustomComponentFrontendNode(
+                        description="ERROR - Check your Python Code",
+                        display_name=f"ERROR - {component_name}",
+                    )
+                    .to_dict()
+                    .get(type(CustomComponent()).__name__)
+                )
+
+                component_template["error"] = component.get("error", None)
+                component_template.get("template").get("code")["value"] = component_code
+
+                invalid_menu[menu_name][component_name] = component_template
+
+            except Exception as exc:
+                logger.error(
+                    f"Error while creating custom component [{component_name}]: {str(exc)}"
+                )
+
+    return invalid_menu
+
+
+def build_langchain_custom_component_list_from_path(path: str):
+    """Build a list of custom components for the langchain from a given path"""
+    file_list = load_files_from_path(path)
+    reader = DirectoryReader(path, False)
+
+    valid_components, invalid_components = build_and_validate_all_files(
+        reader, file_list
+    )
+
+    valid_menu = build_valid_menu(valid_components)
+    invalid_menu = build_invalid_menu(invalid_components)
+
+    return merge_nested_dicts(valid_menu, invalid_menu)

src/backend/langflow/main.py

@@ -8,10 +8,12 @@ from fastapi.staticfiles import StaticFiles
 from langflow.api import router
 from langflow.database.base import create_db_and_tables
 from langflow.interface.utils import setup_llm_caching
+from langflow.utils.logger import configure
 
 
 def create_app():
     """Create the FastAPI app and include the router."""
+    configure()
 
     app = FastAPI()
 
@@ -78,10 +80,16 @@ def setup_app(static_files_dir: Optional[Path] = None) -> FastAPI:
     return app
 
 
-app = create_app()
-
-
 if __name__ == "__main__":
     import uvicorn
+    from langflow.utils.util import get_number_of_workers
 
-    uvicorn.run(app, host="127.0.0.1", port=7860)
+    configure()
+    uvicorn.run(
+        create_app,
+        host="127.0.0.1",
+        port=7860,
+        workers=get_number_of_workers(),
+        log_level="debug",
+        reload=True,
+    )

src/backend/langflow/processing/base.py

@@ -22,7 +22,7 @@ async def get_result_and_steps(langchain_object, inputs: Union[dict, str], **kwa
         try:
             fix_memory_inputs(langchain_object)
         except Exception as exc:
-            logger.error(exc)
+            logger.error(f"Error fixing memory inputs: {exc}")
 
         try:
             async_callbacks = [AsyncStreamingLLMCallbackHandler(**kwargs)]

src/backend/langflow/processing/process.py

@@ -85,12 +85,17 @@ def get_input_str_if_only_one_input(inputs: dict) -> Optional[str]:
     return list(inputs.values())[0] if len(inputs) == 1 else None
 
 
-def process_graph_cached(data_graph: Dict[str, Any], inputs: Optional[dict] = None):
+def process_graph_cached(
+    data_graph: Dict[str, Any], inputs: Optional[dict] = None, clear_cache=False
+):
     """
     Process graph by extracting input variables and replacing ZeroShotPrompt
     with PromptTemplate,then run the graph and return the result and thought.
     """
     # Load langchain object
+    if clear_cache:
+        build_sorted_vertices_with_caching.clear_cache()
+        logger.debug("Cleared cache")
     langchain_object, artifacts = build_sorted_vertices_with_caching(data_graph)
     logger.debug("Loaded LangChain object")
     if inputs is None:

src/backend/langflow/settings.py

@@ -1,10 +1,13 @@
 import os
-from typing import Optional
+from typing import Optional, List
+from pathlib import Path
 
 import yaml
 from pydantic import BaseSettings, root_validator
 from langflow.utils.logger import logger
 
+BASE_COMPONENTS_PATH = Path(__file__).parent / "components"
+
 
 class Settings(BaseSettings):
     chains: dict = {}
@@ -22,13 +25,16 @@ class Settings(BaseSettings):
     textsplitters: dict = {}
     utilities: dict = {}
     output_parsers: dict = {}
+    custom_components: dict = {}
+
     dev: bool = False
     database_url: Optional[str] = None
     cache: str = "InMemoryCache"
     remove_api_keys: bool = False
+    components_path: List[Path]
 
     @root_validator(pre=True)
-    def set_database_url(cls, values):
+    def set_env_variables(cls, values):
         if "database_url" not in values:
             logger.debug(
                 "No database_url provided, trying LANGFLOW_DATABASE_URL env variable"
@@ -38,6 +44,23 @@ class Settings(BaseSettings):
             else:
                 logger.debug("No DATABASE_URL env variable, using sqlite database")
                 values["database_url"] = "sqlite:///./langflow.db"
+
+        if not values.get("components_path"):
+            values["components_path"] = [BASE_COMPONENTS_PATH]
+            logger.debug("No components_path provided, using default components path")
+        elif BASE_COMPONENTS_PATH not in values["components_path"]:
+            values["components_path"].append(BASE_COMPONENTS_PATH)
+            logger.debug("Adding default components path to components_path")
+
+        if os.getenv("LANGFLOW_COMPONENTS_PATH"):
+            logger.debug("Adding LANGFLOW_COMPONENTS_PATH to components_path")
+            langflow_component_path = Path(os.getenv("LANGFLOW_COMPONENTS_PATH"))
+            if (
+                langflow_component_path.exists()
+                and langflow_component_path not in values["components_path"]
+            ):
+                values["components_path"].append(langflow_component_path)
+                logger.debug(f"Adding {langflow_component_path} to components_path")
         return values
 
     class Config:
@@ -68,12 +91,20 @@ class Settings(BaseSettings):
         self.documentloaders = new_settings.documentloaders or {}
         self.retrievers = new_settings.retrievers or {}
         self.output_parsers = new_settings.output_parsers or {}
+        self.custom_components = new_settings.custom_components or {}
+        self.components_path = new_settings.components_path or []
         self.dev = dev
 
     def update_settings(self, **kwargs):
         for key, value in kwargs.items():
             if hasattr(self, key):
-                setattr(self, key, value)
+                if isinstance(getattr(self, key), list):
+                    if isinstance(value, list):
+                        getattr(self, key).extend(value)
+                    else:
+                        getattr(self, key).append(value)
+                else:
+                    setattr(self, key, value)
 
 
 def save_settings_to_yaml(settings: Settings, file_path: str):

src/backend/langflow/template/field/base.py

@@ -6,23 +6,58 @@ from pydantic import BaseModel
 
 class TemplateFieldCreator(BaseModel, ABC):
     field_type: str = "str"
+    """The type of field this is. Default is a string."""
+
     required: bool = False
+    """Specifies if the field is required. Defaults to False."""
+
     placeholder: str = ""
+    """A placeholder string for the field. Default is an empty string."""
+
     is_list: bool = False
+    """Defines if the field is a list. Default is False."""
+
     show: bool = True
+    """Should the field be shown. Defaults to True."""
+
     multiline: bool = False
+    """Defines if the field will allow the user to open a text editor. Default is False."""
+
     value: Any = None
+    """The value of the field. Default is None."""
+
     suffixes: list[str] = []
-    fileTypes: list[str] = []
+    """List of suffixes for a file field. Default is an empty list."""
+
     file_types: list[str] = []
+    """List of file types associated with the field. Default is an empty list. (duplicate)"""
+
     file_path: Union[str, None] = None
+    """The file path of the field if it is a file. Defaults to None."""
+
     password: bool = False
+    """Specifies if the field is a password. Defaults to False."""
+
     options: list[str] = []
+    """List of options for the field. Only used when is_list=True. Default is an empty list."""
+
     name: str = ""
+    """Name of the field. Default is an empty string."""
+
     display_name: Optional[str] = None
+    """Display name of the field. Defaults to None."""
+
     advanced: bool = False
+    """Specifies if the field will an advanced parameter (hidden). Defaults to False."""
+
     input_types: list[str] = []
+    """List of input types for the handle when the field has more than one type. Default is an empty list."""
+
+    dynamic: bool = False
+    """Specifies if the field is dynamic. Defaults to False."""
+
     info: Optional[str] = ""
+    """Additional information about the field to be shown in the tooltip. Defaults to an empty string."""
 
     def to_dict(self):
         result = self.dict()

src/backend/langflow/template/frontend_node/__init__.py

@@ -9,6 +9,7 @@ from langflow.template.frontend_node import (
     vectorstores,
     documentloaders,
     textsplitters,
+    custom_components,
 )
 
 __all__ = [
@@ -22,4 +23,5 @@ __all__ = [
     "vectorstores",
     "documentloaders",
     "textsplitters",
+    "custom_components",
 ]

src/backend/langflow/template/frontend_node/agents.py

@@ -145,7 +145,7 @@ class CSVAgentNode(FrontendNode):
                 name="path",
                 value="",
                 suffixes=[".csv"],
-                fileTypes=["csv"],
+                file_types=["csv"],
             ),
             TemplateField(
                 field_type="BaseLanguageModel",

src/backend/langflow/template/frontend_node/base.py

@@ -5,13 +5,14 @@ from typing import List, Optional
 from pydantic import BaseModel, Field
 
 from langflow.template.frontend_node.formatter import field_formatters
-from langflow.template.frontend_node.constants import FORCE_SHOW_FIELDS
+from langflow.template.frontend_node.constants import (
+    CLASSES_TO_REMOVE,
+    FORCE_SHOW_FIELDS,
+)
 from langflow.template.field.base import TemplateField
 from langflow.template.template.base import Template
 from langflow.utils import constants
 
-CLASSES_TO_REMOVE = ["Serializable", "BaseModel", "object"]
-
 
 class FieldFormatters(BaseModel):
     formatters = {
@@ -51,14 +52,8 @@ class FrontendNode(BaseModel):
     custom_fields: defaultdict = defaultdict(list)
     output_types: List[str] = []
     field_formatters: FieldFormatters = Field(default_factory=FieldFormatters)
-
-    def process_base_classes(self) -> None:
-        """Removes unwanted base classes from the list of base classes."""
-        self.base_classes = [
-            base_class
-            for base_class in self.base_classes
-            if base_class not in CLASSES_TO_REMOVE
-        ]
+    beta: bool = False
+    error: Optional[str] = None
 
     # field formatters is an instance attribute but it is not used in the class
     # so we need to create a method to get it
@@ -70,6 +65,14 @@ class FrontendNode(BaseModel):
         """Sets the documentation of the frontend node."""
         self.documentation = documentation
 
+    def process_base_classes(self) -> None:
+        """Removes unwanted base classes from the list of base classes."""
+        self.base_classes = [
+            base_class
+            for base_class in self.base_classes
+            if base_class not in CLASSES_TO_REMOVE
+        ]
+
     def to_dict(self) -> dict:
         """Returns a dict representation of the frontend node."""
         self.process_base_classes()
@@ -82,6 +85,8 @@ class FrontendNode(BaseModel):
                 "custom_fields": self.custom_fields,
                 "output_types": self.output_types,
                 "documentation": self.documentation,
+                "beta": self.beta,
+                "error": self.error,
             },
         }
 

src/backend/langflow/template/frontend_node/constants.py

@@ -63,3 +63,6 @@ You can change this to use other APIs like JinaChat, LocalAI and Prem.
 
 INPUT_KEY_INFO = """The variable to be used as Chat Input when more than one variable is available."""
 OUTPUT_KEY_INFO = """The variable to be used as Chat Output (e.g. answer in a ConversationalRetrievalChain)"""
+
+
+CLASSES_TO_REMOVE = ["Serializable", "BaseModel", "object"]

src/backend/langflow/template/frontend_node/custom_components.py

@@ -0,0 +1,31 @@
+from langflow.template.field.base import TemplateField
+from langflow.template.frontend_node.base import FrontendNode
+from langflow.template.template.base import Template
+from langflow.interface.custom.constants import DEFAULT_CUSTOM_COMPONENT_CODE
+
+
+class CustomComponentFrontendNode(FrontendNode):
+    name: str = "CustomComponent"
+    display_name: str = "Custom Component"
+    beta: bool = True
+    template: Template = Template(
+        type_name="CustomComponent",
+        fields=[
+            TemplateField(
+                field_type="code",
+                required=True,
+                placeholder="",
+                is_list=False,
+                show=True,
+                value=DEFAULT_CUSTOM_COMPONENT_CODE,
+                name="code",
+                advanced=False,
+                dynamic=True,
+            )
+        ],
+    )
+    description: str = "Create any custom component you want!"
+    base_classes: list[str] = []
+
+    def to_dict(self):
+        return super().to_dict()

src/backend/langflow/template/frontend_node/documentloaders.py

@@ -14,7 +14,7 @@ def build_file_field(
         name=name,
         value="",
         suffixes=suffixes,
-        fileTypes=fileTypes,
+        file_types=fileTypes,
     )
 
 

src/backend/langflow/template/frontend_node/llms.py

@@ -19,7 +19,7 @@ class LLMFrontendNode(FrontendNode):
                     name="credentials",
                     value="",
                     suffixes=[".json"],
-                    fileTypes=["json"],
+                    file_types=["json"],
                 )
             )
 

src/backend/langflow/template/frontend_node/memories.py

@@ -94,6 +94,14 @@ class MemoryFrontendNode(FrontendNode):
             field.show = False
             field.required = False
 
+        if name == "MotorheadMemory":
+            if field.name == "chat_memory":
+                field.show = False
+                field.required = False
+            elif field.name == "client_id":
+                field.show = True
+                field.advanced = False
+
 
 class PostgresChatMessageHistoryFrontendNode(MemoryFrontendNode):
     name: str = "PostgresChatMessageHistory"

src/backend/langflow/template/frontend_node/tools.py

@@ -1,7 +1,9 @@
 from langflow.template.field.base import TemplateField
 from langflow.template.frontend_node.base import FrontendNode
 from langflow.template.template.base import Template
-from langflow.utils.constants import DEFAULT_PYTHON_FUNCTION
+from langflow.utils.constants import (
+    DEFAULT_PYTHON_FUNCTION,
+)
 
 
 class ToolNode(FrontendNode):

src/backend/langflow/utils/constants.py

@@ -17,18 +17,29 @@ CHAT_OPENAI_MODELS = [
 ]
 
 ANTHROPIC_MODELS = [
-    "claude-v1",  # largest model, ideal for a wide range of more complex tasks.
-    "claude-v1-100k",  # An enhanced version of claude-v1 with a 100,000 token (roughly 75,000 word) context window.
-    "claude-instant-v1",  # A smaller model with far lower latency, sampling at roughly 40 words/sec!
-    "claude-instant-v1-100k",  # Like claude-instant-v1 with a 100,000 token context window but retains its performance.
+    # largest model, ideal for a wide range of more complex tasks.
+    "claude-v1",
+    # An enhanced version of claude-v1 with a 100,000 token (roughly 75,000 word) context window.
+    "claude-v1-100k",
+    # A smaller model with far lower latency, sampling at roughly 40 words/sec!
+    "claude-instant-v1",
+    # Like claude-instant-v1 with a 100,000 token context window but retains its performance.
+    "claude-instant-v1-100k",
     # Specific sub-versions of the above models:
-    "claude-v1.3",  # Vs claude-v1.2: better instruction-following, code, and non-English dialogue and writing.
-    "claude-v1.3-100k",  # An enhanced version of claude-v1.3 with a 100,000 token (roughly 75,000 word) context window.
-    "claude-v1.2",  # Vs claude-v1.1: small adv in general helpfulness, instruction following, coding, and other tasks.
-    "claude-v1.0",  # An earlier version of claude-v1.
-    "claude-instant-v1.1",  # Latest version of claude-instant-v1. Better than claude-instant-v1.0 at most tasks.
-    "claude-instant-v1.1-100k",  # Version of claude-instant-v1.1 with a 100K token context window.
-    "claude-instant-v1.0",  # An earlier version of claude-instant-v1.
+    # Vs claude-v1.2: better instruction-following, code, and non-English dialogue and writing.
+    "claude-v1.3",
+    # An enhanced version of claude-v1.3 with a 100,000 token (roughly 75,000 word) context window.
+    "claude-v1.3-100k",
+    # Vs claude-v1.1: small adv in general helpfulness, instruction following, coding, and other tasks.
+    "claude-v1.2",
+    # An earlier version of claude-v1.
+    "claude-v1.0",
+    # Latest version of claude-instant-v1. Better than claude-instant-v1.0 at most tasks.
+    "claude-instant-v1.1",
+    # Version of claude-instant-v1.1 with a 100K token context window.
+    "claude-instant-v1.1-100k",
+    # An earlier version of claude-instant-v1.
+    "claude-instant-v1.0",
 ]
 
 DEFAULT_PYTHON_FUNCTION = """
@@ -36,4 +47,5 @@ def python_function(text: str) -> str:
     \"\"\"This is a default python function that returns the input text\"\"\"
     return text
 """
+
 DIRECT_TYPES = ["str", "bool", "code", "int", "float", "Any", "prompt"]

src/backend/langflow/utils/logger.py

@@ -6,7 +6,7 @@ from rich.logging import RichHandler
 logger = logging.getLogger("langflow")
 
 
-def configure(log_level: str = "INFO", log_file: Path = None):  # type: ignore
+def configure(log_level: str = "DEBUG", log_file: Path = None):  # type: ignore
     log_format = "%(asctime)s - %(levelname)s - %(message)s"
     log_level_value = getattr(logging, log_level.upper(), logging.INFO)
 

src/backend/langflow/utils/types.py

@@ -0,0 +1,2 @@
+class Prompt:
+    pass

src/backend/langflow/utils/util.py

@@ -1,13 +1,15 @@
-import importlib
-import inspect
 import re
+import inspect
+import importlib
 from functools import wraps
-from typing import Dict, Optional
+from typing import Optional, Dict, Any, Union
 
 from docstring_parser import parse  # type: ignore
 
 from langflow.template.frontend_node.constants import FORCE_SHOW_FIELDS
 from langflow.utils import constants
+from langflow.utils.logger import logger
+from multiprocess import cpu_count  # type: ignore
 
 
 def build_template_from_function(
@@ -214,111 +216,6 @@ def get_default_factory(module: str, function: str):
     return None
 
 
-def format_dict(d, name: Optional[str] = None):
-    """
-    Formats a dictionary by removing certain keys and modifying the
-    values of other keys.
-
-    Args:
-        d: the dictionary to format
-        name: the name of the class to format
-
-    Returns:
-        A new dictionary with the desired modifications applied.
-    """
-
-    # Process remaining keys
-    for key, value in d.items():
-        if key == "_type":
-            continue
-
-        _type = value["type"]
-
-        if not isinstance(_type, str):
-            _type = _type.__name__
-
-        # Remove 'Optional' wrapper
-        if "Optional" in _type:
-            _type = _type.replace("Optional[", "")[:-1]
-
-        # Check for list type
-        if "List" in _type or "Sequence" in _type or "Set" in _type:
-            _type = (
-                _type.replace("List[", "")
-                .replace("Sequence[", "")
-                .replace("Set[", "")[:-1]
-            )
-            value["list"] = True
-        else:
-            value["list"] = False
-
-        # Replace 'Mapping' with 'dict'
-        if "Mapping" in _type:
-            _type = _type.replace("Mapping", "dict")
-
-        # Change type from str to Tool
-        value["type"] = "Tool" if key in ["allowed_tools"] else _type
-
-        value["type"] = "int" if key in ["max_value_length"] else value["type"]
-
-        # Show or not field
-        value["show"] = bool(
-            (value["required"] and key not in ["input_variables"])
-            or key in FORCE_SHOW_FIELDS
-            or "api_key" in key
-        )
-
-        # Add password field
-        value["password"] = any(
-            text in key.lower() for text in ["password", "token", "api", "key"]
-        )
-
-        # Add multline
-        value["multiline"] = key in [
-            "suffix",
-            "prefix",
-            "template",
-            "examples",
-            "code",
-            "headers",
-            "format_instructions",
-        ]
-
-        # Replace dict type with str
-        if "dict" in value["type"].lower():
-            value["type"] = "code"
-
-        if key == "dict_":
-            value["type"] = "file"
-            value["suffixes"] = [".json", ".yaml", ".yml"]
-            value["fileTypes"] = ["json", "yaml", "yml"]
-
-        # Replace default value with actual value
-        if "default" in value:
-            value["value"] = value["default"]
-            value.pop("default")
-
-        if key == "headers":
-            value[
-                "value"
-            ] = """{'Authorization':
-            'Bearer <token>'}"""
-        # Add options to openai
-        if name == "OpenAI" and key == "model_name":
-            value["options"] = constants.OPENAI_MODELS
-            value["list"] = True
-            value["value"] = constants.OPENAI_MODELS[0]
-        elif name == "ChatOpenAI" and key == "model_name":
-            value["options"] = constants.CHAT_OPENAI_MODELS
-            value["list"] = True
-            value["value"] = constants.CHAT_OPENAI_MODELS[0]
-        elif (name == "Anthropic" or name == "ChatAnthropic") and key == "model_name":
-            value["options"] = constants.ANTHROPIC_MODELS
-            value["list"] = True
-            value["value"] = constants.ANTHROPIC_MODELS[0]
-    return d
-
-
 def update_verbose(d: dict, new_value: bool) -> dict:
     """
     Recursively updates the value of the 'verbose' key in a dictionary.
@@ -349,3 +246,219 @@ def sync_to_async(func):
         return func(*args, **kwargs)
 
     return async_wrapper
+
+
+def format_dict(
+    dictionary: Dict[str, Any], class_name: Optional[str] = None
+) -> Dict[str, Any]:
+    """
+    Formats a dictionary by removing certain keys and modifying the
+    values of other keys.
+
+    Returns:
+        A new dictionary with the desired modifications applied.
+    """
+
+    for key, value in dictionary.items():
+        if key == "_type":
+            continue
+
+        _type: Union[str, type] = get_type(value)
+
+        _type = remove_optional_wrapper(_type)
+        _type = check_list_type(_type, value)
+        _type = replace_mapping_with_dict(_type)
+
+        value["type"] = get_formatted_type(key, _type)
+        value["show"] = should_show_field(value, key)
+        value["password"] = is_password_field(key)
+        value["multiline"] = is_multiline_field(key)
+
+        replace_dict_type_with_code(value)
+
+        if key == "dict_":
+            set_dict_file_attributes(value)
+
+        replace_default_value_with_actual(value)
+
+        if key == "headers":
+            set_headers_value(value)
+
+        add_options_to_field(value, class_name, key)
+
+    return dictionary
+
+
+def get_type(value: Any) -> Union[str, type]:
+    """
+    Retrieves the type value from the dictionary.
+
+    Returns:
+        The type value.
+    """
+    _type = value["type"]
+
+    return _type if isinstance(_type, str) else _type.__name__
+
+
+def remove_optional_wrapper(_type: Union[str, type]) -> str:
+    """
+    Removes the 'Optional' wrapper from the type string.
+
+    Returns:
+        The type string with the 'Optional' wrapper removed.
+    """
+    if isinstance(_type, type):
+        _type = str(_type)
+    if "Optional" in _type:
+        _type = _type.replace("Optional[", "")[:-1]
+
+    return _type
+
+
+def check_list_type(_type: str, value: Dict[str, Any]) -> str:
+    """
+    Checks if the type is a list type and modifies the value accordingly.
+
+    Returns:
+        The modified type string.
+    """
+    if any(list_type in _type for list_type in ["List", "Sequence", "Set"]):
+        _type = (
+            _type.replace("List[", "").replace("Sequence[", "").replace("Set[", "")[:-1]
+        )
+        value["list"] = True
+    else:
+        value["list"] = False
+
+    return _type
+
+
+def replace_mapping_with_dict(_type: str) -> str:
+    """
+    Replaces 'Mapping' with 'dict' in the type string.
+
+    Returns:
+        The modified type string.
+    """
+    if "Mapping" in _type:
+        _type = _type.replace("Mapping", "dict")
+
+    return _type
+
+
+def get_formatted_type(key: str, _type: str) -> str:
+    """
+    Formats the type value based on the given key.
+
+    Returns:
+        The formatted type value.
+    """
+    if key == "allowed_tools":
+        return "Tool"
+
+    elif key == "max_value_length":
+        return "int"
+
+    return _type
+
+
+def should_show_field(value: Dict[str, Any], key: str) -> bool:
+    """
+    Determines if the field should be shown or not.
+
+    Returns:
+        True if the field should be shown, False otherwise.
+    """
+    return (
+        (value["required"] and key != "input_variables")
+        or key in FORCE_SHOW_FIELDS
+        or any(text in key.lower() for text in ["password", "token", "api", "key"])
+    )
+
+
+def is_password_field(key: str) -> bool:
+    """
+    Determines if the field is a password field.
+
+    Returns:
+        True if the field is a password field, False otherwise.
+    """
+    return any(text in key.lower() for text in ["password", "token", "api", "key"])
+
+
+def is_multiline_field(key: str) -> bool:
+    """
+    Determines if the field is a multiline field.
+
+    Returns:
+        True if the field is a multiline field, False otherwise.
+    """
+    return key in {
+        "suffix",
+        "prefix",
+        "template",
+        "examples",
+        "code",
+        "headers",
+        "format_instructions",
+    }
+
+
+def replace_dict_type_with_code(value: Dict[str, Any]) -> None:
+    """
+    Replaces the type value with 'code' if the type is a dict.
+    """
+    if "dict" in value["type"].lower():
+        value["type"] = "code"
+
+
+def set_dict_file_attributes(value: Dict[str, Any]) -> None:
+    """
+    Sets the file attributes for the 'dict_' key.
+    """
+    value["type"] = "file"
+    value["suffixes"] = [".json", ".yaml", ".yml"]
+    value["fileTypes"] = ["json", "yaml", "yml"]
+
+
+def replace_default_value_with_actual(value: Dict[str, Any]) -> None:
+    """
+    Replaces the default value with the actual value.
+    """
+    if "default" in value:
+        value["value"] = value["default"]
+        value.pop("default")
+
+
+def set_headers_value(value: Dict[str, Any]) -> None:
+    """
+    Sets the value for the 'headers' key.
+    """
+    value["value"] = """{'Authorization': 'Bearer <token>'}"""
+
+
+def add_options_to_field(
+    value: Dict[str, Any], class_name: Optional[str], key: str
+) -> None:
+    """
+    Adds options to the field based on the class name and key.
+    """
+    options_map = {
+        "OpenAI": constants.OPENAI_MODELS,
+        "ChatOpenAI": constants.CHAT_OPENAI_MODELS,
+        "Anthropic": constants.ANTHROPIC_MODELS,
+        "ChatAnthropic": constants.ANTHROPIC_MODELS,
+    }
+
+    if class_name in options_map and key == "model_name":
+        value["options"] = options_map[class_name]
+        value["list"] = True
+        value["value"] = options_map[class_name][0]
+
+
+def get_number_of_workers(workers=None):
+    if workers == -1 or workers is None:
+        workers = (cpu_count() * 2) + 1
+    logger.debug(f"Number of workers: {workers}")
+    return workers

src/backend/langflow/utils/validate.py

@@ -163,9 +163,77 @@ def create_function(code, function_name):
     return wrapped_function
 
 
+def create_class(code, class_name):
+    if not hasattr(ast, "TypeIgnore"):
+
+        class TypeIgnore(ast.AST):
+            _fields = ()
+
+        ast.TypeIgnore = TypeIgnore
+
+    module = ast.parse(code)
+    exec_globals = globals().copy()
+
+    for node in module.body:
+        if isinstance(node, ast.Import):
+            for alias in node.names:
+                try:
+                    exec_globals[alias.asname or alias.name] = importlib.import_module(
+                        alias.name
+                    )
+                except ModuleNotFoundError as e:
+                    raise ModuleNotFoundError(
+                        f"Module {alias.name} not found. Please install it and try again."
+                    ) from e
+        elif isinstance(node, ast.ImportFrom):
+            try:
+                imported_module = importlib.import_module(node.module)
+                for alias in node.names:
+                    exec_globals[alias.name] = getattr(imported_module, alias.name)
+            except ModuleNotFoundError as e:
+                raise ModuleNotFoundError(
+                    f"Module {node.module} not found. Please install it and try again."
+                ) from e
+
+    class_code = next(
+        node
+        for node in module.body
+        if isinstance(node, ast.ClassDef) and node.name == class_name
+    )
+    class_code.parent = None
+    code_obj = compile(
+        ast.Module(body=[class_code], type_ignores=[]), "<string>", "exec"
+    )
+    # This suppresses import errors
+    # with contextlib.suppress(Exception):
+    exec(code_obj, exec_globals, locals())
+    exec_globals[class_name] = locals()[class_name]
+
+    # Return a function that imports necessary modules and creates an instance of the target class
+    def build_my_class(*args, **kwargs):
+        for module_name, module in exec_globals.items():
+            if isinstance(module, type(importlib)):
+                globals()[module_name] = module
+
+        instance = exec_globals[class_name](*args, **kwargs)
+        return instance
+
+    build_my_class.__globals__.update(exec_globals)
+
+    return build_my_class
+
+
 def extract_function_name(code):
     module = ast.parse(code)
     for node in module.body:
         if isinstance(node, ast.FunctionDef):
             return node.name
     raise ValueError("No function definition found in the code string")
+
+
+def extract_class_name(code):
+    module = ast.parse(code)
+    for node in module.body:
+        if isinstance(node, ast.ClassDef):
+            return node.name
+    raise ValueError("No class definition found in the code string")

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -13,7 +13,7 @@ import IntComponent from "../../../../components/intComponent";
 import PromptAreaComponent from "../../../../components/promptComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
-import { MAX_LENGTH_TO_SCROLL_TOOLTIP } from "../../../../constants/constants";
+import { TOOLTIP_EMPTY } from "../../../../constants/constants";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { ParameterComponentType } from "../../../../types/components";
@@ -23,11 +23,7 @@ import {
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils/styleUtils";
-import {
-  classNames,
-  getRandomKeyByssmm,
-  groupByFamily,
-} from "../../../../utils/utils";
+import { classNames, groupByFamily } from "../../../../utils/utils";
 
 export default function ParameterComponent({
   left,
@@ -45,11 +41,12 @@ export default function ParameterComponent({
 }: ParameterComponentType): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const refHtml = useRef(null);
-  const refNumberComponents = useRef(0);
   const infoHtml = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
-  const { setTabsState, tabId, save } = useContext(TabsContext);
+  const { setTabsState, tabId, save, flows } = useContext(TabsContext);
+
+  const flow = flows.find((f) => f.id === tabId).data?.nodes ?? null;
 
   // Update component position
   useEffect(() => {
@@ -80,9 +77,11 @@ export default function ParameterComponent({
         [tabId]: {
           ...prev[tabId],
           isPending: true,
+          formKeysData: prev[tabId].formKeysData,
         },
       };
     });
+    renderTooltips();
   };
 
   useEffect(() => {
@@ -98,57 +97,65 @@ export default function ParameterComponent({
     );
   }, [info]);
 
-  useEffect(() => {
-    const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
+  function renderTooltips() {
+    let groupedObj = groupByFamily(myData, tooltipTitle, left, flow);
 
-    refNumberComponents.current = groupedObj[0]?.type?.length;
+    if (groupedObj && groupedObj.length > 0) {
+      refHtml.current = groupedObj.map((item, i) => {
+        const Icon: any =
+          nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"];
 
-    refHtml.current = groupedObj.map((item, i) => {
-      const Icon: any = nodeIconsLucide[item.family];
-
-      return (
-        <span
-          key={getRandomKeyByssmm() + item.family + i}
-          className={classNames(
-            i > 0 ? "mt-2 flex items-center" : "flex items-center"
-          )}
-        >
-          <div
-            className="h-5 w-5"
-            style={{
-              color: nodeColors[item.family],
-            }}
+        return (
+          <span
+            key={i}
+            className={classNames(
+              i > 0 ? "mt-2 flex items-center" : "flex items-center"
+            )}
           >
-            <Icon
+            <div
               className="h-5 w-5"
-              strokeWidth={1.5}
               style={{
-                color: nodeColors[item.family] ?? nodeColors.unknown,
+                color: nodeColors[item.family],
               }}
-            />
-          </div>
-          <span className="ps-2 text-xs text-foreground">
-            {nodeNames[item.family] ?? ""}{" "}
-            <span className="text-xs">
-              {" "}
-              {item.type === "" ? "" : " - "}
-              {item.type.split(", ").length > 2
-                ? item.type.split(", ").map((el, i) => (
-                    <React.Fragment key={el + i}>
-                      <span>
-                        {i === item.type.split(", ").length - 1
-                          ? el
-                          : (el += `, `)}
-                      </span>
-                    </React.Fragment>
-                  ))
-                : item.type}
+            >
+              <Icon
+                className="h-5 w-5"
+                strokeWidth={1.5}
+                style={{
+                  color: nodeColors[item.family] ?? nodeColors.unknown,
+                }}
+              />
+            </div>
+            <span className="ps-2 text-xs text-foreground">
+              {nodeNames[item.family] ?? "Other"}
+              <span className="text-xs">
+                {" "}
+                {item.type === "" ? "" : " - "}
+                {item.type.split(", ").length > 2
+                  ? item.type.split(", ").map((el, i) => (
+                      <React.Fragment key={el + i}>
+                        <span>
+                          {i === item.type.split(", ").length - 1
+                            ? el
+                            : (el += `, `)}
+                        </span>
+                      </React.Fragment>
+                    ))
+                  : item.type}
+              </span>
             </span>
           </span>
-        </span>
-      );
-    });
-  }, [tooltipTitle]);
+        );
+      });
+    } else {
+      refHtml.current = <span>{TOOLTIP_EMPTY}</span>;
+    }
+  }
+
+  useEffect(() => {
+    renderTooltips();
+  }, [tooltipTitle, flow]);
+
   return (
     <div
       ref={ref}
@@ -190,11 +197,7 @@ export default function ParameterComponent({
           <></>
         ) : (
           <ShadTooltip
-            styleClasses={
-              refNumberComponents.current > MAX_LENGTH_TO_SCROLL_TOOLTIP
-                ? "tooltip-fixed-width custom-scroll overflow-y-scroll nowheel"
-                : "tooltip-fixed-width"
-            }
+            styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}
@@ -252,7 +255,7 @@ export default function ParameterComponent({
           <div className="mt-2 w-full">
             <ToggleShadComponent
               disabled={disabled}
-              enabled={data.node?.template[name].value}
+              enabled={data.node.template[name].value ?? false}
               setEnabled={(t) => {
                 handleOnNewValue(t);
               }}
@@ -280,6 +283,7 @@ export default function ParameterComponent({
         ) : left === true && type === "code" ? (
           <div className="mt-2 w-full">
             <CodeAreaComponent
+              dynamic={data.node.template[name].dynamic ?? false}
               setNodeClass={(nodeClass) => {
                 data.node = nodeClass;
               }}

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -1,11 +1,10 @@
 import { cloneDeep } from "lodash";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { NodeToolbar, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { useSSE } from "../../contexts/SSEContext";
-import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
@@ -23,15 +22,9 @@ export default function GenericNode({
   selected: boolean;
 }): JSX.Element {
   const [data, setData] = useState(olddata);
-  const { setErrorData } = useContext(alertContext);
   const { updateFlow, flows, tabId } = useContext(TabsContext);
   const updateNodeInternals = useUpdateNodeInternals();
-  const showError = useRef(true);
   const { types, deleteNode, reactFlowInstance } = useContext(typesContext);
-  // any to avoid type conflict
-  // PROBLEM HERE OTAVIO
-  const Icon: any =
-    nodeIconsLucide[data.type] || nodeIconsLucide[types[data.type]];
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
   const [validationStatus, setValidationStatus] = useState(null);
   // State for outline color
@@ -68,18 +61,6 @@ export default function GenericNode({
     }
   }, [sseData, data.id]);
 
-  if (!Icon) {
-    if (showError.current) {
-      setErrorData({
-        title: data.type
-          ? `The ${data.type} node could not be rendered, please review your json file`
-          : "There was a node that can't be rendered, please review your json file",
-      });
-      showError.current = false;
-    }
-    deleteNode(data.id);
-    return;
-  }
   return (
     <>
       <NodeToolbar>
@@ -96,6 +77,11 @@ export default function GenericNode({
           "generic-node-div"
         )}
       >
+        {data.node.beta && (
+          <div className="beta-badge-wrapper">
+            <div className="beta-badge-content">BETA</div>
+          </div>
+        )}
         <div className="generic-node-div-title">
           <div className="generic-node-title-arrangement">
             <IconComponent
@@ -128,7 +114,7 @@ export default function GenericNode({
                     </span>
                   ) : (
                     <div className="max-h-96 overflow-auto">
-                      {validationStatus.params
+                      {typeof validationStatus.params === "string"
                         ? validationStatus.params
                             .split("\n")
                             .map((line: string, index: number) => (
@@ -181,6 +167,14 @@ export default function GenericNode({
                   {data.node.template[t].show &&
                   !data.node.template[t].advanced ? (
                     <ParameterComponent
+                      key={
+                        (data.node.template[t].input_types?.join(";") ??
+                          data.node.template[t].type) +
+                        "|" +
+                        t +
+                        "|" +
+                        data.id
+                      }
                       data={data}
                       setData={setData}
                       color={
@@ -228,6 +222,7 @@ export default function GenericNode({
               {" "}
             </div>
             <ParameterComponent
+              key={[data.type, data.id, ...data.node.base_classes].join("|")}
               data={data}
               setData={setData}
               color={nodeColors[types[data.type]] ?? nodeColors.unknown}

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -1,11 +1,14 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { Textarea } from "../../components/ui/textarea";
 import { InputProps } from "../../types/components";
+import { readFlowsFromDatabase } from "../../controllers/API";
 
 export const EditFlowSettings: React.FC<InputProps> = ({
   name,
+  invalidName,
+  setInvalidName,
   description,
   maxLength = 50,
   flows,
@@ -15,6 +18,14 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   updateFlow,
 }: InputProps): JSX.Element => {
   const [isMaxLength, setIsMaxLength] = useState(false);
+  const nameLists = useRef([]);
+  useEffect(() => {
+    readFlowsFromDatabase().then((flows) => {
+      flows.forEach((flow) => {
+        nameLists.current.push(flow.name);
+      });
+    });
+  }, []);
 
   const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
@@ -23,7 +34,11 @@ export const EditFlowSettings: React.FC<InputProps> = ({
     } else {
       setIsMaxLength(false);
     }
-
+    if (!nameLists.current.includes(value)) {
+      setInvalidName(false);
+    } else {
+      setInvalidName(true);
+    }
     setName(value);
   };
 
@@ -45,6 +60,9 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           {isMaxLength && (
             <span className="edit-flow-span">Character limit reached</span>
           )}
+          {invalidName && (
+            <span className="edit-flow-span">Name already in use</span>
+          )}
         </div>
         <Input
           className="nopan nodrag noundo nocopy mt-2 font-normal"

src/frontend/src/components/chatComponent/index.tsx

@@ -12,9 +12,8 @@ import { NodeType } from "../../types/flow";
 
 export default function Chat({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
-  const [isBuilt, setIsBuilt] = useState(false);
   const [canOpen, setCanOpen] = useState(false);
-  const { tabsState } = useContext(TabsContext);
+  const { tabsState, isBuilt, setIsBuilt } = useContext(TabsContext);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import CodeAreaModal from "../../modals/codeAreaModal";
-import { TextAreaComponentType } from "../../types/components";
+import { CodeAreaComponentType } from "../../types/components";
 
 import IconComponent from "../genericIconComponent";
 
@@ -10,8 +10,9 @@ export default function CodeAreaComponent({
   disabled,
   editNode = false,
   nodeClass,
+  dynamic,
   setNodeClass,
-}: TextAreaComponentType): JSX.Element {
+}: CodeAreaComponentType) {
   const [myValue, setMyValue] = useState(
     typeof value == "string" ? value : JSON.stringify(value)
   );
@@ -29,6 +30,7 @@ export default function CodeAreaComponent({
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
       <CodeAreaModal
+        dynamic={dynamic}
         value={myValue}
         nodeClass={nodeClass}
         setNodeClass={setNodeClass}
@@ -43,7 +45,7 @@ export default function CodeAreaComponent({
               editNode
                 ? "input-edit-node input-dialog"
                 : (disabled ? " input-disable input-ring " : "") +
-                  " input-primary text-muted-foreground "
+                  " primary-input text-muted-foreground "
             }
           >
             {myValue !== "" ? myValue : "Type something..."}

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -132,7 +132,7 @@ export default function CodeTabsComponent({
             </TabsTrigger>
           ))}
         </TabsList>
-        {Number(activeTab) < 3 && (
+        {Number(activeTab) < 4 && (
           <div className="float-right mx-1 flex gap-2">
             <button
               className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
@@ -161,15 +161,23 @@ export default function CodeTabsComponent({
           className="api-modal-tabs-content"
           key={index} // Remember to add a unique key prop
         >
-          {index < 3 ? (
-            <SyntaxHighlighter
-              className="mt-0 h-full w-full overflow-auto custom-scroll"
-              language={tab.mode}
-              style={oneDark}
-            >
-              {tab.code}
-            </SyntaxHighlighter>
-          ) : index === 3 ? (
+          {index < 4 ? (
+            <>
+              {tab.description && (
+                <div
+                  className="mb-2 w-full text-left text-sm"
+                  dangerouslySetInnerHTML={{ __html: tab.description }}
+                ></div>
+              )}
+              <SyntaxHighlighter
+                className="mt-0 h-full w-full overflow-auto custom-scroll"
+                language={tab.mode}
+                style={oneDark}
+              >
+                {tab.code}
+              </SyntaxHighlighter>
+            </>
+          ) : index === 4 ? (
             <>
               <div className="api-modal-according-display">
                 <div
@@ -411,8 +419,12 @@ export default function CodeTabsComponent({
                                                         .suffixes
                                                     }
                                                     onFileChange={(
-                                                      k: any
-                                                    ) => {}}
+                                                      value: any
+                                                    ) => {
+                                                      t.data.node.template[
+                                                        n
+                                                      ].file_path = value;
+                                                    }}
                                                   ></InputFileComponent>
                                                 </div>
                                               </ShadTooltip>

src/frontend/src/components/inputFileComponent/index.tsx

@@ -66,12 +66,12 @@ export default function InputFileComponent({
             const { file_path } = data;
             console.log("File name:", file_path);
 
+            // sets the value that goes to the backend
+            onFileChange(file_path);
             // Update the state and callback with the name of the file
             // sets the value to the user
             setMyValue(file.name);
             onChange(file.name);
-            // sets the value that goes to the backend
-            onFileChange(file_path);
             setLoading(false);
           })
           .catch(() => {
@@ -102,8 +102,8 @@ export default function InputFileComponent({
             editNode
               ? "input-edit-node input-dialog text-muted-foreground"
               : disabled
-              ? "input-disable input-dialog input-primary"
-              : "input-dialog input-primary text-muted-foreground"
+              ? "input-disable input-dialog primary-input"
+              : "input-dialog primary-input text-muted-foreground"
           }
         >
           {myValue !== "" ? myValue : "No file"}

src/frontend/src/components/promptComponent/index.tsx

@@ -51,7 +51,7 @@ export default function PromptAreaComponent({
               editNode
                 ? "input-edit-node input-dialog"
                 : (disabled ? " input-disable text-ring " : "") +
-                  " input-primary text-muted-foreground "
+                  " primary-input text-muted-foreground "
             }
           >
             {value !== "" ? value : "Type your prompt here..."}

src/frontend/src/components/ui/input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         type={type}
-        className={cn("nopan nodrag noundo nocopy input-primary", className)}
+        className={cn("nopan nodrag noundo nocopy primary-input", className)}
         ref={ref}
         {...props}
       />

src/frontend/src/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+        "overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
         className
       )}
       {...props}

src/frontend/src/constants/constants.ts

@@ -143,6 +143,12 @@ export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
 export const IMPORT_DIALOG_SUBTITLE =
   "Upload a JSON file or select from the available community examples.";
 
+/**
+ * The text that shows when a tooltip is empty
+ * @constant
+ */
+export const TOOLTIP_EMPTY = "No compatible components found.";
+
 /**
  * The base text for subtitle of code dialog
  * @constant
@@ -491,3 +497,14 @@ export const NOUNS: string[] = [
  *
  */
 export const USER_PROJECTS_HEADER = "My Collection";
+
+/**
+ * URLs excluded from error retries.
+ * @constant
+ *
+ */
+export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
+  "/api/v1/validate/code",
+  "/api/v1/custom_component",
+  "/api/v1/validate/prompt",
+];

src/frontend/src/contexts/tabsContext.tsx

@@ -20,7 +20,11 @@ import {
 import { APIClassType, APITemplateType } from "../types/api";
 import { FlowType, NodeType } from "../types/flow";
 import { TabsContextType, TabsState } from "../types/tabs";
-import { updateIds, updateTemplate } from "../utils/reactflowUtils";
+import {
+  addVersionToDuplicates,
+  updateIds,
+  updateTemplate,
+} from "../utils/reactflowUtils";
 import { getRandomDescription, getRandomName } from "../utils/utils";
 import { alertContext } from "./alertContext";
 import { typesContext } from "./typesContext";
@@ -40,6 +44,8 @@ const TabsContextInitialValue: TabsContextType = {
   downloadFlows: () => {},
   uploadFlows: () => {},
   uploadFlow: () => {},
+  isBuilt: false,
+  setIsBuilt: (state: boolean) => {},
   hardReset: () => {},
   saveFlow: async (flow: FlowType) => {},
   lastCopiedSelection: null,
@@ -448,6 +454,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       processFlowEdges(newFlow);
       processFlowNodes(newFlow);
 
+      const flowName = addVersionToDuplicates(newFlow, flows);
+
+      newFlow.name = flowName;
+
       try {
         const { id } = await saveFlowToDatabase(newFlow);
         // Change the id to the new id.
@@ -583,10 +593,14 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     }
   }
 
+  const [isBuilt, setIsBuilt] = useState(false);
+
   return (
     <TabsContext.Provider
       value={{
         saveFlow,
+        isBuilt,
+        setIsBuilt,
         lastCopiedSelection,
         setLastCopiedSelection,
         hardReset,

src/frontend/src/controllers/API/api.tsx

@@ -1,5 +1,6 @@
 import axios, { AxiosError, AxiosInstance } from "axios";
 import { useContext, useEffect, useRef } from "react";
+import { URL_EXCLUDED_FROM_ERROR_RETRIES } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 
 // Create a new Axios instance
@@ -15,6 +16,9 @@ function ApiInterceptor() {
     const interceptor = api.interceptors.response.use(
       (response) => response,
       async (error: AxiosError) => {
+        if (URL_EXCLUDED_FROM_ERROR_RETRIES.includes(error.config?.url)) {
+          return Promise.reject(error);
+        }
         let retryCount = 0;
 
         while (retryCount < 4) {
@@ -31,7 +35,7 @@ function ApiInterceptor() {
                   "Refresh the page",
                   "Use a new flow tab",
                   "Check if the backend is up",
-                  "Endpoint: " + error.config.url,
+                  "Endpoint: " + error.config?.url,
                 ],
               });
               return Promise.reject(error);

src/frontend/src/controllers/API/index.ts

@@ -339,3 +339,10 @@ export async function uploadFile(
   formData.append("file", file);
   return await api.post(`/api/v1/upload/${id}`, formData);
 }
+
+export async function postCustomComponent(
+  code: string,
+  apiClass: APIClassType
+): Promise<AxiosResponse<APIClassType>> {
+  return await api.post(`/api/v1/custom_component`, { code });
+}

src/frontend/src/icons/GradientSparkles/index.tsx

@@ -0,0 +1,22 @@
+import { Infinity } from "lucide-react";
+import { forwardRef } from "react";
+
+const GradientSparkles = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return (
+      <>
+        <svg width="0" height="0" style={{ position: "absolute" }}>
+          <defs>
+            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop className="gradient-start" offset="0%" />
+              <stop className="gradient-end" offset="100%" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <Infinity stroke="url(#grad1)" ref={ref} {...props} />
+      </>
+    );
+  }
+);
+
+export default GradientSparkles;

src/frontend/src/index.tsx

@@ -5,9 +5,12 @@ import ContextWrapper from "./contexts";
 import reportWebVitals from "./reportWebVitals";
 
 import { ApiInterceptor } from "./controllers/API/api";
+// @ts-ignore
 import "./style/index.css";
-import "./style/classes.css";
+// @ts-ignore
 import "./style/applies.css";
+// @ts-ignore
+import "./style/classes.css";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement

src/frontend/src/modals/ApiModal/index.tsx

@@ -21,6 +21,7 @@ import {
   getCurlCode,
   getPythonApiCode,
   getPythonCode,
+  getWidgetCode,
 } from "../../utils/utils";
 import BaseModal from "../baseModal";
 
@@ -29,9 +30,11 @@ const ApiModal = forwardRef(
     {
       flow,
       children,
+      disable,
     }: {
       flow: FlowType;
       children: ReactNode;
+      disable: boolean;
     },
     ref
   ) => {
@@ -43,6 +46,7 @@ const ApiModal = forwardRef(
     const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState);
     const curl_code = getCurlCode(flow, tweak.current, tabsState);
     const pythonCode = getPythonCode(flow, tweak.current, tabsState);
+    const widgetCode = getWidgetCode(flow, tabsState);
     const tweaksCode = buildTweaks(flow);
     const [tabs, setTabs] = useState([
       {
@@ -67,6 +71,15 @@ const ApiModal = forwardRef(
         language: "py",
         code: pythonCode,
       },
+      {
+        name: "Chat Widget HTML",
+        description:
+          "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
+        mode: "html",
+        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+        language: "py",
+        code: widgetCode,
+      },
     ]);
 
     function startState() {
@@ -111,6 +124,15 @@ const ApiModal = forwardRef(
             image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
             code: pythonCode,
           },
+          {
+            name: "Chat Widget HTML",
+            description:
+              "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
+            mode: "html",
+            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+            language: "py",
+            code: widgetCode,
+          },
           {
             name: "Tweaks",
             mode: "python",
@@ -143,6 +165,15 @@ const ApiModal = forwardRef(
             language: "py",
             code: pythonCode,
           },
+          {
+            name: "Chat Widget HTML",
+            description:
+              "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
+            mode: "html",
+            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+            language: "py",
+            code: widgetCode,
+          },
         ]);
       }
     }, [flow["data"]["nodes"], open]);
@@ -210,13 +241,15 @@ const ApiModal = forwardRef(
         tweak.current.push(newTweak);
       }
 
-      const pythonApiCode = getPythonApiCode(flow, tweak.current);
-      const curl_code = getCurlCode(flow, tweak.current);
-      const pythonCode = getPythonCode(flow, tweak.current);
+      const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState);
+      const curl_code = getCurlCode(flow, tweak.current, tabsState);
+      const pythonCode = getPythonCode(flow, tweak.current, tabsState);
+      const widgetCode = getWidgetCode(flow, tabsState);
 
       tabs[0].code = curl_code;
       tabs[1].code = pythonApiCode;
       tabs[2].code = pythonCode;
+      tabs[3].code = widgetCode;
 
       setTweak(tweak.current);
     }
@@ -253,7 +286,7 @@ const ApiModal = forwardRef(
     }
 
     return (
-      <BaseModal open={open} setOpen={setOpen}>
+      <BaseModal open={open} setOpen={setOpen} disable={disable}>
         <BaseModal.Trigger>{children}</BaseModal.Trigger>
         <BaseModal.Header description={EXPORT_CODE_DIALOG}>
           <span className="pr-2">Code</span>

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -241,7 +241,7 @@ const EditNodeModal = forwardRef(
                                     }
                                     suffixes={myData.node.template[n].suffixes}
                                     onFileChange={(t: string) => {
-                                      handleOnNewValue(t, n);
+                                      data.node.template[n].file_path = t;
                                     }}
                                   ></InputFileComponent>
                                 </div>
@@ -264,6 +264,13 @@ const EditNodeModal = forwardRef(
                               ) : myData.node?.template[n].type === "code" ? (
                                 <div className="mx-auto">
                                   <CodeAreaComponent
+                                    dynamic={
+                                      data.node.template[n].dynamic ?? false
+                                    }
+                                    setNodeClass={(nodeClass) => {
+                                      data.node = nodeClass;
+                                    }}
+                                    nodeClass={data.node}
                                     disabled={disabled}
                                     editNode={true}
                                     value={myData.node.template[n].value ?? ""}

src/frontend/src/modals/NodeModal/components/ModalField/index.tsx

@@ -0,0 +1,180 @@
+import { useState } from "react";
+import CodeAreaComponent from "../../../../components/codeAreaComponent";
+import Dropdown from "../../../../components/dropdownComponent";
+import FloatComponent from "../../../../components/floatComponent";
+import InputComponent from "../../../../components/inputComponent";
+import InputFileComponent from "../../../../components/inputFileComponent";
+import InputListComponent from "../../../../components/inputListComponent";
+import IntComponent from "../../../../components/intComponent";
+import PromptAreaComponent from "../../../../components/promptComponent";
+import TextAreaComponent from "../../../../components/textAreaComponent";
+import ToggleComponent from "../../../../components/toggleComponent";
+import { classNames } from "../../../../utils/utils";
+
+export default function ModalField({
+  data,
+  title,
+  required,
+  id,
+  name,
+  type,
+  index,
+}) {
+  const [enabled, setEnabled] = useState(
+    data.node.template[name]?.value ?? false
+  );
+  const display =
+    type === "str" ||
+    type === "int" ||
+    type === "prompt" ||
+    type === "bool" ||
+    type === "float" ||
+    type === "file" ||
+    type === "code";
+
+  return (
+    <div
+      className={classNames(
+        "flex w-full flex-row items-center justify-between",
+        display ? "" : "hidden",
+        Object.keys(data.node.template).filter(
+          (t) =>
+            t.charAt(0) !== "_" &&
+            data.node.template[t].advanced &&
+            data.node.template[t].show
+        ).length -
+          1 ===
+          index
+          ? "pb-4"
+          : ""
+      )}
+    >
+      {display && (
+        <div>
+          <span className="mx-2">{title}</span>
+          <span className="text-status-red">{required ? " *" : ""}</span>
+        </div>
+      )}
+
+      {type === "str" && !data.node.template[name].options ? (
+        <div className="w-1/2">
+          {data.node.template[name].list ? (
+            <InputListComponent
+              disabled={false}
+              value={
+                !data.node.template[name].value ||
+                data.node.template[name].value === ""
+                  ? [""]
+                  : data.node.template[name].value
+              }
+              onChange={(t: string[]) => {
+                data.node.template[name].value = t;
+              }}
+            />
+          ) : data.node.template[name].multiline ? (
+            <TextAreaComponent
+              disabled={false}
+              value={data.node.template[name].value ?? ""}
+              onChange={(t: string) => {
+                data.node.template[name].value = t;
+              }}
+            />
+          ) : (
+            <InputComponent
+              disabled={false}
+              password={data.node.template[name].password ?? false}
+              value={data.node.template[name].value ?? ""}
+              onChange={(t) => {
+                data.node.template[name].value = t;
+              }}
+            />
+          )}
+        </div>
+      ) : type === "bool" ? (
+        <div className="ml-auto">
+          {" "}
+          <ToggleComponent
+            disabled={false}
+            enabled={enabled}
+            setEnabled={(t) => {
+              data.node.template[name].value = t;
+              setEnabled(t);
+            }}
+            size="small"
+          />
+        </div>
+      ) : type === "float" ? (
+        <div className="w-1/2">
+          <FloatComponent
+            disabled={false}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t) => {
+              data.node.template[name].value = t;
+            }}
+          />
+        </div>
+      ) : type === "str" && data.node.template[name].options ? (
+        <div className="w-1/2">
+          <Dropdown
+            options={data.node.template[name].options}
+            onSelect={(newValue) => (data.node.template[name].value = newValue)}
+            value={data.node.template[name].value ?? "Choose an option"}
+          ></Dropdown>
+        </div>
+      ) : type === "int" ? (
+        <div className="w-1/2">
+          <IntComponent
+            disabled={false}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t) => {
+              data.node.template[name].value = t;
+            }}
+          />
+        </div>
+      ) : type === "file" ? (
+        <div className="w-1/2">
+          <InputFileComponent
+            disabled={false}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t: string) => {
+              data.node.template[name].value = t;
+            }}
+            fileTypes={data.node.template[name].fileTypes}
+            suffixes={data.node.template[name].suffixes}
+            onFileChange={(t: string) => {
+              data.node.template[name].file_path = t;
+            }}
+          ></InputFileComponent>
+        </div>
+      ) : type === "prompt" ? (
+        <div className="w-1/2">
+          <PromptAreaComponent
+            field_name={name}
+            disabled={false}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t: string) => {
+              data.node.template[name].value = t;
+            }}
+          />
+        </div>
+      ) : type === "code" ? (
+        <div className="w-1/2">
+          <CodeAreaComponent
+            dynamic={data.node.template[name].dynamic ?? false}
+            setNodeClass={(nodeClass) => {
+              data.node = nodeClass;
+            }}
+            nodeClass={data.node}
+            disabled={false}
+            value={data.node.template[name].value ?? ""}
+            onChange={(t: string) => {
+              data.node.template[name].value = t;
+            }}
+          />
+        </div>
+      ) : (
+        <div className="hidden"></div>
+      )}
+    </div>
+  );
+}

src/frontend/src/modals/baseModal/index.tsx

@@ -47,11 +47,13 @@ interface BaseModalProps {
   ];
   open?: boolean;
   setOpen?: (open: boolean) => void;
+  disable?: boolean;
   size?: "smaller" | "small" | "medium" | "large" | "large-h-full";
 }
 function BaseModal({
   open,
   setOpen,
+  disable = false,
   children,
   size = "large",
 }: BaseModalProps) {
@@ -74,7 +76,7 @@ function BaseModal({
   switch (size) {
     case "smaller":
       minWidth = "min-w-[40vw]";
-      height = "h-[25vh]";
+      height = "h-[27vh]";
       break;
     case "small":
       minWidth = "min-w-[40vw]";
@@ -100,7 +102,10 @@ function BaseModal({
   //UPDATE COLORS AND STYLE CLASSSES
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className="w-full" hidden={triggerChild ? false : true}>
+      <DialogTrigger
+        className={"w-full " + (disable ? "button-disable" : "")}
+        hidden={triggerChild ? false : true}
+      >
         {triggerChild}
       </DialogTrigger>
       <DialogContent className={minWidth}>
@@ -108,8 +113,9 @@ function BaseModal({
         <div className={`mt-2 flex flex-col ${height} w-full `}>
           {ContentChild}
         </div>
-
-        <div className="flex flex-row-reverse">{ContentFooter}</div>
+        {ContentFooter && (
+          <div className="flex flex-row-reverse">{ContentFooter}</div>
+        )}
       </DialogContent>
     </Dialog>
   );

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -3,15 +3,18 @@ import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
-import { useContext, useState } from "react";
+// import "ace-builds/webpack-resolver";
+import { ReactNode, useContext, useEffect, useState } from "react";
 import AceEditor from "react-ace";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
-import { postValidateCode } from "../../controllers/API";
 import { codeAreaModalPropsType } from "../../types/components";
+import { typesContext } from "../../contexts/typesContext";
+import { postCustomComponent, postValidateCode } from "../../controllers/API";
+import { APIClassType } from "../../types/api";
 import BaseModal from "../baseModal";
 
 export default function CodeAreaModal({
@@ -20,12 +23,27 @@ export default function CodeAreaModal({
   nodeClass,
   setNodeClass,
   children,
+  dynamic,
 }: codeAreaModalPropsType): JSX.Element {
   const [code, setCode] = useState(value);
   const { dark } = useContext(darkContext);
+  const { reactFlowInstance } = useContext(typesContext);
+  const [height, setHeight] = useState(null);
   const { setErrorData, setSuccessData } = useContext(alertContext);
+  const [error, setError] = useState<{
+    detail: { error: string; traceback: string };
+  }>(null);
 
-  function handleClick() {
+  useEffect(() => {
+    // if nodeClass.template has more fields other than code and dynamic is true
+    // do not run handleClick
+    if (dynamic && Object.keys(nodeClass.template).length > 2) {
+      return;
+    }
+    processCode();
+  }, []);
+
+  function processNonDynamicField() {
     postValidateCode(code)
       .then((apiReturn) => {
         if (apiReturn.data) {
@@ -35,8 +53,9 @@ export default function CodeAreaModal({
             setSuccessData({
               title: "Code is ready to run",
             });
-            setValue(code);
             setOpen(false);
+            setValue(code);
+            // setValue(code);
           } else {
             if (funcErrors.length !== 0) {
               setErrorData({
@@ -64,8 +83,56 @@ export default function CodeAreaModal({
       });
   }
 
+  function processDynamicField() {
+    postCustomComponent(code, nodeClass)
+      .then((apiReturn) => {
+        const { data } = apiReturn;
+        if (data) {
+          setNodeClass(data);
+          setValue(code);
+          setError({ detail: { error: undefined, traceback: undefined } });
+          setOpen(false);
+        }
+      })
+      .catch((err) => {
+        setError(err.response.data);
+      });
+  }
+
+  function processCode() {
+    if (!dynamic) {
+      processNonDynamicField();
+    } else {
+      processDynamicField();
+    }
+  }
+
+  function handleClick() {
+    processCode();
+  }
+
+  useEffect(() => {
+    // Function to be executed after the state changes
+    const delayedFunction = setTimeout(() => {
+      if (error?.detail.error !== undefined) {
+        //trigger to update the height, does not really apply any height
+        setHeight("90%");
+      }
+      //600 to happen after the transition of 500ms
+    }, 600);
+
+    // Cleanup function to clear the timeout if the component unmounts or the state changes again
+    return () => {
+      clearTimeout(delayedFunction);
+    };
+  }, [error, setHeight]);
+
   const [open, setOpen] = useState(false);
 
+  useEffect(() => {
+    setCode(value);
+  }, [value, open]);
+
   return (
     <BaseModal open={open} setOpen={setOpen}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
@@ -83,6 +150,7 @@ export default function CodeAreaModal({
             <AceEditor
               value={code}
               mode="python"
+              height={height ?? "100%"}
               highlightActiveLine={true}
               showPrintMargin={false}
               fontSize={14}
@@ -93,9 +161,26 @@ export default function CodeAreaModal({
               onChange={(value) => {
                 setCode(value);
               }}
-              className="h-full w-full rounded-lg border-[1px] border-border custom-scroll"
+              className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
             />
           </div>
+          <div
+            className={
+              "w-full transition-all delay-500 " +
+              (error?.detail.error !== undefined ? "h-2/6" : "h-0")
+            }
+          >
+            <div className="mt-1 h-full w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
+              <h1 className="text-lg text-destructive">
+                {error?.detail?.error}
+              </h1>
+              <div className="ml-2 w-full break-all text-sm text-status-red">
+                <pre className="w-full whitespace-pre-wrap break-all">
+                  {error?.detail?.traceback}
+                </pre>
+              </div>
+            </div>
+          </div>
           <div className="flex h-fit w-full justify-end">
             <Button className="mt-3" onClick={handleClick} type="submit">
               Check & Save

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -21,6 +21,8 @@ export default function FlowSettingsModal({
   const [description, setDescription] = useState(
     flows.find((f) => f.id === tabId).description
   );
+  const [invalidName, setInvalidName] = useState(false);
+
   function handleClick(): void {
     let savedFlow = flows.find((f) => f.id === tabId);
     savedFlow.name = name;
@@ -37,6 +39,8 @@ export default function FlowSettingsModal({
       </BaseModal.Header>
       <BaseModal.Content>
         <EditFlowSettings
+          invalidName={invalidName}
+          setInvalidName={setInvalidName}
           name={name}
           description={description}
           flows={flows}
@@ -48,7 +52,7 @@ export default function FlowSettingsModal({
       </BaseModal.Content>
 
       <BaseModal.Footer>
-        <Button onClick={handleClick} type="submit">
+        <Button disabled={invalidName} onClick={handleClick} type="submit">
           Save
         </Button>
       </BaseModal.Footer>

src/frontend/src/modals/formModal/index.tsx

@@ -112,7 +112,6 @@ export default function FormModal({
       return newChat;
     });
   };
-
   //add proper type signature for function
 
   function updateLastMessage({
@@ -374,11 +373,7 @@ export default function FormModal({
     if (lockChat) setLockChat(false);
   }
 
-  function setModalOpen(x: boolean): void {
-    setOpen(x);
-  }
-
-  function handleOnCheckedChange(checked: boolean, i: string): void {
+  function handleOnCheckedChange(checked: boolean, i: string) {
     if (checked === true) {
       setChatKey(i);
       setChatValue(tabsState[flow.id].formKeysData.input_keys[i]);
@@ -497,22 +492,12 @@ export default function FormModal({
                         <Badge variant="gray" size="md">
                           {i}
                         </Badge>
-
-                        <div
-                          className="-mb-1"
-                          onClick={(event) => {
-                            event.stopPropagation();
-                          }}
-                        >
+                        <div className="-mb-1">
                           <ToggleShadComponent
                             enabled={chatKey === i}
-                            setEnabled={(value) =>
-                              handleOnCheckedChange(value, i)
-                            }
+                            setEnabled={() => {}}
                             size="small"
-                            disabled={tabsState[
-                              id.current
-                            ].formKeysData.handle_keys?.some((t) => t === i)}
+                            disabled={true}
                           />
                         </div>
                       </div>
@@ -521,28 +506,9 @@ export default function FormModal({
                     keyValue={i}
                   >
                     <div className="file-component-tab-column">
-                      {tabsState[id.current].formKeysData.handle_keys?.some(
-                        (t) => t === i
-                      ) && (
-                        <div className="font-normal text-muted-foreground ">
-                          Source: Component
-                        </div>
-                      )}
-                      <Textarea
-                        className="custom-scroll"
-                        value={tabsState[id.current].formKeysData.input_keys[i]}
-                        onChange={(e) => {
-                          setTabsState((old) => {
-                            let newTabsState = _.cloneDeep(old);
-                            newTabsState[id.current].formKeysData.input_keys[
-                              i
-                            ] = e.target.value;
-                            return newTabsState;
-                          });
-                        }}
-                        disabled={chatKey === i}
-                        placeholder="Enter text..."
-                      ></Textarea>
+                      <div className="font-normal text-muted-foreground ">
+                        Source: Memory
+                      </div>
                     </div>
                   </AccordionComponent>
                 </div>

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
 import { Input } from "../../../../components/ui/input";
@@ -18,8 +18,8 @@ import { classNames } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 
 export default function ExtraSidebar(): JSX.Element {
-  const { data } = useContext(typesContext);
-  const { flows, tabId, uploadFlow, tabsState, saveFlow } =
+  const { data, templates } = useContext(typesContext);
+  const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt } =
     useContext(TabsContext);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
@@ -57,56 +57,83 @@ export default function ExtraSidebar(): JSX.Element {
     });
   }
   const flow = flows.find((f) => f.id === tabId);
+  useEffect(() => {
+    // show components with error on load
+    let errors = [];
+    Object.keys(templates).forEach((component) => {
+      if (templates[component].error) {
+        errors.push(component);
+      }
+    });
+    if (errors.length > 0)
+      setErrorData({ title: " Components with errors: ", list: errors });
+  }, []);
 
   return (
     <div className="side-bar-arrangement">
       <div className="side-bar-buttons-arrangement">
-        <ShadTooltip content="Import" side="top">
-          <button
-            className="extra-side-bar-buttons"
-            onClick={(): void => {
-              uploadFlow();
-            }}
-          >
-            <IconComponent name="FileUp" className="side-bar-button-size " />
-          </button>
-        </ShadTooltip>
-
-        <ShadTooltip content="Export" side="top">
+        <div className="side-bar-button">
+          <ShadTooltip content="Import" side="top">
+            <button
+              className="extra-side-bar-buttons"
+              onClick={() => {
+                uploadFlow();
+              }}
+            >
+              <IconComponent name="FileUp" className="side-bar-button-size " />
+            </button>
+          </ShadTooltip>
+        </div>
+        <div className="side-bar-button">
           <ExportModal>
-            <div className={classNames("extra-side-bar-buttons")}>
-              <IconComponent name="FileDown" className="side-bar-button-size" />
-            </div>
-          </ExportModal>
-        </ShadTooltip>
-        <ShadTooltip content="Code" side="top">
-          {flow && flow.data && (
-            <ApiModal flow={flow}>
+            <ShadTooltip content="Export" side="top">
               <div className={classNames("extra-side-bar-buttons")}>
-                <IconComponent name="Code2" className="side-bar-button-size" />
+                <IconComponent
+                  name="FileDown"
+                  className="side-bar-button-size"
+                />
               </div>
-            </ApiModal>
-          )}
+            </ShadTooltip>
+          </ExportModal>
+        </div>
+        <ShadTooltip content={"Code"} side="top">
+          <div className="side-bar-button">
+            {flow && flow.data && (
+              <ApiModal flow={flow} disable={!isBuilt}>
+                <div className={classNames("extra-side-bar-buttons")}>
+                  <IconComponent
+                    name="Code2"
+                    className={
+                      "side-bar-button-size" +
+                      (isBuilt ? " " : " extra-side-bar-save-disable")
+                    }
+                  />
+                </div>
+              </ApiModal>
+            )}
+          </div>
         </ShadTooltip>
-
-        <ShadTooltip content="Save" side="top">
-          <button
-            className="extra-side-bar-buttons"
-            onClick={(event) => {
-              saveFlow(flow);
-              setSuccessData({ title: "Changes saved successfully" });
-            }}
-            disabled={!isPending}
-          >
-            <IconComponent
-              name="Save"
+        <div className="side-bar-button">
+          <ShadTooltip content="Save" side="top">
+            <button
               className={
-                "side-bar-button-size" +
-                (isPending ? " " : " extra-side-bar-save-disable")
+                "extra-side-bar-buttons " + (isPending ? "" : "button-disable")
               }
-            />
-          </button>
-        </ShadTooltip>
+              onClick={(event) => {
+                saveFlow(flow);
+                setSuccessData({ title: "Changes saved successfully" });
+              }}
+            >
+              <IconComponent
+                name="Save"
+                className={
+                  "side-bar-button-size" +
+                  (isPending ? " " : " extra-side-bar-save-disable")
+                }
+              />
+            </button>
+          </ShadTooltip>
+        </div>
       </div>
       <Separator />
       <div className="side-bar-search-div-placement">
@@ -138,7 +165,7 @@ export default function ExtraSidebar(): JSX.Element {
             Object.keys(dataFilter[d]).length > 0 ? (
               <DisclosureComponent
                 openDisc={search.length == 0 ? false : true}
-                key={nodeNames[d]}
+                key={i}
                 button={{
                   title: nodeNames[d] ?? nodeNames.unknown,
                   Icon: nodeIconsLucide[d] ?? nodeIconsLucide.unknown,
@@ -151,13 +178,16 @@ export default function ExtraSidebar(): JSX.Element {
                       <ShadTooltip
                         content={data[d][t].display_name}
                         side="right"
-                        key={data[d][t].display_name}
+                        key={k}
                       >
                         <div key={k} data-tooltip-id={t}>
                           <div
-                            draggable
+                            draggable={!data[d][t].error}
                             className={
-                              "side-bar-components-border bg-background"
+                              "side-bar-components-border bg-background" +
+                              (data[d][t].error
+                                ? " cursor-not-allowed select-none"
+                                : "")
                             }
                             style={{
                               borderLeftColor:

src/frontend/src/style/classes.css

@@ -1,30 +1,38 @@
 body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-      sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
-  
+
 code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-      monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
 }
 pre {
-    font-family: inherit;
+  font-family: inherit;
 }
 
 .react-flow__pane {
-    cursor: default;
+  cursor: default;
 }
-  
+
 .AccordionContent {
-    overflow: hidden;
+  overflow: hidden;
 }
-.AccordionContent[data-state='open'] {
-    animation: slideDown 300ms ease-out;
+.AccordionContent[data-state="open"] {
+  animation: slideDown 300ms ease-out;
+}
+.AccordionContent[data-state="closed"] {
+  animation: slideUp 300ms ease-out;
+}
+
+
+.gradient-end {
+  animation: gradient-motion-end 3s infinite forwards;
+}
+.gradient-start {
+  animation: gradient-motion-start 4s infinite forwards;
 }
-.AccordionContent[data-state='closed'] {
-    animation: slideUp 300ms ease-out;
-}

src/frontend/src/style/index.css

@@ -2,125 +2,127 @@
 @tailwind components;
 @tailwind utilities;
 
-
 /* TODO: Confirm that all colors here are found in tailwind config */
 
 @layer base {
-  
   :root {
-  --background: 0 0% 100%; /* hsl(0 0% 100%) */
-  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --muted: 210 40% 98%; /* hsl(210 40% 98%) */
-  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
-  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
-  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --card: 0 0% 100%; /* hsl(0 0% 100%) */
-  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --border: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
-  --input: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
-  --primary: 222.2 27% 11.2%; /* hsl(222 27% 18%) */
-  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
-  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --accent: 210 30% 96.1%; /* hsl(210 30% 96%) */
-  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
-  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-  --radius: 0.5rem;
-  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */  
-  --round-btn-shadow: #00000063;
-  
-  --error-background: #fef2f2;
-  --error-foreground: #991b1b;
-  
-  --success-background: #f0fdf4;
-  --success-foreground: #14532d;
+    --background: 0 0% 100%; /* hsl(0 0% 100%) */
+    --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    --muted: 210 40% 98%; /* hsl(210 40% 98%) */
+    --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
+    --popover: 0 0% 100%; /* hsl(0 0% 100%) */
+    --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    --card: 0 0% 100%; /* hsl(0 0% 100%) */
+    --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    --border: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
+    --input: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
+    --primary: 222.2 27% 11.2%; /* hsl(222 27% 18%) */
+    --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+    --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
+    --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    --accent: 210 30% 96.1%; /* hsl(210 30% 96%) */
+    --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+    --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
+    --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+    --radius: 0.5rem;
+    --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+    --round-btn-shadow: #00000063;
 
-  --info-background: #f0f4fd;
-  --info-foreground: #141653;
+    --error-background: #fef2f2;
+    --error-foreground: #991b1b;
 
-  --high-indigo: #4338ca;
-  --medium-indigo: #6366f1;
-  --low-indigo: #e0e7ff;
+    --success-background: #f0fdf4;
+    --success-foreground: #14532d;
 
-  --chat-bot-icon: #afe6ef;
-  --chat-user-icon: #aface9;
-  
-  /* Colors that are shared in dark and light mode */
-  --blur-shared: #151923de;
-  --build-trigger: 	#dc735b;
-  --chat-trigger: #5c8be1;
-  --chat-trigger-disabled: #b4c3da;
-  --status-red: #ef4444;
-  --status-yellow: #eab308;
-  --chat-send: #059669;
-  --status-green: #4ade80;
-  --status-blue:#2563eb;
-  --connection: #555;
+    --info-background: #f0f4fd;
+    --info-foreground: #141653;
 
+    --high-indigo: #4338ca;
+    --medium-indigo: #6366f1;
+    --low-indigo: #e0e7ff;
+
+    --beta-background: rgb(219 234 254);
+    --beta-foreground: rgb(37 99 235);
+
+    --chat-bot-icon: #afe6ef;
+    --chat-user-icon: #aface9;
+
+    /* Colors that are shared in dark and light mode */
+    --blur-shared: #151923de;
+    --build-trigger: #dc735b;
+    --chat-trigger: #5c8be1;
+    --chat-trigger-disabled: #b4c3da;
+    --status-red: #ef4444;
+    --status-yellow: #eab308;
+    --chat-send: #059669;
+    --status-green: #4ade80;
+    --status-blue: #2563eb;
+    --connection: #555;
+  }
+
+  .dark {
+    --background: 224 35% 7.5%; /* hsl(224 40% 10%) */
+    --foreground: 213 31% 80%; /* hsl(213 31% 91%) */
+
+    --muted: 223 27% 11%; /* hsl(223 27% 11%) */
+    --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
+
+    --popover: 224 71% 4%; /* hsl(224 71% 4%) */
+    --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+
+    --card: 224 25% 15.5%; /* hsl(224 71% 4%) */
+    --card-foreground: 213 31% 80%; /* hsl(213 31% 91%) */
+
+    --border: 216 24% 17%; /* hsl(216 34% 17%) */
+    --input: 216 24% 17%; /* hsl(216 34% 17%) */
+
+    --primary: 210 20% 80%; /* hsl(210 20% 80%) */
+    --primary-foreground: 222.2 27.4% 1.2%; /* hsl(222 47% 1%) */
+
+    --secondary: 222.2 37.4% 7.2%; /* hsl(222 47% 11%) */
+    --secondary-foreground: 210 40% 80%; /* hsl(210 40% 80%) */
+
+    --accent: 216 24% 20%; /* hsl(216 34% 17%) */
+    --accent-foreground: 210 30% 98%; /* hsl(210 40% 98%) */
+
+    --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
+    --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+
+    --ring: 216 24% 30%; /* hsl(216 24% 30%) */
+
+    --radius: 0.5rem;
+
+    --round-btn-shadow: #00000063;
+
+    --success-background: #022c22;
+    --success-foreground: #ecfdf5;
+
+    --error-foreground: #fef2f2;
+    --error-background: #450a0a;
+
+    --info-foreground: #eff6ff;
+    --info-background: #172554;
+
+    --high-indigo: #4338ca;
+    --medium-indigo: #6366f1;
+    --low-indigo: #e0e7ff;
+
+    /* Colors that are shared in dark and light mode */
+    --blur-shared: #151923d2;
+    --build-trigger: #dc735b;
+    --chat-trigger: #5c8be1;
+    --chat-trigger-disabled: #2d3b54;
+    --status-red: #ef4444;
+    --status-yellow: #eab308;
+    --chat-send: #059669;
+    --status-green: #4ade80;
+    --status-blue: #2563eb;
+    --connection: #555;
+
+    --beta-background: rgb(37 99 235);
+    --beta-foreground: rgb(219 234 254);
+
+    --chat-bot-icon: #235d70;
+    --chat-user-icon: #4f3d6e;
+  }
 }
-
-.dark {
-  --background: 224 35% 7.5%; /* hsl(224 40% 10%) */
-  --foreground: 213 31% 80%; /* hsl(213 31% 91%) */
-
-  --muted: 223 27% 11%; /* hsl(223 27% 11%) */
-  --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
-
-  --popover: 224 71% 4%; /* hsl(224 71% 4%) */
-  --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-
-  --card: 224 25% 15.5%; /* hsl(224 71% 4%) */
-  --card-foreground: 213 31% 80%; /* hsl(213 31% 91%) */
-
-  --border: 216 24% 17%; /* hsl(216 34% 17%) */
-  --input: 216 24% 17%; /* hsl(216 34% 17%) */
-
-  --primary: 210 20% 80%; /* hsl(210 20% 80%) */
-  --primary-foreground: 222.2 27.4% 1.2%; /* hsl(222 47% 1%) */
-
-  --secondary: 222.2 37.4% 7.2%; /* hsl(222 47% 11%) */
-  --secondary-foreground: 210 40% 80%; /* hsl(210 40% 80%) */
-
-  --accent: 216 24% 20%; /* hsl(216 34% 17%) */
-  --accent-foreground: 210 30% 98%; /* hsl(210 40% 98%) */
-
-  --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
-  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-  --ring: 216 24% 30%; /* hsl(216 24% 30%) */
-
-  --radius: 0.5rem;
-
-  --round-btn-shadow: #00000063;
-
-  --success-background: #022c22;
-  --success-foreground: #ecfdf5;
-
-  --error-foreground: #fef2f2;
-  --error-background: #450a0a;
-
-  --info-foreground: #eff6ff;
-  --info-background: #172554;
-
-
-  --high-indigo: #4338ca;
-  --medium-indigo: #6366f1;
-  --low-indigo: #e0e7ff;
-
-  /* Colors that are shared in dark and light mode */
-  --blur-shared: #151923d2;
-  --build-trigger: 	#dc735b;
-  --chat-trigger: #5c8be1;
-  --chat-trigger-disabled: #2d3b54;
-  --status-red: #ef4444;
-  --status-yellow: #eab308;
-  --chat-send: #059669;
-  --status-green: #4ade80;
-  --status-blue: #2563eb;
-  --connection: #555;
-  
-  --chat-bot-icon: #235d70;
-  --chat-user-icon: #4f3d6e;
-
-}}

src/frontend/src/types/api/index.ts

@@ -14,8 +14,10 @@ export type APIClassType = {
   display_name: string;
   input_types?: Array<string>;
   output_types?: Array<string>;
+  beta?: boolean;
   documentation: string;
-  [key: string]: Array<string> | string | APITemplateType | undefined;
+  error?: string;
+  [key: string]: Array<string> | string | APITemplateType | boolean | undefined;
 };
 
 export type TemplateVariableType = {

src/frontend/src/types/components/index.ts

@@ -65,8 +65,9 @@ export type CodeAreaComponentType = {
   onChange: (value: string[] | string) => void;
   value: string;
   editNode?: boolean;
-  nodeClass: APIClassType;
-  setNodeClass: (value: APIClassType) => void;
+  nodeClass?: APIClassType;
+  setNodeClass?: (value: APIClassType) => void;
+  dynamic?: boolean;
 };
 
 export type FileComponentType = {
@@ -176,9 +177,11 @@ export type InputProps = {
   maxLength?: number;
   flows: Array<{ id: string; name: string; description: string }>;
   tabId: string;
+  invalidName: boolean;
   setName: (name: string) => void;
   setDescription: (description: string) => void;
   updateFlow: (flow: { id: string; name: string }) => void;
+  setInvalidName: (invalidName: boolean) => void;
 };
 
 export type TooltipProps = {
@@ -321,6 +324,7 @@ export type codeAreaModalPropsType = {
   nodeClass: APIClassType | undefined;
   setNodeClass: (Class: APIClassType) => void | undefined;
   children: ReactNode;
+  dynamic?: boolean;
 };
 
 export type chatMessagePropsType = {

src/frontend/src/types/tabs/index.ts

@@ -18,6 +18,8 @@ export type TabsContextType = {
   ) => void;
   downloadFlows: () => void;
   uploadFlows: () => void;
+  isBuilt: boolean;
+  setIsBuilt: (state: boolean) => void;
   uploadFlow: (newFlow?: boolean, file?: File) => void;
   hardReset: () => void;
   getNodeId: (nodeType: string) => string;

src/frontend/src/utils/reactflowUtils.ts

@@ -219,3 +219,16 @@ export function validateNodes(reactFlowInstance: ReactFlowInstance) {
     .getNodes()
     .flatMap((n: NodeType) => validateNode(n, reactFlowInstance));
 }
+
+export function addVersionToDuplicates(flow: FlowType, flows: FlowType[]) {
+  const existingNames = flows.map((item) => item.name);
+  let newName = flow.name;
+  let count = 1;
+
+  while (existingNames.includes(newName)) {
+    newName = `${flow.name} (${count})`;
+    count++;
+  }
+
+  return newName;
+}

src/frontend/src/utils/styleUtils.ts

@@ -14,6 +14,7 @@ import {
   Cpu,
   Download,
   DownloadCloud,
+  Edit,
   Eraser,
   ExternalLink,
   File,
@@ -74,6 +75,7 @@ import { EvernoteIcon } from "../icons/Evernote";
 import { FBIcon } from "../icons/FacebookMessenger";
 import { GitBookIcon } from "../icons/GitBook";
 import { GoogleIcon } from "../icons/Google";
+import GradientSparkles from "../icons/GradientSparkles";
 import { HuggingFaceIcon } from "../icons/HuggingFace";
 import { IFixIcon } from "../icons/IFixIt";
 import { MetaIcon } from "../icons/Meta";
@@ -147,6 +149,7 @@ export const nodeColors: { [char: string]: string } = {
   str: "#049524",
   retrievers: "#e6b25a",
   unknown: "#9CA3AF",
+  custom_components: "#ab11ab",
 };
 
 export const nodeNames: { [char: string]: string } = {
@@ -167,7 +170,8 @@ export const nodeNames: { [char: string]: string } = {
   retrievers: "Retrievers",
   utilities: "Utilities",
   output_parsers: "Output Parsers",
-  unknown: "Unknown",
+  custom_components: "Custom",
+  unknown: "Other",
 };
 
 export const nodeIconsLucide: iconsType = {
@@ -225,6 +229,8 @@ export const nodeIconsLucide: iconsType = {
   unknown: HelpCircle,
   WikipediaQueryRun: SvgWikipedia,
   WolframAlphaQueryRun: SvgWolfram,
+  custom_components: GradientSparkles,
+  custom: Edit,
   Trash2,
   X,
   XCircle,

src/frontend/src/utils/utils.ts

@@ -1,13 +1,8 @@
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "../flow_constants";
-import {
-  IVarHighlightType,
-  groupDataType,
-  groupedObjType,
-  tweakType,
-} from "../types/components";
-import { FlowType } from "../types/flow";
+import { IVarHighlightType, groupDataType, groupedObjType, tweakType } from "../types/components";
+import { FlowType, NodeType } from "../types/flow";
 import { TabsState } from "../types/tabs";
 import { buildTweaks } from "./reactflowUtils";
 
@@ -93,124 +88,88 @@ export function checkUpperWords(str: string): string {
 export const isWrappedWithClass = (event: any, className: string | undefined) =>
   event.target.closest(`.${className}`);
 
-export function groupByFamily(
-  data: groupDataType,
-  baseClasses: string,
-  left: boolean,
-  type: string
-): groupedObjType[] {
-  let parentOutput: string;
-  let arrOfParent: string[] = [];
-  let arrOfType: { family: string; type: string; component: string }[] = [];
-  let arrOfLength: { length: number; type: string }[] = [];
-  let lastType = "";
-  Object.keys(data).forEach((d) => {
-    Object.keys(data[d]).forEach((n) => {
-      try {
-        if (
-          data[d][n].base_classes.some((r) =>
-            baseClasses.split("\n").includes(r)
-          )
-        ) {
-          arrOfParent.push(d);
-        }
-        if (n === type) {
-          parentOutput = d;
-        }
+export function groupByFamily(data: groupDataType, baseClasses: string, left: boolean, flow?: NodeType[]): groupedObjType[] {
+  const baseClassesSet = new Set(baseClasses.split("\n"));
+  let arrOfPossibleInputs = [];
+  let arrOfPossibleOutputs = [];
+  let checkedNodes = new Map();
+  const excludeTypes = new Set([
+    "str",
+    "bool",
+    "float",
+    "code",
+    "prompt",
+    "file",
+    "int",
+  ]);
 
-        if (d !== lastType) {
-          arrOfLength.push({
-            length: Object.keys(data[d]).length,
-            type: d,
-          });
+  const checkBaseClass = (t: any) =>
+    t.type &&
+    t.show &&
+    ((!excludeTypes.has(t.type) && baseClassesSet.has(t.type)) ||
+      (t.input_types && t.input_types.some((x) => baseClassesSet.has(x))));
 
-          lastType = d;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-    });
-  });
+  if (flow) {
+    for (const node of flow) {
+      const nodeData = node.data;
+      const foundNode = checkedNodes.get(nodeData.type);
+      checkedNodes.set(nodeData.type, {
+        hasBaseClassInTemplate:
+          foundNode?.hasBaseClassInTemplate ||
+          Object.values(nodeData.node.template).some(checkBaseClass),
+        hasBaseClassInBaseClasses:
+          foundNode?.hasBaseClassInBaseClasses ||
+          nodeData.node.base_classes.some((t) => baseClassesSet.has(t)),
+      });
+    }
+  }
 
-  Object.keys(data).map((d) => {
-    Object.keys(data[d]).map((n) => {
-      try {
-        baseClasses.split("\n").forEach((tol) => {
-          data[d][n].base_classes.forEach((data) => {
-            if (tol === data) {
-              arrOfType.push({
-                family: d,
-                type: data,
-                component: n,
-              });
-            }
-          });
-        });
-      } catch (e) {
-        console.log(e);
-      }
-    });
-  });
+  for (const [d, nodes] of Object.entries(data)) {
+    let tempInputs = [],
+      tempOutputs = [];
 
-  if (left === false) {
-    let groupedBy = arrOfType.filter((object, index, self) => {
-      const foundIndex = self.findIndex(
-        (o) => o.family === object.family && o.type === object.type
-      );
-      return foundIndex === index;
-    });
-
-    return groupedBy.reduce((result, item) => {
-      const existingGroup = result.find(
-        (group) => group.family === item.family
-      );
-
-      if (existingGroup) {
-        existingGroup.type += `, ${item.type}`;
-      } else {
-        result.push({
-          family: item.family,
-          type: item.type,
-          component: item.component,
-        });
+    for (const [n, node] of Object.entries(nodes)) {
+      let foundNode = checkedNodes.get(n);
+      if (!foundNode) {
+        foundNode = {
+          hasBaseClassInTemplate: Object.values(node.template).some(
+            checkBaseClass
+          ),
+          hasBaseClassInBaseClasses: node.base_classes.some((t) =>
+            baseClassesSet.has(t)
+          ),
+        };
+        checkedNodes.set(n, foundNode);
       }
 
-      if (left === false) {
-        let resFil = result.filter((group) => group.family === parentOutput);
-        result = resFil;
-      }
-
-      return result;
-    }, []);
-  } else {
-    const groupedArray = [];
-    const groupedData = {};
-
-    arrOfType.forEach((item) => {
-      const { family, type, component } = item;
-      const key = `${family}-${type}`;
-
-      if (!groupedData[key]) {
-        groupedData[key] = { family, type, component: [component] };
-      } else {
-        groupedData[key].component.push(component);
-      }
-    });
-
-    for (const key in groupedData) {
-      groupedArray.push(groupedData[key]);
+      if (foundNode.hasBaseClassInTemplate) tempInputs.push(n);
+      if (foundNode.hasBaseClassInBaseClasses) tempOutputs.push(n);
     }
 
-    groupedArray.forEach((object, index, self) => {
-      const findObj = arrOfLength.find((x) => x.type === object.family);
-      if (object.component.length === findObj?.length) {
-        self[index]["type"] = "";
-      } else {
-        self[index]["type"] = object.component.join(", ");
-      }
-    });
-    return groupedArray;
+    const totalNodes = Object.keys(nodes).length;
+    if (tempInputs.length)
+      arrOfPossibleInputs.push({
+        category: d,
+        nodes: tempInputs,
+        full: tempInputs.length === totalNodes,
+      });
+    if (tempOutputs.length)
+      arrOfPossibleOutputs.push({
+        category: d,
+        nodes: tempOutputs,
+        full: tempOutputs.length === totalNodes,
+      });
   }
+
+  return left
+    ? arrOfPossibleOutputs.map((t) => ({
+        family: t.category,
+        type: t.full ? "" : t.nodes.join(", "),
+      }))
+    : arrOfPossibleInputs.map((t) => ({
+        family: t.category,
+        type: t.full ? "" : t.nodes.join(", "),
+      }));
 }
 
 export function buildInputs(tabsState: TabsState, id: string): string {
@@ -374,7 +333,7 @@ export function getCurlCode(
 
 /**
  * Function to get the python code for the API
- * @param {string} flowName - The name of the flow
+ * @param {string} flow - The current flow
  * @returns {string} - The python code
  */
 export function getPythonCode(
@@ -396,3 +355,33 @@ flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
 inputs = ${inputs}
 flow(inputs)`;
 }
+
+/**
+ * Function to get the widget code for the API
+ * @param {string} flow - The current flow.
+ * @returns {string} - The widget code
+ */
+export function getWidgetCode(flow: FlowType, tabsState?: TabsState): string {
+  const flowId = flow.id;
+  const flowName = flow.name;
+  const inputs = buildInputs(tabsState, flow.id);
+
+  return `<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
+
+<!-- chat_inputs: Stringified JSON with all the input keys and its values. The value of the key that is defined
+as chat_input_field will be overwritten by the chat message.
+chat_input_field: Input key that you want the chat to send the user message with. -->
+<langflow-chat
+  window_title="${flowName}"
+  flow_id="${flowId}"
+  ${
+    tabsState[flow.id] && tabsState[flow.id].formKeysData
+      ? `chat_inputs='${inputs}'
+  chat_input_field="${
+    Object.keys(tabsState[flow.id].formKeysData.input_keys)[0]
+  }"
+  `
+      : ""
+  }host_url="http://localhost:7860" 
+></langflow-chat>`;
+}

src/frontend/tailwind.config.js

@@ -71,6 +71,8 @@ module.exports = {
         "status-yellow": "var(--status-yellow)",
         "success-background": "var(--success-background)",
         "success-foreground": "var(--success-foreground)",
+        "beta-background": "var(--beta-background)",
+        "beta-foreground": "var(--beta-foreground)",
         "chat-bot-icon": "var(--chat-bot-icon)",
         "chat-user-icon": "var(--chat-user-icon)",