Merge remote-tracking branch 'origin/dev' into NGNMergeDev

docs/docs/components/custom.mdx

@@ -33,6 +33,7 @@ The CustomComponent class serves as the foundation for creating custom component
   | Supported Types                                           |
   | --------------------------------------------------------- |
   | _`str`_, _`int`_, _`float`_, _`bool`_, _`list`_, _`dict`_ |
+  | _`langflow.field_typing.NestedDict`_                      |
   | _`langchain.chains.base.Chain`_                           |
   | _`langchain.PromptTemplate`_                              |
   | _`langchain.llms.base.BaseLLM`_                           |
@@ -44,6 +45,8 @@ The CustomComponent class serves as the foundation for creating custom component
   | _`langchain.embeddings.base.Embeddings`_                  |
   | _`langchain.schema.BaseRetriever`_                        |
 
+  The difference between _`dict`_ and _`langflow.field_typing.NestedDict`_ is that one adds a simple key-value pair field, while the other opens a more robust dictionary editor.
+
   <Admonition type="info">
     Unlike Langchain types, base Python types do not add a
     [handle](../guidelines/components) to the field by default. To add handles,

docs/docs/components/text-splitters.mdx

@@ -1,11 +1,13 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Text Splitters
 
 <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 text splitter is a tool that divides a document or text into smaller chunks or segments. It is used to break down large texts into more manageable pieces for analysis or processing.
@@ -22,13 +24,13 @@ The `CharacterTextSplitter` is used to split a long text into smaller chunks bas
 
 - **chunk_overlap:** Determines the number of characters that overlap between consecutive chunks when splitting text. It specifies how much of the previous chunk should be included in the next chunk.
 
-    For example, if the `chunk_overlap` is set to 20 and the `chunk_size` is set to 100, the splitter will create chunks of 100 characters each, but the last 20 characters of each chunk will overlap with the first 20 characters of the next chunk. This allows for a smoother transition between chunks and ensures that no information is lost – defaults to `200`.
+  For example, if the `chunk_overlap` is set to 20 and the `chunk_size` is set to 100, the splitter will create chunks of 100 characters each, but the last 20 characters of each chunk will overlap with the first 20 characters of the next chunk. This allows for a smoother transition between chunks and ensures that no information is lost – defaults to `200`.
 
 - **chunk_size:** Determines the maximum number of characters in each chunk when splitting a text. It specifies the size or length of each chunk.
 
-    For example, if the chunk_size is set to 100, the splitter will create chunks of 100 characters each. If the text is longer than 100 characters, it will be divided into multiple chunks of equal size, except for the last chunk, which may be smaller if there are remaining characters –defaults to `1000`.
+  For example, if the chunk_size is set to 100, the splitter will create chunks of 100 characters each. If the text is longer than 100 characters, it will be divided into multiple chunks of equal size, except for the last chunk, which may be smaller if there are remaining characters –defaults to `1000`.
 
-- **separator:** Specifies the character that will be used to split the text into chunks – defaults to `.` 
+- **separator:** Specifies the character that will be used to split the text into chunks – defaults to `.`
 
 ---
 
@@ -44,6 +46,18 @@ The `RecursiveCharacterTextSplitter` splits the text by trying to keep paragra
 
 - **chunk_size:** Determines the maximum number of characters in each chunk when splitting a text. It specifies the size or length of each chunk.
 
-- **separator_type:** The parameter allows the user to split the code with multiple language support. It supports various languages such as Text, Ruby, Python, Solidity, Java, and more. Defaults to `Text`.
+- **separators:** The `separators` in RecursiveCharacterTextSplitter are the characters used to split the text into chunks. The text splitter tries to create chunks based on splitting on the first character in the list of `separators`. If any chunks are too large, it moves on to the next character in the list and continues splitting. Defaults to ["\n\n", "\n", " ", ""].
 
-- **separators:** The `separators` in RecursiveCharacterTextSplitter are the characters used to split the text into chunks. The text splitter tries to create chunks based on splitting on the first character in the list of `separators`. If any chunks are too large, it moves on to the next character in the list and continues splitting. Defaults to `.`
+### LanguageRecursiveTextSplitter
+
+The `LanguageRecursiveTextSplitter` is a text splitter that splits the text into smaller chunks based on the (programming) language of the text.
+
+**Params**
+
+- **Documents:** Input documents to split.
+
+- **chunk_overlap:** Determines the number of characters that overlap between consecutive chunks when splitting text. It specifies how much of the previous chunk should be included in the next chunk.
+
+- **chunk_size:** Determines the maximum number of characters in each chunk when splitting a text. It specifies the size or length of each chunk.
+
+- **separator_type:** The parameter allows the user to split the code with multiple language support. It supports various languages such as Ruby, Python, Solidity, Java, and more. Defaults to `Python`.

