Adds Custom Components and documentation (#704)

.github/workflows/pre-release.yml

@@ -0,0 +1,49 @@
+name: pre-release
+
+on:
+  pull_request:
+    types:
+      - closed
+    branches:
+      - dev
+    paths:
+      - "pyproject.toml"
+
+env:
+  POETRY_VERSION: "1.5.1"
+
+jobs:
+  if_release:
+    if: |
+      ${{ github.event.pull_request.merged == true }}
+      && ${{ contains(github.event.pull_request.labels.*.name, 'pre-release') }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install poetry
+        run: pipx install poetry==$POETRY_VERSION
+      - name: Set up Python 3.10
+        uses: actions/setup-python@v4
+        with:
+          python-version: "3.10"
+          cache: "poetry"
+      - name: Build project for distribution
+        run: make build
+      - name: Check Version
+        id: check-version
+        run: |
+          echo version=$(poetry version --short) >> $GITHUB_OUTPUT
+      - name: Create Release
+        uses: ncipollo/release-action@v1
+        with:
+          artifacts: "dist/*"
+          token: ${{ secrets.GITHUB_TOKEN }}
+          draft: false
+          generateReleaseNotes: true
+          tag: v${{ steps.check-version.outputs.version }}
+          commit: main
+      - name: Publish to PyPI
+        env:
+          POETRY_PYPI_TOKEN_PYPI: ${{ secrets.PYPI_API_TOKEN }}
+        run: |
+          poetry publish

.github/workflows/release.yml

@@ -10,7 +10,7 @@ on:
       - "pyproject.toml"
 
 env:
-  POETRY_VERSION: "1.4.0"
+  POETRY_VERSION: "1.5.1"
 
 jobs:
   if_release:

.gitignore

@@ -251,3 +251,5 @@ langflow.db
 
 # docusaurus
 .docusaurus/
+
+/tmp/*

.vscode/launch.json

@@ -6,7 +6,8 @@
       "request": "launch",
       "module": "uvicorn",
       "args": [
-        "langflow.main:app",
+        "--factory",
+        "langflow.main:create_app",
         "--port",
         "7860",
         "--reload",

CONTRIBUTING.md

@@ -9,7 +9,7 @@ Please do not try to push directly to this repo unless you are a maintainer.
 
 ## 🗺️Contributing Guidelines
 
-### 🚩GitHub Issues
+## 🚩GitHub Issues
 
 Our [issues](https://github.com/logspace-ai/langflow/issues) page is kept up to date
 with bugs, improvements, and feature requests. There is a taxonomy of labels to help
@@ -33,18 +33,19 @@ so that more people can benefit from it.
   [collapses the content](https://developer.mozilla.org/en/docs/Web/HTML/Element/details)
   so it only becomes visible on click, making the issue easier to read and follow.
 
-### Issue labels
+## Issue labels
 
 [See this page](https://github.com/logspace-ai/langflow/labels) for an overview of
 the system we use to tag our issues and pull requests.
 
+## Local development
 
-### Local development
 You can develop Langflow using docker compose, or locally.
 
 We provide a .vscode/launch.json file for debugging the backend in VSCode, which is a lot faster than using docker compose.
 
 Setting up hooks:
+
 ```bash
 make init
 ```
@@ -53,30 +54,46 @@ This will install the pre-commit hooks, which will run `make format` on every co
 
 It is advised to run `make lint` before pushing to the repository.
 
-#### **Locally**
-Run locally by cloning the repository and installing the dependencies. We recommend using a virtual environment to isolate the dependencies from your system.
+## Run locally
+
+Langflow can run locally by cloning the repository and installing the dependencies. We recommend using a virtual environment to isolate the dependencies from your system.
 
 Before you start, make sure you have the following installed:
-  - Poetry (>=1.4)
-  - Node.js
 
-For the backend, you will need to install the dependencies and start the development server.
+- Poetry (>=1.4)
+- Node.js
+
+Then, in the root folder, install the dependencies and start the development server for the backend:
+
 ```bash
-make install_backend
 make backend
 ```
-For the frontend, you will need to install the dependencies and start the development server.
+
+And the frontend:
+
 ```bash
 make frontend
 ```
 
+## Docker compose
+
+The following snippet will run the backend and frontend in separate containers. The frontend will be available at `localhost:3000` and the backend at `localhost:7860`.
 
-#### **Docker compose**
-This will run the backend and frontend in separate containers. The frontend will be available at `localhost:3000` and the backend at `localhost:7860`.
 ```bash
 docker compose up --build
 # or
 make dev build=1
 ```
 
+## Documentation
 
+The documentation is built using [Docusaurus](https://docusaurus.io/). To run the documentation locally, run the following commands:
+
+```bash
+cd docs
+npm install
+npm run start
+```
+
+The documentation will be available at `localhost:3000` and all the files are located in the `docs/docs` folder.
+Once you are done with your changes, you can create a Pull Request to the `main` branch.

Makefile

@@ -46,7 +46,7 @@ install_backend:
 
 backend:
 	make install_backend
-	poetry run uvicorn src.backend.langflow.main:app --port 7860 --reload --log-level debug
+	poetry run uvicorn --factory src.backend.langflow.main:create_app --port 7860 --reload --log-level debug
 
 build_and_run:
 	echo 'Removing dist folder'

README.md

@@ -13,7 +13,6 @@
 <img alt="Github License" src="https://img.shields.io/github/license/logspace-ai/langflow" />
 </p>
 
-
 <p>
 <a href="https://discord.gg/EqksyE2EX9"><img alt="Discord Server" src="https://dcbadge.vercel.app/api/server/EqksyE2EX9?compact=true&style=flat"/></a>
 <a href="https://huggingface.co/spaces/Logspace/Langflow"><img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-in-hf-spaces-sm.svg" alt="HuggingFace Spaces"></a>
@@ -22,54 +21,75 @@
 <a href="https://github.com/logspace-ai/langflow">
     <img width="100%" src="https://github.com/logspace-ai/langflow/blob/main/img/langflow-demo.gif?raw=true"></a>
 
-
 <p>
 </p>
 
 # Table of Contents
+
 - [⛓️ Langflow](#️-langflow)
 - [Table of Contents](#table-of-contents)
 - [📦 Installation](#-installation)
-    - [Locally](#locally)
-    - [HuggingFace Spaces](#huggingface-spaces)
+  - [Locally](#locally)
+  - [HuggingFace Spaces](#huggingface-spaces)
 - [🖥️ Command Line Interface (CLI)](#️-command-line-interface-cli)
-    - [Usage](#usage)
-    - [Environment Variables](#environment-variables)
+  - [Usage](#usage)
+  - [Environment Variables](#environment-variables)
 - [Deployment](#deployment)
   - [Deploy Langflow on Google Cloud Platform](#deploy-langflow-on-google-cloud-platform)
   - [Deploy Langflow on Jina AI Cloud](#deploy-langflow-on-jina-ai-cloud)
-      - [API Usage](#api-usage)
+    - [API Usage](#api-usage)
+  - [Deploy on Railway](#deploy-on-railway)
+  - [Deploy on Render](#deploy-on-render)
 - [🎨 Creating Flows](#-creating-flows)
 - [👋 Contributing](#-contributing)
 - [📄 License](#-license)
 
-
 # 📦 Installation
+
 ### <b>Locally</b>
+
 You can install Langflow from pip:
 
 ```shell
+# This installs the package without dependencies for local models
 pip install langflow
 ```
 
+To use local models (e.g llama-cpp-python) run:
+
+```shell
+pip install langflow[local]
+```
+
+This will install the following dependencies:
+
+- [CTransformers](https://github.com/marella/ctransformers)
+- [llama-cpp-python](https://github.com/abetlen/llama-cpp-python)
+- [sentence-transformers](https://github.com/UKPLab/sentence-transformers)
+
+You can still use models from projects like LocalAI
+
 Next, run:
 
 ```shell
 python -m langflow
 ```
+
 or
+
 ```shell
 langflow # or langflow --help
 ```
 
 ### HuggingFace Spaces
+
 You can also check it out on [HuggingFace Spaces](https://huggingface.co/spaces/Logspace/Langflow) and run it in your browser! You can even clone it and have your own copy of Langflow to play with.
 
 # 🖥️ Command Line Interface (CLI)
 
 Langflow provides a command-line interface (CLI) for easy management and configuration.
 
-### Usage
+## Usage
 
 You can run the Langflow using the following command:
 
@@ -87,6 +107,7 @@ Each option is detailed below:
 - `--config`: Defines the path to the configuration file. The default is `config.yaml`.
 - `--env-file`: Specifies the path to the .env file containing environment variables. The default is `.env`.
 - `--log-level`: Defines the logging level. Can be set using the `LANGFLOW_LOG_LEVEL` environment variable. The default is `critical`.
+- `--components-path`: Specifies the path to the directory containing custom components. Can be set using the `LANGFLOW_COMPONENTS_PATH` environment variable. The default is `langflow/components`.
 - `--log-file`: Specifies the path to the log file. Can be set using the `LANGFLOW_LOG_FILE` environment variable. The default is `logs/langflow.log`.
 - `--cache`: Selects the type of cache to use. Options are `InMemoryCache` and `SQLiteCache`. Can be set using the `LANGFLOW_LANGCHAIN_CACHE` environment variable. The default is `SQLiteCache`.
 - `--jcloud/--no-jcloud`: Toggles the option to deploy on Jina AI Cloud. The default is `no-jcloud`.
@@ -114,7 +135,6 @@ Alternatively, click the **"Open in Cloud Shell"** button below to launch Google
 
 [![Open in Cloud Shell](https://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/logspace-ai/langflow&working_dir=scripts&shellonly=true&tutorial=walkthroughtutorial_spot.md)
 
-
 ## Deploy Langflow on [Jina AI Cloud](https://github.com/jina-ai/langchain-serve)
 
 Langflow integrates with langchain-serve to provide a one-command deployment to Jina AI Cloud.
@@ -122,6 +142,8 @@ Langflow integrates with langchain-serve to provide a one-command deployment to
 Start by installing `langchain-serve` with
 
 ```bash
+pip install langflow[deploy]
+# or
 pip install -U langchain-serve
 ```
 
@@ -140,33 +162,33 @@ langflow --jcloud
   <details>
   <summary>Show complete (example) output</summary>
 
-  ```text
-    🚀 Deploying Langflow server on Jina AI Cloud
-    ╭───────────────────────── 🎉 Flow is available! ──────────────────────────╮
-    │                                                                          │
-    │   ID                    langflow-e3dd8820ec                              │
-    │   Gateway (Websocket)   wss://langflow-e3dd8820ec.wolf.jina.ai           │
-    │   Dashboard             https://dashboard.wolf.jina.ai/flow/e3dd8820ec   │
-    │                                                                          │
-    ╰──────────────────────────────────────────────────────────────────────────╯
-    ╭──────────────┬──────────────────────────────────────────────────────────────────────────────╮
-    │ App ID       │                     langflow-e3dd8820ec                                      │
-    ├──────────────┼──────────────────────────────────────────────────────────────────────────────┤
-    │ Phase        │                            Serving                                           │
-    ├──────────────┼──────────────────────────────────────────────────────────────────────────────┤
-    │ Endpoint     │          wss://langflow-e3dd8820ec.wolf.jina.ai                              │
-    ├──────────────┼──────────────────────────────────────────────────────────────────────────────┤
-    │ App logs     │                  dashboards.wolf.jina.ai                                     │
-    ├──────────────┼──────────────────────────────────────────────────────────────────────────────┤
-    │ Swagger UI   │          https://langflow-e3dd8820ec.wolf.jina.ai/docs                       │
-    ├──────────────┼──────────────────────────────────────────────────────────────────────────────┤
-    │ OpenAPI JSON │        https://langflow-e3dd8820ec.wolf.jina.ai/openapi.json                 │
-    ╰──────────────┴──────────────────────────────────────────────────────────────────────────────╯
+```text
+  🚀 Deploying Langflow server on Jina AI Cloud
+  ╭───────────────────────── 🎉 Flow is available! ──────────────────────────╮
+  │                                                                          │
+  │   ID                    langflow-e3dd8820ec                              │
+  │   Gateway (Websocket)   wss://langflow-e3dd8820ec.wolf.jina.ai           │
+  │   Dashboard             https://dashboard.wolf.jina.ai/flow/e3dd8820ec   │
+  │                                                                          │
+  ╰──────────────────────────────────────────────────────────────────────────╯
+  ╭──────────────┬──────────────────────────────────────────────────────────────────────────────╮
+  │ App ID       │                     langflow-e3dd8820ec                                      │
+  ├──────────────┼──────────────────────────────────────────────────────────────────────────────┤
+  │ Phase        │                            Serving                                           │
+  ├──────────────┼──────────────────────────────────────────────────────────────────────────────┤
+  │ Endpoint     │          wss://langflow-e3dd8820ec.wolf.jina.ai                              │
+  ├──────────────┼──────────────────────────────────────────────────────────────────────────────┤
+  │ App logs     │                  dashboards.wolf.jina.ai                                     │
+  ├──────────────┼──────────────────────────────────────────────────────────────────────────────┤
+  │ Swagger UI   │          https://langflow-e3dd8820ec.wolf.jina.ai/docs                       │
+  ├──────────────┼──────────────────────────────────────────────────────────────────────────────┤
+  │ OpenAPI JSON │        https://langflow-e3dd8820ec.wolf.jina.ai/openapi.json                 │
+  ╰──────────────┴──────────────────────────────────────────────────────────────────────────────╯
 
-    🎉 Langflow server successfully deployed on Jina AI Cloud 🎉
-    🔗 Click on the link to open the server (please allow ~1-2 minutes for the server to startup): https://langflow-e3dd8820ec.wolf.jina.ai/
-    📖 Read more about managing the server: https://github.com/jina-ai/langchain-serve
-  ```
+  🎉 Langflow server successfully deployed on Jina AI Cloud 🎉
+  🔗 Click on the link to open the server (please allow ~1-2 minutes for the server to startup): https://langflow-e3dd8820ec.wolf.jina.ai/
+  📖 Read more about managing the server: https://github.com/jina-ai/langchain-serve
+```
 
   </details>
 
@@ -177,7 +199,7 @@ You can use Langflow directly on your browser, or use the API endpoints on Jina
   <details>
   <summary>Show API usage (with python)</summary>
 
-  ```python
+```python
 import requests
 
 BASE_API_URL = "https://langflow-e3dd8820ec.wolf.jina.ai/api/v1/predict"
@@ -185,47 +207,49 @@ FLOW_ID = "864c4f98-2e59-468b-8e13-79cd8da07468"
 # You can tweak the flow by adding a tweaks dictionary
 # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
 TWEAKS = {
-  "ChatOpenAI-g4jEr": {},
-  "ConversationChain-UidfJ": {}
+"ChatOpenAI-g4jEr": {},
+"ConversationChain-UidfJ": {}
 }
 
 def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
-    """
-    Run a flow with a given message and optional tweaks.
+  """
+  Run a flow with a given message and optional tweaks.
 
-    :param message: The message to send to the flow
-    :param flow_id: The ID of the flow to run
-    :param tweaks: Optional tweaks to customize the flow
-    :return: The JSON response from the flow
-    """
-    api_url = f"{BASE_API_URL}/{flow_id}"
+  :param message: The message to send to the flow
+  :param flow_id: The ID of the flow to run
+  :param tweaks: Optional tweaks to customize the flow
+  :return: The JSON response from the flow
+  """
+  api_url = f"{BASE_API_URL}/{flow_id}"
 
-    payload = {"message": message}
+  payload = {"message": message}
 
-    if tweaks:
-        payload["tweaks"] = tweaks
+  if tweaks:
+      payload["tweaks"] = tweaks
 
-    response = requests.post(api_url, json=payload)
-    return response.json()
+  response = requests.post(api_url, json=payload)
+  return response.json()
 
 # Setup any tweaks you want to apply to the flow
 print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))
-  ```
+```
 
-  ```json
-  {
-    "result": "Great choice! Bangalore in the 1920s was a vibrant city with a rich cultural and political scene. Here are some suggestions for things to see and do:\n\n1. Visit the Bangalore Palace - built in 1887, this stunning palace is a perfect example of Tudor-style architecture. It was home to the Maharaja of Mysore and is now open to the public.\n\n2. Attend a performance at the Ravindra Kalakshetra - this cultural center was built in the 1920s and is still a popular venue for music and dance performances.\n\n3. Explore the neighborhoods of Basavanagudi and Malleswaram - both of these areas have retained much of their old-world charm and are great places to walk around and soak up the atmosphere.\n\n4. Check out the Bangalore Club - founded in 1868, this exclusive social club was a favorite haunt of the British expat community in the 1920s.\n\n5. Attend a meeting of the Indian National Congress - founded in 1885, the INC was a major force in the Indian independence movement and held many meetings and rallies in Bangalore in the 1920s.\n\nHope you enjoy your trip to 1920s Bangalore!"
-  }
-  ```
+```json
+{
+  "result": "Great choice! Bangalore in the 1920s was a vibrant city with a rich cultural and political scene. Here are some suggestions for things to see and do:\n\n1. Visit the Bangalore Palace - built in 1887, this stunning palace is a perfect example of Tudor-style architecture. It was home to the Maharaja of Mysore and is now open to the public.\n\n2. Attend a performance at the Ravindra Kalakshetra - this cultural center was built in the 1920s and is still a popular venue for music and dance performances.\n\n3. Explore the neighborhoods of Basavanagudi and Malleswaram - both of these areas have retained much of their old-world charm and are great places to walk around and soak up the atmosphere.\n\n4. Check out the Bangalore Club - founded in 1868, this exclusive social club was a favorite haunt of the British expat community in the 1920s.\n\n5. Attend a meeting of the Indian National Congress - founded in 1885, the INC was a major force in the Indian independence movement and held many meetings and rallies in Bangalore in the 1920s.\n\nHope you enjoy your trip to 1920s Bangalore!"
+}
+```
 
   </details>
 
 > Read more about resource customization, cost, and management of Langflow apps on Jina AI Cloud in the **[langchain-serve](https://github.com/jina-ai/langchain-serve)** repository.
 
 ## Deploy on Railway
+
 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/Emy2sU?referralCode=MnPSdg)
 
 ## Deploy on Render
+
 <a href="https://render.com/deploy?repo=https://github.com/logspace-ai/langflow/tree/main">
 <img src="https://render.com/images/deploy-to-render-button.svg" alt="Deploy to Render" />
 </a>
@@ -248,12 +272,10 @@ flow = load_flow_from_json("path/to/flow.json")
 flow("Hey, have you heard of Langflow?")
 ```
 
-
 # 👋 Contributing
 
 We welcome contributions from developers of all levels to our open-source project on GitHub. If you'd like to contribute, please check our [contributing guidelines](./CONTRIBUTING.md) and help make Langflow more accessible.
 
-
 Join our [Discord](https://discord.com/invite/EqksyE2EX9) server to ask questions, make suggestions and showcase your projects! 🦾
 
 <p>
@@ -261,7 +283,6 @@ Join our [Discord](https://discord.com/invite/EqksyE2EX9) server to ask question
 
 [![Star History Chart](https://api.star-history.com/svg?repos=logspace-ai/langflow&type=Timeline)](https://star-history.com/#logspace-ai/langflow&Date)
 
-
 # 📄 License
 
 Langflow is released under the MIT License. See the LICENSE file for details.

docs/docs/components/chains.mdx

@@ -1,14 +1,16 @@
 import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import ZoomableImage from "/src/theme/ZoomableImage.js";
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Chains
 
 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
-    <p>
-        We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝
-    </p>
+  <p>
+    We appreciate your understanding as we polish our documentation – it may
+    contain some rough edges. Share your feedback or report issues to help us
+    improve! 🛠️📝
+  </p>
 </Admonition>
 
 Chains, in the context of language models, refer to a series of calls made to a language model. It allows for the output of one call to be used as the input for another call. Different types of chains allow for different levels of complexity. Chains are useful for creating pipelines and executing specific scenarios.
@@ -19,22 +21,23 @@ Chains, in the context of language models, refer to a series of calls made to a
 
 The `CombineDocsChain` incorporates methods to combine or aggregate loaded documents for question-answering functionality.
 
-:::info
+<Admonition type="info">
 
 Works as a proxy of LangChain’s [documents](https://python.langchain.com/docs/modules/chains/document/) chains generated by the `load_qa_chain` function.
 
-:::
+</Admonition>
 
 **Params**
 
 - **LLM:** Language Model to use in the chain.
 - **chain_type:** The chain type to be used. Each one of them applies a different “combination strategy”.
-   - **stuff**: The stuff [documents](https://python.langchain.com/docs/modules/chains/document/stuff) chain (“stuff" as in "to stuff" or "to fill") is the most straightforward of *the* document chains. It takes a list of documents, inserts them all into a prompt, and passes that prompt to an LLM. This chain is well-suited for applications where documents are small and only a few are passed in for most calls.
-   - **map_reduce**: The map-reduce [documents](https://python.langchain.com/docs/modules/chains/document/map_reduce) chain first applies an LLM chain to each document individually (the Map step), treating the chain output as a new document. It then passes all the new documents to a separate combined documents chain to get a single output (the Reduce step). It can optionally first compress or collapse the mapped documents to make sure that they fit in the combined documents chain (which will often pass them to an LLM). This compression step is performed recursively if necessary.
-   - **map_rerank**: The map re-rank [documents](https://python.langchain.com/docs/modules/chains/document/map_rerank) chain runs an initial prompt on each document that not only tries to complete a task but also gives a score for how certain it is in its answer. The highest-scoring response is returned.
-   - **refine**: The refine [documents](https://python.langchain.com/docs/modules/chains/document/refine) chain constructs a response by looping over the input documents and iteratively updating its answer. For each document, it passes all non-document inputs, the current document, and the latest intermediate answer to an LLM chain to get a new answer.
 
-      Since the Refine chain only passes a single document to the LLM at a time, it is well-suited for tasks that require analyzing more documents than can fit in the model's context. The obvious tradeoff is that this chain will make far more LLM calls than, for example, the Stuff documents chain. There are also certain tasks that are difficult to accomplish iteratively. For example, the Refine chain can perform poorly when documents frequently cross-reference one another or when a task requires detailed information from many documents.
+  - **stuff**: The stuff [documents](https://python.langchain.com/docs/modules/chains/document/stuff) chain (“stuff" as in "to stuff" or "to fill") is the most straightforward of _the_ document chains. It takes a list of documents, inserts them all into a prompt, and passes that prompt to an LLM. This chain is well-suited for applications where documents are small and only a few are passed in for most calls.
+  - **map_reduce**: The map-reduce [documents](https://python.langchain.com/docs/modules/chains/document/map_reduce) chain first applies an LLM chain to each document individually (the Map step), treating the chain output as a new document. It then passes all the new documents to a separate combined documents chain to get a single output (the Reduce step). It can optionally first compress or collapse the mapped documents to make sure that they fit in the combined documents chain (which will often pass them to an LLM). This compression step is performed recursively if necessary.
+  - **map_rerank**: The map re-rank [documents](https://python.langchain.com/docs/modules/chains/document/map_rerank) chain runs an initial prompt on each document that not only tries to complete a task but also gives a score for how certain it is in its answer. The highest-scoring response is returned.
+  - **refine**: The refine [documents](https://python.langchain.com/docs/modules/chains/document/refine) chain constructs a response by looping over the input documents and iteratively updating its answer. For each document, it passes all non-document inputs, the current document, and the latest intermediate answer to an LLM chain to get a new answer.
+
+    Since the Refine chain only passes a single document to the LLM at a time, it is well-suited for tasks that require analyzing more documents than can fit in the model's context. The obvious tradeoff is that this chain will make far more LLM calls than, for example, the Stuff documents chain. There are also certain tasks that are difficult to accomplish iteratively. For example, the Refine chain can perform poorly when documents frequently cross-reference one another or when a task requires detailed information from many documents.
 
 ---
 
@@ -48,7 +51,7 @@ The `ConversationChain` is a straightforward chain for interactive conversations
 - **Memory:** Default memory store.
 - **input_key:** Used to specify the key under which the user input will be stored in the conversation memory. It allows you to provide the user's input to the chain for processing and generating a response.
 - **output_key:** Used to specify the key under which the generated response will be stored in the conversation memory. It allows you to retrieve the response using the specified key.
-- **verbose:**  This parameter is used to control the level of detail in the output of the chain. When set to True, it will print out some internal states of the chain while it is being run, which can be helpful for debugging and understanding the chain's behavior. If set to False, it will suppress the verbose output — defaults to `False`.
+- **verbose:** This parameter is used to control the level of detail in the output of the chain. When set to True, it will print out some internal states of the chain while it is being run, which can be helpful for debugging and understanding the chain's behavior. If set to False, it will suppress the verbose output — defaults to `False`.
 
 ---
 
@@ -56,11 +59,11 @@ The `ConversationChain` is a straightforward chain for interactive conversations
 
 The `ConversationalRetrievalChain` extracts information and provides answers by combining document search and question-answering abilities.
 
-:::info
+<Admonition type="info">
 
 A retriever is a component that finds documents based on a query. It doesn't store the documents themselves, but it returns the ones that match the query.
 
-:::
+</Admonition >
 
 **Params**
 
@@ -68,12 +71,13 @@ A retriever is a component that finds documents based on a query. It doesn't sto
 - **Memory:** Default memory store.
 - **Retriever:** The retriever used to fetch relevant documents.
 - **chain_type:** The chain type to be used. Each one of them applies a different “combination strategy”.
-   - **stuff**: The stuff [documents](https://python.langchain.com/docs/modules/chains/document/stuff) chain (“stuff" as in "to stuff" or "to fill") is the most straightforward of *the* document chains. It takes a list of documents, inserts them all into a prompt, and passes that prompt to an LLM. This chain is well-suited for applications where documents are small and only a few are passed in for most calls.
-   - **map_reduce**: The map-reduce [documents](https://python.langchain.com/docs/modules/chains/document/map_reduce) chain first applies an LLM chain to each document individually (the Map step), treating the chain output as a new document. It then passes all the new documents to a separate combined documents chain to get a single output (the Reduce step). It can optionally first compress or collapse the mapped documents to make sure that they fit in the combined documents chain (which will often pass them to an LLM). This compression step is performed recursively if necessary.
-   - **map_rerank**: The map re-rank [documents](https://python.langchain.com/docs/modules/chains/document/map_rerank) chain runs an initial prompt on each document that not only tries to complete a task but also gives a score for how certain it is in its answer. The highest-scoring response is returned.
-   - **refine**: The refine [documents](https://python.langchain.com/docs/modules/chains/document/refine) chain constructs a response by looping over the input documents and iteratively updating its answer. For each document, it passes all non-document inputs, the current document, and the latest intermediate answer to an LLM chain to get a new answer.
 
-      Since the Refine chain only passes a single document to the LLM at a time, it is well-suited for tasks that require analyzing more documents than can fit in the model's context. The obvious tradeoff is that this chain will make far more LLM calls than, for example, the Stuff documents chain. There are also certain tasks that are difficult to accomplish iteratively. For example, the Refine chain can perform poorly when documents frequently cross-reference one another or when a task requires detailed information from many documents.
+  - **stuff**: The stuff [documents](https://python.langchain.com/docs/modules/chains/document/stuff) chain (“stuff" as in "to stuff" or "to fill") is the most straightforward of _the_ document chains. It takes a list of documents, inserts them all into a prompt, and passes that prompt to an LLM. This chain is well-suited for applications where documents are small and only a few are passed in for most calls.
+  - **map_reduce**: The map-reduce [documents](https://python.langchain.com/docs/modules/chains/document/map_reduce) chain first applies an LLM chain to each document individually (the Map step), treating the chain output as a new document. It then passes all the new documents to a separate combined documents chain to get a single output (the Reduce step). It can optionally first compress or collapse the mapped documents to make sure that they fit in the combined documents chain (which will often pass them to an LLM). This compression step is performed recursively if necessary.
+  - **map_rerank**: The map re-rank [documents](https://python.langchain.com/docs/modules/chains/document/map_rerank) chain runs an initial prompt on each document that not only tries to complete a task but also gives a score for how certain it is in its answer. The highest-scoring response is returned.
+  - **refine**: The refine [documents](https://python.langchain.com/docs/modules/chains/document/refine) chain constructs a response by looping over the input documents and iteratively updating its answer. For each document, it passes all non-document inputs, the current document, and the latest intermediate answer to an LLM chain to get a new answer.
+
+    Since the Refine chain only passes a single document to the LLM at a time, it is well-suited for tasks that require analyzing more documents than can fit in the model's context. The obvious tradeoff is that this chain will make far more LLM calls than, for example, the Stuff documents chain. There are also certain tasks that are difficult to accomplish iteratively. For example, the Refine chain can perform poorly when documents frequently cross-reference one another or when a task requires detailed information from many documents.
 
 - **return_source_documents:** Used to specify whether or not to include the source documents that were used to answer the question in the output. When set to `True`, source documents will be included in the output along with the generated answer. This can be useful for providing additional context or references to the user — defaults to `True`.
 - **verbose:** Whether or not to run in verbose mode. In verbose mode, intermediate logs will be printed to the console — defaults to `False`.
@@ -115,17 +119,17 @@ The `LLMMathChain` works by using the language model with an `LLMChain` to under
 
 `RetrievalQA` is a chain used to find relevant documents or information to answer a given query. The retriever is responsible for returning the relevant documents based on the query, and the QA component then extracts the answer from those documents. The retrieval QA system combines the capabilities of both the retriever and the QA component to provide accurate and relevant answers to user queries.
 
-:::info
+<Admonition type="info">
 
 A retriever is a component that finds documents based on a query. It doesn't store the documents themselves, but it returns the ones that match the query.
 
-:::
+</Admonition >
 
 **Params**
 
 - **Combine Documents Chain:** Chain to use to combine the documents.
 - **Memory:** Default memory store.
-- **Retriever:**  The retriever used to fetch relevant documents.
+- **Retriever:** The retriever used to fetch relevant documents.
 - **input_key:** This parameter is used to specify the key in the input data that contains the question. It is used to retrieve the question from the input data and pass it to the question-answering model for generating the answer — defaults to `query`.
 - **output_key:** This parameter is used to specify the key in the output data where the generated answer will be stored. It is used to retrieve the answer from the output data after the question-answering model has generated it — defaults to `result`.
 - **return_source_documents:** Used to specify whether or not to include the source documents that were used to answer the question in the output. When set to `True`, source documents will be included in the output along with the generated answer. This can be useful for providing additional context or references to the user — defaults to `True`.
@@ -141,4 +145,4 @@ The `SQLDatabaseChain` finds answers to questions using a SQL database. It works
 
 - **Db:** SQL Database to connect to.
 - **LLM:** Language Model to use in the chain.
-- **Prompt:** Prompt template to translate natural language to SQL.
+- **Prompt:** Prompt template to translate natural language to SQL.

docs/docs/components/custom.mdx

@@ -0,0 +1,92 @@
+import Admonition from "@theme/Admonition";
+
+# Custom Components
+
+Used to create a custom component, a special type of Langflow component that allows users to extend the functionality of the platform by creating their own reusable and configurable components from a Python script.
+
+To use a custom component, follow these steps:
+
+- Create a class that inherits from _`langflow.CustomComponent`_ and contains a _`build`_ method.
+- Use arguments with [Type Annotations (or Type Hints)](https://docs.python.org/3/library/typing.html) of the _`build`_ method to create component fields.
+- If applicable, use the _`build_config`_ method to customize how these fields look and behave.
+
+<Admonition type="info" label="Tip">
+
+For an in-depth explanation of custom components, their rules, and applications, make sure to read [Custom Component guidelines](../guidelines/custom-component).
+
+</Admonition>
+
+**Params**
+
+- **Code:** The Python code to define the component.
+
+## The CustomComponent Class
+
+The CustomComponent class serves as the foundation for creating custom components. By inheriting this class, users can create new, configurable components, tailored to their specific requirements.
+
+**Methods**
+
+- **build**: This method is required within a Custom Component class. It defines the component's functionality and specifies how it processes input data to produce output data. This method is called when the component is built (i.e., when you click the _Build_ ⚡ button in the canvas).
+
+  The type annotations of the _`build`_ instance method are used to create the fields of the component.
+
+  | Supported Types                                           |
+  | --------------------------------------------------------- |
+  | _`str`_, _`int`_, _`float`_, _`bool`_, _`list`_, _`dict`_ |
+  | _`langchain.chains.base.Chain`_                           |
+  | _`langchain.PromptTemplate`_                              |
+  | _`langchain.llms.base.BaseLLM`_                           |
+  | _`langchain.Tool`_                                        |
+  | _`langchain.document_loaders.base.BaseLoader`_            |
+  | _`langchain.schema.Document`_                             |
+  | _`langchain.text_splitters.TextSplitter`_                 |
+  | _`langchain.vectorstores.base.VectorStore`_               |
+  | _`langchain.embeddings.base.Embeddings`_                  |
+  | _`langchain.schema.BaseRetriever`_                        |
+
+  <Admonition type="info">
+    Unlike Langchain types, base Python types do not add a
+    [handle](../guidelines/components) to the field by default. To add handles,
+    use the _`input_types`_ key in the _`build_config`_ method.
+  </Admonition>
+
+- **build_config**: Used to define the configuration fields of the component (if applicable). It should always return a dictionary with specific keys representing the field names and corresponding configurations. This method is called when the code is processed (i.e., when you click _Check and Save_ in the code editor). It must follow the format described below:
+
+  - Top-level keys are field names.
+  - Their values are also of type _`dict`_. They specify the behavior of the generated fields.
+
+  Below are the available keys used to configure component fields:
+
+  | Key                        | Description                                                                                                                                                                                                                                                                 |
+  | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+  | _`field_type: str`_        | The type of the field (can be any of the types supported by the _`build`_ method).                                                                                                                                                                                          |
+  | _`is_list: bool`_          | If the field can be a list of values, meaning that the user can manually add more inputs to the same field.                                                                                                                                                                 |
+  | _`options: List[str]`_     | When defined, the field becomes a dropdown menu where a list of strings defines the options to be displayed. If the _`value`_ attribute is set to one of the options, that option becomes default. For this parameter to work, _`field_type`_ should invariably be _`str`_. |
+  | _`multiline: bool`_        | Defines if a string field opens a text editor. Useful for longer texts.                                                                                                                                                                                                     |
+  | _`input_types: List[str]`_ | Used when you want a _`str`_ field to have connectable handles.                                                                                                                                                                                                             |
+  | _`display_name: str`_      | Defines the name of the field.                                                                                                                                                                                                                                              |
+  | _`advanced: bool`_         | Hide the field in the canvas view (displayed component settings only). Useful when a field is for advanced users.                                                                                                                                                           |
+  | _`password: bool`_         | To mask the input text. Useful to hide sensitive text (e.g. API keys).                                                                                                                                                                                                      |
+  | _`required: bool`_         | Makes the field required.                                                                                                                                                                                                                                                   |
+  | _`info: str`_              | Adds a tooltip to the field.                                                                                                                                                                                                                                                |
+  | _`file_types: List[str]`_  | This is a requirement if the _`field_type`_ is _file_. Defines which file types will be accepted. For example, _json_, _yaml_ or _yml_.                                                                                                                                     |
+
+- The CustomComponent class also provides helpful methods for specific tasks (e.g., to load and use other flows from the Langflow platform):
+
+  | Method Name    | Description                                                         |
+  | -------------- | ------------------------------------------------------------------- |
+  | _`list_flows`_ | Returns a list of Flow objects with an _`id`_ and a _`name`_.       |
+  | _`get_flow`_   | Returns a Flow object. Parameters are _`flow_name`_ or _`flow_id`_. |
+  | _`load_flow`_  | Loads a flow from a given _`id`_.                                   |
+
+- Useful attributes:
+
+  | Attribute Name | Description                                                                   |
+  | -------------- | ----------------------------------------------------------------------------- |
+  | _`repr_value`_ | Displays the value it receives in the _`build`_ method. Useful for debugging. |
+
+  <Admonition type="info" label="Tip">
+
+  Check out the [FlowRunner](../examples/flow-runner) example to understand how to call a flow from a custom component.
+
+  </Admonition>

docs/docs/components/prompts.mdx

@@ -1,11 +1,13 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Prompts
 
 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
-    <p>
-        We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝
-    </p>
+  <p>
+    We appreciate your understanding as we polish our documentation – it may
+    contain some rough edges. Share your feedback or report issues to help us
+    improve! 🛠️📝
+  </p>
 </Admonition>
 
 A prompt refers to the input given to a language model. It is constructed from multiple components and can be parametrized using prompt templates. A prompt template is a reproducible way to generate prompts and allow for easy customization through input variables.
@@ -16,8 +18,10 @@ A prompt refers to the input given to a language model. It is constructed from m
 
 The `PromptTemplate` component allows users to create prompts and define variables that provide control over instructing the model. The template can take in a set of variables from the end user and generates the prompt once the conversation is initiated.
 
-:::info
-Once a variable is defined in the prompt template, it becomes a component input of its own. Check out [Prompt Customization](../guidelines/prompt-customization.mdx) to learn more.
-:::
+<Admonition type="info">
+  Once a variable is defined in the prompt template, it becomes a component
+  input of its own. Check out [Prompt
+  Customization](../guidelines/prompt-customization.mdx) to learn more.
+</Admonition>
 
-- **template:** Template used to format an individual request.
+- **template:** Template used to format an individual request.

docs/docs/contributing/how-contribute.md

@@ -36,10 +36,9 @@ Before you start, make sure you have the following installed:
 - Poetry (>=1.4)
 - Node.js
 
-Then install the dependencies and start the development server for the backend:
+Then, in the root folder, install the dependencies and start the development server for the backend:
 
 ```bash
-make install_backend
 make backend
 ```
 
@@ -49,6 +48,7 @@ And the frontend:
 make frontend
 ```
 
+
 ---
 
 ## Docker compose
@@ -59,4 +59,19 @@ The following snippet will run the backend and frontend in separate containers.
 docker compose up --build
 # or
 make dev build=1
-```
+```
+
+---
+
+## Documentation
+
+The documentation is built using [Docusaurus](https://docusaurus.io/). To run the documentation locally, run the following commands:
+
+```bash
+cd docs
+npm install
+npm run start
+```
+
+The documentation will be available at `localhost:3000` and all the files are located in the `docs/docs` folder.
+Once you are done with your changes, you can create a Pull Request to the `main` branch.

docs/docs/examples/buffer-memory.mdx

@@ -1,3 +1,5 @@
+import Admonition from "@theme/Admonition";
+
 # Buffer Memory
 
 For certain applications, retaining past interactions is crucial. For that, chains and agents may accept a memory component as one of their input parameters. The `ConversationBufferMemory` component is one of them. It stores messages and extracts them into variables.
@@ -17,9 +19,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 #### <a target="\_blank" href="json_files/Buffer_Memory.json" download>Download Flow</a>
 
-:::note LangChain Components 🦜🔗
+<Admonition type="note" title="LangChain Components 🦜🔗">
 
 - [`ConversationBufferMemory`](https://python.langchain.com/docs/modules/memory/how_to/buffer)
 - [`ConversationChain`](https://python.langchain.com/docs/modules/chains/)
 - [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
-  :::
+
+</Admonition>

docs/docs/examples/conversation-chain.mdx

@@ -1,10 +1,14 @@
+import Admonition from "@theme/Admonition";
+
 # Conversation Chain
 
 This example shows how to instantiate a simple `ConversationChain` component using a Language Model (LLM). Once the Node Status turns green 🟢, the chat will be ready to take in user messages. Here, we used `ChatOpenAI` to act as the required LLM input, but you can use any LLM for this purpose.
 
-:::info
+<Admonition type="info">
+
 Make sure to always get the API key from the provider.
-:::
+
+</Admonition>
 
 ## ⛓️ Langflow Example
 
@@ -21,8 +25,9 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 #### <a target="\_blank" href="json_files/Basic_Chat.json" download>Download Flow</a>
 
-:::note LangChain Components 🦜🔗
+<Admonition type="note" title="LangChain Components 🦜🔗">
 
 - [`ConversationChain`](https://python.langchain.com/docs/modules/chains/)
 - [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
-  :::
+
+</Admonition>

docs/docs/examples/csv-loader.mdx

@@ -1,3 +1,5 @@
+import Admonition from "@theme/Admonition";
+
 # CSV Loader
 
 The `VectoStoreAgent` component retrieves information from one or more vector stores. This example shows a `VectoStoreAgent` connected to a CSV file through the `Chroma` vector store. Process description:
@@ -7,13 +9,18 @@ The `VectoStoreAgent` component retrieves information from one or more vector st
 - These chunks feed the `Chroma` vector store, which converts them into vectors and stores them for fast indexing.
 - Finally, the agent accesses the information of the vector store through the `VectorStoreInfo` tool.
 
-:::info
-The vector store is used for efficient semantic search, while `VectorStoreInfo` carries information about it, such as its name and description. Embeddings are a way to represent words, phrases, or any entities in a vector space. Learn more about them [here](https://platform.openai.com/docs/guides/embeddings/what-are-embeddings).
-:::
+<Admonition type="info">
+  The vector store is used for efficient semantic search, while
+  `VectorStoreInfo` carries information about it, such as its name and
+  description. Embeddings are a way to represent words, phrases, or any entities
+  in a vector space. Learn more about them
+  [here](https://platform.openai.com/docs/guides/embeddings/what-are-embeddings).
+</Admonition>
 
-:::tip
-Once you build this flow, ask questions about the data in the chat interface (e.g., number of rows or columns).
-:::
+<Admonition type="tip">
+  Once you build this flow, ask questions about the data in the chat interface
+  (e.g., number of rows or columns).
+</Admonition>
 
 ## ⛓️ Langflow Example
 
@@ -30,7 +37,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 #### <a target="\_blank" href="json_files/CSV_Loader.json" download>Download Flow</a>
 
-:::note LangChain Components 🦜🔗
+<Admonition type="note" title="LangChain Components 🦜🔗">
 
 - [`CSVLoader`](https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/csv)
 - [`CharacterTextSplitter`](https://python.langchain.com/docs/modules/data_connection/document_transformers/text_splitters/character_text_splitter)
@@ -39,4 +46,5 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 - [`VectorStoreInfo`](https://python.langchain.com/docs/modules/data_connection/vectorstores/)
 - [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
 - [`VectorStoreAgent`](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore)
-  :::
+
+</Admonition>

docs/docs/examples/flow-runner.mdx

@@ -0,0 +1,365 @@
+---
+description: Custom Components
+hide_table_of_contents: true
+---
+
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import Admonition from "@theme/Admonition";
+
+# FlowRunner Component
+
+The CustomComponent class allows us to create components that interact with Langflow itself. In this example, we will make a component that runs other flows available in "My Collection".
+
+<ZoomableImage
+  alt="Document Processor Component"
+  sources={{
+    light: "img/flow_runner.png",
+  }}
+  style={{
+    width: "30%",
+    margin: "0 auto",
+    display: "flex",
+    justifyContent: "center",
+  }}
+/>
+
+We will cover how to:
+
+- List Collection flows using the _`list_flows`_ method.
+- Load a flow using the _`load_flow`_ method.
+- Configure a dropdown input field using the _`options`_ parameter.
+
+<details open>
+
+<summary>Example Code</summary>
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+class FlowRunner(CustomComponent):
+    display_name = "Flow Runner"
+    description = "Run other flows using a document as input."
+
+    def build_config(self):
+        flows = self.list_flows()
+        flow_names = [f.name for f in flows]
+        return {"flow_name": {"options": flow_names,
+                                "display_name": "Flow Name",
+        },
+               "document": {"display_name": "Document"}
+        }
+
+
+    def build(self, flow_name: str, document: Document) -> Document:
+        # List the flows
+        flows = self.list_flows()
+        # Get the flow that matches the selected name
+        # You can also get the flow by id
+        # using self.get_flow(flow_id=flow_id)
+        tweaks = {}
+        flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
+        # Get the page_content from the document
+        if document and isinstance(document, list):
+            document = document[0]
+        page_content = document.page_content
+        # Use it in the flow
+        result = flow(page_content)
+        return Document(page_content=str(result))
+
+```
+
+</details>
+
+<CH.Scrollycoding rows={20} className={""}>
+
+```python
+from langflow import CustomComponent
+
+
+class MyComponent(CustomComponent):
+    display_name = "Custom Component"
+    description = "This is a custom component"
+
+    def build_config(self):
+        ...
+
+    def build(self):
+        ...
+
+```
+
+The typical structure of a Custom Component is composed of _`display_name`_ and _`description`_ attributes, _`build`_ and _`build_config`_ methods.
+
+---
+
+```python
+from langflow import CustomComponent
+
+
+# focus
+class FlowRunner(CustomComponent):
+    # focus
+    display_name = "Flow Runner"
+    # focus
+    description = "Run other flows"
+
+    def build_config(self):
+        ...
+
+    def build(self):
+        ...
+
+```
+
+Let's start by defining our component's _`display_name`_ and _`description`_.
+
+---
+
+```python
+from langflow import CustomComponent
+# focus
+from langchain.schema import Document
+
+
+class FlowRunner(CustomComponent):
+    display_name = "Flow Runner"
+    description = "Run other flows using a document as input."
+
+    def build_config(self):
+        ...
+
+    def build(self):
+        ...
+
+```
+
+Second, we will import _`Document`_ from the [_langchain.schema_](https://docs.langchain.com/docs/components/schema/) module. This will be the return type of the _`build`_ method.
+
+---
+
+```python
+from langflow import CustomComponent
+# focus
+from langchain.schema import Document
+
+
+class FlowRunner(CustomComponent):
+    display_name = "Flow Runner"
+    description = "Run other flows using a document as input."
+
+    def build_config(self):
+        ...
+
+    # focus
+    def build(self, flow_name: str, document: Document) -> Document:
+        ...
+
+```
+
+Now, let's add the [parameters](focus://11[20:55]) and the [return type](focus://11[60:69]) to the _`build`_ method. The parameters added are:
+
+- _`flow_name`_ is the name of the flow we want to run.
+- _`document`_ is the input document to be passed to that flow.
+  - Since _`Document`_ is a Langchain type, it will add an input [handle](../guidelines/components) to the component ([see more](../components/custom)).
+
+---
+
+```python focus=13:14
+from langflow import CustomComponent
+from langchain.schema import Document
+
+
+class FlowRunner(CustomComponent):
+    display_name = "Flow Runner"
+    description = "Run other flows using a document as input."
+
+    def build_config(self):
+        ...
+
+    def build(self, flow_name: str, document: Document) -> Document:
+        # List the flows
+        flows = self.list_flows()
+
+```
+
+We can now start writing the _`build`_ method. Let's list available flows in "My Collection" using the _`list_flows`_ method.
+
+---
+
+```python focus=15:18
+from langflow import CustomComponent
+from langchain.schema import Document
+
+
+class FlowRunner(CustomComponent):
+    display_name = "Flow Runner"
+    description = "Run other flows using a document as input."
+
+    def build_config(self):
+        ...
+
+    def build(self, flow_name: str, document: Document) -> Document:
+        # List the flows
+        flows = self.list_flows()
+        # Get the flow that matches the selected name
+        # You can also get the flow by id
+        # using self.get_flow(flow_id=flow_id)
+        tweaks = {}
+        flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
+
+```
+
+And retrieve a flow that matches the selected name (we'll make a dropdown input field for the user to choose among flow names).
+
+<Admonition type="caution">
+  From version 0.4.0, names are unique, which was not the case in previous
+  versions. This might lead to unexpected results if using flows with the same
+  name.
+</Admonition>
+
+---
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+
+class FlowRunner(CustomComponent):
+    display_name = "Flow Runner"
+    description = "Run other flows using a document as input."
+
+    def build_config(self):
+        ...
+
+    def build(self, flow_name: str, document: Document) -> Document:
+        # List the flows
+        flows = self.list_flows()
+        # Get the flow that matches the selected name
+        # You can also get the flow by id
+        # using self.get_flow(flow_id=flow_id)
+        tweaks = {}
+        flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
+
+
+```
+
+You can load this flow using _`get_flow`_ and set a _`tweaks`_ dictionary to customize it. Find more about tweaks in our [features guidelines](../guidelines/features#code).
+
+---
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+
+class FlowRunner(CustomComponent):
+    display_name = "Flow Runner"
+    description = "Run other flows using a document as input."
+
+    def build_config(self):
+        ...
+
+    def build(self, flow_name: str, document: Document) -> Document:
+        # List the flows
+        flows = self.list_flows()
+        # Get the flow that matches the selected name
+        # You can also get the flow by id
+        # using self.get_flow(flow_id=flow_id)
+        tweaks = {}
+        flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
+        # Get the page_content from the document
+        if document and isinstance(document, list):
+            document = document[0]
+        page_content = document.page_content
+        # Use it in the flow
+        result = flow(page_content)
+        return Document(page_content=str(result))
+```
+
+We are using a _`Document`_ as input because it is a straightforward way to pass text data in Langflow (specifically because you can connect it to many [loaders](../components/loaders)).
+Generally, a flow will take a string or a dictionary as input because that's what LangChain components expect.
+In case you are passing a dictionary, you need to build it according to the needs of the flow you are using.
+
+The content of a document can be extracted using the _`page_content`_ attribute, which is a string, and passed as an argument to the selected flow.
+
+---
+
+```python focus=9:16
+from langflow import CustomComponent
+from langchain.schema import Document
+
+
+class FlowRunner(CustomComponent):
+    display_name = "Flow Runner"
+    description = "Run other flows using a document as input."
+
+    def build_config(self):
+        flows = self.list_flows()
+        flow_names = [f.name for f in flows]
+        return {"flow_name": {"options": flow_names,
+                                "display_name": "Flow Name",
+        },
+               "document": {"display_name": "Document"}
+        }
+
+    def build(self, flow_name: str, document: Document) -> Document:
+        # List the flows
+        flows = self.list_flows()
+        # Get the flow that matches the selected name
+        # You can also get the flow by id
+        # using self.get_flow(flow_id=flow_id)
+        tweaks = {}
+        flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
+        # Get the page_content from the document
+        if document and isinstance(document, list):
+            document = document[0]
+        page_content = document.page_content
+        # Use it in the flow
+        result = flow(page_content)
+        return Document(page_content=str(result))
+```
+
+Finally, we can add field customizations through the _`build_config`_ method. Here we added the _`options`_ key to make the _`flow_name`_ field a dropdown menu. Check out the [custom component reference](../components/custom) for a list of available keys.
+
+<Admonition type="caution">
+  Make sure that the field type is _`str`_ and _`options`_ values are strings.
+</Admonition>
+
+</CH.Scrollycoding>
+
+Done! This is what our script and custom component looks like:
+
+<div style={{
+        display: "flex",
+        justifyContent: "center",
+    }}>
+
+    <ZoomableImage
+    alt="Document Processor Code"
+    sources={{
+        light: "img/flow_runner_code.png",
+    }}
+    style={{
+        maxWidth: "100%",
+        margin: "0 auto",
+        display: "flex",
+        justifyContent: "center",
+    }}
+
+/>
+
+    <ZoomableImage
+    alt="Document Processor Component"
+    sources={{
+        light: "img/flow_runner.png",
+    }}
+    style={{
+        width: "40%",
+        margin: "0 auto",
+        display: "flex",
+        justifyContent: "center",
+    }}
+    />
+
+</div>

docs/docs/examples/how-upload-examples.mdx

@@ -7,16 +7,14 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 We welcome all examples that can help our community learn and explore Langflow's capabilities.
 Langflow Examples is a repository on [GitHub](https://github.com/logspace-ai/langflow_examples) that contains examples of flows that people can use for inspiration and learning.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: "img/community-examples.png",
-    }}
-  />
-</div>
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/community-examples.png",
+  }}
+  style={{ width: "100%" }}
+/>
 
 To upload examples, please follow these steps:
 

docs/docs/examples/midjourney-prompt-chain.mdx

@@ -1,3 +1,5 @@
+import Admonition from "@theme/Admonition";
+
 # MidJourney Prompt Chain
 
 The `MidJourneyPromptChain` can be used to generate imaginative and detailed MidJourney prompts.
@@ -14,9 +16,11 @@ And get a response such as:
 Imagine a mysterious forest, the trees are tall and ancient, their branches reaching up to the sky. Through the darkness, a dragon emerges from the shadows, its scales shimmering in the moonlight. Its wingspan is immense, and its eyes glow with a fierce intensity. It is a majestic and powerful creature, one that commands both respect and fear.
 ```
 
-:::tip
-Notice that the `ConversationSummaryMemory` stores a summary of the conversation over time. Try using it to create better prompts as the conversation goes on.
-:::
+<Admonition type="tip">
+  Notice that the `ConversationSummaryMemory` stores a summary of the
+  conversation over time. Try using it to create better prompts as the
+  conversation goes on.
+</Admonition>
 
 ## ⛓️ Langflow Example
 
@@ -33,8 +37,9 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 #### <a target="\_blank" href="json_files/MidJourney_Prompt_Chain.json" download>Download Flow</a>
 
-:::note LangChain Components 🦜🔗
+<Admonition type="note" title="LangChain Components 🦜🔗">
 
 - [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
 - [`ConversationSummaryMemory`](https://python.langchain.com/docs/modules/memory/how_to/summary)
-  :::
+
+</Admonition>

docs/docs/examples/multiple-vectorstores.mdx

@@ -1,26 +1,31 @@
+import Admonition from "@theme/Admonition";
+
 # Multiple Vector Stores
 
 The example below shows an agent operating with two vector stores built upon different data sources.
 
 The `TextLoader` loads a TXT file, while the `WebBaseLoader` pulls text from webpages into a document format to accessed downstream. The `Chroma` vector stores are created analogous to what we have demonstrated in our [CSV Loader](/examples/csv-loader.mdx) example. Finally, the `VectorStoreRouterAgent` constructs an agent that routes between the vector stores.
 
-:::info
-Get the TXT file used [here](https://github.com/hwchase17/chat-your-data/blob/master/state_of_the_union.txt).
-:::
+<Admonition type="info">
+  Get the TXT file used
+  [here](https://github.com/hwchase17/chat-your-data/blob/master/state_of_the_union.txt).
+</Admonition>
 
 URL used by the `WebBaseLoader`:
 
-```txt
+```text
 https://pt.wikipedia.org/wiki/Harry_Potter
 ```
 
-:::tip
-When you build the flow, request information about one of the sources. The agent should be able to use the correct source to generate a response.
-:::
+<Admonition type="tip">
+  When you build the flow, request information about one of the sources. The
+  agent should be able to use the correct source to generate a response.
+</Admonition>
 
-:::info
-Learn more about Multiple Vector Stores [here](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore?highlight=Multiple%20Vector%20Stores#multiple-vectorstores).
-:::
+<Admonition type="info">
+  Learn more about Multiple Vector Stores
+  [here](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore?highlight=Multiple%20Vector%20Stores#multiple-vectorstores).
+</Admonition>
 
 ## ⛓️ Langflow Example
 
@@ -37,7 +42,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 #### <a target="\_blank" href="json_files/Multiple_Vector_Stores.json" download>Download Flow</a>
 
-:::note LangChain Components 🦜🔗
+<Admonition type="note" title="LangChain Components 🦜🔗">
 
 - [`WebBaseLoader`](https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/web_base)
 - [`TextLoader`](https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/unstructured_file)
@@ -49,4 +54,4 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 - [`VectorStoreRouterToolkit`](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore)
 - [`VectorStoreRouterAgent`](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore)
 
-:::
+</Admonition>

docs/docs/examples/python-function.mdx

@@ -1,3 +1,5 @@
+import Admonition from "@theme/Admonition";
+
 # Python Function
 
 Langflow allows you to create a customized tool using the `PythonFunction` connected to a `Tool` component. In this example, Regex is used in Python to validate a pattern.
@@ -15,15 +17,19 @@ def is_brazilian_zipcode(zipcode: str) -> bool:
     return False
 ```
 
-:::tip
-When a tool is called, it is often desirable to have its output returned directly to the user. You can do this by setting the **return_direct** flag for a tool to be True.
-:::
+<Admonition type="tip">
+  When a tool is called, it is often desirable to have its output returned
+  directly to the user. You can do this by setting the **return_direct** flag
+  for a tool to be True.
+</Admonition>
 
 The `AgentInitializer` component is a quick way to construct an agent from the model and tools.
 
-:::info
-The `PythonFunction` is a custom component that uses the LangChain 🦜🔗 tool decorator. Learn more about it [here](https://python.langchain.com/docs/modules/agents/tools/how_to/custom_tools).
-:::
+<Admonition type="info">
+  The `PythonFunction` is a custom component that uses the LangChain 🦜🔗 tool
+  decorator. Learn more about it
+  [here](https://python.langchain.com/docs/modules/agents/tools/how_to/custom_tools).
+</Admonition>
 
 ## ⛓️ Langflow Example
 
@@ -40,9 +46,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 #### <a target="\_blank" href="json_files/Python_Function.json" download>Download Flow</a>
 
-:::note LangChain Components 🦜🔗
+<Admonition type="note" title="LangChain Components 🦜🔗">
 
 - [`PythonFunctionTool`](https://python.langchain.com/docs/modules/agents/tools/how_to/custom_tools)
 - [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
 - [`AgentInitializer`](https://python.langchain.com/docs/modules/agents/)
-  :::
+
+</Admonition>

docs/docs/examples/serp-api-tool.mdx

@@ -1,24 +1,29 @@
+import Admonition from "@theme/Admonition";
+
 # Serp API Tool
 
 The [Serp API](https://serpapi.com/) (Search Engine Results Page) allows developers to scrape results from search engines such as Google, Bing and Yahoo, and can be used as in Langflow through the `Search` component.
 
-:::info
-To use the Serp API, you first need to sign up [Serp API](https://serpapi.com/) for an API key on the provider's website.
-:::
+<Admonition type="info">
+  To use the Serp API, you first need to sign up [Serp
+  API](https://serpapi.com/) for an API key on the provider's website.
+</Admonition>
 
 Here, the `ZeroShotPrompt` component specifies a prompt template for the `ZeroShotAgent`. Set a _Prefix_ and _Suffix_ with rules for the agent to obey. In the example, we used default templates.
 
 The `LLMChain` is a simple chain that takes in a prompt template, formats it with the user input, and returns the response from an LLM.
 
-:::tip
-In this example, we used [`ChatOpenAI`](https://platform.openai.com/) as the LLM, but feel free to experiment with other Language Models!
-:::
+<Admonition type="tip">
+  In this example, we used [`ChatOpenAI`](https://platform.openai.com/) as the
+  LLM, but feel free to experiment with other Language Models!
+</Admonition>
 
 The `ZeroShotAgent` takes the `LLMChain` and the `Search` tool as inputs, using the tool to find information when necessary.
 
-:::info
-Learn more about the Serp API [here](https://python.langchain.com/docs/modules/agents/tools/integrations/serpapi).
-:::
+<Admonition type="info">
+  Learn more about the Serp API
+  [here](https://python.langchain.com/docs/modules/agents/tools/integrations/serpapi).
+</Admonition>
 
 ## ⛓️ Langflow Example
 
@@ -35,11 +40,12 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 #### <a target="\_blank" href="json_files/SerpAPI_Tool.json" download>Download Flow</a>
 
-:::note LangChain Components 🦜🔗
+<Admonition type="note" title="LangChain Components 🦜🔗">
 
 - [`ZeroShotPrompt`](https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/)
 - [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
 - [`LLMChain`](https://python.langchain.com/docs/modules/chains/foundational/llm_chain)
 - [`Search`](https://python.langchain.com/docs/modules/agents/tools/integrations/serpapi)
 - [`ZeroShotAgent`](https://python.langchain.com/docs/modules/agents/how_to/custom_mrkl_agent)
-  :::
+
+</Admonition>

docs/docs/getting-started/hugging-face-spaces.mdx

@@ -6,15 +6,14 @@ import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import ZoomableImage from "/src/theme/ZoomableImage.js";
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: "img/hugging-face.png",
-    }}
-  />
-</div>
+{" "}
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/hugging-face.png",
+  }}
+  style={{ width: "100%" }}
+/>
 
 Check out Langflow on [HuggingFace Spaces](https://huggingface.co/spaces/Logspace/Langflow).

docs/docs/guidelines/chat-interface.mdx

@@ -7,58 +7,46 @@ import ReactPlayer from "react-player";
 
 Langflow’s chat interface provides a user-friendly experience and functionality to interact with the model and customize the prompt. The sidebar brings options that allow users to view and edit pre-defined prompt variables. This feature facilitates quick experimentation by enabling the modification of variable values right in the chat.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/chat_interface.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
 
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/chat_interface.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 Notice that editing variables in the chat interface take place temporarily and won’t change their original value in the components once the chat is closed.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/chat_interface2.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/chat_interface2.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 To view the complete prompt in its original, structured format, click the "Display Prompt" option. This feature lets you see the prompt exactly as it entered the model.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/chat_interface3.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
-
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/chat_interface3.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 In the chat interface, you can redefine which variable should be interpreted as the chat input. This gives you control over these inputs and allows dynamic and creative interactions.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/chat_interface4.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/chat_interface4.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>

docs/docs/guidelines/chat-widget.mdx

@@ -0,0 +1,209 @@
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import ReactPlayer from "react-player";
+import Admonition from "@theme/Admonition";
+
+# Chat Widget
+
+<div style={{ marginBottom: "20px" }}>
+  The <b>Langflow Chat Widget</b> is a powerful web component that enables
+  communication with a Langflow project. This widget allows for a chat interface
+  embedding, allowing the integration of Langflow into web applications
+  effortlessly.
+</div>
+
+## Features
+
+🌟 **Seamless Integration:** Easily integrate the Langflow Chat Widget into your website or web application with just a few lines of JavaScript.
+
+🚀 **Interactive Chat Interface:** Engage your users with a user-friendly conversation, powered by Langflow's advanced language understanding capabilities.
+
+🎛️ **Customizable Styling:** Customize the appearance of the chat widget to match your application's design and branding.
+
+🌐 **Multilingual Support:** Communicate with users in multiple languages, opening up your application to a global audience.
+
+---
+
+## Usage
+
+<div style={{ marginBottom: "20px" }}>
+  You can get the HTML code embedded with the chat by clicking the Code button
+  at the Sidebar after building a flow.
+</div>
+
+{" "}
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/widget-sidebar.png"),
+  }}
+  style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
+/>
+
+<div style={{ marginBottom: "20px" }}>
+  Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read
+  below to learn how to use it with HTML, React and Angular.
+</div>
+
+{" "}
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/widget-code.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
+
+---
+
+### HTML
+
+The Chat Widget can be embedded into any HTML page, inside a _`<body>`_ tag, as demonstrated in the video below.
+
+<div
+  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
+>
+  <ReactPlayer playing controls url="/videos/langflow_widget.mp4" />
+</div>
+
+---
+
+### React
+
+To embed the Chat Widget using React, you'll need to insert this _`<script>`_ tag into the React _index.html_ file, inside the _`<body>`_ tag:
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
+```
+
+Then, declare your Web Component and encapsulate it in a React component.
+
+```jsx
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "langflow-chat": any;
+    }
+  }
+}
+
+export default function ChatWidget({ className }) {
+  return (
+    <div className={className}>
+      <langflow-chat
+        chat_inputs='{"your_key":"value"}'
+        chat_input_field="your_chat_key"
+        flow_id="your_flow_id"
+        host_url="langflow_url"
+      ></langflow-chat>
+    </div>
+  );
+}
+```
+
+Finally, you can place the component anywhere in your code to display the Chat Widget.
+
+---
+
+### Angular
+
+To use it in Angular, first add this _`<script>`_ tag into the Angular _index.html_ file, inside the _`<body>`_ tag.
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
+```
+
+When you use a custom web component in an Angular template, the Angular compiler might show a warning when it doesn't recognize the custom elements by default. To suppress this warning, add _`CUSTOM_ELEMENTS_SCHEMA`_ to the module's _`@NgModule.schemas`_.
+
+- Open the module file (it typically ends with _.module.ts_) where you'd add the _`langflow-chat`_ web component.
+- Import _`CUSTOM_ELEMENTS_SCHEMA`_ at the top of the file:
+
+```ts
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+```
+
+- Add _`CUSTOM_ELEMENTS_SCHEMA`_ to the 'schemas' array inside the '@NgModule' decorator:
+
+```ts
+@NgModule({
+  declarations: [
+    // ... Other components and directives ...
+  ],
+  imports: [
+    // ... Other imported modules ...
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here
+})
+export class YourModule {}
+```
+
+In your Angular project, find the component belonging to the module where _`CUSTOM_ELEMENTS_SCHEMA`_ was added.
+
+- Inside the template, add the _`langflow-chat`_ tag to include the Chat Widget in your component's view:
+
+```jsx
+<langflow-chat
+  chat_inputs='{"your_key":"value"}'
+  chat_input_field="your_chat_key"
+  flow_id="your_flow_id"
+  host_url="langflow_url"
+></langflow-chat>
+```
+
+<Admonition type="info">
+  <ul>
+    <li>
+      _`CUSTOM_ELEMENTS_SCHEMA`_ is a built-in schema that allows Angular to
+      recognize custom elements.
+    </li>
+    <li>
+      Adding _`CUSTOM_ELEMENTS_SCHEMA`_ tells Angular to allow custom elements
+      in your templates, and it will suppress the warning related to unknown
+      elements like _`langflow-chat`_.
+    </li>
+    <li>
+      Notice that you can only use the Chat Widget in components that are part
+      of the module where you added _`CUSTOM_ELEMENTS_SCHEMA`_.
+    </li>
+  </ul>
+</Admonition>
+
+---
+
+## Configuration
+
+Use the widget API to customize your Chat Widget:
+
+<Admonition type="caution">
+  Props with the type JSON need to be passed as Stringified JSONs, with the
+  format &#123;<span>"key":"value"</span>&#125;.
+</Admonition>
+
+| Prop                  | Type    | Required | Description                                                                                                                                                      |
+| --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| bot_message_style     | JSON    | No       | Applies custom formatting to bot messages.                                                                                                                       |
+| chat_input_field      | String  | Yes      | Defines the type of the input field for chat messages.                                                                                                           |
+| chat_inputs           | JSON    | Yes      | Determines the chat input elements and their respective values.                                                                                                  |
+| chat_output_key       | String  | No       | Specifies which output to display if multiple outputs are available.                                                                                             |
+| chat_position         | String  | No       | Positions the chat window on the screen (options include: top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left). |
+| chat_trigger_style    | JSON    | No       | Styles the chat trigger button.                                                                                                                                  |
+| chat_window_style     | JSON    | No       | Customizes the overall appearance of the chat window.                                                                                                            |
+| error_message_style   | JSON    | No       | Sets the format for error messages within the chat window.                                                                                                       |
+| flow_id               | String  | Yes      | Identifies the flow that the component is associated with.                                                                                                       |
+| height                | Number  | No       | Sets the height of the chat window in pixels.                                                                                                                    |
+| host_url              | String  | Yes      | Specifies the URL of the host for chat component communication.                                                                                                  |
+| input_container_style | JSON    | No       | Applies styling to the container where chat messages are entered.                                                                                                |
+| input_style           | JSON    | No       | Sets the style for the chat input field.                                                                                                                         |
+| online                | Boolean | No       | Toggles the online status of the chat component.                                                                                                                 |
+| online_message        | String  | No       | Sets a custom message to display when the chat component is online.                                                                                              |
+| placeholder           | String  | No       | Sets the placeholder text for the chat input field.                                                                                                              |
+| placeholder_sending   | String  | No       | Sets the placeholder text to display while a message is being sent.                                                                                              |
+| send_button_style     | JSON    | No       | Sets the style for the send button in the chat window.                                                                                                           |
+| send_icon_style       | JSON    | No       | Sets the style for the send icon in the chat window.                                                                                                             |
+| tweaks                | JSON    | No       | Applies additional custom adjustments for the associated flow.                                                                                                   |
+| user_message_style    | JSON    | No       | Determines the formatting for user messages in the chat window.                                                                                                  |
+| width                 | Number  | No       | Sets the width of the chat window in pixels.                                                                                                                     |
+| window_title          | String  | No       | Sets the title displayed in the chat window's header or title bar.                                                                                               |

docs/docs/guidelines/components.mdx

@@ -25,17 +25,14 @@ Components are the building blocks of the flows. They are made of inputs, output
   of that type is required.
 </div>
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/single-compenent.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/single-compenent.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 <div style={{ marginBottom: "20px" }}>
   On the top right corner, you will find the component status icon 🔴. Make the

docs/docs/guidelines/custom-component.mdx

@@ -0,0 +1,407 @@
+---
+description: Custom Components
+hide_table_of_contents: true
+---
+
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import Admonition from "@theme/Admonition";
+
+# Custom Components
+
+In Langflow, a Custom Component is a special component type that allows users to extend the platform's functionality by creating their own reusable and configurable components.
+
+A Custom Component is created from a user-defined Python script that uses the _`CustomComponent`_ class provided by the Langflow library. These components can be as simple as a basic function that takes and returns a string or as complex as a combination of multiple sub-components and API calls.
+
+Let's take a look at the basic rules and features. Then we'll go over an example.
+
+## TL;DR
+
+- Create a class that inherits from _`CustomComponent`_ and contains a _`build`_ method.
+- Use arguments with [Type Annotations (or Type Hints)](https://docs.python.org/3/library/typing.html) of the _`build`_ method to create component fields.
+- Use the _`build_config`_ method to customize how these fields look and behave.
+- Set up a folder with your components to load them up in Langflow's sidebar.
+
+Here is an example:
+
+<div style={{
+        display: "flex",
+        justifyContent: "center",
+    }}>
+    <CH.Code linuNumbers={false}>
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+class DocumentProcessor(CustomComponent):
+    display_name = "Document Processor"
+    description = "This component processes a document"
+
+    def build_config(self) -> dict:
+        options = ["Uppercase", "Lowercase", "Titlecase"]
+        return {
+            "function": {"options": options,
+                    "value": options[0]}}
+
+    def build(self, document: Document, function: str) -> Document:
+        if isinstance(document, list):
+            document = document[0]
+        page_content = document.page_content
+        if function == "Uppercase":
+            page_content = page_content.upper()
+        elif function == "Lowercase":
+            page_content = page_content.lower()
+        elif function == "Titlecase":
+            page_content = page_content.title()
+        self.repr_value = f"Result of {function} function: {page_content}"
+        return Document(page_content=page_content)
+```
+
+    </CH.Code>
+
+    <ZoomableImage
+    alt="Document Processor Component"
+    sources={{
+        light: "img/document_processor.png",
+    }}
+    style={{
+        width: "40%",
+        margin: "0 auto",
+        display: "flex",
+        justifyContent: "center",
+    }}
+    />
+
+</div>
+
+<Admonition type="tip">
+  Check out [FlowRunner Component](../examples/flow-runner) for a more complex
+  example.
+</Admonition>
+
+---
+
+## Rules
+
+The Python script for every Custom Component should follow a set of rules. Let's go over them one by one:
+
+<CH.Scrollycoding rows={20} className={""}>
+
+### Rule 1
+
+The script must contain a **single class** that inherits from _`CustomComponent`_.
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+class MyComponent(CustomComponent):
+    display_name = "Custom Component"
+    description = "This is a custom component"
+
+    def build_config(self) -> dict:
+        ...
+
+    def build(self, document: Document, function: str) -> Document:
+        ...
+```
+
+---
+
+### Rule 2
+
+This class requires a _`build`_ method used to run the component and define its fields.
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+class MyComponent(CustomComponent):
+    display_name = "Custom Component"
+    description = "This is a custom component"
+
+    def build_config(self) -> dict:
+        ...
+
+    # focus
+    # mark
+    def build(self) -> Document:
+        ...
+```
+
+---
+
+The [Return Type Annotation](https://docs.python.org/3/library/typing.html) of the _`build`_ method defines the component type (e.g., Chain, BaseLLM, or basic Python types). Check out all supported types in the [component reference](../components/custom).
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+class MyComponent(CustomComponent):
+    display_name = "Custom Component"
+    description = "This is a custom component"
+
+    def build_config(self) -> dict:
+        ...
+
+    # focus[20:31]
+    # mark
+    def build(self) -> Document:
+        ...
+```
+
+---
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+class MyComponent(CustomComponent):
+    display_name = "Custom Component"
+    description = "This is a custom component"
+
+    def build_config(self) -> dict:
+        ...
+
+    def build(self) -> Document:
+        ...
+```
+
+### Rule 3
+
+The class can have a [_`build_config`_](focus://8) method, which defines configuration fields for the component. The [_`build_config`_](focus://8) method should always return a dictionary with specific keys representing the field names and their corresponding configurations. It must follow the format described below:
+
+- Top-level keys are field names.
+- Their values are also of type _`dict`_. They specify the behavior of the generated fields.
+
+Check out the [component reference](../components/custom) for more details on the available field configurations.
+
+---
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+class MyComponent(CustomComponent):
+    display_name = "Custom Component"
+    description = "This is a custom component"
+
+    def build_config(self) -> dict:
+        ...
+
+    def build(self) -> Document:
+        ...
+```
+
+## Example
+
+Let's create a custom component that processes a document (_`langchain.schema.Document`_) using a simple function.
+
+---
+
+### Pick a display name
+
+To start, let's choose a name for our component by adding a _`display_name`_ attribute. This name will appear on the canvas. The name of the class is not relevant, but let's call it _`DocumentProcessor`_.
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+# focus
+class DocumentProcessor(CustomComponent):
+    # focus
+    display_name = "Document Processor"
+    description = "This is a custom component"
+
+    def build_config(self) -> dict:
+        ...
+
+    def build(self) -> Document:
+        ...
+```
+
+---
+
+### Write a description
+
+We can also write a description for it using a _`description`_ attribute.
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+class DocumentProcessor(CustomComponent):
+    display_name = "Document Processor"
+    description = "This component processes a document"
+
+    def build_config(self) -> dict:
+        ...
+
+    def build(self) -> Document:
+        ...
+```
+
+---
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+class DocumentProcessor(CustomComponent):
+    display_name = "Document Processor"
+    description = "This component processes a document"
+
+    def build_config(self) -> dict:
+        ...
+
+    def build(self, document: Document, function: str) -> Document:
+        if isinstance(document, list):
+            document = document[0]
+        page_content = document.page_content
+        if function == "Uppercase":
+            page_content = page_content.upper()
+        elif function == "Lowercase":
+            page_content = page_content.lower()
+        elif function == "Titlecase":
+            page_content = page_content.title()
+        self.repr_value = f"Result of {function} function: {page_content}"
+        return Document(page_content=page_content)
+```
+
+### Add the build method
+
+Here, the build method takes two input parameters: _`document`_, representing the input document to be processed, and _`function`_, a string representing the selected text transformation to be applied (either "Uppercase," "Lowercase," or "Titlecase"). The method processes the text content of the input Document based on the selected function.
+
+The attribute _`repr_value`_ is used to display the result of the component on the canvas. It is optional and can be used to display any string value.
+
+The return type is _`Document`_.
+
+---
+
+### Customize the component fields
+
+The _`build_config`_ method is here defined to customize the component fields.
+
+- _`options`_ determines that the field will be a dropdown menu. The list values and field type must be _`str`_.
+- _`value`_ is the default option of the dropdown menu.
+- _`display_name`_ is the name of the field to be displayed.
+
+```python
+from langflow import CustomComponent
+from langchain.schema import Document
+
+class DocumentProcessor(CustomComponent):
+    display_name = "Document Processor"
+    description = "This component processes a document"
+
+    def build_config(self) -> dict:
+        options = ["Uppercase", "Lowercase", "Titlecase"]
+        return {
+            "function": {"options": options,
+                     "value": options[0],
+                     "display_name": "Function"
+                        },
+            "document": {"display_name": "Document"}
+                }
+
+    def build(self, document: Document, function: str) -> Document:
+        if isinstance(document, list):
+            document = document[0]
+        page_content = document.page_content
+        if function == "Uppercase":
+            page_content = page_content.upper()
+        elif function == "Lowercase":
+            page_content = page_content.lower()
+        elif function == "Titlecase":
+            page_content = page_content.title()
+        self.repr_value = f"Result of {function} function: {page_content}"
+        return Document(page_content=page_content)
+```
+
+</CH.Scrollycoding>
+
+All done! This is what our script and brand-new custom component look like:
+
+<div style={{
+        display: "flex",
+        justifyContent: "center",
+    }}>
+
+    <ZoomableImage
+    alt="Document Processor Code"
+    sources={{
+        light: "img/document_processor_code.png",
+    }}
+    style={{
+        maxWidth: "100%",
+        margin: "0 auto",
+        display: "flex",
+        justifyContent: "center",
+    }}
+
+/>
+
+    <ZoomableImage
+    alt="Document Processor Component"
+    sources={{
+        light: "img/document_processor.png",
+    }}
+    style={{
+        width: "40%",
+        margin: "0 auto",
+        display: "flex",
+        justifyContent: "center",
+    }}
+    />
+
+</div>
+
+---
+
+## Loading Custom Components
+
+For advanced customization, Langflow offers the option to create and load custom components outside of the standard interface. This process involves creating the desired components using a text editor and loading them using the Langflow CLI.
+
+### Folder Structure
+
+Create a folder that follows the same structural conventions as the [config.yaml](https://github.com/logspace-ai/langflow/blob/dev/src/backend/langflow/config.yaml) file. Inside this main directory, use a `custom_components` subdirectory for your custom components.
+
+Inside `custom_components`, you can create a Python file for each component. Similarly, any custom agents should be housed in an `agents` subdirectory.
+
+If you use a subdirectory name that is not in our config.yaml file, your component will appear in an `Other` category in the sidebar.
+
+Your structure should look something like this:
+
+```
+.
+└── custom_components
+    ├── document_processor.py
+    └── ...
+└── agents
+    └── ...
+└── my_agents <-- Other category
+    └── ...
+```
+
+### Loading Custom Components
+
+You can specify the path to your custom components using the _`--components-path`_ argument when running the Langflow CLI, as shown below:
+
+```bash
+langflow --components-path /path/to/components
+```
+
+Alternatively, you can set the `LANGFLOW_COMPONENTS_PATH` environment variable:
+
+```bash
+export LANGFLOW_COMPONENTS_PATH=/path/to/components
+langflow
+```
+
+Langflow will attempt to load all of the components found in the specified directory. If a component fails to load due to errors in the component's code, Langflow will print an error message to the console but will continue loading the rest of the components.
+
+### Interacting with Custom Components
+
+Once your custom components have been loaded successfully, they will appear in Langflow's sidebar. From there, you can add them to your Langflow canvas for use. However, please note that components with errors will not be available for addition to the canvas. Always ensure your code is error-free before attempting to load components.
+
+Remember, creating custom components allows you to extend the functionality of Langflow to better suit your unique needs. Happy coding!

docs/docs/guidelines/features.mdx

@@ -2,6 +2,7 @@ import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import ZoomableImage from "/src/theme/ZoomableImage.js";
 import ReactPlayer from "react-player";
+import Admonition from "@theme/Admonition";
 
 # Features
 
@@ -12,17 +13,14 @@ import ReactPlayer from "react-player";
   below:
 </div>
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/features.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/features.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 <div style={{ marginBottom: "20px" }}>
   Further down, we will explain each of these options.
@@ -34,9 +32,10 @@ import ReactPlayer from "react-player";
 
 Flows can be exported and imported as JSON files.
 
-:::caution
+<Admonition type="caution">
 Watch out for API keys being stored in local files.
-:::
+
+</Admonition>
 
 ---
 

docs/docs/guidelines/prompt-customization.mdx

@@ -7,80 +7,62 @@ import ReactPlayer from "react-player";
 
 The prompt template allows users to create prompts and define variables that provide control over instructing the model.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/prompt_customization.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
 
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/prompt_customization.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 Variables can be used to define instructions, questions, context, inputs, or examples for the model and can be created with any chosen name in curly brackets, e.g., `{variable_name}`. They act as placeholders for parts of the text that can be easily modified.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/prompt_customization2.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
 
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/prompt_customization2.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 Once inserted, these variables are immediately recognized as new fields in the prompt component. Here, you can define their values within the component itself or leave a field empty to be adjusted over the chat interface.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/prompt_customization3.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
+{" "}
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/prompt_customization3.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 You can also use documents or output parsers as prompt variables. By plugging them into prompt handles, they’ll disable and feed that input field.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/prompt_customization4.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
-
+{" "}
 
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/prompt_customization4.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 With this, users can interact with documents, webpages, or any other type of content directly from the prompt, which allows for seamless integration of external resources with the language model.
 
-
-
 If working with an interactive (chat-like) flow, remember to keep one of the input variables empty to behave as the chat input.
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: useBaseUrl("img/prompt_customization5.png"),
-    }}
-    style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
-  />
-</div>
-
+{" "}
 
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/prompt_customization5.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+/>

docs/docs/guides/chatprompttemplate_guide.mdx

@@ -39,8 +39,7 @@ In this guide, we will modify the "Basic Chat with Prompt and History" example,
 
 5. Open the "Prompt" field on the SystemMessagePromptTemplate component.
 
-6. Enter the text: `You are a {role} that {behavior}.`
-
+6. Enter the text: _`You are a {role} that {behavior}.`_
 7. Save your changes by clicking on "Check & Save".
 
 8. Define the 'role' variable by typing "obedient assistant".

docs/docs/index.mdx

@@ -6,13 +6,11 @@ import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import ZoomableImage from "/src/theme/ZoomableImage.js";
 
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ZoomableImage
-    alt="Docusaurus themed image"
-    sources={{
-      light: "img/new_langflow2.gif",
-    }}
-  />
-</div>
+{" "}
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/new_langflow2.gif",
+  }}
+  style={{ width: "100%" }}
+/>

docs/docusaurus.config.js

@@ -1,127 +1,145 @@
 const lightCodeTheme = require("prism-react-renderer/themes/github");
 
+const { remarkCodeHike } = require("@code-hike/mdx");
 // With JSDoc @type annotations, IDEs can provide config autocompletion
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
-(
-  module.exports = {
-    title: "Langflow Documentation",
-    tagline: "Langflow is a GUI for LangChain, designed with react-flow",
-    favicon: "img/favicon.ico",
-    url: "https://logspace-ai.github.io",
-    baseUrl: "/",
-    onBrokenLinks: "throw",
-    onBrokenMarkdownLinks: "warn",
-    organizationName: "logspace-ai",
-    projectName: "langflow",
-    trailingSlash: false,
-    customFields: {
-      mendableAnonKey: process.env.MENDABLE_ANON_KEY,
-    },
-    i18n: {
-      defaultLocale: "en",
-      locales: ["en"],
-    },
-    presets: [
-      [
-        "@docusaurus/preset-classic",
-        /** @type {import('@docusaurus/preset-classic').Options} */
-        ({
-          docs: {
-            routeBasePath: "/",
-            sidebarPath: require.resolve("./sidebars.js"),
-            path: "docs",
-            // sidebarPath: 'sidebars.js',
-          },
-          theme: {
-            customCss: require.resolve("./src/css/custom.css"),
-          },
-        }),
-      ],
-    ],
-    plugins: [
-      ["docusaurus-node-polyfills", { excludeAliases: ["console"] }],
-      "docusaurus-plugin-image-zoom",
-      // ....
-      async function myPlugin(context, options) {
-        return {
-          name: "docusaurus-tailwindcss",
-          configurePostCss(postcssOptions) {
-            // Appends TailwindCSS and AutoPrefixer.
-            postcssOptions.plugins.push(require("tailwindcss"));
-            postcssOptions.plugins.push(require("autoprefixer"));
-            return postcssOptions;
-          },
-        };
-      },
-    ],
-    themeConfig:
-      /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+module.exports = {
+  title: "Langflow Documentation",
+  tagline: "Langflow is a GUI for LangChain, designed with react-flow",
+  favicon: "img/favicon.ico",
+  url: "https://logspace-ai.github.io",
+  baseUrl: "/",
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+  organizationName: "logspace-ai",
+  projectName: "langflow",
+  trailingSlash: false,
+  customFields: {
+    mendableAnonKey: process.env.MENDABLE_ANON_KEY,
+  },
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+  presets: [
+    [
+      "@docusaurus/preset-classic",
+      /** @type {import('@docusaurus/preset-classic').Options} */
       ({
-        navbar: {
-          hideOnScroll: true,
-          title: "Langflow",
-          logo: {
-            alt: "Langflow",
-            src: "img/chain.png",
-          },
-          items: [
-            // right
-            {
-              position: "right",
-              href: "https://github.com/logspace-ai/langflow",
-              position: "right",
-              className: "header-github-link",
-              target: "_blank",
-              rel: null,
-            },
-            {
-              position: "right",
-              href: "https://twitter.com/logspace_ai",
-              position: "right",
-              className: "header-twitter-link",
-              target: "_blank",
-              rel: null,
-            },
-            {
-              position: "right",
-              href: "https://discord.gg/EqksyE2EX9",
-              position: "right",
-              className: "header-discord-link",
-              target: "_blank",
-              rel: null,
-            },
+        docs: {
+          beforeDefaultRemarkPlugins: [
+            [
+              remarkCodeHike,
+              {
+                theme: "github-light",
+                showCopyButton: true,
+                lineNumbers: true,
+              },
+            ],
+          ],
+          routeBasePath: "/",
+          sidebarPath: require.resolve("./sidebars.js"),
+          path: "docs",
+          // sidebarPath: 'sidebars.js',
+        },
+        theme: {
+          customCss: [
+            require.resolve("@code-hike/mdx/styles.css"),
+            require.resolve("./src/css/custom.css"),
           ],
         },
-        tableOfContents: {
-          minHeadingLevel: 2,
-          maxHeadingLevel: 5,
-        },
-        colorMode: {
-          defaultMode: "light",
-          disableSwitch: true,
-          respectPrefersColorScheme: false,
-        },
-        announcementBar: {
-          content:
-            '⭐️ If you like ⛓️Langflow, star it on <a target="_blank" rel="noopener noreferrer" href="https://github.com/logspace-ai/langflow">GitHub</a>! ⭐️',
-          backgroundColor: "#B53D38", //Mustard Yellow #D19900 #D4B20B - Salmon #E9967A
-          textColor: "#fff",
-          isCloseable: false,
-        },
-        footer: {
-          links: [],
-          copyright: `Copyright © ${new Date().getFullYear()} Logspace.`,
-        },
-        zoom: {
-          selector: ".markdown :not(a) > img:not(.no-zoom)",
-          background: {
-            light: "rgba(240, 240, 240, 0.9)",
-          },
-          config: {},
-        },
-        prism: {
-          theme: lightCodeTheme,
-        },
       }),
-  }
-);
+    ],
+  ],
+  plugins: [
+    ["docusaurus-node-polyfills", { excludeAliases: ["console"] }],
+    "docusaurus-plugin-image-zoom",
+    // ....
+    async function myPlugin(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"));
+          postcssOptions.plugins.push(require("autoprefixer"));
+          return postcssOptions;
+        },
+      };
+    },
+  ],
+  themes: ["mdx-v2"],
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      navbar: {
+        hideOnScroll: true,
+        title: "Langflow",
+        logo: {
+          alt: "Langflow",
+          src: "img/chain.png",
+        },
+        items: [
+          // right
+          {
+            position: "right",
+            href: "https://github.com/logspace-ai/langflow",
+            position: "right",
+            className: "header-github-link",
+            target: "_blank",
+            rel: null,
+          },
+          {
+            position: "right",
+            href: "https://twitter.com/logspace_ai",
+            position: "right",
+            className: "header-twitter-link",
+            target: "_blank",
+            rel: null,
+          },
+          {
+            position: "right",
+            href: "https://discord.gg/EqksyE2EX9",
+            position: "right",
+            className: "header-discord-link",
+            target: "_blank",
+            rel: null,
+          },
+        ],
+      },
+      tableOfContents: {
+        minHeadingLevel: 2,
+        maxHeadingLevel: 5,
+      },
+      colorMode: {
+        defaultMode: "light",
+        disableSwitch: true,
+        respectPrefersColorScheme: false,
+      },
+      announcementBar: {
+        content:
+          '⭐️ If you like ⛓️Langflow, star it on <a target="_blank" rel="noopener noreferrer" href="https://github.com/logspace-ai/langflow">GitHub</a>! ⭐️',
+        backgroundColor: "#E8EBF1", //Mustard Yellow #D19900 #D4B20B - Salmon #E9967A
+        textColor: "#1C1E21",
+        isCloseable: false,
+      },
+      footer: {
+        links: [],
+        copyright: `Copyright © ${new Date().getFullYear()} Logspace.`,
+      },
+      zoom: {
+        selector: ".markdown :not(a) > img:not(.no-zoom)",
+        background: {
+          light: "rgba(240, 240, 240, 0.9)",
+        },
+        config: {},
+      },
+      // prism: {
+      //   theme: require("prism-react-renderer/themes/dracula"),
+      // },
+      docs: {
+        sidebar: {
+          hideable: true,
+        },
+      },
+    }),
+};

