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

docs: langflow docs review (#8032)

Browse source 
* quickstart

* message-history

* concepts-components

* data

* helpers

* logic-and-memories

* models

* agent-descriptions

* langsmith-more-env-vars

* use-kbd

* modify-descriptions

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>
Co-authored-by: Victor-w-Madeira <victor.wmadeira@gmail.com>

* remove-duplicate-periods

* remove-str-no-longer-used-in-ports

---------

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>
Co-authored-by: Victor-w-Madeira <victor.wmadeira@gmail.com>
This commit is contained in:
Mendon Kissling 2025-05-15 13:55:14 -04:00 • committed by GitHub
commit 58bdabf5a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 146 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

18
docs/docs/Agents/agent-tool-calling-agent-component.md
View file

@ -10,7 +10,7 @@ The `AgentComponent` is a component for easily creating an AI agent capable of a
The component contains all of the elements you'll need for creating an agent. Instead of managing LLM models and providers, pick your model and enter your API key. Instead of connecting a **Prompt** component, enter instructions in the component's **Agent Instruction** fields.
![Tool calling agentcomponent](/img/tool-calling-agent-component.png)
![Tool calling agent component](/img/tool-calling-agent-component.png)
Learn how to build a flow starting with the **Tool calling agent** component, and see how it can help you solve problems.
@ -19,7 +19,7 @@ Learn how to build a flow starting with the **Tool calling agent** component, an
- [An OpenAI API key](https://platform.openai.com/)
- [A Search API key](https://www.searchapi.io/)
## Create a problem-solving agent with AgentComponent
## Create a problem-solving agent with the Agent component
Create a problem-solving agent in Langflow, starting with the **Tool calling agent**.
@ -58,17 +58,17 @@ See what problems you can solve with this flow. As your problem becomes more spe
### Edit a tool's metadata
To edit a tool's metadata, click the **Edit Tools** button in the tool to modify its `name` or `description` metadata. These fields help connected agents understand how to use the tool, without having to modify the agent's prompt instructions.
To edit a tool's metadata, click the **Edit Tools** button in the tool to modify its `name`, `description`, or `enabled` metadata. These fields help connected agents understand how to use the tool, without having to modify the agent's prompt instructions.
For example, the [URL](/components-data#url) component has three tools available when **Tool Mode** is enabled.
| Tool Name | Description |
|-----------|-------------|
| `URL-fetch_content` | Use this tool to fetch and retrieve raw content from a URL, including HTML and other structured data. The full response content is returned. |
| `URL-fetch_content_text` | Use this tool to fetch and extract clean, readable text content from a webpage. Only plain text content is returned. |
| `URL-as_dataframe` | Use this tool to fetch structured data from a URL and convert it into a tabular format. Data is returned in a structured DataFrame table format. |
| Tool Name | Description | Enabled |
|-----------|-------------|---------|
| `URL-fetch_content` | Use this tool to fetch and retrieve raw content from a URL, including HTML and other structured data. The full response content is returned. | true |
| `URL-fetch_content_text` | Use this tool to fetch and extract clean, readable text content from a webpage. Only plain text content is returned. | true |
| `URL-as_dataframe` | Use this tool to fetch structured data from a URL and convert it into a tabular format. Data is returned in a structured DataFrame table format. | true |
A connected agent will have a clear idea of each tool's capabilities based on the `name` and `description` metadata. If you think the agent is using a tool incorrectly, edit a tool's metadata to help it understand the tool better.
A connected agent will have a clear idea of each tool's capabilities based on the `name` and `description` metadata. The `enabled` boolean controls the tool's availability to the agent. If you think an agent is using a tool incorrectly, edit a tool's metadata to help the agent better understand the tool.
Tool names and descriptions can be edited, but the default tool identifiers cannot be changed. If you want to change the tool identifier, create a custom component.

23
docs/docs/Components/components-data.md
View file

@ -15,10 +15,9 @@ They may perform some processing or type checking, like converting raw HTML data
The **URL** data component loads content from a list of URLs.
In the component's **URLs** field, enter a comma-separated list of URLs you want to load. Alternatively, connect a component that outputs the `Message` type, like the **Chat Input** component, to supply your URLs with a component.
In the component's **URLs** field, enter the URL you want to load. To add multiple URL fields, click <Icon name="Plus" aria-label="Add"/>.
To output a `Data` type, in the **Output Format** dropdown, select **Raw HTML**.
To output a `Message` type, in the **Output Format** dropdown, select **Text**. This option applies postprocessing with the `data_to_text` helper function.
Alternatively, connect a component that outputs the `Message` type, like the **Chat Input** component, to supply your URLs from a component.
In this example of a document ingestion pipeline, the URL component outputs raw HTML to a text splitter, which splits the raw content into chunks for a vector database to ingest.
@ -99,6 +98,7 @@ This component recursively loads files from a directory, with options for file t
| Output | Type | Description |
| ------ | ---------- | ----------------------------------- |
| data | List[Data] | The loaded file data from the directory. |
| dataframe | DataFrame | The loaded file data in tabular DataFrame format. |
</details>
@ -195,7 +195,9 @@ This component executes SQL queries on a specified database.
## URL
This component fetches content from one or more URLs, processes the content, and returns it in various formats. It supports output in plain text, raw HTML, or JSON, with options for cleaning and separating multiple outputs.
This component fetches content from one or more URLs, processes the content, and returns it in various formats. It supports output in plain text or raw HTML.
In the component's **URLs** field, enter the URL you want to load. To add multiple URL fields, click <Icon name="Plus" aria-label="Add"/>.
1. To use this component in a flow, connect the **DataFrame** output to a component that accepts the input.
For example, connect the **URL** component to a **Chat Output** component.
@ -238,17 +240,20 @@ Peruvian writer and Nobel Prize in Literature laureate Mario Vargas Llosa (pictu
| Name | Display Name | Info |
|------|--------------|------|
| urls | URLs | Enter one or more URLs. URLs are automatically validated and cleaned. |
| format | Output Format | The output format. Use **Text** to extract text from the HTML, **Raw HTML** for the raw HTML content, or **JSON** to extract JSON from the HTML. |
| separator | Separator | The separator to use between multiple outputs. Default for **Text** is `\n\n`. Default for **Raw HTML** is `\n<!-- Separator -->\n`. |
| clean_extra_whitespace | Clean Extra Whitespace | Whether to clean excessive blank lines in the text output. Only applies to `Text` format. |
| urls | URLs | Click the '+' button to enter one or more URLs to crawl recursively. |
| max_depth | Max Depth | Controls how many 'clicks' away from the initial page the crawler will go. |
| prevent_outside | Prevent Outside | If enabled, only crawls URLs within the same domain as the root URL. |
| use_async | Use Async | If enabled, uses asynchronous loading which can be significantly faster but might use more system resources. |
| format | Output Format | Output Format. Use `Text` to extract the text from the HTML or `HTML` for the raw HTML content. |
| timeout | Timeout | Timeout for the request in seconds. |
| headers | Headers | The headers to send with the request. |
**Outputs**
| Name | Display Name | Info |
|------|--------------|------|
| data | Data | A list of [Data](/concepts-objects) objects containing fetched content and metadata. |
| text | Text | The fetched content as formatted text, with applied separators and cleaning. |
| text | Message | The fetched content as formatted text. |
| dataframe | DataFrame | The content formatted as a [DataFrame](/concepts-objects#dataframe-object) object. |
</details>

9
docs/docs/Components/components-helpers.md
View file

@ -62,14 +62,15 @@ record_number: {batch_index}, name: {text_input}, summary: {model_response}
| model | HandleInput | Connect the 'Language Model' output from your LLM component here. Required. |
| system_message | MultilineInput | A multi-line system instruction for all rows in the DataFrame. |
| df | DataFrameInput | The DataFrame whose column is treated as text messages, as specified by 'column_name'. Required. |
| column_name | MessageTextInput | The name of the DataFrame column to treat as text messages. Default='text'. Required. |
| column_name | MessageTextInput | The name of the DataFrame column to treat as text messages. If empty, all columns are formatted in TOML. |
| output_column_name | MessageTextInput | Name of the column where the model's response is stored. Default=`model_response`. |
| enable_metadata | BoolInput | If True, add metadata to the output DataFrame. |
**Outputs**
| Name | Type | Description |
|------|------|-------------|
| batch_results | DataFrame | A DataFrame with columns: 'text_input', 'model_response', 'batch_index', and optional 'metadata' containing processing information. |
| batch_results | DataFrame | A DataFrame with all original columns plus the model's response column. |
</details>
@ -149,8 +150,8 @@ For more information on configuring memory in Langflow, see [Memory](/memory).
| Name | Type | Description |
|------|------|-------------|
| messages | Data | The retrieved messages as Data objects. |
| messages_text | String | The retrieved messages formatted as text. |
| lc_memory | Memory | A constructed Langchain [ConversationBufferMemory](https://api.python.langchain.com/en/latest/memory/langchain.memory.buffer.ConversationBufferMemory.html) object. |
| messages_text | Message | The retrieved messages formatted as text. |
| dataframe | DataFrame | A DataFrame containing the message data. |
</details>

6
docs/docs/Components/components-logic.md
View file

@ -13,11 +13,11 @@ This flow creates a summarizing "for each" loop with the [Loop](/components-logi
The component iterates over a list of [Data](/concepts-objects#data-object) objects until it's completed, and then the **Done** loop aggregates the results.
The **File** component loads text files from your local machine, and then the **Parse Data** component parses them into a list of structured `Data` objects.
The **File** component loads text files from your local machine, and then the **Parser** component parses them into a list of structured `Data` objects.
The **Loop** component passes each `Data` object to a **Prompt** to be summarized.
When the **Loop** component runs out of `Data`, the **Done** loop activates, which counts the number of pages and summarizes their tone with another **Prompt**.
This is represented in Langflow by connecting the Parse Data component's **Data List** output to the Loop component's `Data` loop input.
This is represented in Langflow by connecting the Parser component's **Data List** output to the Loop component's `Data` loop input.
![Sample Flow looping summarizer](/img/loop-text-summarizer.png)
@ -202,7 +202,7 @@ This component generates a notification for the Listen component to use.
</details>
## Pass message
## Pass
This component forwards the input message, unchanged.

4
docs/docs/Components/components-memories.md
View file

@ -13,11 +13,11 @@ Memory components provide access to their respective external databases **as mem
## Use a memory component in a flow
This example flow stores and retrieves chat history from an **Astra DB Chat Memory** component with **Store Message** and **Chat Memory** components.
This example flow stores and retrieves chat history from an **Astra DB Chat Memory** component with **Store Message** and **Message history** components.
The **Store Message** helper component stores chat memories as [Data](/concepts-objects) objects, and the **Message History** helper component retrieves chat messages as [Data](/concepts-objects) objects or strings.
![Sample Flow storing Chat Memory in AstraDB](/img/astra_db_chat_memory_rounded.png)
![Sample Flow storing Message history in AstraDB](/img/astra_db_chat_memory_rounded.png)
## AstraDBChatMemory Component

10
docs/docs/Components/components-models.md
View file

@ -21,7 +21,7 @@ This example has the OpenAI model in a chatbot flow. For more information, see t
![](/img/starter-flow-basic-prompting.png)
## AI/ML API
## AIML
This component creates a ChatOpenAI model instance using the AIML API.
@ -40,7 +40,6 @@ For more information, see [AIML documentation](https://docs.aimlapi.com/).
| aiml_api_base | String | The base URL of the AIML API. Defaults to `https://api.aimlapi.com`. |
| api_key | SecretString | The AIML API Key to use for the model. |
| temperature | Float | Controls randomness in the output. Default: `0.1`. |
| seed | Integer | Controls reproducibility of the job. |
**Outputs**
@ -66,10 +65,11 @@ For more information, see [Amazon Bedrock documentation](https://docs.aws.amazon
| model_id | String | The ID of the Amazon Bedrock model to use. Options include various models. |
| aws_access_key | SecretString | AWS Access Key for authentication. |
| aws_secret_key | SecretString | AWS Secret Key for authentication. |
| credentials_profile_name | String | Name of the AWS credentials profile to use (advanced). |
| aws_session_token | SecretString | The session key for your AWS account.
| credentials_profile_name | String | Name of the AWS credentials profile to use. |
| region_name | String | AWS region name. Default: `us-east-1`. |
| model_kwargs | Dictionary | Additional keyword arguments for the model (advanced). |
| endpoint_url | String | Custom endpoint URL for the Bedrock service (advanced). |
| model_kwargs | Dictionary | Additional keyword arguments for the model. |
| endpoint_url | String | Custom endpoint URL for the Bedrock service. |
**Outputs**

105
docs/docs/Concepts/concepts-components.md
View file

@ -7,7 +7,7 @@ import Icon from "@site/src/components/icon";
# Langflow components overview
A component is a single building block within a flow with inputs, outputs, functions, and parameters that define its functionality. A single component is like a class within a larger application.
A component is a single building block within a flow with inputs, outputs, functions, and parameters that define its functionality. A single component is like a class within a larger application.
To add a component to a flow, drag it from the **Component** menu to the **Workspace**.
@ -21,13 +21,13 @@ Each component is unique, but all have a menu bar at the top that looks somethin
Use the component controls to do the following:
- **Code** — Modify the component's Python code and save your changes.
- **Controls** — Adjust all component parameters.
- **Freeze** — After a component runs, lock its previous output state to prevent it from re-running.
- **Code** — Modify the component's Python code and save your changes.
- **Controls** — Adjust all component parameters.
- **Freeze** — After a component runs, lock its previous output state to prevent it from re-running.
Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
To view a component’s output and logs, click the <Icon name="TextSearch" aria-label="Search and filter" /> icon.
To view a component's output and logs, click the <Icon name="TextSearch" aria-label="Inspect icon" /> icon.
To run a single component, click <Icon name="Play" aria-label="Play button" /> **Play**.
@ -47,15 +47,14 @@ The following table lists the handle colors and their corresponding data types:
| Data type | Handle color | Handle |
|-----------|--------------|----------|
| BaseLanguageModel | Fuchsia | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#c026d3' }} /> |
| Data | Red | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#dc2626' }} /> |
| Document | Lime | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#65a30d' }} /> |
| DataFrame | Pink | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#ec4899' }} /> |
| Embeddings | Emerald | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#10b981' }} /> |
| LanguageModel | Fuchsia | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#c026d3' }} /> |
| Memory | Orange | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#f97316' }} /> |
| Message | Indigo | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#4f46e5' }} /> |
| Prompt | Violet | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#7c3aed' }} /> |
| str | Indigo | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#4F46E5' }} /> |
| Text | Indigo | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#4F46E5' }} /> |
| Text | Indigo | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#4f46e5' }} /> |
| Tool | Cyan | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#06b6d4' }} /> |
| unknown | Gray | <Icon name="Circle" size="16" aria-label="A circle on the side of a component" style={{ color: '#9CA3AF' }} /> |
## Component code
@ -149,15 +148,15 @@ When used in a flow, this component:
After a component runs, **Freeze** locks the component's previous output state to prevent it from re-running.
If you’re expecting consistent output from a component and don’t need to re-run it, click **Freeze**.
If you're expecting consistent output from a component and don't need to re-run it, click **Freeze**.
Enabling **Freeze** freezes all components upstream of the selected component.
## Additional component options
Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
To modify a component's name or description, double-click in the **Name** or **Description** fields. Component descriptions accept Markdown syntax.
To modify a component's name or description, click the <Icon name="PencilLine" aria-label="Pencil line"/> icon. Component descriptions accept Markdown syntax.
### Component shortcuts
@ -165,43 +164,44 @@ The following keyboard shortcuts are available when a component is selected.
| Menu item | Windows shortcut | Mac shortcut | Description |
|-----------|-----------------|--------------|-------------|
| Code | Space | Space | Opens the code editor for the component. |
| Advanced Settings | Ctrl + Shift + A | ⌘ + Shift + A | Opens advanced settings for the component. |
| Save Changes | Ctrl + S | ⌘ + S | Saves changes to the current flow. |
| Save Component | Ctrl + Alt + S | ⌘ + Alt + S | Saves the current component to Saved components. |
| Duplicate | Ctrl + D | ⌘ + D | Creates a duplicate of the component. |
| Copy | Ctrl + C | ⌘ + C | Copies the selected component. |
| Cut | Ctrl + X | ⌘ + X | Cuts the selected component. |
| Paste | Ctrl + V | ⌘ + V | Pastes the copied/cut component. |
| Docs | Ctrl + Shift + D | ⌘ + Shift + D | Opens related documentation. |
| Minimize | Ctrl + . | ⌘ + . | Minimizes the current component. |
| Freeze| Ctrl + Shift + F | ⌘ + Shift + F | Freezes component state and upstream components. |
| Download | Ctrl + J | ⌘ + J | Downloads the component as JSON. |
| Delete | Backspace | Backspace | Deletes the component. |
| Group | Ctrl + G | ⌘ + G | Groups selected components. |
| Undo | Ctrl + Z | ⌘ + Z | Undoes the last action. |
| Redo | Ctrl + Y | ⌘ + Y | Redoes the last undone action. |
| Redo (alternative) | Ctrl + Shift + Z | ⌘ + Shift + Z | Alternative shortcut for redo. |
| Share Component | Ctrl + Shift + S | ⌘ + Shift + S | Shares the component. |
| Share Flow | Ctrl + Shift + B | ⌘ + Shift + B | Shares the entire flow. |
| Toggle Sidebar | Ctrl + B | ⌘ + B | Shows/hides the sidebar. |
| Search Components | / | / | Focuses the component search bar. |
| Tool Mode | Ctrl + Shift + M | ⌘ + Shift + M | Toggles tool mode. |
| Update | Ctrl + U | ⌘ + U | Updates the component. |
| Open Playground | Ctrl + K | ⌘ + K | Opens the playground. |
| Output Inspection | O | O | Opens output inspection. |
| Play | P | P | Plays/executes the flow. |
| API | R | R | Opens the API view. |
| Code | <kbd>Space</kbd> | <kbd>Space</kbd> | Opens the code editor for the component. |
| Advanced Settings | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd> | <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd> | Opens advanced settings for the component. |
| Save Changes | <kbd>Ctrl</kbd> + <kbd>S</kbd> | <kbd>⌘</kbd> + <kbd>S</kbd> | Saves changes to the current flow. |
| Save Component | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>S</kbd> | <kbd>⌘</kbd> + <kbd>Alt</kbd> + <kbd>S</kbd> | Saves the current component to Saved components. |
| Duplicate | <kbd>Ctrl</kbd> + <kbd>D</kbd> | <kbd>⌘</kbd> + <kbd>D</kbd> | Creates a duplicate of the component. |
| Copy | <kbd>Ctrl</kbd> + <kbd>C</kbd> | <kbd>⌘</kbd> + <kbd>C</kbd> | Copies the selected component. |
| Cut | <kbd>Ctrl</kbd> + <kbd>X</kbd> | <kbd>⌘</kbd> + <kbd>X</kbd> | Cuts the selected component. |
| Paste | <kbd>Ctrl</kbd> + <kbd>V</kbd> | <kbd>⌘</kbd> + <kbd>V</kbd> | Pastes the copied/cut component. |
| Docs | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd> | <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd> | Opens related documentation. |
| Minimize | <kbd>Ctrl</kbd> + <kbd>.</kbd> | <kbd>⌘</kbd> + <kbd>.</kbd> | Minimizes the current component. |
| Freeze| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd> | <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd> | Freezes component state and upstream components. |
| Download | <kbd>Ctrl</kbd> + <kbd>J</kbd> | <kbd>⌘</kbd> + <kbd>J</kbd> | Downloads the component as JSON. |
| Delete | <kbd>Backspace</kbd> | <kbd>Backspace</kbd> | Deletes the component. |
| Group | <kbd>Ctrl</kbd> + <kbd>G</kbd> | <kbd>⌘</kbd> + <kbd>G</kbd> | Groups selected components. |
| Undo | <kbd>Ctrl</kbd> + <kbd>Z</kbd> | <kbd>⌘</kbd> + <kbd>Z</kbd> | Undoes the last action. |
| Redo | <kbd>Ctrl</kbd> + <kbd>Y</kbd> | <kbd>⌘</kbd> + <kbd>Y</kbd> | Redoes the last undone action. |
| Redo (alternative) | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> | <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> | Alternative shortcut for redo. |
| Share Component | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> | <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> | Shares the component. |
| Share Flow | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd> | <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd> | Shares the entire flow. |
| Toggle Sidebar | <kbd>Ctrl</kbd> + <kbd>B</kbd> | <kbd>⌘</kbd> + <kbd>B</kbd> | Shows/hides the sidebar. |
| Search Components | <kbd>/</kbd> | <kbd>/</kbd> | Focuses the component search bar. |
| Tool Mode | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd> | <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd> | Toggles tool mode. |
| Update | <kbd>Ctrl</kbd> + <kbd>U</kbd> | <kbd>⌘</kbd> + <kbd>U</kbd> | Updates the component. |
| Open Playground | <kbd>Ctrl</kbd> + <kbd>K</kbd> | <kbd>⌘</kbd> + <kbd>K</kbd> | Opens the playground. |
| Output Inspection | <kbd>O</kbd> | <kbd>O</kbd> | Opens output inspection. |
| Play | <kbd>P</kbd> | <kbd>P</kbd> | Plays/executes the flow. |
| API | <kbd>R</kbd> | <kbd>R</kbd> | Opens the API view. |
## Group components in the workspace
Multiple components can be grouped into a single component for reuse. This is useful when combining large flows into single components, for example RAG with a vector database, and saving space.
1. Hold **Shift** and drag to select components.
2. Select **Group**.
1. Hold <kbd>Shift</kbd> and drag to select components.
The components merge into a single component.
3. Double-click the name and description to change them.
4. Save your grouped component to the sidebar for later use.
2. To modify the name and description of the single grouped component, in the grouped component, click the <Icon name="PencilLine" aria-label="Pencil line"/> icon.
3. Save your grouped component to the sidebar for later use.
## Component version
@ -209,6 +209,8 @@ A component's initial state is stored in a database. As soon as you drag a compo
A component keeps the version number it is initialized to the workspace with. If a component is at version `1.0` when it is dragged to the workspace, it will stay at version `1.0` until you update it.
Langflow notifies you when a component's workspace version is behind the database version and an update is available.
### Review and update components
When a component's workspace version is behind the database version and an update is available, the component displays a notification.
@ -232,10 +234,15 @@ If you created a backup flow, it's available in the same project folder as the o
Components are listed in the sidebar by component type.
Component **bundles** are components grouped by provider. For example, Langchain modules like **RunnableExecutor** and **CharacterTextSplitter** are grouped under the **Langchain** bundle.
The sidebar includes a component **Search** bar, and includes flags for showing or hiding **Beta** and **Legacy** components.
**Bundles** are components grouped by provider. For example, Langchain modules like **RunnableExecutor** and **CharacterTextSplitter** are grouped under the **Langchain** bundle.
**Beta** components are still being tested and are not suitable for production workloads.
Legacy components are available for use but are no longer supported.
**Legacy** components are available for use but are no longer supported. By default, legacy components are hidden in the sidebar.
The sidebar includes a component **Search** bar with options for showing or hiding **Beta** and **Legacy** components.
To change the sidebar's behavior, click the <Icon name="SlidersHorizontal" aria-hidden="true" />, and then show or hide **Legacy** or **Beta** components.

63
docs/docs/Get-Started/get-started-quickstart.md
View file

@ -15,20 +15,15 @@ Get to know Langflow by building an OpenAI-powered chatbot application. After yo
- An Astra DB application token scoped to read and write to the database
- A collection created in [Astra](https://docs.datastax.com/en/astra-db-serverless/databases/manage-collections.html#create-collection) or a new collection created in the **Astra DB** component
## Open Langflow and start a new project
1. From the Langflow dashboard, click **New Flow**, and then select **Blank Flow**. A blank workspace opens where you can build your flow.
## Build the basic prompting flow
:::tip
If you want a pre-built flow, click **New Flow**, and then select **Basic Prompting**.
If you prefer a pre-built flow, click **New Flow**, and then select **Basic Prompting**.
Continue to [Run the basic prompting flow](#run-basic-prompting-flow).
:::
2. Select **Basic Prompting**.
3. The **Basic Prompting** flow is created.
## Build the basic prompting flow
1. From the Langflow dashboard, click **New Flow**, and then select **Blank Flow**. A blank workspace opens where you can build your flow.
The Basic Prompting flow will look like this when it's completed:
@ -36,13 +31,13 @@ The Basic Prompting flow will look like this when it's completed:
To build the **Basic Prompting** flow, follow these steps:
1. Click **Inputs**, select the **Chat Input** component, and then drag it to the canvas.
2. In the components sidebar, click **Inputs**, select the **Chat Input** component, and then drag it to the canvas.
The [Chat Input](/components-io#chat-input) component accepts user input to the chat.
2. Click **Prompt**, select the **Prompt** component, and then drag it to the canvas.
3. In the components sidebar, click **Prompt**, select the **Prompt** component, and then drag it to the canvas.
The [Prompt](/components-prompts) component combines the user input with a user-defined prompt.
3. Click **Outputs**, select the **Chat Output** component, and then drag it to the canvas.
4. In the components sidebar, click **Outputs**, select the **Chat Output** component, and then drag it to the canvas.
The [Chat Output](/components-io#chat-output) component prints the flow's output to the chat.
4. Click **Models**, select the **OpenAI** component, and then drag it to the canvas.
5. In the components sidebar, click **Models**, select the **OpenAI** component, and then drag it to the canvas.
The [OpenAI](components-models#openai) model component sends the user input and prompt to the OpenAI API and receives a response.
You should now have a flow that looks like this:
@ -55,9 +50,9 @@ Each component accepts inputs on its left side, and sends outputs on its right s
Hover over the connection ports to see the data types that the component accepts.
For more on component inputs and outputs, see [Components overview](/concepts-components).
5. To connect the **Chat Input** component to the OpenAI model component, click and drag a line from the blue **Message** port to the OpenAI model component's **Input** port.
6. To connect the **Prompt** component to the OpenAI model component, click and drag a line from the blue **Prompt Message** port to the OpenAI model component's **System Message** port.
7. To connect the **OpenAI** model component to the **Chat Output**, click and drag a line from the blue **Text** port to the **Chat Output** component's **Text** port.
6. To connect the **Chat Input** component to the OpenAI model component, click and drag a line from the blue **Message** port to the OpenAI model component's **Input** port.
7. To connect the **Prompt** component to the OpenAI model component, click and drag a line from the blue **Prompt Message** port to the OpenAI model component's **System Message** port.
8. To connect the **OpenAI** model component to the **Chat Output**, click and drag a line from the blue **Text** port to the **Chat Output** component's **Text** port.
Your finished basic prompting flow should look like this:
@ -127,11 +122,23 @@ The [Split Text](/components-processing#split-text) component splits the loaded
The [Parser](/components-processing#parser) component converts the data from the **Astra DB** component into plain text.
6. Click **Embeddings**, select the **OpenAI Embeddings** component, and then drag it to the canvas.
The [OpenAI Embeddings](/components-embedding-models#openai-embeddings) component generates embeddings for the user's input, which are compared to the vector data in the database.
7. Connect the new components into the existing flow, so your flow looks like this:
7. Modify the **Prompt** component to contain variables for both `{user_question}` and `{context}`.
The `{context}` variable gives the bot additional context for answering `{user_question}` beyond what the LLM was trained on.
```text
Given the context
{context}
Answer the question
{user_question}
```
Adding variables like `{context}` creates new input handles in the component.
8. Connect the new components into the existing flow, so your flow looks like this:
![Add document ingestion to the basic prompting flow](/img/quickstart-add-document-ingestion.png)
8. Configure the **Astra DB** component.
9. Configure the **Astra DB** component.
1. In the **Astra DB Application Token** field, add your **Astra DB** application token.
The component connects to your database and populates the menus with existing databases and collections.
2. Select your **Database**.
@ -142,7 +149,7 @@ The [OpenAI Embeddings](/components-embedding-models#openai-embeddings) componen
If you select a collection embedded with NVIDIA through Astra's vectorize service, the **Embedding Model** port is removed, because you have already generated embeddings for this collection with the NVIDIA `NV-Embed-QA` model. The component fetches the data from the collection, and uses the same embeddings for queries.
:::
9. If you don't have a collection, create a new one within the component.
10. If you don't have a collection, create a new one within the component.
1. Select **New collection**.
2. Complete the **Name**, **Embedding generation method**, **Embedding model**, and **Dimensions** fields, and then click **Create**.
@ -159,21 +166,11 @@ If you used Langflow's **Global Variables** feature, the RAG application flow co
### Run the chatbot with retrieved context
1. Modify the **Prompt** component to contain variables for both `{user_question}` and `{context}`.
The `{context}` variable gives the bot additional context for answering `{user_question}` beyond what the LLM was trained on.
```text
Given the context
{context}
Answer the question
{user_question}
```
2. In the **File** component, upload a text file from your local machine with data you want to ingest into the **Astra DB** component database.
1. In the **File** component, upload a text file from your local machine with data you want to ingest into the **Astra DB** component database.
This example uploads an up-to-date CSV about Oscar winners.
3. Click **Playground** to start a chat session.
4. Ask the bot: `Who won the Oscar in 2024 for best movie?`
5. The bot's response should be similar to this:
2. Click **Playground** to start a chat session.
3. Ask the bot: `Who won the Oscar in 2024 for best movie?`
4. The bot's response should be similar to this:
```text
The Oscar for Best Picture in 2024 was awarded to "Oppenheimer,"

28
docs/docs/Integrations/integrations-langsmith.md
View file

@ -5,26 +5,24 @@ slug: /integrations-langsmith
LangSmith is a full-lifecycle DevOps service from LangChain that provides monitoring and observability. To integrate with Langflow, just add your LangChain API key as a Langflow environment variable and you are good to go!
LangSmith is a full-lifecycle DevOps service from LangChain that provides monitoring and observability. To integrate with Langflow, add your LangChain API key and configuration as Langflow environment variables, and then start Langflow.
1. Obtain your LangChain API key from [https://smith.langchain.com](https://smith.langchain.com/)
2. Add the following keys to the Langflow .env file.
Replace `LANGCHAIN_API_KEY` and `LANGSMITH_PROJECT_NAME` with your LangChain API key.
## Step-by-step Configuration {#b912579a43984f9a92921232b67c885d}
```text
LANGSMITH_TRACING=true
LANGSMITH_ENDPOINT=https://api.smith.langchain.com/
LANGSMITH_API_KEY=LANGCHAIN_API_KEY
LANGSMITH_PROJECT=LANGSMITH_PROJECT_NAME
```
Alternatively, export the environment variables in your terminal:
---
`export LANGSMITH_TRACING=true && export LANGSMITH_ENDPOINT="https://api.smith.langchain.com/" && export LANGSMITH_API_KEY="LANGCHAIN_API_KEY" && export LANGSMITH_PROJECT="LANGSMITH_PROJECT_NAME"`
1. Obtain your LangChain API key from [https://smith.langchain.com](https://smith.langchain.com/)
2. Add the following keys to Langflow .env file:
`LANGCHAIN_API_KEY="your-api-key"LANGCHAIN_PROJECT="your-project-name"`
or export the environment variables in your terminal:
`export LANGCHAIN_API_KEY="your-api-key"export LANGCHAIN_PROJECT="your-project-name"`
3. Restart Langflow using `langflow run --env-file .env`
3. Restart Langflow using `langflow run --env-file .env`
4. Run a project in Langflow.
5. View the Langsmith dashboard for monitoring and observability.

14
docs/docs/Sample-Flows/memory-chatbot.md
View file

@ -5,7 +5,11 @@ slug: /memory-chatbot
import Icon from "@site/src/components/icon";
This flow extends the [basic prompting flow](/starter-projects-basic-prompting) with a **Chat memory** component that stores up to 100 previous chat messages and uses them to provide context for the current conversation.
:::info
The **Chat memory** component is also known as the **Message history** component.
:::
This flow extends the [basic prompting flow](/starter-projects-basic-prompting) with a **Message history** component that stores up to 100 previous chat messages and uses them to provide context for the current conversation.
## Prerequisites
@ -20,7 +24,7 @@ This flow extends the [basic prompting flow](/starter-projects-basic-prompting)
![](/img/starter-flow-memory-chatbot.png)
This flow adds a **Chat Memory** component to the Basic Prompting flow.
This flow adds a **Message history** component to the Basic Prompting flow.
This component retrieves previous messages and sends them to the **Prompt** component to fill a part of the **Template** with context.
To examine the template, click the **Template** field in the **Prompt** component.
@ -37,7 +41,7 @@ History:
```
The `{memory}` code in the prompt creates a new input port in the component called **memory**.
The **Chat Memory** component is connected to this port to store chat messages from the **Playground**, and provide the **OpenAI** component with a memory of previous chat messages.
The **Message history** component is connected to this port to store chat messages from the **Playground**, and provide the **OpenAI** component with a memory of previous chat messages.
## Run the memory chatbot flow
@ -62,9 +66,9 @@ The **Message Logs** pane displays all previous messages, with each conversation
`session_id` is a unique identifier in Langflow that stores conversation sessions between the AI and a user. A `session_id` is created when a conversation is initiated, and then associated with all subsequent messages during that session.
In the **Memory Chatbot** flow you created, the **Chat Memory** component references past interactions by **Session ID**. You can demonstrate this by modifying the **Session ID** value to switch between conversation histories.
In the **Memory Chatbot** flow you created, the **Message history** component references past interactions by **Session ID**. You can demonstrate this by modifying the **Session ID** value to switch between conversation histories.
1. In the **Session ID** field of the **Chat Memory** and **Chat Input** components, add a **Session ID** value like `MySessionID`.
1. In the **Session ID** field of the **Message history** and **Chat Input** components, add a **Session ID** value like `MySessionID`.
2. Now, once you send a new message the **Playground**, you should have a new memory created in the **Message Logs** pane.
3. Notice how your conversation is being stored in different memory sessions.