diff --git a/.gitignore b/.gitignore
index 9d71e19b26..3b6cfebbfe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -251,3 +251,5 @@ langflow.db
# docusaurus
.docusaurus/
+
+/tmp/*
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 3b458aa81d..e09e76cc87 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -6,7 +6,8 @@
"request": "launch",
"module": "uvicorn",
"args": [
- "langflow.main:app",
+ "--factory",
+ "langflow.main:create_app",
"--port",
"7860",
"--reload",
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f2c471b1a1..da7ec1977f 100644
--- a/CONTRIBUTING.md
+++ b/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.
diff --git a/Makefile b/Makefile
index 79e27833ec..ff540da0d5 100644
--- a/Makefile
+++ b/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'
diff --git a/README.md b/README.md
index e88f9c762b..dcd91e0755 100644
--- a/README.md
+++ b/README.md
@@ -30,14 +30,14 @@
- [Table of Contents](#table-of-contents)
- [๐ฆ Installation](#-installation)
- [Locally](#locally)
- - [HuggingFace](#huggingface)
+ - [HuggingFace Spaces](#huggingface-spaces)
- [๐ฅ๏ธ Command Line Interface (CLI)](#๏ธ-command-line-interface-cli)
- [Usage](#usage)
- - [Environment Variables](#environment-variables)
+ - [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)
@@ -46,7 +46,7 @@
# ๐ฆ Installation
-## Locally
+### Locally
You can install Langflow from pip:
@@ -81,7 +81,7 @@ or
langflow # or langflow --help
```
-## HuggingFace
+### 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.
@@ -107,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`.
@@ -161,33 +162,33 @@ langflow --jcloud
Show complete (example) output
- ```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
- ```
+```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
+```
@@ -198,7 +199,7 @@ You can use Langflow directly on your browser, or use the API endpoints on Jina
Show API usage (with python)
- ```python
+```python
import requests
BASE_API_URL = "https://langflow-e3dd8820ec.wolf.jina.ai/api/v1/predict"
@@ -206,38 +207,38 @@ 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!"
+}
+```
diff --git a/docs/docs/components/chains.mdx b/docs/docs/components/chains.mdx
index 52de6c4819..96dcac2d0f 100644
--- a/docs/docs/components/chains.mdx
+++ b/docs/docs/components/chains.mdx
@@ -1,6 +1,7 @@
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
+import Admonition from "@theme/Admonition";
# Chains
@@ -12,22 +13,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
+
Works as a proxy of LangChainโs [documents](https://python.langchain.com/docs/modules/chains/document/) chains generated by the `load_qa_chain` function.
-:::
+
**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.
---
@@ -41,7 +43,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`.
---
@@ -49,11 +51,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
+
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.
-:::
+
**Params**
@@ -61,12 +63,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`.
@@ -108,17 +111,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
+
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.
-:::
+
**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`.
@@ -134,4 +137,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.
\ No newline at end of file
+- **Prompt:** Prompt template to translate natural language to SQL.
diff --git a/docs/docs/components/custom.mdx b/docs/docs/components/custom.mdx
new file mode 100644
index 0000000000..ffa747c1bb
--- /dev/null
+++ b/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.
+
+
+
+For an in-depth explanation of custom components, their rules, and applications, make sure to read [Custom Component guidelines](../guidelines/custom-component).
+
+
+
+**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`_ |
+
+
+ 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.
+
+
+- **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. |
+
+
+
+ Check out the [FlowRunner](../examples/flow-runner) example to understand how to call a flow from a custom component.
+
+
diff --git a/docs/docs/components/prompts.mdx b/docs/docs/components/prompts.mdx
index f4f2c4cae0..0c72572728 100644
--- a/docs/docs/components/prompts.mdx
+++ b/docs/docs/components/prompts.mdx
@@ -1,3 +1,5 @@
+import Admonition from "@theme/Admonition";
+
# Prompts
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.
@@ -8,8 +10,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.
-:::
+
+ 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.
+
-- **template:** Template used to format an individual request.
\ No newline at end of file
+- **template:** Template used to format an individual request.
diff --git a/docs/docs/contributing/how-contribute.md b/docs/docs/contributing/how-contribute.md
index cdccc271f3..53b4304962 100644
--- a/docs/docs/contributing/how-contribute.md
+++ b/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
-```
\ No newline at end of file
+```
+
+---
+
+## 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.
diff --git a/docs/docs/examples/buffer-memory.mdx b/docs/docs/examples/buffer-memory.mdx
index c3e886cf98..d34649991d 100644
--- a/docs/docs/examples/buffer-memory.mdx
+++ b/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";
#### Download Flow
-:::note 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)
- :::
+
+
diff --git a/docs/docs/examples/conversation-chain.mdx b/docs/docs/examples/conversation-chain.mdx
index b8cbb11bb1..db31818811 100644
--- a/docs/docs/examples/conversation-chain.mdx
+++ b/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
+
+
Make sure to always get the API key from the provider.
-:::
+
+
## โ๏ธ Langflow Example
@@ -21,8 +25,9 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
#### Download Flow
-:::note LangChain Components ๐ฆ๐
+
- [`ConversationChain`](https://python.langchain.com/docs/modules/chains/)
- [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
- :::
+
+
diff --git a/docs/docs/examples/csv-loader.mdx b/docs/docs/examples/csv-loader.mdx
index de808ec3d7..c59dfc1e76 100644
--- a/docs/docs/examples/csv-loader.mdx
+++ b/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).
-:::
+
+ 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).
+
-:::tip
-Once you build this flow, ask questions about the data in the chat interface (e.g., number of rows or columns).
-:::
+
+ Once you build this flow, ask questions about the data in the chat interface
+ (e.g., number of rows or columns).
+
## โ๏ธ Langflow Example
@@ -30,7 +37,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
#### Download Flow
-:::note 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)
- :::
+
+
diff --git a/docs/docs/examples/flow-runner.mdx b/docs/docs/examples/flow-runner.mdx
new file mode 100644
index 0000000000..151c7d182a
--- /dev/null
+++ b/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".
+
+
+
+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.
+
+
+
+Example 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):
+ 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))
+
+```
+
+
+
+
+
+```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).
+
+
+ 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.
+
+
+---
+
+```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.
+
+
+ Make sure that the field type is _`str`_ and _`options`_ values are strings.
+
+
+
+
+Done! This is what our script and custom component looks like:
+
+
+
+
+
+
+
+
diff --git a/docs/docs/examples/how-upload-examples.mdx b/docs/docs/examples/how-upload-examples.mdx
index 8a43062125..2b1a2b06c7 100644
--- a/docs/docs/examples/how-upload-examples.mdx
+++ b/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.
-
-
-
+{" "}
+
To upload examples, please follow these steps:
diff --git a/docs/docs/examples/midjourney-prompt-chain.mdx b/docs/docs/examples/midjourney-prompt-chain.mdx
index d3ca57c917..c79bb0b277 100644
--- a/docs/docs/examples/midjourney-prompt-chain.mdx
+++ b/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.
-:::
+
+ Notice that the `ConversationSummaryMemory` stores a summary of the
+ conversation over time. Try using it to create better prompts as the
+ conversation goes on.
+
## โ๏ธ Langflow Example
@@ -33,8 +37,9 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
#### Download Flow
-:::note 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)
- :::
+
+
diff --git a/docs/docs/examples/multiple-vectorstores.mdx b/docs/docs/examples/multiple-vectorstores.mdx
index 36890c8668..0c9f11c4c8 100644
--- a/docs/docs/examples/multiple-vectorstores.mdx
+++ b/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).
-:::
+
+ Get the TXT file used
+ [here](https://github.com/hwchase17/chat-your-data/blob/master/state_of_the_union.txt).
+
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.
-:::
+
+ 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.
+
-:::info
-Learn more about Multiple Vector Stores [here](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore?highlight=Multiple%20Vector%20Stores#multiple-vectorstores).
-:::
+
+ Learn more about Multiple Vector Stores
+ [here](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore?highlight=Multiple%20Vector%20Stores#multiple-vectorstores).
+
## โ๏ธ Langflow Example
@@ -37,7 +42,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
#### Download Flow
-:::note 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)
-:::
+
diff --git a/docs/docs/examples/python-function.mdx b/docs/docs/examples/python-function.mdx
index 12a262a3ff..f537075c6b 100644
--- a/docs/docs/examples/python-function.mdx
+++ b/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.
-:::
+
+ 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.
+
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).
-:::
+
+ 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).
+
## โ๏ธ Langflow Example
@@ -40,9 +46,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
#### Download Flow
-:::note 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/)
- :::
+
+
diff --git a/docs/docs/examples/serp-api-tool.mdx b/docs/docs/examples/serp-api-tool.mdx
index a7e1d3d8e2..60e55791a9 100644
--- a/docs/docs/examples/serp-api-tool.mdx
+++ b/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.
-:::
+
+ 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.
+
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!
-:::
+
+ In this example, we used [`ChatOpenAI`](https://platform.openai.com/) as the
+ LLM, but feel free to experiment with other Language Models!
+
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).
-:::
+
+ Learn more about the Serp API
+ [here](https://python.langchain.com/docs/modules/agents/tools/integrations/serpapi).
+
## โ๏ธ Langflow Example
@@ -35,11 +40,12 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
#### Download Flow
-:::note 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)
- :::
+
+
diff --git a/docs/docs/getting-started/hugging-face-spaces.mdx b/docs/docs/getting-started/hugging-face-spaces.mdx
index e8b3852a9d..acc4bb8d52 100644
--- a/docs/docs/getting-started/hugging-face-spaces.mdx
+++ b/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";
-
-
-
+{" "}
+
+
Check out Langflow on [HuggingFace Spaces](https://huggingface.co/spaces/Logspace/Langflow).
diff --git a/docs/docs/guidelines/chat-interface.mdx b/docs/docs/guidelines/chat-interface.mdx
index c09f000762..0ac23dc8aa 100644
--- a/docs/docs/guidelines/chat-interface.mdx
+++ b/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.
-
-
-
+{" "}
+
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.
-
-
-
+{" "}
-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.
+
-
-
-
+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.
+{" "}
+
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.
-
-
-
+{" "}
+
diff --git a/docs/docs/guidelines/chat-widget.mdx b/docs/docs/guidelines/chat-widget.mdx
new file mode 100644
index 0000000000..7f6737fea8
--- /dev/null
+++ b/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
+
+
+ The Langflow Chat Widget 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.
+
+
+## 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
+
+
+ You can get the HTML code embedded with the chat by clicking the Code button
+ at the Sidebar after building a flow.
+
+
+{" "}
+
+
+
+
+ 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.
+
+
+{" "}
+
+
+
+---
+
+### HTML
+
+The Chat Widget can be embedded into any HTML page, inside a _``_ tag, as demonstrated in the video below.
+
+
+
+
+
+---
+
+### React
+
+To embed the Chat Widget using React, you'll need to insert this _`
+```
+
+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 (
+
+
+
+ );
+}
+```
+
+Finally, you can place the component anywhere in your code to display the Chat Widget.
+
+---
+
+### Angular
+
+To use it in Angular, first add this _`
+```
+
+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
+
+```
+
+
+
+
+ _`CUSTOM_ELEMENTS_SCHEMA`_ is a built-in schema that allows Angular to
+ recognize custom elements.
+
+
+ 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`_.
+
+
+ Notice that you can only use the Chat Widget in components that are part
+ of the module where you added _`CUSTOM_ELEMENTS_SCHEMA`_.
+
+
+
+
+---
+
+## Configuration
+
+Use the widget API to customize your Chat Widget:
+
+
+ Props with the type JSON need to be passed as Stringified JSONs, with the
+ format {"key":"value"}.
+
+
+| 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. |
diff --git a/docs/docs/guidelines/components.mdx b/docs/docs/guidelines/components.mdx
index ba2f5ff337..b7dadcfce7 100644
--- a/docs/docs/guidelines/components.mdx
+++ b/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.
-
-
-
+{" "}
+
On the top right corner, you will find the component status icon ๐ด. Make the
diff --git a/docs/docs/guidelines/custom-component.mdx b/docs/docs/guidelines/custom-component.mdx
new file mode 100644
index 0000000000..bcd6372221
--- /dev/null
+++ b/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:
+
+
+
+
+ Check out [FlowRunner Component](../examples/flow-runner) for a more complex
+ example.
+
+
+---
+
+## Rules
+
+The Python script for every Custom Component should follow a set of rules. Let's go over them one by one:
+
+
+
+### 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)
+```
+
+
+
+All done! This is what our script and brand-new custom component look like:
+
+
+
+
+
+
+
+
+
+---
+
+## 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!
diff --git a/docs/docs/guidelines/features.mdx b/docs/docs/guidelines/features.mdx
index cf8b09c6e7..6235b68dbf 100644
--- a/docs/docs/guidelines/features.mdx
+++ b/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:
-
-
-
+{" "}
+
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
+
Watch out for API keys being stored in local files.
-:::
+
+
---
diff --git a/docs/docs/guidelines/prompt-customization.mdx b/docs/docs/guidelines/prompt-customization.mdx
index 8e2f409f92..efb5b3928a 100644
--- a/docs/docs/guidelines/prompt-customization.mdx
+++ b/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.
-
-
-
+{" "}
+
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.
-
-
-
+{" "}
+
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.
-
-
-
+{" "}
-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.
+
-
-
-
+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.
+{" "}
+
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.
-
-
-
-
+{" "}
+
diff --git a/docs/docs/guides/chatprompttemplate_guide.mdx b/docs/docs/guides/chatprompttemplate_guide.mdx
index 422bb6420a..05a8f3333b 100644
--- a/docs/docs/guides/chatprompttemplate_guide.mdx
+++ b/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".
diff --git a/docs/docs/index.mdx b/docs/docs/index.mdx
index 4ec4a300dc..7be04549c7 100644
--- a/docs/docs/index.mdx
+++ b/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";
-