langflow-ai · lucaseduoli · Jun 5, 2024 · May 24, 2024 · May 24, 2024 · May 24, 2024
diff --git a/docs/docs/components/custom.mdx b/docs/docs/components/custom.mdx
@@ -3,7 +3,8 @@ import Admonition from "@theme/Admonition";
 # Custom Components
 
 <Admonition type="info" label="Tip">
-  Read the [Custom Component Guidelines](../administration/custom-component) for detailed information on custom components.
+  Read the [Custom Component Guidelines](../administration/custom-component) for
+  detailed information on custom components.
 </Admonition>
 
 Custom components let you extend Langflow by creating reusable and configurable components from a Python script.
@@ -31,57 +32,60 @@ This class is the foundation for creating custom components. It allows users to
 
 The following types are supported in the build method:
 
-| Supported Types                                           |
-| --------------------------------------------------------- |
-| _`str`_, _`int`_, _`float`_, _`bool`_, _`list`_, _`dict`_ |
-| _`langflow.field_typing.NestedDict`_                      |
-| _`langflow.field_typing.Prompt`_                          |
-| _`langchain.chains.base.Chain`_                           |
-| _`langchain.PromptTemplate`_                              |
+| Supported Types                                                   |
+| ----------------------------------------------------------------- |
+| _`str`_, _`int`_, _`float`_, _`bool`_, _`list`_, _`dict`_         |
+| _`langflow.field_typing.NestedDict`_                              |
+| _`langflow.field_typing.Prompt`_                                  |
+| _`langchain.chains.base.Chain`_                                   |
+| _`langchain.PromptTemplate`_                                      |
 | _`from langchain.schema.language_model import BaseLanguageModel`_ |
-| _`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`_                        |
+| _`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`_                                |
 
 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">
-  Use the `Prompt` type by adding **kwargs to the build method.
-  If you want to add the values of the variables to the template you defined, format the `PromptTemplate` inside the `CustomComponent` class.
+  Use the `Prompt` type by adding **kwargs to the build method. If you want to
+  add the values of the variables to the template you defined, format the
+  `PromptTemplate` inside the `CustomComponent` class.
 </Admonition>
 
 <Admonition type="info">
-  Use base Python types without a handle by default. To add handles, use the `input_types` key in the `build_config` method.
+  Use base Python types without a handle by default. To add handles, use the
+  `input_types` key in the `build_config` method.
 </Admonition>
 
 **build_config:** Defines the configuration fields of the component. This method returns a dictionary where each key represents a field name and each value defines the field's behavior.
 
 Supported keys for configuring fields:
 
-| Key                   | Description                                         |
-| --------------------- | --------------------------------------------------- |
-| `is_list`             | Boolean indicating if the field can hold multiple values. |
-| `options`             | Dropdown menu options.                              |
-| `multiline`           | Boolean indicating if a field allows multiline input. |
-| `input_types`         | Allows connection handles for string fields.        |
-| `display_name`        | Field name displayed in the UI.                     |
-| `advanced`            | Hides the field in the default UI view.             |
-| `password`            | Masks input, useful for sensitive data.             |
-| `required`            | Overrides the default behavior to make a field mandatory. |
-| `info`                | Tooltip for the field.                              |
-| `file_types`          | Accepted file types, useful for file fields.        |
-| `range_spec`          | Defines valid ranges for float fields.              |
-| `title_case`          | Boolean that controls field name capitalization.    |
-| `refresh_button`      | Adds a refresh button that updates field values.    |
-| `real_time_refresh`   | Updates the configuration as field values change.   |
-| `field_type`          | Automatically set based on the build method's type hint. |
+| Key                 | Description                                               |
+| ------------------- | --------------------------------------------------------- |
+| `is_list`           | Boolean indicating if the field can hold multiple values. |
+| `options`           | Dropdown menu options.                                    |
+| `multiline`         | Boolean indicating if a field allows multiline input.     |
+| `input_types`       | Allows connection handles for string fields.              |
+| `display_name`      | Field name displayed in the UI.                           |
+| `advanced`          | Hides the field in the default UI view.                   |
+| `password`          | Masks input, useful for sensitive data.                   |
+| `required`          | Overrides the default behavior to make a field mandatory. |
+| `info`              | Tooltip for the field.                                    |
+| `file_types`        | Accepted file types, useful for file fields.              |
+| `range_spec`        | Defines valid ranges for float fields.                    |
+| `title_case`        | Boolean that controls field name capitalization.          |
+| `refresh_button`    | Adds a refresh button that updates field values.          |
+| `real_time_refresh` | Updates the configuration as field values change.         |
+| `field_type`        | Automatically set based on the build method's type hint.  |
 
 <Admonition type="info" label="Tip">