docs/docs/deployment/jina-deployment.md

@@ -1,101 +0,0 @@
-# Deploy on Jina AI Cloud
-
-Langflow integrates with langchain-serve to provide a one-command deployment to [Jina AI Cloud](https://github.com/jina-ai/langchain-serve).
-
-Start by installing `langchain-serve` with 
-
-```bash
-pip install -U langchain-serve
-``` 
-
-Then, run:
-
-```bash
-langflow --jcloud
-```
-
-```text
-🎉 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://<your-app>.wolf.jina.ai/
-📖 Read more about managing the server: https://github.com/jina-ai/langchain-serve
-```
-
-**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
-  ```
-## API Usage (with python)
-
-You can use Langflow directly on your browser or the API endpoints on Jina AI Cloud to interact with the server.
-
-```python
-import requests
-
-BASE_API_URL = "https://langflow-e3dd8820ec.wolf.jina.ai/api/v1/predict"
-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": {}
-}
-
-def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
-  """
-  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}"
-
-  payload = {"message": message}
-
-  if tweaks:
-      payload["tweaks"] = tweaks
-
-  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!"
-}
-  ```
-
-:::info
-
-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.
-
-:::

docs/docs/guidelines/api.mdx

@@ -0,0 +1,147 @@
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+
+# API Keys
+
+## Introduction
+
+Langflow offers an API Key functionality that allows users to access their individual components and flows without going through traditional login authentication. The API Key is a user-specific token that can be included in the request's header or query parameter to authenticate API calls. The following documentation outlines how to generate, use, and manage these API Keys in Langflow.
+
+## Generating an API Key
+
+### Through Langflow UI
+
+{/* add image img/api-key.png */}
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/api-key.png"),
+  }}
+  style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
+/>
+
+1. Click on the "API Key" icon.
+2. Click on "Create new secret key".
+3. Give it an optional name.
+4. Click on "Create secret key".
+5. Copy the API key and store it in a secure location.
+
+## Using the API Key
+
+### Using the `x-api-key` Header
+
+Include the `x-api-key` in the HTTP header when making API requests:
+
+```bash
+curl -X POST \
+  http://localhost:3000/api/v1/process/<your_flow_id> \
+  -H 'Content-Type: application/json'\
+  -H 'x-api-key: <your api key>'\
+  -d '{"inputs": {"text":""}, "tweaks": {}}'
+```
+
+With Python using `requests`:
+
+```python
+import requests
+from typing import Optional
+
+BASE_API_URL = "http://localhost:3001/api/v1/process"
+FLOW_ID = "4441b773-0724-434e-9cee-19d995d8f2df"
+# You can tweak the flow by adding a tweaks dictionary
+# e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
+TWEAKS = {}
+
+def run_flow(inputs: dict,
+            flow_id: str,
+            tweaks: Optional[dict] = None,
+            apiKey: Optional[str] = None) -> dict:
+    """
+    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}"
+
+    payload = {"inputs": inputs}
+    headers = {}
+
+    if tweaks:
+        payload["tweaks"] = tweaks
+    if apiKey:
+        headers = {"x-api-key": apiKey}
+
+    response = requests.post(api_url, json=payload, headers=headers)
+    return response.json()
+
+# Setup any tweaks you want to apply to the flow
+inputs = {"text":""}
+api_key = "<your api key>"
+print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS, apiKey=api_key))
+```
+
+### Using the Query Parameter
+
+Alternatively, you can include the API key as a query parameter in the URL:
+
+```bash
+curl -X POST \
+  http://localhost:3000/api/v1/process/<your_flow_id>?x-api-key=<your_api_key> \
+  -H 'Content-Type: application/json'\
+  -d '{"inputs": {"text":""}, "tweaks": {}}'
+```
+
+Or with Python:
+
+```python
+import requests
+
+BASE_API_URL = "http://localhost:3001/api/v1/process"
+FLOW_ID = "4441b773-0724-434e-9cee-19d995d8f2df"
+# You can tweak the flow by adding a tweaks dictionary
+# e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
+TWEAKS = {}
+
+def run_flow(inputs: dict,
+            flow_id: str,
+            tweaks: Optional[dict] = None,
+            apiKey: Optional[str] = None) -> dict:
+    """
+    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}"
+
+    payload = {"inputs": inputs}
+    headers = {}
+
+    if tweaks:
+        payload["tweaks"] = tweaks
+    if apiKey:
+        api_url += f"?x-api-key={apiKey}"
+
+    response = requests.post(api_url, json=payload, headers=headers)
+    return response.json()
+
+# Setup any tweaks you want to apply to the flow
+inputs = {"text":""}
+api_key = "<your api key>"
+print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS, apiKey=api_key))
+```
+
+## Security Considerations
+
+- **Visibility**: The API key won't be retrievable again through the UI for security reasons.
+- **Scope**: The key only allows access to the flows and components of the specific user to whom it was issued.
+
+## Revoking an API Key
+
+To revoke an API key, simply delete it from the UI. This will immediately invalidate the key and prevent it from being used again.

docs/docs/guidelines/async-api.mdx

@@ -0,0 +1,73 @@
+import Admonition from "@theme/Admonition";
+
+# Asynchronous Processing
+
+## Introduction
+
+Starting from version 0.5, Langflow introduces a new feature to its API: the _`sync`_ flag. This flag allows users to opt for asynchronous processing of their flows, freeing up resources and enabling better control over long-running tasks.
+This feature supports running tasks in a Celery worker queue and AnyIO task groups for now.
+
+<Admonition type="warning" caption="Experimental Feature">
+  This is an experimental feature. The default behavior of the API is still
+  synchronous processing. The API may change in the future.
+</Admonition>
+
+## The _`sync`_ Flag
+
+The _`sync`_ flag can be included in the payload of your POST request to the _`/api/v1/process/<your_flow_id>`_ endpoint.
+When set to _`false`_, the API will initiate an asynchronous task instead of processing the flow synchronously.
+
+### API Request with _`sync`_ flag
+
+```bash
+curl -X POST \
+  http://localhost:3000/api/v1/process/<your_flow_id> \
+  -H 'Content-Type: application/json' \
+  -H 'x-api-key: <your_api_key>' \
+  -d '{"inputs": {"text": ""}, "tweaks": {}, "sync": false}'
+```
+
+Response:
+
+```json
+{
+  "result": {
+    "output": "..."
+  },
+  "task": {
+    "id": "...",
+    "href": "api/v1/task/<task_id>"
+  },
+  "session_id": "...",
+  "backend": "..." // celery or anyio
+}
+```
+
+## Checking Task Status
+
+You can check the status of an asynchronous task by making a GET request to the `/task/{task_id}` endpoint.
+
+```bash
+curl -X GET \
+  http://localhost:3000/api/v1/task/<task_id> \
+  -H 'x-api-key: <your_api_key>'
+```
+
+### Response
+
+The endpoint will return the current status of the task and, if completed, the result of the task. Possible statuses include:
+
+- _`PENDING`_: The task is waiting for execution.
+- _`SUCCESS`_: The task has completed successfully.
+- _`FAILURE`_: The task has failed.
+
+Example response for a completed task:
+
+```json
+{
+  "status": "SUCCESS",
+  "result": {
+    "output": "..."
+  }
+}
+```

docs/docs/guidelines/custom-component.mdx

@@ -387,7 +387,7 @@ Your structure should look something like this:
 The recommended way to load custom components is to set the _`LANGFLOW_COMPONENTS_PATH`_ environment variable to the path of your custom components directory. Then, run the Langflow CLI as usual.
 
 ```bash
-export LANGFLOW_COMPONENTS_PATH=/path/to/components
+export LANGFLOW_COMPONENTS_PATH='["/path/to/components"]'
 langflow
 ```
 

docs/docs/guidelines/login.mdx

@@ -0,0 +1,128 @@
+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";
+
+# Sign up and Sign in
+
+## Introduction
+
+The login functionality in Langflow serves to authenticate users and protect sensitive routes in the application. Starting from version 0.5, Langflow introduces an enhanced login mechanism that is governed by a few environment variables. This allows new secure features.
+
+## Environment Variables
+
+The following environment variables are crucial in configuring the login settings:
+
+- _`LANGFLOW_AUTO_LOGIN`_: Determines whether Langflow should automatically log users in. Default is `True`.
+- _`LANGFLOW_SUPERUSER`_: The username of the superuser.
+- _`LANGFLOW_SUPERUSER_PASSWORD`_: The password for the superuser.
+- _`LANGFLOW_SECRET_KEY`_: A key used for encrypting the superuser's password.
+- _`LANGFLOW_NEW_USER_IS_ACTIVE`_: Determines whether new users are automatically activated. Default is `False`.
+
+All of these variables can be passed to the CLI command _`langflow run`_ through the _`--env-file`_ option. For example:
+
+```bash
+langflow run --env-file .env
+```
+
+<Admonition type="info">
+  It is critical not to expose these environment variables in your code
+  repository. Always set them securely in your deployment environment, for
+  example, using Docker secrets, Kubernetes ConfigMaps/Secrets, or dedicated
+  secure environment configuration systems like AWS Secrets Manager.
+</Admonition>
+
+### _`LANGFLOW_AUTO_LOGIN`_
+
+By default, this variable is set to `True`. When enabled (`True`), Langflow operates as it did in versions prior to 0.5—automatic login without requiring explicit user authentication.
+
+To disable automatic login and enforce user authentication:
+
+```bash
+export LANGFLOW_AUTO_LOGIN=False
+```
+
+### _`LANGFLOW_SUPERUSER`_ and _`LANGFLOW_SUPERUSER_PASSWORD`_
+
+These environment variables are only relevant when `LANGFLOW_AUTO_LOGIN` is set to `False`. They specify the username and password for the superuser, which is essential for administrative tasks.
+
+To create a superuser manually:
+
+```bash
+export LANGFLOW_SUPERUSER=admin
+export LANGFLOW_SUPERUSER_PASSWORD=securepassword
+```
+
+You can also use the CLI command `langflow superuser` to set up a superuser interactively.
+
+### _`LANGFLOW_SECRET_KEY`_
+
+This environment variable holds a secret key used for encrypting the superuser's password. Make sure to set this to a secure, randomly generated string.
+
+```bash
+export LANGFLOW_SECRET_KEY=randomly_generated_secure_key
+```
+
+### _`LANGFLOW_NEW_USER_IS_ACTIVE`_
+
+By default, this variable is set to `False`. When enabled (`True`), new users are automatically activated and can log in without requiring explicit activation by the superuser.
+
+## Command-Line Interface
+
+Langflow provides a command-line utility for managing superusers:
+
+```bash
+langflow superuser
+```
+
+This command prompts you to enter the username and password for the superuser, unless they are already set using environment variables.
+
+## Sign-up
+
+With _`LANGFLOW_AUTO_LOGIN`_ set to _`False`_, Langflow requires users to sign up before they can log in. The sign-up page is the default landing page when a user visits Langflow for the first time.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/sign-up.png"),
+  }}
+  style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
+/>
+
+## Profile settings
+
+Users can change their profile settings by clicking on the profile icon in the top right corner of the application. This opens a dropdown menu with the following options:
+
+- **Admin Page**: Opens the admin page, which is only accessible to the superuser.
+- **Profile Settings**: Opens the profile settings page.
+- **Sign Out**: Logs the user out.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/my-account.png"),
+  }}
+  style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
+/>
+
+By clicking on **Profile Settings**, the user is taken to the profile settings page, where they can change their password and their profile picture.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/profile-settings.png"),
+  }}
+  style={{ maxWidth: "600px", margin: "0 auto" }}
+/>
+
+By clicking on **Admin Page**, the superuser is taken to the admin page, where they can manage users and groups.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/admin-page.png"),
+  }}
+  style={{ maxWidth: "600px", margin: "0 auto" }}
+
+/>

docs/docs/guides/async-tasks.mdx

@@ -0,0 +1,44 @@
+import Admonition from "@theme/Admonition";
+
+# Async API
+
+## Introduction
+
+<Admonition type="info" caption="In development">
+  This implementation is still in development. Contributions are welcome!
+</Admonition>
+
+The Async API is an implementation of the Langflow API that uses [Celery](https://docs.celeryproject.org/en/stable/)
+to run the tasks asynchronously, using a message broker to send and receive messages, a result backend to store the results and a cache to store the task states and session data.
+
+### Configuration
+
+The folder _`./deploy`_ in the [Github repository](https://github.com/logspace-ai/langflow) contains a _`.env.example`_ file that can be used to configure a Langflow deployment.
+The file contains the variables required to configure a Celery worker queue, Redis cache and result backend and a RabbitMQ message broker.
+
+To set it up locally you can copy the file to _`.env`_ and run the following command:
+
+```bash
+docker compose up -d
+```
+
+This will set up the following containers:
+
+- Langflow API
+- Celery worker
+- RabbitMQ message broker
+- Redis cache
+- PostgreSQL database
+- PGAdmin
+- Flower
+- Traefik
+- Grafana
+- Prometheus
+
+### Testing
+
+To run the tests for the Async API, you can run the following command:
+
+```bash
+docker compose -f docker-compose.with_tests.yml up --exit-code-from tests tests result_backend broker celeryworker db --build
+```

docs/docs/guides/langfuse_integration.mdx

@@ -0,0 +1,49 @@
+# Integrating Langfuse with Langflow
+
+## Introduction
+
+Langfuse is an open-source tracing and analytics tool designed for LLM applications. Integrating Langfuse with Langflow provides detailed production traces and granular insights into quality, cost, and latency. This integration allows you to monitor and debug your Langflow's chat or APIs easily.
+
+## Step-by-Step Instructions
+
+### Step 1: Create a Langfuse account
+
+1. Go to [Langfuse](https://langfuse.com) and click on the "Sign In" button in the top right corner.
+2. Click on the "Sign Up" button and create an account.
+3. Once logged in, click on "Settings" and then on "Create new API keys."
+4. Copy the Public key and the Secret Key and save them somewhere safe.
+   {/* Add these keys to your environment variables in the following step. */}
+
+### Step 2: Set up Langfuse in Langflow
+
+1. **Export the Environment Variables**: You'll need to export the environment variables `LANGFLOW_LANGFUSE_SECRET_KEY` and `LANGFLOW_LANGFUSE_PUBLIC_KEY` with the values obtained in Step 1.
+
+   You can do this by executing the following commands in your terminal:
+
+   ```bash
+   export LANGFLOW_LANGFUSE_SECRET_KEY=<your secret key>
+   export LANGFLOW_LANGFUSE_PUBLIC_KEY=<your public key>
+   ```
+
+   Alternatively, you can run the Langflow CLI command:
+
+   ```bash
+   LANGFLOW_LANGFUSE_SECRET_KEY=<your secret key> LANGFLOW_LANGFUSE_PUBLIC_KEY=<your public key> langflow
+   ```
+
+   If you are self-hosting Langfuse, you can also set the environment variable `LANGFLOW_LANGFUSE_HOST` to point to your Langfuse instance. By default, Langfuse points to the cloud instance at `https://cloud.langfuse.com`.
+
+2. **Verify Integration**: Ensure that the environment variables are set correctly by checking their existence in your environment, for example by running:
+
+   ```bash
+   echo $LANGFLOW_LANGFUSE_SECRET_KEY
+   echo $LANGFLOW_LANGFUSE_PUBLIC_KEY
+   ```
+
+3. **Monitor Langflow**: Now, whenever you use Langflow's chat or API, you will be able to see the tracing of your conversations in Langfuse.
+
+That's it! You have successfully integrated Langfuse with Langflow, enhancing observability and debugging capabilities for your LLM application.
+
+---
+
+Note: For more details or customized configurations, please refer to the official [Langfuse documentation](https://langfuse.com/docs/integrations/langchain).

docs/docs/guides/superuser.mdx

@@ -0,0 +1,7 @@
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import ReactPlayer from "react-player";
+
+Now, we need to explain what are the permissions the superuser gets. Once logged in, they can activate new users,
+edit them,

docs/package-lock.json

@@ -28,7 +28,7 @@
         "medium-zoom": "^1.0.8",
         "node-fetch": "^3.3.1",
         "path-browserify": "^1.0.1",
-        "postcss": "^8.4.24",
+        "postcss": "^8.4.31",
         "prism-react-renderer": "^1.3.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -13956,9 +13956,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.25",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.25.tgz",
-      "integrity": "sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",

docs/package.json

@@ -34,7 +34,7 @@
     "medium-zoom": "^1.0.8",
     "node-fetch": "^3.3.1",
     "path-browserify": "^1.0.1",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.31",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

docs/sidebars.js

@@ -16,6 +16,9 @@ module.exports = {
       label: "Guidelines",
       collapsed: false,
       items: [
+        "guidelines/login",
+        "guidelines/api",
+        "guidelines/async-api",
         "guidelines/components",
         "guidelines/features",
         "guidelines/collection",
@@ -51,7 +54,12 @@ module.exports = {
       type: "category",
       label: "Step-by-Step Guides",
       collapsed: false,
-      items: ["guides/loading_document", "guides/chatprompttemplate_guide"],
+      items: [
+        "guides/async-tasks",
+        "guides/loading_document",
+        "guides/chatprompttemplate_guide",
+        "guides/langfuse_integration",
+      ],
     },
     // {
     //   type: 'category',
@@ -83,7 +91,7 @@ module.exports = {
       type: "category",
       label: "Deployment",
       collapsed: false,
-      items: ["deployment/gcp-deployment", "deployment/jina-deployment"],
+      items: ["deployment/gcp-deployment"],
     },
     {
       type: "category",