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

docs: concepts folder (#5576)

Browse source 
* initial-content

* docs: update Concepts overview for clarity and accuracy

* docs: enhance clarity in Concepts documentation and fix minor inaccuracies

* docs: add detailed explanation of flow execution in Playground

* docs: enhance Concepts documentation with detailed component definitions and usage examples

* docs: remove Logs pane documentation and integrate relevant content into Playground

* docs: remove Logs section from sidebar navigation

* docs: add Logs pane overview and update Playground documentation

* docs: enhance Concepts documentation with detailed API usage examples for cURL and Python

* docs: remove unused ReactPlayer import and clean up API pane documentation

* docs: update Chat Widget embedding instructions for HTML, React, and Angular

* docs: update titles and descriptions for custom components and overview

* docs: standardize section titles for Python code and Chat widget in concepts API

* docs: clarify instructions for using Freeze Path and component options

* docs: update keyboard shortcut for Freeze Path in concepts-components documentation

* updated-image

* fix(docs): clarify session ID usage in Playground documentation

* fix-astra-component-position

* reorder-sidebar

* remove-tweak-guidance

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* fix capital case on collections

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* fix capital t in tables

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* fix: update component controls and add keyboard shortcuts for Windows

* fix: clarify component versioning and update notification details in documentation

* fix: update documentation for tool parameters and data types in components-tools.md

* fix: improve documentation clarity and formatting in concepts API, components, overview, and playground

* docs: add Working with Flows page (#5722)

* Add flows page

* style-guide-and-sidebar

---------

Co-authored-by: Mendon Kissling <59585235+mendonk@users.noreply.github.com>

* fix-broken-link

* Update concepts-components.md

revert change to match the image

---------

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: Tejas Kumar <tejas+lol@tejas.qa>
This commit is contained in:
Mendon Kissling 2025-01-16 09:39:14 -05:00 • committed by GitHub
commit e8dd2d4c18
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 672 additions and 511 deletions
Download patch file Download diff file Expand all files Collapse all files

208
docs/docs/Concepts/concepts-api.md Normal file
View file

@ -0,0 +1,208 @@
---
title: API pane
slug: /concepts-api
---
The **API** pane presents code templates for integrating your flow into external applications.
![](/img/api-pane.png)
## cURL
The **cURL** tab displays sample code for posting a query to your flow. Modify the `input_value` to change your input message. Copy the code and run it to post a query to your flow and get the result.
## Python API
The **Python API** tab displays code to interact with your flow using the Python HTTP `requests` library.
To use the `requests` library:
1. Copy and paste the code into a Python script.
2. Run the script and pass your message with it.
```python
python3 python-api-script.py --message="tell me about something interesting"
```
## Python code
The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime.
To use your code in a Python application using the Langflow runtime, you have to first download your flow’s JSON file.
1. In your **Workspace**, click **Settings**, and then select **Export**.
2. Download the flow to your local machine. Make sure the flow path in the script matches the flow’s location on your machine.
3. Copy and paste the code from the API tab into a Python script file.
It will look like this:
```python
from langflow.load import run_flow_from_json
TWEAKS = {
"ChatInput-kKhri": {},
"Prompt-KDSi5": {},
"ChatOutput-Vr3Q7": {},
"OpenAIModel-4xYtx": {}
}
result = run_flow_from_json(flow="./basic-prompting-local.json",
input_value="tell me about something interesting",
fallback_to_env_vars=True, # False by default
tweaks=TWEAKS)
print(result)
```
4. Run the script:
```python
python3 python-api-script.py
```
## Tweaks
The **Tweaks** tab displays the available parameters for your flow. Modifying the parameters changes the code parameters across all windows. For example, changing the **Chat Input** component's `input_value` will change that value across all API calls.
## Send image files to your flow with the API
For information on sending files to the Langflow API, see [API examples](/api-reference-api-examples#upload-image-files).
## Chat Widget
The **Chat Widget HTML** tab displays code that can be inserted in the `<body>` of your HTML to interact with your flow.
The **Langflow Chat Widget** is a powerful web component that enables communication with a Langflow project. This widget allows for a chat interface embedding, allowing the integration of Langflow into web applications effortlessly.
You can get the HTML code embedded with the chat by clicking the Code button at the Sidebar after building a flow.
Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read below to learn how to use it with HTML, React and Angular.
### Embed the chat widget into HTML
To embed the chat widget into any HTML page, insert the code snippet. inside a `<body>` tag.
```html
<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@v1.0.6/dist/build/static/js/bundle.min.js""></script>
<langflow-chat
window_title="Basic Prompting"
flow_id="801abb1e-19b9-4278-9632-179b6d84f126"
host_url="http://localhost:7860"
></langflow-chat>
```
### Embed the chat widget with React
To embed the Chat Widget using React, insert this `<script>` tag into the React _index.html_ file, inside the `<body>`tag:
```javascript
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
```
Declare your Web Component and encapsulate it in a React component.
```javascript
declare global {
namespace JSX {
interface IntrinsicElements {
"langflow-chat": any;
}
}
}
export default function ChatWidget({ className }) {
return (
<div className={className}>
<langflow-chat
chat_inputs='{"your_key":"value"}'
chat_input_field="your_chat_key"
flow_id="your_flow_id"
host_url="langflow_url"
></langflow-chat>
</div>
);
}
```
Place the component anywhere in your code to display the Chat Widget.
### Embed the chat widget with Angular
To use the chat widget in Angular, first add this `<script>` tag into the Angular _index.html_ file, inside the `<body>` tag.
```javascript
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
```
When you use a custom web component in an Angular template, the Angular compiler might show a warning when it doesn't recognize the custom elements by default. To suppress this warning, add `CUSTOM_ELEMENTS_SCHEMA` to the module's `@NgModule.schemas`.
- Open the module file (it typically ends with _.module.ts_) where you'd add the `langflow-chat` web component.
- Import `CUSTOM_ELEMENTS_SCHEMA` at the top of the file:
`import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';`
- Add `CUSTOM_ELEMENTS_SCHEMA` to the 'schemas' array inside the '@NgModule' decorator:
```javascript
@NgModule({
declarations: [
// ... Other components and directives ...
],
imports: [
// ... Other imported modules ...
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA // Add the CUSTOM_ELEMENTS_SCHEMA here
]
})
export class YourModule { }
```
In your Angular project, find the component belonging to the module where `CUSTOM_ELEMENTS_SCHEMA` was added. Inside the template, add the `langflow-chat` tag to include the Chat Widget in your component's view:
```javascript
<langflow-chat chat_inputs='{"your_key":"value"}' chat_input_field="your_chat_key" flow_id="your_flow_id" host_url="langflow_url"></langflow-chat>
```
:::tip
`CUSTOM_ELEMENTS_SCHEMA` is a built-in schema that allows Angular to recognize custom elements. Adding `CUSTOM_ELEMENTS_SCHEMA` tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like `langflow-chat`. Notice that you can only use the Chat Widget in components that are part of the module where you added `CUSTOM_ELEMENTS_SCHEMA`.
:::
## Chat widget configuration
Use the widget API to customize your Chat Widget:
:::caution
Props with the type JSON need to be passed as stringified JSONs, with the format \{"key":"value"\}.
:::
| Prop | Type | Required | Description |
| --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| bot_message_style | JSON | No | Applies custom formatting to bot messages. |
| chat_input_field | String | Yes | Defines the type of the input field for chat messages. |
| chat_inputs | JSON | Yes | Determines the chat input elements and their respective values. |
| chat_output_key | String | No | Specifies which output to display if multiple outputs are available. |
| chat_position | String | No | Positions the chat window on the screen (options include: top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left). |
| chat_trigger_style | JSON | No | Styles the chat trigger button. |
| chat_window_style | JSON | No | Customizes the overall appearance of the chat window. |
| error_message_style | JSON | No | Sets the format for error messages within the chat window. |
| flow_id | String | Yes | Identifies the flow that the component is associated with. |
| height | Number | No | Sets the height of the chat window in pixels. |
| host_url | String | Yes | Specifies the URL of the host for chat component communication. |
| input_container_style | JSON | No | Applies styling to the container where chat messages are entered. |
| input_style | JSON | No | Sets the style for the chat input field. |
| online | Boolean | No | Toggles the online status of the chat component. |
| online_message | String | No | Sets a custom message to display when the chat component is online. |
| placeholder | String | No | Sets the placeholder text for the chat input field. |
| placeholder_sending | String | No | Sets the placeholder text to display while a message is being sent. |
| send_button_style | JSON | No | Sets the style for the send button in the chat window. |
| send_icon_style | JSON | No | Sets the style for the send icon in the chat window. |
| tweaks | JSON | No | Applies additional custom adjustments for the associated flow. |
| user_message_style | JSON | No | Determines the formatting for user messages in the chat window. |
| width | Number | No | Sets the width of the chat window in pixels. |
| window_title | String | No | Sets the title displayed in the chat window's header or title bar. |

225
docs/docs/Concepts/concepts-components.md Normal file
View file

@ -0,0 +1,225 @@
---
title: Components
slug: /concepts-components
---
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.
To add a component to a flow, drag it from the **Component** menu to the **Workspace**.
Learn more about components and how they work on this page.
## Component menu
Each component is unique, but all have a menu bar at the top that looks something like the following:
<img src="/img/openai-model-component.png" alt="Open AI component" style={{display: 'block', margin: 'auto', width: 300}} />
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 Path** — 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.
To view a component’s output and logs, click the <Icon name="View" aria-label="View icon" />**Visibility** icon.
To run a single component, click <Icon name="Play" aria-label="Play button" /> **Play**.
A <Icon name="Check" aria-label="Checkmark" />**Checkmark** indicates that the component ran successfully.
Running a single component with the **Play** button is different from running the entire flow. In a single component run, the `build_vertex` function is called, which builds and runs only the single component with direct inputs provided through the UI (the `inputs_dict` parameter). The `VertexBuildResult` data is passed to the `build_and_run` method, which calls the component's `build` method and runs it. Unlike running the full flow, running a single component does not automatically execute its upstream dependencies.
## Component ports
Handles (<Icon name="Circle" size="16" aria-label="A circle on the side of a component" />) on the side of a component indicate the types of inputs and outputs that can be connected at that port. Hover over a handle to see connection details.
<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
### Component port data type colors
The following table lists the handle colors and their corresponding data types:
| Data type | Handle color | Hex code |
|-----------|--------------|----------|
| BaseLanguageModel | Fuchsia | #c026d3 |
| Data | Red | #dc2626 |
| Document | Lime | #65a30d |
| Embeddings | Emerald | #10b981 |
| LanguageModel | Fuchsia | #c026d3 |
| Message | Indigo | #4f46e5 |
| Prompt | Violet | #7c3aed |
| str | Indigo | #4F46E5 |
| Text | Indigo | #4F46E5 |
| unknown | Gray | #9CA3AF |
## Component code
A component inherits from a base `Component` class that defines its interface and behavior.
For example, the [Recursive character text splitter](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py) is a child of the [LCTextSplitterComponent](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/base/textsplitters/model.py) class.
```python
from typing import Any
from langchain_text_splitters import RecursiveCharacterTextSplitter, TextSplitter
from langflow.base.textsplitters.model import LCTextSplitterComponent
from langflow.inputs.inputs import DataInput, IntInput, MessageTextInput
from langflow.utils.util import unescape_string
class RecursiveCharacterTextSplitterComponent(LCTextSplitterComponent):
display_name: str = "Recursive Character Text Splitter"
description: str = "Split text trying to keep all related text together."
documentation: str = "https://docs.langflow.org/components-processing"
name = "RecursiveCharacterTextSplitter"
icon = "LangChain"
inputs = [
IntInput(
name="chunk_size",
display_name="Chunk Size",
info="The maximum length of each chunk.",
value=1000,
),
IntInput(
name="chunk_overlap",
display_name="Chunk Overlap",
info="The amount of overlap between chunks.",
value=200,
),
DataInput(
name="data_input",
display_name="Input",
info="The texts to split.",
input_types=["Document", "Data"],
),
MessageTextInput(
name="separators",
display_name="Separators",
info='The characters to split on.\nIf left empty defaults to ["\\n\\n", "\\n", " ", ""].',
is_list=True,
),
]
def get_data_input(self) -> Any:
return self.data_input
def build_text_splitter(self) -> TextSplitter:
if not self.separators:
separators: list[str] | None = None
else:
# check if the separators list has escaped characters
# if there are escaped characters, unescape them
separators = [unescape_string(x) for x in self.separators]
return RecursiveCharacterTextSplitter(
separators=separators,
chunk_size=self.chunk_size,
chunk_overlap=self.chunk_overlap,
)
```
Components include definitions for inputs and outputs, which are represented in the UI with color-coded ports.
**Input Definition:** Each input (like `IntInput` or `DataInput`) specifies an input's type, name, and display properties, which appear as configurable fields in the component's UI panel.
**Methods:** Components have methods or functions that handle their functionality. This component has two methods.
`get_data_input` retrieves the text data to be split from the component's input. This makes the data available to the class.
`build_text_splitter` creates a `RecursiveCharacterTextSplitter` object by calling its parent class's `build` method. The text is split with the created splitter and passed to the next component.
When used in a flow, this component:
1. Displays its configuration options in the UI.
2. Validates user inputs based on the input types.
3. Processes data using the configured parameters.
4. Passes results to the next component.
## Freeze path
After a component runs, **Freeze Path** 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 Path**.
Enabling **Freeze Path** freezes all components upstream of the selected component.
If you only want to freeze a single component, select **Freeze** instead.
A <Icon name="Snowflake" aria-label="Snowflake"/> icon appears on all frozen components.
## Additional component options
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.
### Component shortcuts
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 + F | ⌘ + F | Freezes the current component state. |
| Freeze Path | 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. |
## 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**.
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.
## Component version
A component's initial state is stored in a database. As soon as you drag a component from the sidebar to the workspace, the two components are no longer in parity.
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.
Click the <Icon name="AlertTriangle" aria-label="Exclamation mark" /> **Update Component** icon to update the component to the `latest` version. This will change the code of the component in place so you can validate that the component was updated by checking its Python code before and after updating it.
## Components sidebar
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.
**Beta** components are still being tested and are not suitable for production workloads.
**Legacy** components are available to use but no longer supported.

15
docs/docs/Concepts/concepts-flows.md Normal file
View file

@ -0,0 +1,15 @@
# Flows
Flows in Langflow are fully serializable and can be saved and loaded from the file system. In this guide, we'll explore how to import and export flows.
## Import Flow
If you've already got a Langflow JSON file, import it into Langflow by clicking on the project name and choosing **Import Flow**.
![Import Flow](../../static/img/flows/import.gif)
Once imported, your flow is ready to use.
## Export Flow
The option to export a flow is available in the same menu as shown above. Once exported as JSON, you can import your flow into another Langflow instance.

132
docs/docs/Concepts/concepts-overview.md Normal file
View file

@ -0,0 +1,132 @@
---
title: Langflow overview
slug: /concepts-overview
---
import Icon from "@site/src/components/icon";
This page explores the fundamental building blocks of Langflow, beginning with the question, **"What is a flow?"**
## What is a flow?
A **flow** is an application. It receives input, processes it, and produces output.
Flows are created in the **workspace** with components dragged from the components sidebar.
![Basic prompting flow within in the workspace](/img/workspace-basic-prompting.png)
A flow can be as simple as the [basic prompting flow](/get-started-quickstart), which creates an OpenAI chatbot with four components.
* Each component in a flow is a **node** that performs a specific task, like an AI model or a data source.
* Each component has a **Configuration** menu. Click the **Code** pane to see a component's underlying Python code.
* Components are connected with **edges** to form flows.
If you're familiar with [ReactFlow](https://reactflow.dev/learn), a **flow** is a node-based application, a **component** is a node, and the connections between components are **edges**.
When a flow is run, Langflow builds a Directed Acyclic Graph (DAG) graph object from the nodes (components) and edges (connections between components), with the nodes sorted to determine the order of execution. The graph build calls the individual components' `def_build` functions to validate and prepare the nodes. This graph is then processed in dependency order. Each node is built and executed sequentially, with results from each built node being passed to nodes that are dependent on the previous node's results.
Flows are stored on local disk at these default locations:
* **Linux or WSL on Windows**: `home/<username>/.cache/langflow/`
* **MacOS**: `/Users/<username>/Library/Caches/langflow/`
The flow storage location can be customized with the [LANGFLOW_CONFIG_DIR](/environment-variables#LANGFLOW_CONFIG_DIR) environment variable.
## Find your way around
If you're new to Langflow, it's OK to feel a bit lost at first. We’ll take you on a tour, so you can orient yourself and start creating applications quickly.
Langflow has four distinct regions: the [workspace](#workspace) is the main area where you build your flows. The components sidebar is on the left, and lists the available [components](#components). The [playground](#playground) and [API pane](#api-pane) are available in the upper right corner.
![](/img/workspace.png)
## Workspace
The **workspace** is where you create AI applications by connecting and running components in flows.
The workspace controls allow you to adjust your view and lock your flows in place.
* Add **Notes** to flows with the **Add Note** button, similar to commenting in code.
* To access the [Settings](#settings) menu, click ⚙️ **Settings**.
This menu contains configuration for **Global Variables**, **Langflow API**, **Shortcuts**, and **Messages**.
## Components
A **component** is a single building block within a flow and consists of inputs, outputs, and parameters that define its functionality.
To add a component to your flow, drag it from the sidebar onto the workspace.
To connect components, drag a line from the output handle (⚪) of one component to the input handle of another.
For more information, see [Components overview](/concepts-components).
<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
## Playground
The **Playground** executes the current flow in the workspace.
Chat with your flow, view inputs and outputs, and modify your AI's memories to tune your responses in real time.
Either the **Chat Input** or **Chat Output** component can be opened in the **Playground** and tested in real time.
For more information, see the [Playground](/concepts-playground).
![](/img/playground.png)
## API pane {#api-pane}
The **API** pane provides code templates to integrate your flows into external applications.
For more information, see the [API pane](/concepts-api).
![](/img/api-pane.png)
## View logs
The **Logs** pane provides a detailed record of all component executions within a workspace.
To access the **Logs** pane, click your **Flow Name**, and then select **Logs**.
![](/img/logs.png)
## Projects and folders
The **My Projects** page displays all the flows and components you've created in the Langflow workspace.
![](/img/my-projects.png)
**My Projects** is the default folder where all new projects and components are initially stored.
Projects, folders, and flows are exchanged as JSON objects.
* To create a new folder, click 📁 **New Folder**.
* To rename a folder, double-click the folder name.
* To download a folder, click 📥 **Download**.
* To upload a folder, click 📤 **Upload**. The default maximum file upload size is 100 MB.
* To move a flow or component, drag and drop it into the desired folder.
## Options menu
The dropdown menu labeled with the project name offers several management and customization options for the current flow in the Langflow workspace.
* **New**: Create a new flow from scratch.
* **Settings**: Adjust settings specific to the current flow, such as its name, description, and endpoint name.
* **Logs**: View logs for the current project, including execution history, errors, and other runtime events.
* **Import**: Import a flow or component from a JSON file into the workspace.
* **Export**: Export the current flow as a JSON file.
* **Undo (⌘Z)**: Revert the last action taken in the project.
* **Redo (⌘Y)**: Reapply a previously undone action.
* **Refresh All**: Refresh all components and delete cache.
## Settings
Click <Icon name="Settings" aria-label="Gear icon" /> **Settings** to access **Global variables**, **Langflow API**, **Shortcuts**, and **Messages**.

57
docs/docs/Concepts/concepts-playground.md Normal file
View file

@ -0,0 +1,57 @@
---
title: Playground
slug: /concepts-playground
---
import Icon from "@site/src/components/icon";
The **Playground** is a dynamic interface designed for real-time interaction with LLMs, allowing users to chat, access memories, and monitor inputs and outputs. Here, users can directly prototype their models, making adjustments and observing different outcomes.
As long as you have an [Input or Output](/components-io) component working, you can open it by clicking the **Playground** button.
The Playground's window arrangement changes depending on what components are being used.
![](/img/playground.png)
## Run a flow in the playgound
When you run a flow in the **Playground**, Langflow calls the `/build/{flow_id}/flow` endpoint in [chat.py](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/api/v1/chat.py#L162). This call retrieves the flow data, builds a graph, and executes the graph. As each component (or node) is executed, the `build_vertex` function calls `build_and_run`, which may call the individual components' `def_build` method, if it exists. If a component doesn't have a `def_build` function, the build still returns a component.
The `build` function allows components to execute logic at runtime. For example, the [Recursive character text splitter](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py) is a child of the `LCTextSplitterComponent` class. When text needs to be processed, the parent class's `build` method is called, which creates a `RecursiveCharacterTextSplitter` object and uses it to split the text according to the defined parameters. The split text is then passed on to the next component. This all occurs when the component is built.
## View playground messages by session ID
When you send a message from the **Playground** interface, the interactions are stored in the **Message Logs** by `session_id`.
A single flow can have multiple chats, and different flows can share the same chat. Each chat will have a different `session_id`.
To view messages by `session_id` within the Playground, click the <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> menu of any chat session, and then select **Message Logs**.
![](/img/messages-logs.png)
Individual messages in chat memory can be edited or deleted. Modifying these memories influences the behavior of the chatbot responses.
To learn more about chat memories in Langflow, see [Memory components](/components-memories).
## Use custom Session IDs for multiple user interactions
`session_id` values are used to track user interactions in a flow.
By default, if the `session_id` value is empty, it is set to the same value as the `flow_id`. In this case, every chat call uses the same `session_id`, and you effectively have one chat session.
The `session_id` value can be configured in the **Advanced Settings** of the **Chat Input** and **Chat Output** components.
To have more than one session in a single flow, pass a specific Session ID to a flow with the `session_id` parameter in the URL. All the components in the flow will automatically use this `session_id` value.
To post a message to a flow with a specific Session ID with curl, enter the following command:
```bash
curl -X POST "http://127.0.0.1:7860/api/v1/run/$FLOW_ID" \
-H 'Content-Type: application/json' \
-d '{
"session_id": "custom_session_123",
"input_value": "message",
"input_type": "chat",
"output_type": "chat"
}'
```
Check your flow's **Playground**. In addition to the messages stored for the Default Session, a new session is started with your custom Session ID.