diff --git a/docs/docs/Components/components.md b/docs/docs/Components/components-overview.md similarity index 88% rename from docs/docs/Components/components.md rename to docs/docs/Components/components-overview.md index 0598aebc9..f1c28f7b3 100644 --- a/docs/docs/Components/components.md +++ b/docs/docs/Components/components-overview.md @@ -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. diff --git a/docs/docs/Configuration/My-Collection.md b/docs/docs/Configuration/My-Collection.md deleted file mode 100644 index ba631ae80..000000000 --- a/docs/docs/Configuration/My-Collection.md +++ /dev/null @@ -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 flow’s 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 -``` - diff --git a/docs/docs/Configuration/configuration-api-keys.md b/docs/docs/Configuration/configuration-api-keys.md index f321ee957..68ce60752 100644 --- a/docs/docs/Configuration/configuration-api-keys.md +++ b/docs/docs/Configuration/configuration-api-keys.md @@ -1,5 +1,5 @@ --- -title: API Keys +title: API keys sidebar_position: 1 slug: /configuration-api-keys --- diff --git a/docs/docs/Configuration/configuration-backend-only.md b/docs/docs/Configuration/configuration-backend-only.md index 823572253..49aa54e9f 100644 --- a/docs/docs/Configuration/configuration-backend-only.md +++ b/docs/docs/Configuration/configuration-backend-only.md @@ -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**. diff --git a/docs/docs/Settings/settings-global-variables.md b/docs/docs/Configuration/configuration-global-variables.md similarity index 98% rename from docs/docs/Settings/settings-global-variables.md rename to docs/docs/Configuration/configuration-global-variables.md index b77aa3a56..b29f26a03 100644 --- a/docs/docs/Settings/settings-global-variables.md +++ b/docs/docs/Configuration/configuration-global-variables.md @@ -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 diff --git a/docs/docs/Configuration/environment-variables.md b/docs/docs/Configuration/environment-variables.md index dd0087d86..fa1d907b6 100644 --- a/docs/docs/Configuration/environment-variables.md +++ b/docs/docs/Configuration/environment-variables.md @@ -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. | `LANGFLOW_CONFIG_DIR` | String | | Set the Langflow configuration directory where files, logs, and the Langflow database are stored. | | `LANGFLOW_DATABASE_URL` | String | | Set the database URL for Langflow. If you don't provide one, Langflow uses an SQLite database. | | `LANGFLOW_DEV` | Boolean | `false` | Run Langflow in development mode (may contain bugs).
See [`--dev` option](./configuration-cli.md#run-dev). | -| `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. | +| `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. | | `LANGFLOW_FRONTEND_PATH` | String | `./frontend` | Path to the frontend directory containing build files. This is for development purposes only.
See [`--frontend-path` option](./configuration-cli.md#run-frontend-path). | | `LANGFLOW_HEALTH_CHECK_MAX_RETRIES` | Integer | `5` | Set the maximum number of retries for the health check.
See [`--health-check-max-retries` option](./configuration-cli.md#run-health-check-max-retries). | | `LANGFLOW_HOST` | String | `127.0.0.1` | The host on which the Langflow server will run.
See [`--host` option](./configuration-cli.md#run-host). | @@ -138,9 +136,9 @@ The following table lists the environment variables supported by Langflow. | `LANGFLOW_REMOVE_API_KEYS` | Boolean | `false` | Remove API keys from the projects saved in the database.
See [`--remove-api-keys` option](./configuration-cli.md#run-remove-api-keys). | | `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. | | `LANGFLOW_STORE` | Boolean | `true` | Enable the Langflow Store.
See [`--store` option](./configuration-cli.md#run-store). | -| `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` | Boolean | `true` | Store environment variables as [global variables](../Settings/settings-global-variables.md) in the database. | +| `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` | Boolean | `true` | Store environment variables as [global variables](../Configuration/configuration-global-variables.md) in the database. | | `LANGFLOW_SUPERUSER` | String | Not set | Set the name for the superuser. Required if [`LANGFLOW_AUTO_LOGIN`](#LANGFLOW_AUTO_LOGIN) is set to `false`.
See [`superuser --username` option](./configuration-cli.md#superuser-username). | | `LANGFLOW_SUPERUSER_PASSWORD` | String | Not set | Set the password for the superuser. Required if [`LANGFLOW_AUTO_LOGIN`](#LANGFLOW_AUTO_LOGIN) is set to `false`.
See [`superuser --password` option](./configuration-cli.md#superuser-password).| -| `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). | +| `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). | | `LANGFLOW_WORKER_TIMEOUT` | Integer | `300` | Worker timeout in seconds.
See [`--worker-timeout` option](./configuration-cli.md#run-worker-timeout). | | `LANGFLOW_WORKERS` | Integer | `1` | Number of worker processes.
See [`--workers` option](./configuration-cli.md#run-workers). | diff --git a/docs/docs/Getting-Started/👋 Welcome-to-Langflow.md b/docs/docs/Getting-Started/👋 Welcome-to-Langflow.md index b91495252..48876453e 100644 --- a/docs/docs/Getting-Started/👋 Welcome-to-Langflow.md +++ b/docs/docs/Getting-Started/👋 Welcome-to-Langflow.md @@ -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). diff --git a/docs/docs/Settings/_category_.json b/docs/docs/Settings/_category_.json deleted file mode 100644 index 42ef60736..000000000 --- a/docs/docs/Settings/_category_.json +++ /dev/null @@ -1 +0,0 @@ -{"position":7, "label":"Settings"} \ No newline at end of file diff --git a/docs/docs/Settings/settings-project-general-settings.md b/docs/docs/Settings/settings-project-general-settings.md deleted file mode 100644 index 089c29d60..000000000 --- a/docs/docs/Settings/settings-project-general-settings.md +++ /dev/null @@ -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** > **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** > **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** > **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. - diff --git a/docs/docs/Workspace/workspace-logs.md b/docs/docs/Workspace/workspace-logs.md index a29d76fa3..e1c3b504d 100644 --- a/docs/docs/Workspace/workspace-logs.md +++ b/docs/docs/Workspace/workspace-logs.md @@ -1,6 +1,6 @@ --- title: Logs -sidebar_position: 3 +sidebar_position: 4 slug: /workspace-logs --- diff --git a/docs/docs/Workspace/workspace-overview.md b/docs/docs/Workspace/workspace-overview.md new file mode 100644 index 000000000..ab3e1e64d --- /dev/null +++ b/docs/docs/Workspace/workspace-overview.md @@ -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**. + + + diff --git a/docs/docs/Workspace/workspace-playground.md b/docs/docs/Workspace/workspace-playground.md index 99389b412..e1d47f355 100644 --- a/docs/docs/Workspace/workspace-playground.md +++ b/docs/docs/Workspace/workspace-playground.md @@ -1,6 +1,6 @@ --- title: Playground -sidebar_position: 1 +sidebar_position: 2 slug: /workspace-playground --- diff --git a/docs/docs/Workspace/workspace.md b/docs/docs/Workspace/workspace.md deleted file mode 100644 index 53a94b67b..000000000 --- a/docs/docs/Workspace/workspace.md +++ /dev/null @@ -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. diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index b2842f886..d9c1bd4b3 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -82,10 +82,18 @@ const config = { '@docusaurus/plugin-client-redirects', { redirects: [ - // { - // to: '/My-Collection', - // from: '/365085a8-a90a-43f9-a779-f8769ec7eca1', - // }, + { + to: '/workspace-overview', + from: ['/365085a8-a90a-43f9-a779-f8769ec7eca1', '/My-Collection', '/workspace', '/settings-project-general-settings'], + }, + { + to: '/components-overview', + from: '/components', + }, + { + to: '/configuration-global-variables', + from: '/settings-global-variables', + }, // add more redirects like this // { // to: '/docs/anotherpage',