langflow/docs/docs/getting-started/workspace.mdx

import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import ReactPlayer from "react-player";
import Admonition from "@theme/Admonition";

# 🖥️ Langflow Workspace

## The Langflow Workspace Interface

The Langflow Workspace interface is designed to facilitate the creation, management, and execution of flows. It features a minimalistic design with various menus and options that are accessible for building and customizing a chatbot.

### Sidebar Menu

Located on the left, this menu includes several collapsible sections that categorize the different types of pre-built components available in Langflow.

### Workspace Area

The large central area where users can visually assemble and connect components to create flows.

## Top Navigation Bar

- **Project Options**: Indicates the name of the current project or document. Clicking here allows users to rename the project or access project settings.
- **My Collection**: Provides access to saved or user-defined collections of components or flows.
- **Store**: Opens the component store where users can browse and add new components to their workspace.

In the top navigation bar, the dropdown menu labeled with the project name offers several management and customization options for the current flow in the Langflow Workspace.

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl("img/topnav.png"),
    dark: useBaseUrl("img/topnav.png"),
  }}
  style={{ width: "40%", margin: "20px auto" }}
/>

* **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 data within the Workspace.

## Control Panel

- **Star**: Located in the top-right corner, allowing users to star or favorite the project for easy access.
- **Playground**: Button that executes the current flow in the workspace.
- **API**: Provides API access details and integration options for the current flow.
- **Share**: Allows users to share their project or flow with others, providing options for collaboration and review.

## Utility Buttons

- **Plus (+)**: Located at the bottom of the sidebar, used to add new components to the workspace.
- **Settings (gear icon)**: Provides access to settings for the Langflow Workspace, where users can customize their experience or manage account settings.

The **Langflow Workspace** is where you assemble new flows by connecting components and run them. To get started, click on **New Project**. You can either build a flow from scratch (Blank Flow) or choose from pre-built starter examples.

## Flows & Components

A [flow](#flow) is a pipeline of components connected together in the Langflow Workspace.

A [component](#component) is a single building block within a flow. It has inputs, outputs, and parameters that define its functionality.

For example, the **OpenAI Model** is a **component** of the **Basic Prompting** flow.

## Flow

A **Flow** is a sequence of components that are connected to perform a series of operations or tasks. Each flow is essentially a pipeline where data functions travel through various components, each modifying or analyzing the data according to its specific functionality.

For example, the [Basic Prompting](../starter-projects/basic-prompting) flow is a pipeline of four components:

<ZoomableImage
  alt="Basic Prompting Flow"
  sources={{
    light: useBaseUrl("img/basic-prompting.png"),
    dark: useBaseUrl("img/basic-prompting.png"),
  }}
  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>

In this flow, the **OpenAI Model** receives input (left side) and produces output (right side) - in this case, receiving input from the **Chat Input** and **Prompt** components and passing the output to the **Chat Output** component.

## 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 [Components Section](../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 use distinct
  colors to indicate the types of inputs and outputs that can be interconnected.
  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-light.png"),
    dark: useBaseUrl("img/single-component-dark.png"),
  }}
  style={{ width: "40%", 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 workspace.

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>

### Multiple outputs

A component can have multiple outputs. For example, this one Chat Input component routes through three prompt chains, and returns three different responses to a single question in the Playground.

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl("img/multiple-outputs.png"),
    dark: useBaseUrl("img/multiple-outputs.png"),
  }}
  style={{ width: "40%", margin: "20px auto" }}
/>

### Output Preview

Langflow now includes an output visualizer for components that opens a pop-up screen. This allows you to easily inspect and monitor transmissions between components, providing instant feedback on your workflows.

### Component Parameters

Langflow components can be edited by clicking the component settings button.

<div
  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
  <ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
</div>

Hide parameters with the **SHOW** button to reduce complexity and keep the workspace clean and intuitive for experimentation.

Double-click the component name to rename it.

### Component menu

Each component is a little unique, but they will all have a menu bar on top that looks something like this.
The menu options are **Code**, **Advanced Settings**, **Freeze**, and **More**.

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl("img/chat-input-light.png"),
    dark: useBaseUrl("img/chat-input-dark.png"),
  }}
  style={{ width: "40%", margin: "20px auto" }}
/>

### Code menu

The **Code** button displays your component's Python code.
You can modify the code and save it.

### Advanced Settings

Modify the parameters of your component.

#### Freeze

After a component runs, lock its previous output state to prevent it from re-running.

This avoids spending tokens when consistent output is expected.

#### More

**Code** - Modify your component's Python code.
**Advanced** - modify the parameters of your component.

<div
  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
  <ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
</div>

**Copy** - copy your component.

**Share** - share your component to the Langflow store.

**Docs** - view documentation for your component.

**Delete** - delete your component.

### Group multiple components

Components without input or output nodes can be grouped into a single component for reuse.
This is useful for combining large flows into single components (like RAG with a vector database, for example) and saving space.

1. Hold **Shift** and drag to select the **Prompt** and **OpenAI** components.
2. Select **Group**.
3. The components merge into a single component.
4. To save the new component, select **Save**. It can now be reused from the **Saved** components folder.

### Update component version

A component's state is stored in a database, while sidebar components are like starter templates.

As soon as you drag a component from the sidebar to the workspace, the two components are no longer in parity.

The component will keep the version number it was initilized to the workspace with. Click the **Update Component** icon to bring the component up to the `latest` version.

## Playground

Run your flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button.

For more, see [Playground](../administration/playground).

## API

The **API** button opens the API window, where Langflow presents code for integrating your flow into external applications.

Modify the call's parameters in the **Tweaks** window, click the **Copy Code** or **Download** buttons, and paste your code where you want to use it.

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl("img/api-window.png"),
    dark: useBaseUrl("img/api-window.png"),
  }}
  style={{ width: "60%", margin: "20px auto" }}
/>

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

```curl
curl -X POST \
  http://127.0.0.1:7863/api/v1/run/f2eefd80-bb91-4190-9279-0d6ffafeaac4\?stream\=false \
  -H 'Content-Type: application/json'\
  -d '{"input_value": "is anybody there?",
  "output_type": "chat",
  "input_type": "chat",
  "tweaks": {
  "Prompt-uxBqP": {},
  "OpenAIModel-k39HS": {},
  "ChatOutput-njtka": {},
  "ChatInput-P3fgL": {}
}}'
```

Result:

```
{"session_id":"f2eefd80-bb91-4190-9279-0d6ffafeaac4:53856a772b8e1cfcb3dd2e71576b5215399e95bae318d3c02101c81b7c252da3","outputs":[{"inputs":{"input_value":"is anybody there?"},"outputs":[{"results":{"result":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?"},"artifacts":{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI"},"messages":[{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI","component_id":"ChatOutput-njtka"}],"component_display_name":"Chat Output","component_id":"ChatOutput-njtka"}]}]}%
```

### Python API

The **Python API** tab displays code to interact with your flow using the Python HTTP requests library.

### Python Code

The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime.

### Chat Widget HTML

The **Chat Widget HTML** tab displays code that can be inserted in the `<body>` of your HTML to interact with your flow.
For more, see the [Chat widget documentation](../administration/chat-widget).

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

<div
  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
  <ReactPlayer playing controls url="/videos/langflow_api.mp4" />
</div>