Docs: Settings pages (#4425)

* settings-content

* my-collection-location-and-slug

* my-collection

* redirects

* more-cleanup

* docs:: fixed-components-menu-item

* move-settings-content-and-redirect

* title-case

* case

* code-review

* Apply suggestions from code review

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

---------

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>
This commit is contained in:
Mendon Kissling 2024-11-12 10:34:11 -05:00 committed by GitHub
commit 692af0eef4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 109 additions and 301 deletions

View file

@ -1,17 +1,9 @@
---
title: Intro to Components
title: How to build flows with components
sidebar_position: 0
slug: /components
slug: /components-overview
---
## Component {#0323a728d8314767adb907b998036bb4}
---
A component is a single building block within a flow. It consists 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 below.
@ -24,7 +16,7 @@ During the flow creation process, you will notice handles (colored circles) atta
On the top right corner of the component, you'll find the a play button to run a component. Once it runs, a status icon appears and you can hover over that to visualize success or error messages. Start interacting with your AI by clicking the **Playground** at the bottom right of the workspace.
### Component Menu {#7e3f2f8ff5074b2fb3eee97c9cfaabe7}
## Component menu {#7e3f2f8ff5074b2fb3eee97c9cfaabe7}
Each component is unique, but they all have a menu bar at the top that looks something like this.
@ -42,7 +34,7 @@ It consists of options such as:
Click **All** (the "..." button) to see all options.
### Output Preview {#ed7b3c34e0774b8a916b0e68821c9a7a}
## Output preview {#ed7b3c34e0774b8a916b0e68821c9a7a}
Langflow 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.
@ -51,7 +43,7 @@ Langflow includes an output visualizer for components that opens a pop-up screen
![](./987204819.png)
### Advanced Settings {#b6430d4903df44f0ba4618a558c83d7b}
## Advanced settings {#b6430d4903df44f0ba4618a558c83d7b}
Langflow components can be edited by clicking the **Advanced Settings** button.
@ -63,7 +55,7 @@ Hide parameters with the **Show** button to reduce complexity and keep the wor
You can also double-click a component's name and description to modify those. Component descriptions accept markdown syntax.
### Group Components {#c3f5ed818e3b40ceb6534dc358e1a5f2}
## Group components {#c3f5ed818e3b40ceb6534dc358e1a5f2}
Multiple components can be grouped into a single component for reuse. This is useful when combining large flows into single components (like RAG with a vector database, for example) and saving space.
@ -77,7 +69,7 @@ Multiple components can be grouped into a single component for reuse. This is us
[group video here]
### Component Version {#887fd587589448dc8c27336d1c235b9b}
## Component version {#887fd587589448dc8c27336d1c235b9b}
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.

View file

@ -1,104 +0,0 @@
---
title: My Collection
sidebar_position: 3
slug: /365085a8-a90a-43f9-a779-f8769ec7eca1
---
:::info
This page may contain outdated information. It will be updated as soon as possible.
:::
My Collection is a space in Langflow where users can manage, organize, and access their flows and components. Flows and components are displayed as individual cards that provide relevant information.
![](./1289235516.png)
- **Folders**: Users can organize their projects into folders. Default folders include "My Projects" and the ability to create new folders. Hover over a folder to access options to download or delete it.
- **Search Bar** Enables users to quickly search through their flows and components.
- **Select All**: This feature allows users to select all projects displayed on the page for batch actions like moving, deleting, or exporting.
Click on a flow card to open it in Langflow Workspace or use the **Playground Button** for direct access to execute and interact with the flows chatbot interface.
## Folders {#776a3866273f4efbbbb2febdfc1baa12}
---
Folders can help you keep your projects organized in Langflow. They help you manage and categorize your work efficiently, making it easier to find and access the resources you need.
![](./1926471667.png)
Multiple projects can be stored in **folders**.
Folders allow you to categorize flows and components into manageable groups. This makes it easier to find and access specific projects quickly.
**My Projects** is a default folder where all new projects and components are initially stored unless specified otherwise. Users can create custom folders to better organize their work according to specific needs.
Hovering over a folder in Langflow provides options to either remove or download the entire folder, allowing you to keep an offline copy or migrate projects between environments
Create new folders with the **New folder** button. One folder can store multiple projects (as the default My Projects folder does).
You can download folders of projects as a single JSON file, and upload files and flows to your folder.
Click the **Trash** icon to delete a folder.
### How to Create Folders {#5ba5abe995c843e4a429e41413f9d539}
1. **Navigate to the Home Screen:**
- Go to your Langflow Home Page (outside of projects).
2. **Create a New Folder:**
- Click on the "New Folder" button
![](./1125619904.png)
- Double-click the new folder created to rename your folder appropriately to reflect its contents.
![](./945175915.png)
3. **Move Files:**
- Drag and drop files into the corresponding folders and subfolders to keep everything organized.
![](./711485342.gif)
### Best Practices for Organizing Folders {#66f23f8e129a48598a7bb4565a508360}
- **Categorize by Project:** Create a main folder for each project, then add projects for different aspects such as research, drafts, and final documents.
- **Use Descriptive Names:** Use clear and descriptive names for your folders to easily identify their contents at a glance.
### Example Structure {#ebe6acad99c24d6f9aaabf18e4a17ff4}
Here's an example of how you might organize folders and subfolders for a Langflow project:
```text
Langflow
├── Research
│ ├── Articles Project
│ ├── Data Project
│ └── Notes Project
└── Documents
├── RAG Project
└── Advanced RAG Project
```

View file

@ -1,5 +1,5 @@
---
title: API Keys
title: API keys
sidebar_position: 1
slug: /configuration-api-keys
---

View file

@ -51,7 +51,7 @@ curl -X POST \
```
The flow ID in this example is `fff8dcaa-f0f6-4136-9df0-b7cb38de42e0`, a UUID generated by Langflow and used in the endpoint URL.
See [Project & General Settings](/settings-project-general-settings) to change the endpoint.
See [API](/configuration-api-keys) to change the endpoint.
3. To stop Langflow, press **Ctrl+C**.

View file

@ -1,7 +1,7 @@
---
title: Global Variables
sidebar_position: 0
slug: /settings-global-variables
title: Global variables
sidebar_position: 5
slug: /configuration-global-variables
---
import ReactPlayer from "react-player";
@ -53,7 +53,7 @@ In **Settings > Global Variables**, the **Value** column shows the encrypted has
4. In the **Update Variable** dialog, you can edit the following fields: **Variable Name**, **Value**, and **Apply To Fields**.
5. Click **Update Variable**
5. Click **Update Variable**.
## Delete a global variable

View file

@ -1,5 +1,5 @@
---
title: Environment Variables
title: Environment variables
sidebar_position: 7
slug: /environment-variables
---
@ -7,8 +7,6 @@ slug: /environment-variables
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
# Environment Variables
Langflow lets you configure a number of settings using environment variables.
## Configure environment variables
@ -119,7 +117,7 @@ The following table lists the environment variables supported by Langflow.
| <a id="LANGFLOW_CONFIG_DIR"></a>`LANGFLOW_CONFIG_DIR` | String | | Set the Langflow configuration directory where files, logs, and the Langflow database are stored. |
| <a id="LANGFLOW_DATABASE_URL"></a>`LANGFLOW_DATABASE_URL` | String | | Set the database URL for Langflow. If you don't provide one, Langflow uses an SQLite database. |
| <a id="LANGFLOW_DEV"></a>`LANGFLOW_DEV` | Boolean | `false` | Run Langflow in development mode (may contain bugs).<br/>See [`--dev` option](./configuration-cli.md#run-dev). |
| <a id="LANGFLOW_FALLBACK_TO_ENV_VAR"></a>`LANGFLOW_FALLBACK_TO_ENV_VAR` | Boolean | `true` | If enabled, [global variables](../Settings/settings-global-variables.md) set in the Langflow UI fall back to an environment variable with the same name when Langflow fails to retrieve the variable value. |
| <a id="LANGFLOW_FALLBACK_TO_ENV_VAR"></a>`LANGFLOW_FALLBACK_TO_ENV_VAR` | Boolean | `true` | If enabled, [global variables](../Configuration/configuration-global-variables.md) set in the Langflow UI fall back to an environment variable with the same name when Langflow fails to retrieve the variable value. |
| <a id="LANGFLOW_FRONTEND_PATH"></a>`LANGFLOW_FRONTEND_PATH` | String | `./frontend` | Path to the frontend directory containing build files. This is for development purposes only.<br/>See [`--frontend-path` option](./configuration-cli.md#run-frontend-path). |
| <a id="LANGFLOW_HEALTH_CHECK_MAX_RETRIES"></a>`LANGFLOW_HEALTH_CHECK_MAX_RETRIES` | Integer | `5` | Set the maximum number of retries for the health check.<br/>See [`--health-check-max-retries` option](./configuration-cli.md#run-health-check-max-retries). |
| <a id="LANGFLOW_HOST"></a>`LANGFLOW_HOST` | String | `127.0.0.1` | The host on which the Langflow server will run.<br/>See [`--host` option](./configuration-cli.md#run-host). |
@ -138,9 +136,9 @@ The following table lists the environment variables supported by Langflow.
| <a id="LANGFLOW_REMOVE_API_KEYS"></a>`LANGFLOW_REMOVE_API_KEYS` | Boolean | `false` | Remove API keys from the projects saved in the database.<br/> See [`--remove-api-keys` option](./configuration-cli.md#run-remove-api-keys). |
| <a id="LANGFLOW_SAVE_DB_IN_CONFIG_DIR"></a>`LANGFLOW_SAVE_DB_IN_CONFIG_DIR` | Boolean | `false` | Save the Langflow database in [`LANGFLOW_CONFIG_DIR`](#LANGFLOW_CONFIG_DIR) instead of in the Langflow package directory. Note, when this variable is set to default (`false`), the database isn't shared between different virtual environments and the database is deleted when you uninstall Langflow. |
| <a id="LANGFLOW_STORE"></a>`LANGFLOW_STORE` | Boolean | `true` | Enable the Langflow Store.<br/>See [`--store` option](./configuration-cli.md#run-store). |
| <a id="LANGFLOW_STORE_ENVIRONMENT_VARIABLES"></a>`LANGFLOW_STORE_ENVIRONMENT_VARIABLES` | Boolean | `true` | Store environment variables as [global variables](../Settings/settings-global-variables.md) in the database. |
| <a id="LANGFLOW_STORE_ENVIRONMENT_VARIABLES"></a>`LANGFLOW_STORE_ENVIRONMENT_VARIABLES` | Boolean | `true` | Store environment variables as [global variables](../Configuration/configuration-global-variables.md) in the database. |
| <a id="LANGFLOW_SUPERUSER"></a>`LANGFLOW_SUPERUSER` | String | Not set | Set the name for the superuser. Required if [`LANGFLOW_AUTO_LOGIN`](#LANGFLOW_AUTO_LOGIN) is set to `false`.<br/>See [`superuser --username` option](./configuration-cli.md#superuser-username). |
| <a id="LANGFLOW_SUPERUSER_PASSWORD"></a>`LANGFLOW_SUPERUSER_PASSWORD` | String | Not set | Set the password for the superuser. Required if [`LANGFLOW_AUTO_LOGIN`](#LANGFLOW_AUTO_LOGIN) is set to `false`.<br/>See [`superuser --password` option](./configuration-cli.md#superuser-password).|
| <a id="LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT"></a>`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT` | String | Not set | Comma-separated list of environment variables to get from the environment and store as [global variables](../Settings/settings-global-variables.md). |
| <a id="LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT"></a>`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT` | String | Not set | Comma-separated list of environment variables to get from the environment and store as [global variables](../Configuration/configuration-global-variables.md). |
| <a id="LANGFLOW_WORKER_TIMEOUT"></a>`LANGFLOW_WORKER_TIMEOUT` | Integer | `300` | Worker timeout in seconds.<br/>See [`--worker-timeout` option](./configuration-cli.md#run-worker-timeout). |
| <a id="LANGFLOW_WORKERS"></a>`LANGFLOW_WORKERS` | Integer | `1` | Number of worker processes.<br/>See [`--workers` option](./configuration-cli.md#run-workers). |

View file

@ -28,7 +28,7 @@ Its intuitive interface allows for easy manipulation of AI building blocks, enab
- [Install Langflow](/getting-started-installation) - Install and start a local Langflow server.
- [Quickstart](/getting-started-quickstart) - Create a flow and run it.
- [Langflow Workspace](/workspace) - Learn more about the Langflow Workspace.
- [Langflow Workspace](/workspace-overview) - Learn more about the Langflow Workspace.
Learn more about the exciting changes in Langflow 1.0 in [A new chapter for Langflow](/whats-new-a-new-chapter-langflow).

View file

@ -1 +0,0 @@
{"position":7, "label":"Settings"}

View file

@ -1,93 +0,0 @@
---
title: Project & General Settings
sidebar_position: 1
slug: /settings-project-general-settings
---
:::info
This page may contain outdated information. It will be updated as soon as possible.
:::
Change the **Project Settings** or **General Settings** for Langflow.
## Project Settings {#71e61e6544c94f808cd74b8cc012363d}
---
Click **Project Name** &gt; **Settings** to view your **Project Settings**.
- **Name** - the name of your project.
- **Description** - the description for your project.
Visible on the Langflow Store.
- **Endpoint name** - the custom endpoint name for your project's API endpoint.
To use the default value, leave this field blank.
## General Settings {#1a0c451fd5e84feeb1d18c2886d642eb}
---
Select your **Profile Picture** &gt; **Settings** to view your **General Settings**.
### Profile Picture {#8abfa80ed6c448b6977467679d43c275}
Select a profile picture.
### Store API Key {#6a12756beb0b42fd84bdf5ab5f10fffb}
Add your **Langflow Store** API key. To get a Store key, go to the [Langflow store](https://www.langflow.store/).
### Global Variables {#12aa7f28060447babc987bdf57fc065e}
Select **Add New** to add a key to Langflow.
Select the **trash icon** to delete a key.
For more information, see Global Variables.
### Langflow API {#0a08ffc3dd9042da9f9d2d49c9df0b6a}
Create a Langflow API key.
Click **Add New** &gt; **Create Secret Key** and copy the key somewhere safe and accessible.
For more information, see Langflow API.
### Shortcuts {#6c9d705c9e7f466db496dbc6571c81d2}
A list of keyboard shortcuts for Langflow.
### Messages {#898425cf88b74c048c23e8e1e1d7c2bd}
Inspect, edit, and remove messages in your flow for testing and debugging purposes.
For more information, see the Playground.

View file

@ -1,6 +1,6 @@
---
title: Logs
sidebar_position: 3
sidebar_position: 4
slug: /workspace-logs
---

View file

@ -0,0 +1,77 @@
---
title: Workspace concepts
sidebar_position: 1
slug: /workspace-overview
---
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.
## 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 [How to build flows with components](/components-overview).
## 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.
Any input or output component can be opened in the **Playground** and tested in real time.
For more information, see the [Playground documentation](/workspace-playground).
## API
The **API** pane provides code templates to integrate your flows into external applications.
For more information, see the [API documentation](/workspace-api).
## Collections, folders, and projects
The **My Collection** page displays all the flows and components you've created in the Langflow workspace.
Your **collection** is the top-level categorization for all of your projects.
### My projects
**My Projects** is the default folder where all new projects and components are initially stored.
Collections, folders, projects, 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 ⚙️ **Settings** to access **Global variables**, **Langflow API**, **Shortcuts**, and **Messages**.

View file

@ -1,6 +1,6 @@
---
title: Playground
sidebar_position: 1
sidebar_position: 2
slug: /workspace-playground
---

View file

@ -1,69 +0,0 @@
---
title: Workspace Overview
sidebar_position: 0
slug: /workspace
---
## The Langflow Workspace {#5c8161f9bcc14bfca766685d15251d0c}
---
The **Langflow Workspace** is where you assemble new flows and create AIs by connecting and running components.
![](./310382168.png)
### Sidebar {#9d571b1d46804a01bcd8fbb9a4677af4}
Located on the left, this the sidebar includes several collapsible sections that categorize the different types of pre-built components available in Langflow. Use the search bar to locate components by name.
![](./1769489314.png)
### Canvas {#5b050d0f8406436a9201f4711f0063ae}
The canvas is the main area in the center where you can drag and drop components to create workflows.
![](./1224026366.png)
Use canvas controls in the bottom left side for zooming in and out, resetting the view, and locking or unlocking the canvas.
### Top Navigation Bar {#603c9941be154e1eba4e7c9ec9554b92}
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.
![](./1801518600.png)
- **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.
### Toolbar {#8038bcc315c34350a1f587e1ad0de59f}
The toolbar at the bottom-right corner that provides options for executing, accessing the API, and sharing workflows.
![](./563382604.png)
- **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 AI with others.