jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Merge branch 'dev' into cz/inspection

Browse source
This commit is contained in:
anovazzi1 2024-06-05 20:07:11 -03:00
commit e2c1f2f027
179 changed files with 7657 additions and 6695 deletions
Download patch file Download diff file Expand all files Collapse all files

87
docs/docs/administration/global-env.mdx
View file

@ -1,31 +1,39 @@
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import Admonition from "@theme/Admonition";
import ReactPlayer from "react-player";
import Admonition from "@theme/Admonition";
# Global Environment Variables
# Global Variables
Langflow 1.0 alpha includes the option to add **Global Environment Variables** for your application.
Global Variables are a useful feature of Langflow, allowing you to define reusable variables accessed from any Text field in your project.
## Add a global variable to a project
## TL;DR
In this example, you'll add the `openai_api_key` credential as a global environment variable to the **Basic Prompting** starter project.
- Global Variables are reusable variables accessible from any Text field in your project.
- To create one, click the 🌐 button in a Text field and then **+ Add New Variable**.
- Define the **Name**, **Type**, and **Value** of the variable.
- Click **Save Variable** to create it.
- All Credential Global Variables are encrypted and accessible only by you.
- Set _`LANGFLOW_STORE_ENVIRONMENT_VARIABLES`_ to _`true`_ in your `.env` file to add all variables in _`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`_ to your user's Global Variables.
For more information on the starter flow, see [Basic prompting](../starter-projects/basic-prompting.mdx).
## Creating and Adding a Global Variable
1. From the Langflow dashboard, click **New Project**.
2. Select **Basic Prompting**.
To create and add a global variable, click the 🌐 button in a Text field, and then click **+ Add New Variable**.
The **Basic Prompting** flow is created.
Text fields are where you write text without opening a Text area, and are identified with the 🌐 icon.
3. To create an environment variable for the **OpenAI** component:
1. In the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
2. In the **Variable Name** field, enter `openai_api_key`.
3. In the **Value** field, paste your OpenAI API Key (`sk-...`).
4. For the variable **Type**, select **Credential**.
5. In the **Apply to Fields** field, select **OpenAI API Key** to apply this variable to all fields named **OpenAI API Key**.
6. Click **Save Variable**.
For example, to create an environment variable for the **OpenAI** component:
1. In the **OpenAI API Key** text field, click the 🌐 button, then **Add New Variable**.
2. Enter `openai_api_key` in the **Variable Name** field.
3. Paste your OpenAI API Key (`sk-...`) in the **Value** field.
4. Select **Credential** for the **Type**.
5. Choose **OpenAI API Key** in the **Apply to Fields** field to apply this variable to all fields named **OpenAI API Key**.
6. Click **Save Variable**.
You now have a `openai_api_key` global environment variable for your Langflow project.
Subsequently, clicking the 🌐 button in a Text field will display the new variable in the dropdown.
<Admonition type="tip">
You can also create global variables in **Settings** > **Variables and
@ -41,10 +49,55 @@ You now have a `openai_api_key` global environment variable for your Langflow pr
style={{ width: "40%", margin: "20px auto" }}
/>
4. To view and manage your project's global environment variables, visit **Settings** > **Variables and Secrets**.
To view and manage your project's global environment variables, visit **Settings** > **Variables and Secrets**.
For more on variables in HuggingFace Spaces, see [Managing Secrets](https://huggingface.co/docs/hub/spaces-overview#managing-secrets).
{/* All variables are encrypted */}
<Admonition type="warning">
All Credential Global Variables are encrypted and accessible only by you.
</Admonition>
## Configuring Environment Variables in your .env file
Setting `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to `true` in your `.env` file (default) adds all variables in `LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT` to your user's Global Variables.
These variables are accessible like any other Global Variable.
<Admonition type="tip">
To prevent this behavior, set `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to
`false` in your `.env` file.
</Admonition>
You can specify variables to get from the environment by listing them in `LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`.
Specify variables as a comma-separated list (e.g., _`"VARIABLE1, VARIABLE2"`_) or a JSON-encoded string (e.g., _`'["VARIABLE1", "VARIABLE2"]'`_).
The default list of variables includes:
- ANTHROPIC_API_KEY
- ASTRA_DB_API_ENDPOINT
- ASTRA_DB_APPLICATION_TOKEN
- AZURE_OPENAI_API_KEY
- AZURE_OPENAI_API_DEPLOYMENT_NAME
- AZURE_OPENAI_API_EMBEDDINGS_DEPLOYMENT_NAME
- AZURE_OPENAI_API_INSTANCE_NAME
- AZURE_OPENAI_API_VERSION
- COHERE_API_KEY
- GOOGLE_API_KEY
- GROQ_API_KEY
- HUGGINGFACEHUB_API_TOKEN
- OPENAI_API_KEY
- PINECONE_API_KEY
- SEARCHAPI_API_KEY
- SERPAPI_API_KEY
- UPSTASH_VECTOR_REST_URL
- UPSTASH_VECTOR_REST_TOKEN
- VECTARA_CUSTOMER_ID
- VECTARA_CORPUS_ID
- VECTARA_API_KEY
## Video
<div

77
docs/docs/components/custom.mdx
View file

@ -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.

161
docs/docs/components/inputs-and-outputs.mdx Normal file
View file

@ -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.
<Admonition type="note" title="Note">
<p>
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`.
</p>
</Admonition>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/chat-input-expanded.png",
dark: "img/chat-input-expanded.png",
}}
style={{ width: "40%", margin: "20px auto" }}
/>
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.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/interaction-panel-with-chat-input.png",
dark: "img/interaction-panel-with-chat-input.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
### 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.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/text-input-expanded.png",
dark: "img/text-input-expanded.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
## 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.
<Admonition type="note" title="Note">
<p>
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`.
</p>
</Admonition>
### 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}`.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/prompt-with-template.png",
dark: "img/prompt-with-template.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
### 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.
<Admonition type="info">
After defining a variable in the prompt template, it acts as its own component
input. See [Prompt Customization](../administration/prompt-customization) for
more details.
</Admonition>
- **template:** The template used to format an individual request.

99
docs/docs/components/inputs.mdx
View file

@ -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.
<Admonition type="note" title="Note">
<p>
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`.
</p>
</Admonition>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/chat-input-expanded.png",
dark: "img/chat-input-expanded.png",
}}
style={{ width: "40%", margin: "20px auto" }}
/>
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.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/interaction-panel-with-chat-input.png",
dark: "img/interaction-panel-with-chat-input.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
---
## 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}`.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/prompt-with-template.png",
dark: "img/prompt-with-template.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
---
## 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.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/text-input-expanded.png",
dark: "img/text-input-expanded.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>

34
docs/docs/components/outputs.mdx
View file

@ -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.
<Admonition type="note" title="Note">
<p>
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`.
</p>
</Admonition>
## 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.

25
docs/docs/components/prompts.mdx
View file

@ -1,25 +0,0 @@
import Admonition from "@theme/Admonition";
# Prompts
<Admonition type="caution" icon="🚧" title="Zone Under Construction">
<p>
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!
</p>
</Admonition>
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.
<Admonition type="info">
After defining a variable in the prompt template, it acts as its own component
input. See [Prompt Customization](../administration/prompt-customization) for more details.
</Admonition>
- **template:** The template used to format an individual request.

49
docs/docs/components/text-and-record.mdx Normal file
View file

@ -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! 🚀

2
docs/docs/components/vector-stores.mdx
View file

@ -1,6 +1,6 @@
import Admonition from "@theme/Admonition";
# Vector Stores Documentation
# Vector Stores
### Astra DB

2
docs/docs/examples/chat-memory.mdx
View file

@ -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>

2
docs/docs/examples/combine-text.mdx
View file

@ -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>

2
docs/docs/examples/create-record.mdx
View file

@ -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>

2
docs/docs/examples/pass.mdx
View file

@ -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>

2
docs/docs/examples/store-message.mdx
View file

@ -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>

2
docs/docs/examples/sub-flow.mdx
View file

@ -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>

2
docs/docs/examples/text-operator.mdx
View file

@ -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>

72
docs/docs/getting-started/flows-components-collections.mdx
View file

@ -18,75 +18,3 @@ 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
Components are the building blocks of flows. They consist of inputs, outputs, and parameters that define their functionality. These elements provide a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work in the LangChain [documentation](https://python.langchain.com/docs/integrations/components).
<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.
</div>
<div style={{ marginBottom: "20px" }}>
For example, if you select a <code>ConversationChain</code> component, you
will see orange <span style={{ color: "orange" }}>o</span> and purple{" "}
<span style={{ color: "purple" }}>o</span> input handles. They indicate that
this component accepts an LLM and a Memory component as inputs. The red
asterisk <span style={{ color: "red" }}>*</span> means that at least one input
of that type is required.
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/single-component.png"),
dark: useBaseUrl("img/single-component.png"),
}}
style={{ width: "50%", maxWidth: "800px", margin: "20px auto" }}
/>
<div style={{ marginBottom: "20px" }}>
In the top right corner of the component, you'll find the component status icon (![Status icon](/logos/playbutton.svg)).
Build the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** at the bottom right of the canvas.
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>
---
### 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.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
</div>
## Collection
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>
## Project
A **Project** can be a flow or a component. To view your saved projects, select **My Collection**.
Your **Projects** are displayed.
Click the **![Playground icon](/logos/botmessage.svg) Playground** button to run a flow from the **My Collection** screen.
In the top left corner of the screen are options for **Download Collection**, **Upload Collection**, and **New Project**.

4
docs/docs/index.mdx
View file

@ -14,8 +14,8 @@ Its intuitive interface allows for easy manipulation of AI building blocks, enab
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/new_langflow_demo.gif",
dark: "img/new_langflow_demo.gif",
light: "img/langflow_basic_howto.gif",
dark: "img/langflow_basic_howto.gif",
}}
style={{ width: "100%" }}
/>

7
docs/docs/integrations/notion/add-content-to-page.md
View file

@ -9,14 +9,11 @@ The `AddContentToPage` component converts markdown text to Notion blocks and app
[Notion Reference](https://developers.notion.com/reference/patch-block-children)
<Admonition type="tip" title="Component Functionality">
The `AddContentToPage` component enables you to:
- Convert markdown text to Notion blocks.
- Append the converted blocks to a specified Notion page.
- Seamlessly integrate Notion content creation into Langflow workflows.
</Admonition>
## Component Usage
@ -100,8 +97,6 @@ class NotionPageCreator(CustomComponent):
## Example Usage
<Admonition type="info" title="Example Usage">
Example of using the `AddContentToPage` component in a Langflow flow using Markdown as input:
<ZoomableImage
@ -115,8 +110,6 @@ style={{ width: "100%", margin: "20px 0" }}
In this example, the `AddContentToPage` component connects to a `MarkdownLoader` component to provide the markdown text input. The converted Notion blocks are appended to the specified Notion page using the provided `block_id` and `notion_secret`.
</Admonition>
## Best Practices
When using the `AddContentToPage` component:

7
docs/docs/integrations/notion/list-users.md
View file

@ -9,13 +9,11 @@ The `NotionUserList` component retrieves users from Notion. It provides a conven
[Notion Reference](https://developers.notion.com/reference/get-users)
<Admonition type="tip" title="Component Functionality">
The `NotionUserList` component enables you to:
The `NotionUserList` component enables you to:
- Retrieve user data from Notion
- Access user information such as ID, type, name, and avatar URL
- Integrate Notion user data seamlessly into your Langflow workflows
</Admonition>
## Component Usage
@ -95,7 +93,6 @@ class NotionUserList(CustomComponent):
## Example Usage
<Admonition type="info" title="Example Usage">
Here's an example of how you can use the `NotionUserList` component in a Langflow flow and passing the outputs to the Prompt component:
<ZoomableImage
@ -107,8 +104,6 @@ sources={{
style={{ width: "100%", margin: "20px 0" }}
/>
</Admonition>
## Best Practices
When using the `NotionUserList` component, consider the following best practices:

0
docs/docs/migration/api.mdx
View file

0
docs/docs/migration/component-status-and-data-passing.mdx
View file

0
docs/docs/migration/connecting-output-components.mdx
View file

0
docs/docs/migration/custom-component.mdx
View file

0
docs/docs/migration/experimental-components.mdx
View file

0
docs/docs/migration/flow-of-data.mdx
View file

118
docs/docs/migration/global-variables.mdx
View file

@ -1,118 +0,0 @@
import ZoomableImage from "/src/theme/ZoomableImage.js";
import Admonition from "@theme/Admonition";
# Global Variables
## TLDR;
- Global Variables are reusable variables that can be accessed from any Text field in your project.
- To create a Global Variable, click on the 🌐 button in a Text field and then **+ Add New Variable**.
- Define the **Name**, **Type**, and **Value** of the variable.
- Click on **Save Variable** to create the variable.
- All Credential Global Variables are encrypted and cannot be accessed by anyone but you.
- Set _`LANGFLOW_STORE_ENVIRONMENT_VARIABLES`_ to _`true`_ in your `.env` file to add all variables in _`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`_ to your user's Global Variables.
Global Variables are a really useful feature of Langflow.
They allow you to define reusable variables that can be accessed from any Text field in your project.
The first thing you need to do is find a **Text field** in a Component, so let's talk about what a Text field is.
## Text Fields
Text fields are the fields in a Component where you can write text but that does not allow you to open a Text Area.
The easiest way to find fields that are Text fields, though, is to look for fields that have a 🌐 button.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/ollama-gv.png",
dark: "img/ollama-gv.png",
}}
style={{ width: "50%" }}
/>
## Creating a Global Variable
To create a Global Variable, you need to click on the 🌐 button in a Text field and that will open a dropdown showing your currently available variables and at the end of it **+ Add New Variable**.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/add-new-variable.png",
dark: "img/add-new-variable.png",
}}
style={{ width: "60%" }}
/>
Click on **+ Add New Variable** and a window will open where you can define your new Global Variable.
In it, you can define the **Name** of the variable, the optional **Type** of the variable, and the **Value** of the variable.
The **Name** is the name that you will use to refer to the variable in your Text fields.
The **Type** is optional for now but will be used in the future to allow for more advanced features.
The **Value** is the value that the variable will have.
{/* say that all variables are encrypted */}
<Admonition type="warning">
All Credential Global Variables are encrypted and cannot be accessed by anyone
but you.
</Admonition>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/create-variable-window.png",
dark: "img/create-variable-window.png",
}}
style={{ width: "60%" }}
/>
After you have defined your variable, click on **Save Variable** and your variable will be created.
After that, once you click on the 🌐 button in a Text field, you will see your new variable in the dropdown.
## Environment Variables
If you set _`LANGFLOW_STORE_ENVIRONMENT_VARIABLES`_ to _`true`_ (which is the default value) in your `.env` file, all variables in _`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`_ will be added to your user's Global Variables.
All of these variables can be used in your project as any other Global Variable.
<Admonition type="tip">
You can set _`LANGFLOW_STORE_ENVIRONMENT_VARIABLES`_ to _`false`_ in your
`.env` file to prevent this behavior.
</Admonition>
You can also set _`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`_ to a list of variables that you want to get from the environment.
The default list at the moment is:
- ANTHROPIC_API_KEY
- ASTRA_DB_API_ENDPOINT
- ASTRA_DB_APPLICATION_TOKEN
- AZURE_OPENAI_API_KEY
- AZURE_OPENAI_API_DEPLOYMENT_NAME
- AZURE_OPENAI_API_EMBEDDINGS_DEPLOYMENT_NAME
- AZURE_OPENAI_API_INSTANCE_NAME
- AZURE_OPENAI_API_VERSION
- COHERE_API_KEY
- GOOGLE_API_KEY
- GROQ_API_KEY
- HUGGINGFACEHUB_API_TOKEN
- OPENAI_API_KEY
- PINECONE_API_KEY
- SEARCHAPI_API_KEY
- SERPAPI_API_KEY
- UPSTASH_VECTOR_REST_URL
- UPSTASH_VECTOR_REST_TOKEN
- VECTARA_CUSTOMER_ID
- VECTARA_CORPUS_ID
- VECTARA_API_KEY
<Admonition type="tip">
Set _`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`_ as a comma-separated list
of variables (e.g. _`"VARIABLE1, VARIABLE2"`_) or as a JSON-encoded string
(e.g. _`'["VARIABLE1", "VARIABLE2"]'`_).
</Admonition>

36
docs/docs/migration/inputs-and-outputs.mdx
View file

@ -1,36 +0,0 @@
# 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 make it easier to build and maintain your flows.
## Introduction
Langflow 1.0 introduces new categories of components called Inputs and Outputs. They are used to make it easier to understand and interact with your flows.
Let's start with what they have in common:
- Components in these categories connect to components that have Text or Record inputs or outputs. Some can connect to both but you have to pick what type of data you want to output or input.
- They can be renamed to help you identify them more easily in the Playground and while using the API.
- They dynamically change the Playground to make it easier to understand and interact with your flows.
Native Langflow Components were created to be powerful tools that work around Langflow's features. They are designed to be easy to use and understand, and to help you build your flows faster.
Let's dive into Inputs and Outputs.
## Inputs
Inputs are components that are used to define where data comes into your flow. They can be used to receive data from the user, from a database, or from any other source that can be converted to Text or Record.
The difference between Chat Input and other Input components is the format of the output, 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, you can use the Record output, and when you want to pass the message only you can use the Text output. This is useful when saving the message to a database or a memory system like Zep.
You can find out more about it and the other Inputs [here](../components/inputs).
## 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](../components/outputs).

6
docs/docs/migration/migrating-to-one-point-zero.mdx
View file

@ -41,7 +41,7 @@ We have a special channel in our Discord server dedicated to Langflow 1.0 migrat
Langflow 1.0 introduces adds the concept of Inputs and Outputs to flows, allowing a clear definition of the data flow between components. Discover how to use Inputs and Outputs to pass data between components and create more dynamic flows.
[Learn more about Inputs and Outputs of Components](../migration/inputs-and-outputs)
[Learn more about Inputs and Outputs of Components](../components/inputs-and-outputs)
## To Compose or Not to Compose: the choice is yours
@ -71,7 +71,7 @@ Langflow 1.0 introduces many new native categories, including Inputs, Outputs, H
With the introduction of Text and Record types connections between Components are more intuitive and easier to understand. This is the first step in a series of improvements to the way you interact with Langflow. Learn how to use Text, and Record and how they help you build better flows.
[Learn more about Text and Record](../migration/text-and-record)
[Learn more about Text and Record](../components/text-and-record)
## CustomComponent for All Components
@ -119,7 +119,7 @@ Things got a whole lot easier. You can now pass tweaks and inputs in the API by
Global Variables can be used in any Text Field across your projects. Learn how to define and utilize Global Variables to streamline your workflow.
[Learn more about Global Variables](../migration/global-variables)
[Learn more about Global Variables](../administration/global-env.mdx)
## Experimental Components

0
docs/docs/migration/multiple-flows.mdx
View file

0
docs/docs/migration/new-categories-and-components.mdx
View file

0
docs/docs/migration/passing-tweaks-and-inputs.mdx
View file

0
docs/docs/migration/renaming-and-editing-components.mdx
View file

0
docs/docs/migration/sidebar-and-interaction-panel.mdx
View file

0
docs/docs/migration/state-management.mdx
View file

0
docs/docs/migration/supported-frameworks.mdx
View file

45
docs/docs/migration/text-and-record.mdx
View file

@ -1,45 +0,0 @@
# 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}`_
```
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](https://langchain.com) 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! 🚀

2
docs/docs/whats-new/a-new-chapter-langflow.mdx
View file

@ -41,7 +41,7 @@ By having a clear definition of Inputs and Outputs, we could build the experienc
When building a project testing and debugging is crucial. The Playground is a tool that changes dynamically based on the Inputs and Outputs you defined in your project.
For example, let's say you are building a simple RAG application. Generally, you have an Input, some references that come from a Vector Store Search, a Prompt and the answer.
Now, you could plug the output of your Prompt into a [Text Output](../components/outputs#Text-Output), rename that to "Prompt Result" and see the output of your Prompt in the Playground.
Now, you could plug the output of your Prompt into a [Text Output](../components/inputs-and-outputs), rename that to "Prompt Result" and see the output of your Prompt in the Playground.
{/* Add image here of the described above */}

9
docs/sidebars.js
View file

@ -49,8 +49,8 @@ module.exports = {
label: "Core Components",
collapsed: false,
items: [
"components/inputs",
"components/outputs",
"components/inputs-and-outputs",
"components/text-and-record",
"components/data",
"components/models",
"components/helpers",
@ -91,15 +91,12 @@ module.exports = {
},
{
type: "category",
label: "Migration Guides",
label: "Migration",
collapsed: false,
items: [
"migration/possible-installation-issues",
"migration/migrating-to-one-point-zero",
"migration/inputs-and-outputs",
"migration/text-and-record",
"migration/compatibility",
"migration/global-variables",
],
},
{

6504
docs/static/data/AstraDB-RAG-Flows.json vendored
View file

File diff suppressed because one or more lines are too long

1875
docs/static/json_files/Notion_Components_bundle.json vendored
View file

File diff suppressed because one or more lines are too long