-  Use the `update_build_config` method to dynamically update configurations based on field values.
+  Use the `update_build_config` method to dynamically update configurations
+  based on field values.
 </Admonition>
 
 ## Additional methods and attributes
@@ -99,4 +103,3 @@ The `CustomComponent` class also provides helpful methods for specific tasks (e.
 - `status`: Shows values from the `build` method, useful for debugging.
 - `field_order`: Controls the display order of fields.
 - `icon`: Sets the canvas display icon.
-
diff --git a/docs/docs/examples/chat-memory.mdx b/docs/docs/examples/chat-memory.mdx
@@ -14,4 +14,4 @@ This component is available under the **Helpers** tab of the Langflow preview.
   style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
 >
   <ReactPlayer playing controls url="/videos/chat_memory.mp4" />
-</div>
+</div>
diff --git a/docs/docs/examples/combine-text.mdx b/docs/docs/examples/combine-text.mdx
@@ -18,4 +18,4 @@ This component is available under the **Helpers** tab of the Langflow preview.
   style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
 >
   <ReactPlayer playing controls url="/videos/combine_text.mp4" />
-</div>
+</div>
diff --git a/docs/docs/examples/create-record.mdx b/docs/docs/examples/create-record.mdx
@@ -14,4 +14,4 @@ The **Create Record** component allows you to dynamically create a `Record` from
   style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
 >
   <ReactPlayer playing controls url="/videos/create_record.mp4" />
-</div>
+</div>
diff --git a/docs/docs/examples/pass.mdx b/docs/docs/examples/pass.mdx
@@ -14,4 +14,4 @@ The **Pass** component enables you to ignore one input and move forward with ano
   style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
 >
   <ReactPlayer playing controls url="/videos/pass.mp4" />
-</div>
+</div>
diff --git a/docs/docs/examples/store-message.mdx b/docs/docs/examples/store-message.mdx
@@ -14,4 +14,4 @@ The **Message History** component can then be used to retrieve stored messages.
   style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
 >
   <ReactPlayer playing controls url="/videos/store_message.mp4" />
-</div>
+</div>
diff --git a/docs/docs/examples/sub-flow.mdx b/docs/docs/examples/sub-flow.mdx
@@ -12,4 +12,4 @@ The **Sub Flow** component enables a user to select a previously built flow and
   style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
 >
   <ReactPlayer playing controls url="/videos/sub_flow.mp4" />
-</div>
+</div>
diff --git a/docs/docs/examples/text-operator.mdx b/docs/docs/examples/text-operator.mdx
@@ -12,4 +12,4 @@ The **Text Operator** component simplifies logic. It evaluates the results from
   style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
 >
   <ReactPlayer playing controls url="/videos/text_operator.mp4" />
-</div>
+</div>
diff --git a/docs/docs/getting-started/canvas.mdx b/docs/docs/getting-started/canvas.mdx
@@ -56,7 +56,8 @@ Components are the building blocks of flows. They consist of inputs, outputs, an
 <div style={{ marginBottom: "20px" }}>
   During the flow creation process, you will notice handles (colored circles)
   attached to one or both sides of a component. These handles represent the
-  availability to connect to other components. Hover over a handle to see connection details.
+  availability to connect to other components. Hover over a handle to see
+  connection details.
 </div>
 
 <div style={{ marginBottom: "20px" }}>
@@ -85,6 +86,7 @@ Build the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playgr
 
 Once the validation is complete, the status of each validated component should turn green (![Status icon](/logos/greencheck.svg)).
 To debug, hover over the component status to see the outputs.
+
 </div>
 
 ---
@@ -196,6 +198,7 @@ curl -X POST \
 ```
 
 Result:
+
 ```
 {"session_id":"f2eefd80-bb91-4190-9279-0d6ffafeaac4:53856a772b8e1cfcb3dd2e71576b5215399e95bae318d3c02101c81b7c252da3","outputs":[{"inputs":{"input_value":"is anybody there?"},"outputs":[{"results":{"result":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?"},"artifacts":{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI"},"messages":[{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI","component_id":"ChatOutput-njtka"}],"component_display_name":"Chat Output","component_id":"ChatOutput-njtka"}]}]}%
 ```
@@ -231,9 +234,10 @@ A collection is a snapshot of flows available in a database.
 
 Collections can be downloaded to local storage and uploaded for future use.
 
-<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
-<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
-  />
+<div
+  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
+>
+  <ReactPlayer playing controls url="/videos/langflow_collection.mp4" />
 </div>
 
 ## Project
@@ -276,9 +280,3 @@ To see options for your project, in the upper left corner of the canvas, select
 **Export** - Download your current project to your local machine as a `.json` file.
 
 **Undo** or **Redo** - Undo or redo your last action.
-
-
-
-
-
-
diff --git a/docs/docs/getting-started/flows-components-collections.mdx b/docs/docs/getting-started/flows-components-collections.mdx
@@ -1,7 +1,7 @@
-import ThemedImage from '@theme/ThemedImage';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import ZoomableImage from '/src/theme/ZoomableImage.js';
-import ReactPlayer from 'react-player';
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import ReactPlayer from "react-player";
 
 # 🖥️ Flows, components, collections, and projects
 
@@ -17,10 +17,4 @@ A [project](#project) can be a component or a flow. Projects are saved as part o
 
 For example, the **OpenAI LLM** is a **component** of the **Basic prompting** flow, and the **flow** is stored in a **collection**.
 
-
-
 ## Component
-
-
-
-
diff --git a/docs/docs/getting-started/install-langflow.mdx b/docs/docs/getting-started/install-langflow.mdx
@@ -6,33 +6,40 @@ import Admonition from "@theme/Admonition";
 # 📦 Install Langflow
 
 <Admonition type="info">
-  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true), to create your own Langflow workspace in minutes.
+  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
+  using this
+  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true),
+  to create your own Langflow workspace in minutes.
 </Admonition>
 
 Langflow requires [Python >=3.10](https://www.python.org/downloads/release/python-3100/) and [pip](https://pypi.org/project/pip/) or [pipx](https://pipx.pypa.io/stable/installation/) to be installed on your system.
 
 Install Langflow with pip:
+
 ```bash
 python -m pip install langflow -U
 ```
 
 Install Langflow with pipx:
+
 ```bash
 pipx install langflow --python python3.10 --fetch-missing-python
 ```
-Pipx can fetch the missing Python version for you with `--fetch-missing-python`, but you can also install the Python version manually.
 
+Pipx can fetch the missing Python version for you with `--fetch-missing-python`, but you can also install the Python version manually.
 
 ## Install Langflow pre-release
 
 To install a pre-release version of Langflow:
 
 pip:
+
 ```bash
 python -m pip install langflow --pre --force-reinstall
 ```
 
 pipx:
+
 ```bash
 pipx install langflow --python python3.10 --fetch-missing-python --pip-args="--pre --force-reinstall"
 ```
@@ -52,11 +59,13 @@ python -m langflow --help
 ## ⛓️ Run Langflow
 
 1. To run Langflow, enter the following command.
+
 ```bash
 python -m langflow run
 ```
 
 2. Confirm that a local Langflow instance starts by visiting `http://127.0.0.1:7860` in a Chromium-based browser.
+
 ```bash
 │ Welcome to ⛓ Langflow                             │
 │                                                   │
@@ -83,4 +92,4 @@ You'll be presented with the following screen:
   style={{ width: "100%", margin: "20px auto" }}
 />
 
-Name your Space, define the visibility (Public or Private), and click on **Duplicate Space** to start the installation process. When installation is finished, you'll be redirected to the Space's main page to start using Langflow right away!
+Name your Space, define the visibility (Public or Private), and click on **Duplicate Space** to start the installation process. When installation is finished, you'll be redirected to the Space's main page to start using Langflow right away!
diff --git a/docs/docs/getting-started/quickstart.mdx b/docs/docs/getting-started/quickstart.mdx
@@ -10,12 +10,15 @@ This guide demonstrates how to build a basic prompt flow and modify that prompt
 
 ## Prerequisites
 
-* [Langflow installed and running](./install-langflow.mdx)
+- [Langflow installed and running](./install-langflow.mdx)
 
-* [OpenAI API key](https://platform.openai.com)
+- [OpenAI API key](https://platform.openai.com)
 
 <Admonition type="info">
-  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes.
+  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
+  using this
+  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
+  to create your own Langflow workspace in minutes.
 </Admonition>
 
 ## Hello World - Basic Prompting
@@ -44,25 +47,25 @@ Examine the **Prompt** component. The **Template** field instructs the LLM to `A
 This should be interesting...
 
 4. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
-    1. In the **Variable Name** field, enter `openai_api_key`.
-    2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
-    3. Click **Save Variable**.
+   1. In the **Variable Name** field, enter `openai_api_key`.
+   2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
+   3. Click **Save Variable**.
 
 ## Run the basic prompting flow
 
 1. Click the **Run** button.
-The **Interaction Panel** opens, where you can chat with your bot.
+   The **Interaction Panel** opens, where you can chat with your bot.
 2. Type a message and press Enter.
-And... Ahoy! 🏴‍☠️
-The bot responds in a piratical manner!
+   And... Ahoy! 🏴‍☠️
+   The bot responds in a piratical manner!
 
 ## Modify the prompt for a different result
 
 1. To modify your prompt results, in the **Prompt** template, click the **Template** field.
-The **Edit Prompt** window opens.
+   The **Edit Prompt** window opens.
 2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Harold Abelson.`
 3. Run the basic prompting flow again.
-The response will be markedly different.
+   The response will be markedly different.
 
 ## Next steps
 
@@ -72,8 +75,6 @@ By adding Langflow components to your flow, you can create all sorts of interest
 
 Here are a couple of examples:
 
-* [Memory chatbot](/starter-projects/memory-chatbot.mdx)
-* [Blog writer](/starter-projects/blog-writer.mdx)
-* [Document QA](/starter-projects/document-qa.mdx)
-
-
+- [Memory chatbot](/starter-projects/memory-chatbot.mdx)
+- [Blog writer](/starter-projects/blog-writer.mdx)
+- [Document QA](/starter-projects/document-qa.mdx)
diff --git a/docs/docs/index.mdx b/docs/docs/index.mdx
@@ -29,7 +29,10 @@ Its intuitive interface allows for easy manipulation of AI building blocks, enab
 - [Langflow Canvas](/getting-started/canvas) - Learn more about the Langflow canvas.
 
 <Admonition type="info">
-  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes.
+  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
+  using this
+  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
+  to create your own Langflow workspace in minutes.
 </Admonition>
 
 ## Learn more about Langflow 1.0