- 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.
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.
- 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.
- 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.
**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. |
- 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.
## 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/components/inputs-and-outputs.mdx b/docs/docs/components/inputs-and-outputs.mdx
new file mode 100644
index 000000000..2a624221a
--- /dev/null
+++ b/docs/docs/components/inputs-and-outputs.mdx
@@ -0,0 +1,161 @@
+import Admonition from "@theme/Admonition";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+
+# Inputs and Outputs
+
+TL;DR: Inputs and Outputs are a category of components that are used to define where data comes in and out of your flow.
+They also dynamically change the Playground and can be renamed to facilitate building and maintaining your flows.
+
+## Inputs
+
+Inputs are components used to define where data enters your flow. They can receive data from the user, a database, or any other source that can be converted to Text or Record.
+
+The difference between Chat Input and other Input components is the output format, the number of configurable fields, and the way they are displayed in the Playground.
+
+Chat Input components can output `Text` or `Record`. When you want to pass the sender name or sender to the next component, use the `Record` output. To pass only the message, use the `Text` output, useful when saving the message to a database or memory system like Zep.
+
+You can find out more about Chat Input and other Inputs [here](#chat-input).
+
+### Chat Input
+
+This component collects user input from the chat.
+
+**Parameters**
+
+- **Sender Type:** Specifies the sender type. Defaults to `User`. Options are `Machine` and `User`.
+- **Sender Name:** Specifies the name of the sender. Defaults to `User`.
+- **Message:** Specifies the message text. It is a multiline text input.
+- **Session ID:** Specifies the session ID of the chat history. If provided, the message will be saved in the Message History.
+
+
+
+ If `As Record` is `true` and the `Message` is a `Record`, the data of the
+ `Record` will be updated with the `Sender`, `Sender Name`, and `Session ID`.
+
+
+
+
+
+One significant capability of the Chat Input component is its ability to transform the Playground into a chat window. This feature is particularly valuable for scenarios requiring user input to initiate or influence the flow.
+
+
+
+### Text Input
+
+The **Text Input** component adds an **Input** field on the Playground. This enables you to define parameters while running and testing your flow.
+
+**Parameters**
+
+- **Value:** Specifies the text input value. This is where the user inputs text data that will be passed to the next component in the sequence. If no value is provided, it defaults to an empty string.
+- **Record Template:** Specifies how a `Record` should be converted into `Text`.
+
+The **Record Template** field is used to specify how a `Record` should be converted into `Text`. This is particularly useful when you want to extract specific information from a `Record` and pass it as text to the next component in the sequence.
+
+For example, if you have a `Record` with the following structure:
+
+```json
+{
+ "name": "John Doe",
+ "age": 30,
+ "email": "johndoe@email.com"
+}
+```
+
+A template with `Name: {name}, Age: {age}` will convert the `Record` into a text string of `Name: John Doe, Age: 30`.
+
+If you pass more than one `Record`, the text will be concatenated with a new line separator.
+
+
+
+## Outputs
+
+Outputs are components that are used to define where data comes out of your flow. They can be used to send data to the user, to the Playground, or to define how the data will be displayed in the Playground.
+
+The Chat Output works similarly to the Chat Input but does not have a field that allows for written input. It is used as an Output definition and can be used to send data to the user.
+
+You can find out more about it and the other Outputs [here](#chat-output).
+
+### Chat Output
+
+This component sends a message to the chat.
+
+**Parameters**
+
+- **Sender Type:** Specifies the sender type. Default is `"Machine"`. Options are `"Machine"` and `"User"`.
+
+- **Sender Name:** Specifies the sender's name. Default is `"AI"`.
+
+- **Session ID:** Specifies the session ID of the chat history. If provided, messages are saved in the Message History.
+
+- **Message:** Specifies the text of the message.
+
+
+
+ If `As Record` is `true` and the `Message` is a `Record`, the data in the
+ `Record` is updated with the `Sender`, `Sender Name`, and `Session ID`.
+
+
+
+### Text Output
+
+This component displays text data to the user. It is useful when you want to show text without sending it to the chat.
+
+**Parameters**
+
+- **Value:** Specifies the text data to be displayed. Defaults to an empty string.
+
+The `TextOutput` component provides a simple way to display text data. It allows textual data to be visible in the chat window during your interaction flow.
+
+## Prompts
+
+A prompt is the input provided to a language model, consisting of multiple components and can be parameterized using prompt templates. A prompt template offers a reproducible method for generating prompts, enabling easy customization through input variables.
+
+### Prompt
+
+This component creates a prompt template with dynamic variables. This is useful for structuring prompts and passing dynamic data to a language model.
+
+**Parameters**
+
+- **Template:** The template for the prompt. This field allows you to create other fields dynamically by using curly brackets `{}`. For example, if you have a template like `Hello {name}, how are you?`, a new field called `name` will be created. Prompt variables can be created with any name inside curly brackets, e.g. `{variable_name}`.
+
+
+
+### PromptTemplate
+
+The `PromptTemplate` component enables users to create prompts and define variables that control how the model is instructed. Users can input a set of variables which the template uses to generate the prompt when a conversation starts.
+
+
+ After defining a variable in the prompt template, it acts as its own component
+ input. See [Prompt Customization](../administration/prompt-customization) for
+ more details.
+
+
+- **template:** The template used to format an individual request.
diff --git a/docs/docs/components/inputs.mdx b/docs/docs/components/inputs.mdx
deleted file mode 100644
index 854f7fee3..000000000
--- a/docs/docs/components/inputs.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
-import Admonition from '@theme/Admonition';
-import ZoomableImage from "/src/theme/ZoomableImage.js";
-
-# Inputs
-
-## Chat Input
-
-This component obtains user input from the chat.
-
-**Parameters**
-
-- **Sender Type:** Specifies the sender type. Defaults to `User`. Options are `Machine` and `User`.
-- **Sender Name:** Specifies the name of the sender. Defaults to `User`.
-- **Message:** Specifies the message text. It is a multiline text input.
-- **Session ID:** Specifies the session ID of the chat history. If provided, the message will be saved in the Message History.
-
-
-
- If `As Record` is `true` and the `Message` is a `Record`, the data
- of the `Record` will be updated with the `Sender`, `Sender Name`, and
- `Session ID`.
-
-
-
-
-
-One significant capability of the Chat Input component is its ability to transform the Playground into a chat window. This feature is particularly valuable for scenarios requiring user input to initiate or influence the flow.
-
-
-
----
-
-## Prompt
-
-This component creates a prompt template with dynamic variables. This is useful for structuring prompts and passing dynamic data to a language model.
-
-**Parameters**
-
-- **Template:** The template for the prompt. This field allows you to create other fields dynamically by using curly brackets `{}`. For example, if you have a template like `Hello {name}, how are you?`, a new field called `name` will be created. Prompt variables can be created with any name inside curly brackets, e.g. `{variable_name}`.
-
-
-
----
-
-## Text Input
-
-The **Text Input** component adds an **Input** field on the Playground. This enables you to define parameters while running and testing your flow.
-
-**Parameters**
-
-- **Value:** Specifies the text input value. This is where the user inputs text data that will be passed to the next component in the sequence. If no value is provided, it defaults to an empty string.
-- **Record Template:** Specifies how a `Record` should be converted into `Text`.
-
-The **Record Template** field is used to specify how a `Record` should be converted into `Text`. This is particularly useful when you want to extract specific information from a `Record` and pass it as text to the next component in the sequence.
-
-For example, if you have a `Record` with the following structure:
-
-```json
-{
- "name": "John Doe",
- "age": 30,
- "email": "johndoe@email.com"
-}
-```
-
-A template with `Name: {name}, Age: {age}` will convert the `Record` into a text string of `Name: John Doe, Age: 30`.
-
-If you pass more than one `Record`, the text will be concatenated with a new line separator.
-
-
-
diff --git a/docs/docs/components/outputs.mdx b/docs/docs/components/outputs.mdx
deleted file mode 100644
index a8947e60e..000000000
--- a/docs/docs/components/outputs.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Admonition from '@theme/Admonition';
-
-# Outputs
-
-## Chat Output
-
-This component sends a message to the chat.
-
-**Parameters**
-
-- **Sender Type:** Specifies the sender type. Default is `"Machine"`. Options are `"Machine"` and `"User"`.
-
-- **Sender Name:** Specifies the sender's name. Default is `"AI"`.
-
-- **Session ID:** Specifies the session ID of the chat history. If provided, messages are saved in the Message History.
-
-- **Message:** Specifies the text of the message.
-
-
-
- If `As Record` is `true` and the `Message` is a `Record`, the data in the `Record` is updated with the `Sender`, `Sender Name`, and `Session ID`.
-
-
-
-## Text Output
-
-This component displays text data to the user. It is useful when you want to show text without sending it to the chat.
-
-**Parameters**
-
-- **Value:** Specifies the text data to be displayed. Defaults to an empty string.
-
-
-The `TextOutput` component provides a simple way to display text data. It allows textual data to be visible in the chat window during your interaction flow.
diff --git a/docs/docs/components/prompts.mdx b/docs/docs/components/prompts.mdx
deleted file mode 100644
index 19fdedf11..000000000
--- a/docs/docs/components/prompts.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-import Admonition from "@theme/Admonition";
-
-# Prompts
-
-
-
- Thank you for your patience as we refine our documentation. It may
- still have some areas under development. Please share your feedback or report any issues to help us improve!
-
-
-
-A prompt is the input provided to a language model, consisting of multiple components and can be parameterized using prompt templates. A prompt template offers a reproducible method for generating prompts, enabling easy customization through input variables.
-
----
-
-### PromptTemplate
-
-The `PromptTemplate` component enables users to create prompts and define variables that control how the model is instructed. Users can input a set of variables which the template uses to generate the prompt when a conversation starts.
-
-
- After defining a variable in the prompt template, it acts as its own component
- input. See [Prompt Customization](../administration/prompt-customization) for more details.
-
-
-- **template:** The template used to format an individual request.
diff --git a/docs/docs/components/text-and-record.mdx b/docs/docs/components/text-and-record.mdx
new file mode 100644
index 000000000..24c16e4aa
--- /dev/null
+++ b/docs/docs/components/text-and-record.mdx
@@ -0,0 +1,49 @@
+# Text and Record
+
+In Langflow 1.0, we added two main input and output types: `Text` and `Record`.
+
+`Text` is a simple string input and output type, while `Record` is a structure very similar to a dictionary in Python. It is a key-value pair data structure.
+
+We've created a few components to help you work with these types. Let's see how a few of them work.
+
+## Records To Text
+
+This is a component that takes in Records and outputs a `Text`. It does this using a template string and concatenating the values of the `Record`, one per line.
+
+If we have the following Records:
+
+```json
+{
+ "sender_name": "Alice",
+ "message": "Hello!"
+}
+{
+ "sender_name": "John",
+ "message": "Hi!"
+}
+```
+
+And the template string is: _`{sender_name}: {message}`_
+
+The output is:
+
+```
+Alice: Hello!
+John: Hi!
+```
+
+## Create Record
+
+This component allows you to create a `Record` from a number of inputs. You can add as many key-value pairs as you want (as long as it is less than 15). Once you've picked that number you'll need to write the name of the Key and can pass `Text` values from other components to it.
+
+## Documents To Records
+
+This component takes in a LangChain `Document` and outputs a `Record`. It does this by extracting the `page_content` and the `metadata` from the `Document` and adding them to the `Record` as text and data respectively.
+
+## Why is this useful?
+
+The idea was to create a unified way to work with complex data in Langflow and to make it easier to work with data that is not just a simple string. This way you can create more complex workflows and use the data in more ways.
+
+## What's next?
+
+We are planning to integrate an array of modalities to Langflow, such as images, audio, and video. This will allow you to create even more complex workflows and use cases. Stay tuned for more updates! 🚀
diff --git a/docs/docs/components/vector-stores.mdx b/docs/docs/components/vector-stores.mdx
index 7e21f1021..6072abe29 100644
--- a/docs/docs/components/vector-stores.mdx
+++ b/docs/docs/components/vector-stores.mdx
@@ -1,6 +1,6 @@
import Admonition from "@theme/Admonition";
-# Vector Stores Documentation
+# Vector Stores
### Astra DB
diff --git a/docs/docs/examples/chat-memory.mdx b/docs/docs/examples/chat-memory.mdx
index d9b7d2e20..88dbbca2b 100644
--- 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" }}
>
-
\ No newline at end of file
+
diff --git a/docs/docs/examples/combine-text.mdx b/docs/docs/examples/combine-text.mdx
index 0d7524a5b..5a4e86cf0 100644
--- 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" }}
>
- 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.
-
-
-
-In the top right corner of the component, you'll find the component status icon ().
-Build the flow by clicking the **Playground** at the bottom right of the canvas.
-
-Once the validation is complete, the status of each validated component should turn green ().
-To debug, hover over the component status to see the outputs.
-
-
-
----
-
-### Component Parameters
-
-Langflow components can be edited by clicking the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation.
-
-