docs/package.json

@@ -15,12 +15,13 @@
   },
   "dependencies": {
     "@babel/preset-react": "^7.22.3",
+    "@code-hike/mdx": "^0.9.0",
     "@docusaurus/core": "2.4.1",
     "@docusaurus/plugin-ideal-image": "^2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
     "@docusaurus/theme-classic": "^2.4.1",
     "@docusaurus/theme-search-algolia": "^2.4.1",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "^2.3.0",
     "@mendable/search": "^0.0.114",
     "@pbe/react-yandex-maps": "^1.2.4",
     "@prismicio/client": "^7.0.1",
@@ -28,6 +29,7 @@
     "autoprefixer": "^10.4.14",
     "clsx": "^1.2.1",
     "docusaurus-plugin-image-zoom": "^0.1.4",
+    "docusaurus-theme-mdx-v2": "^0.1.2",
     "jquery": "^3.7.0",
     "medium-zoom": "^1.0.8",
     "node-fetch": "^3.3.1",
@@ -67,4 +69,4 @@
   "engines": {
     "node": ">=16.14"
   }
-}
+}

docs/sidebars.js

@@ -21,6 +21,8 @@ module.exports = {
         "guidelines/collection",
         "guidelines/prompt-customization",
         "guidelines/chat-interface",
+        "guidelines/chat-widget",
+        "guidelines/custom-component",
       ],
     },
     {
@@ -30,6 +32,7 @@ module.exports = {
       items: [
         "components/agents",
         "components/chains",
+        "components/custom",
         "components/embeddings",
         "components/llms",
         "components/loaders",
@@ -64,6 +67,7 @@ module.exports = {
       label: "Examples",
       collapsed: false,
       items: [
+        "examples/flow-runner",
         "examples/conversation-chain",
         "examples/buffer-memory",
         "examples/midjourney-prompt-chain",

docs/src/css/custom.css

@@ -3,17 +3,19 @@
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
- :root {
+:root {
   --ifm-background-color: var(--token-primary-bg-c);
   --ifm-navbar-link-hover-color: initial;
   --ifm-navbar-padding-vertical: 0;
   --ifm-navbar-item-padding-vertical: 0;
-  --ifm-font-family-base: -apple-system, BlinkMacSystemFont, Inter, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI emoji';
-  --ifm-font-family-monospace: 'SFMono-Regular', 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  --ifm-font-family-base: -apple-system, BlinkMacSystemFont, Inter, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji";
+  --ifm-font-family-monospace: "SFMono-Regular", "Roboto Mono", Consolas,
+    "Liberation Mono", Menlo, Courier, monospace;
 }
 
 .theme-doc-sidebar-item-category.menu__list-item:not(:first-child) {
-  margin-top: 1.5rem!important;
+  margin-top: 1.5rem !important;
 }
 
 .docusaurus-highlight-code-line {
@@ -31,7 +33,7 @@
   transform: skewY(6deg);
 }
 
-[class^='announcementBar'] {
+[class^="announcementBar"] {
   z-index: 10;
 }
 
@@ -112,7 +114,7 @@ body {
 }
 
 .header-github-link:before {
-  content: '';
+  content: "";
   width: 24px;
   height: 24px;
   display: flex;
@@ -126,7 +128,7 @@ body {
 }
 
 .header-twitter-link::before {
-  content: '';
+  content: "";
   width: 24px;
   height: 24px;
   display: flex;
@@ -140,7 +142,7 @@ body {
 }
 
 .header-discord-link::before {
-  content: '';
+  content: "";
   width: 24px;
   height: 24px;
   display: flex;
@@ -148,7 +150,6 @@ body {
   background-size: contain;
 }
 
-
 /* Images */
 .image-rendering-crisp {
   image-rendering: crisp-edges;
@@ -164,7 +165,7 @@ body {
 .img-center {
   display: flex;
   justify-content: center;
-  width: 100%,
+  width: 100%;
 }
 
 .resized-image {
@@ -188,4 +189,22 @@ body {
   .mendable-search {
     width: 140px;
   }
-}
+}
+/*
+.ch-scrollycoding {
+  gap: 10rem !important;
+} */
+
+.ch-scrollycoding-content {
+  max-width: 55% !important;
+  min-width: 40% !important;
+}
+
+.ch-scrollycoding-sticker {
+  max-width: 60% !important;
+  min-width: 45% !important;
+}
+
+.ch-scrollycoding-step-content {
+  min-height: 70px;
+}

docs/src/theme/ZoomableImage.js

@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import ThemedImage from '@theme/ThemedImage';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import React, { useState, useEffect } from "react";
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
 
-const ZoomableImage = ({ alt, sources }) => {
+const ZoomableImage = ({ alt, sources, style }) => {
+  // add style here
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   const toggleFullscreen = () => {
@@ -10,27 +11,36 @@ const ZoomableImage = ({ alt, sources }) => {
   };
 
   const handleKeyPress = (event) => {
-    if (event.key === 'Escape') {
+    if (event.key === "Escape") {
       setIsFullscreen(false);
     }
   };
 
   useEffect(() => {
     if (isFullscreen) {
-      document.addEventListener('keydown', handleKeyPress);
+      document.addEventListener("keydown", handleKeyPress);
     } else {
-      document.removeEventListener('keydown', handleKeyPress);
+      document.removeEventListener("keydown", handleKeyPress);
     }
 
     return () => {
-      document.removeEventListener('keydown', handleKeyPress);
+      document.removeEventListener("keydown", handleKeyPress);
     };
   }, [isFullscreen]);
 
+  // Default style
+  const defaultStyle = {
+    width: "50%",
+    margin: "0 auto",
+    display: "flex",
+    justifyContent: "center",
+  };
+
   return (
     <div
-      className={`zoomable-image ${isFullscreen ? 'fullscreen' : ''}`}
+      className={`zoomable-image ${isFullscreen ? "fullscreen" : ""}`}
       onClick={toggleFullscreen}
+      style={{ ...defaultStyle, ...style }}
     >
       <ThemedImage
         className="zoomable-image-inner"

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@svgr/cli": "^8.0.1"
+  }
+}

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "0.3.3"
+version = "0.4.0"
 description = "A Python package with a built-in web application"
 authors = ["Logspace <contact@logspace.ai>"]
 maintainers = [
@@ -32,14 +32,14 @@ beautifulsoup4 = "^4.12.2"
 google-search-results = "^2.4.1"
 google-api-python-client = "^2.79.0"
 typer = "^0.9.0"
-gunicorn = "^20.1.0"
-langchain = "^0.0.237"
+gunicorn = "^21.1.0"
+langchain = "^0.0.250"
 openai = "^0.27.8"
 pandas = "^2.0.0"
 chromadb = "^0.3.21"
-huggingface-hub = "^0.15.0"
+huggingface-hub = { version = "^0.16.0", extras = ["inference"] }
 rich = "^13.4.2"
-llama-cpp-python = "~0.1.0"
+llama-cpp-python = { version = "~0.1.0", optional = true }
 networkx = "^3.1"
 unstructured = "^0.7.0"
 pypdf = "^3.11.0"
@@ -56,8 +56,8 @@ qdrant-client = "^1.3.0"
 websockets = "^10.3"
 weaviate-client = "^3.21.0"
 jina = "3.15.2"
-sentence-transformers = "^2.2.2"
-ctransformers = "^0.2.10"
+sentence-transformers = { version = "^2.2.2", optional = true }
+ctransformers = { version = "^0.2.10", optional = true }
 cohere = "^4.11.0"
 python-multipart = "^0.0.6"
 sqlmodel = "^0.0.8"
@@ -75,8 +75,9 @@ certifi = "^2023.5.7"
 google-cloud-aiplatform = "^1.26.1"
 psycopg = "^3.1.9"
 psycopg-binary = "^3.1.9"
+fastavro = "^1.8.0"
 
-[tool.poetry.dev-dependencies]
+[tool.poetry.group.dev.dependencies]
 black = "^23.1.0"
 ipykernel = "^6.21.2"
 mypy = "^1.1.1"
@@ -94,6 +95,9 @@ types-pyyaml = "^6.0.12.8"
 
 [tool.poetry.extras]
 deploy = ["langchain-serve"]
+local = ["llama-cpp-python", "sentence-transformers", "ctransformers"]
+all = ["deploy", "local"]
+
 
 [tool.pytest.ini_options]
 minversion = "6.0"

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
@@ -58,7 +60,12 @@ def convert_kwargs(params):
     kwargs_keys = [key for key in params.keys() if "kwargs" in key or "config" in key]
     for key in kwargs_keys:
         if isinstance(params[key], str):
-            params[key] = json.loads(params[key])
+            try:
+                params[key] = json.loads(params[key])
+            except json.JSONDecodeError:
+                # if the string is not a valid json string, we will
+                # remove the key from the params
+                params.pop(key, None)
     return params
 
 
@@ -95,12 +102,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 +215,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 +319,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", "Runnable", "Generic"]

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")