diff --git a/docs/docs/administration/api.mdx b/docs/docs/administration/api.mdx index 115cdc666..de8533cd2 100644 --- a/docs/docs/administration/api.mdx +++ b/docs/docs/administration/api.mdx @@ -14,9 +14,11 @@ The default values are `langflow` and `langflow`, respectively. -## Generating an API Key +## Generate an API key -### Through Langflow UI +Generate a user-specific token to use with Langflow. + +### Generate an API key with the Langflow UI - -Notice that editing variables in the chat interface take place temporarily and won’t change their original value in the components once the chat is closed. - -{" "} - - - -To view the complete prompt in its original, structured format, click the "Display Prompt" option. This feature lets you see the prompt exactly as it entered the model. - -{" "} - - -In the chat interface, you can redefine which variable should be interpreted as the chat input. This gives you control over these inputs and allows dynamic and creative interactions. - -{" "} - diff --git a/docs/docs/administration/chat-widget.mdx b/docs/docs/administration/chat-widget.mdx index b2a97d30e..e73804673 100644 --- a/docs/docs/administration/chat-widget.mdx +++ b/docs/docs/administration/chat-widget.mdx @@ -61,7 +61,7 @@ import Admonition from "@theme/Admonition"; --- -### HTML +### Embed your flow into HTML The Chat Widget can be embedded into any HTML page, inside a _``_ tag, as demonstrated in the video below. @@ -73,15 +73,15 @@ The Chat Widget can be embedded into any HTML page, inside a _``_ tag, as --- -### React +### Embed your flow with React -To embed the Chat Widget using React, you'll need to insert this _` ``` -Then, declare your Web Component and encapsulate it in a React component. +2. Declare your Web Component and encapsulate it in a React component. ```jsx declare global { @@ -106,28 +106,27 @@ export default function ChatWidget({ className }) { } ``` -Finally, you can place the component anywhere in your code to display the Chat Widget. +3. Finally, you can place the component anywhere in your code to display the Chat Widget. --- -### Angular +### Embed your flow with Angular -To use it in Angular, first add this _` ``` -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: +2. 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`_. +3. Open the module file (it typically ends with _.module.ts_) where you'd add the _`langflow-chat`_ web component. +4. Import _`CUSTOM_ELEMENTS_SCHEMA`_ at the top of the file: ```ts import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; ``` -- Add _`CUSTOM_ELEMENTS_SCHEMA`_ to the 'schemas' array inside the '@NgModule' decorator: +5. Add _`CUSTOM_ELEMENTS_SCHEMA`_ to the 'schemas' array inside the '@NgModule' decorator: ```ts @NgModule({ @@ -142,9 +141,7 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; 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: +6. 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: ```jsx - - diff --git a/docs/docs/administration/components.mdx b/docs/docs/administration/components.mdx deleted file mode 100644 index 16aa83eff..000000000 --- a/docs/docs/administration/components.mdx +++ /dev/null @@ -1,58 +0,0 @@ -import ThemedImage from "@theme/ThemedImage"; -import useBaseUrl from "@docusaurus/useBaseUrl"; -import ZoomableImage from "/src/theme/ZoomableImage.js"; -import ReactPlayer from "react-player"; - -# Component - -Components are the building blocks of the flows. They are made of inputs, outputs, and parameters that define their functionality, providing a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work in the LangChain [documentation](https://python.langchain.com/docs/integrations/components) section. - -### Component's Features - -
- During the flow creation process, you will notice handles (colored circles) - attached to one or both sides of a component. These handles represent the - availability to connect to other components, while their colors are type hints - (hover over a handle to see connection details). -
- -
- For example, if you select a ConversationChain component, you - will see orange o and purple{" "} - o input handles. They indicate that - this component accepts an LLM and a Memory component as inputs. The red - asterisk * means that at least one input - of that type is required. -
- -{" "} - - - -
- On the top right corner, you will find the component status icon 🔴. Make the - necessary connections, build the flow (⚡ zap icon on the bottom right of the - canvas) and once the validation is completed, the status of each validated - component should light green 🟢. Hover over the component status to reveal the - outputs going through it in case of success, or the detected error in case of - failure. -
- ---- - -### Component's Parameters - -Langflow components can be edited in the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation. - -
- -
diff --git a/docs/docs/administration/features.mdx b/docs/docs/administration/features.mdx deleted file mode 100644 index 932607c30..000000000 --- a/docs/docs/administration/features.mdx +++ /dev/null @@ -1,68 +0,0 @@ -# Features - -
- When you click for New Project, you will see on the top left corner of the - screen, some options such as Import, Export,{" "} - Code and Save, as displayed in the image - below: -
- -{" "} - - - -
- Further down, we will explain each of these options. -
- ---- - -### Import and Export - -Flows can be exported and imported as JSON files. - - -Watch out for API keys being stored in local files. - - - ---- - -### Code - -The Code button shows snippets to use your flow as a Python object or an API. - -**Python Code** - -Through the Langflow package, you can run your flow from a JSON file. The example below shows how to run a flow from a JSON file. - -```python -from langflow.load import run_flow_from_json - -results = run_flow_from_json("path/to/flow.json", input_value="Hello, World!") -``` - -**API** - -Once you save a flow, the API endpoint is created with your latest changes. Click the "code" button to use that flow as an API. You can post-adjust component parameters using the global variable TWEAKS. - -The example below shows a Python script making a POST request to a local API endpoint, which gets a prediction based on the message input. - -
- -
- -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"; diff --git a/docs/docs/administration/global-env.mdx b/docs/docs/administration/global-env.mdx index 51e5d633e..06ef488a8 100644 --- a/docs/docs/administration/global-env.mdx +++ b/docs/docs/administration/global-env.mdx @@ -8,7 +8,7 @@ import Admonition from "@theme/Admonition"; Global Variables are a useful feature of Langflow, allowing you to define reusable variables accessed from any Text field in your project. -## TL;DR +**TL;DR** - Global Variables are reusable variables accessible from any Text field in your project. - To create one, click the 🌐 button in a Text field and then **+ Add New Variable**. @@ -17,7 +17,7 @@ Global Variables are a useful feature of Langflow, allowing you to define reusab - All Credential Global Variables are encrypted and accessible only by you. - Set _`LANGFLOW_STORE_ENVIRONMENT_VARIABLES`_ to _`true`_ in your `.env` file to add all variables in _`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`_ to your user's Global Variables. -## Creating and Adding a Global Variable +## Create and Add a Global Variable To create and add a global variable, click the 🌐 button in a Text field, and then click **+ Add New Variable**. @@ -59,7 +59,7 @@ For more on variables in HuggingFace Spaces, see [Managing Secrets](https://hugg All Credential Global Variables are encrypted and accessible only by you. -## Configuring Environment Variables in your .env file +## Configure Environment Variables in your .env file Setting `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to `true` in your `.env` file (default) adds all variables in `LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT` to your user's Global Variables. @@ -98,8 +98,6 @@ The default list of variables includes: - VECTARA_CORPUS_ID - VECTARA_API_KEY -## Video -
diff --git a/docs/docs/administration/login.mdx b/docs/docs/administration/login.mdx index f89f3a5ee..20386aebb 100644 --- a/docs/docs/administration/login.mdx +++ b/docs/docs/administration/login.mdx @@ -6,11 +6,9 @@ import Admonition from "@theme/Admonition"; # Sign Up and Sign In -## Introduction - The login functionality in Langflow serves to authenticate users and protect sensitive routes in the application. Starting from version 0.5, Langflow introduces an enhanced login mechanism that is governed by a few environment variables. This allows new secure features. -## Environment Variables +## Environment variables The following environment variables are crucial in configuring the login settings: @@ -68,7 +66,7 @@ export LANGFLOW_SECRET_KEY=randomly_generated_secure_key By default, this variable is set to `False`. When enabled (`True`), new users are automatically activated and can log in without requiring explicit activation by the superuser. -## Command-Line Interface +## Manage superusers with the CLI Langflow provides a command-line utility for managing superusers: @@ -78,7 +76,7 @@ langflow superuser This command prompts you to enter the username and password for the superuser, unless they are already set using environment variables. -## Sign-up +## Sign in With _`LANGFLOW_AUTO_LOGIN`_ set to _`False`_, Langflow requires users to sign up before they can log in. The sign-up page is the default landing page when a user visits Langflow for the first time. @@ -93,7 +91,7 @@ With _`LANGFLOW_AUTO_LOGIN`_ set to _`False`_, Langflow requires users to sign u ## Profile settings -You can change your profile settings by clicking on the profile icon in the top right corner of the Langflow dashboard. This opens a dropdown menu with the following options: +Once signed in, you can change your profile settings by clicking on the profile icon in the top right corner of the Langflow dashboard. This opens a dropdown menu with the following options: - **Admin Page**: Opens the admin page, which is only accessible to the superuser. - **Profile Settings**: Opens the profile settings page. diff --git a/docs/docs/administration/playground.mdx b/docs/docs/administration/playground.mdx index 13d16422a..7bc0c8db7 100644 --- a/docs/docs/administration/playground.mdx +++ b/docs/docs/administration/playground.mdx @@ -28,8 +28,6 @@ As long as you have a flow's environment variables set, you can run it by clicki 2. Chat with your bot as you normally would, all without having to open the editor. -## Video -
diff --git a/docs/docs/components/inputs-and-outputs.mdx b/docs/docs/components/inputs-and-outputs.mdx index a923d1f55..bd804ea5f 100644 --- a/docs/docs/components/inputs-and-outputs.mdx +++ b/docs/docs/components/inputs-and-outputs.mdx @@ -3,7 +3,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js"; # Inputs and Outputs -TL;DR: Inputs and Outputs are a category of components that are used to define where data comes in and out of your flow. +Inputs and Outputs are a category of components that are used to define where data comes in and out of your flow. They also dynamically change the Playground and can be renamed to facilitate building and maintaining your flows. ## Inputs diff --git a/docs/docs/deployment/docker.md b/docs/docs/deployment/docker.md index 1ebb5746e..a8864db55 100644 --- a/docs/docs/deployment/docker.md +++ b/docs/docs/deployment/docker.md @@ -7,7 +7,7 @@ This guide will help you get LangFlow up and running using Docker and Docker Com - Docker - Docker Compose -## Steps +## Clone repo and build Docker container 1. Clone the LangFlow repository: @@ -29,11 +29,11 @@ This guide will help you get LangFlow up and running using Docker and Docker Com LangFlow will now be accessible at [http://localhost:7860/](http://localhost:7860/). -## Docker Compose Configuration +## Docker Compose configuration The Docker Compose configuration spins up two services: `langflow` and `postgres`. -### LangFlow Service +### LangFlow service The `langflow` service uses the `langflowai/langflow:latest` Docker image and exposes port 7860. It depends on the `postgres` service. @@ -46,7 +46,7 @@ Volumes: - `langflow-data`: This volume is mapped to `/var/lib/langflow` in the container. -### PostgreSQL Service +### PostgreSQL service The `postgres` service uses the `postgres:16` Docker image and exposes port 5432. @@ -60,6 +60,6 @@ Volumes: - `langflow-postgres`: This volume is mapped to `/var/lib/postgresql/data` in the container. -## Switching to a Specific LangFlow Version +## Switch to a specific LangFlow version If you want to use a specific version of LangFlow, you can modify the `image` field under the `langflow` service in the Docker Compose file. For example, to use version 1.0-alpha, change `langflowai/langflow:latest` to `langflowai/langflow:1.0-alpha`. diff --git a/docs/docs/getting-started/flows-components-collections.mdx b/docs/docs/getting-started/flows-components-collections.mdx deleted file mode 100644 index 335fb5c12..000000000 --- a/docs/docs/getting-started/flows-components-collections.mdx +++ /dev/null @@ -1,20 +0,0 @@ -import ThemedImage from "@theme/ThemedImage"; -import useBaseUrl from "@docusaurus/useBaseUrl"; -import ZoomableImage from "/src/theme/ZoomableImage.js"; -import ReactPlayer from "react-player"; - -# 🖥️ Flows, components, collections, and projects - -## TL;DR - -A [flow](#flow) is a pipeline of components connected together in the Langflow canvas. - -A [component](#component) is a single building block within a flow. A component has inputs, outputs, and parameters that define its functionality. - -A [collection](#collection) is a snapshot of the flows available in your database. Collections can be downloaded to local storage and uploaded for future use. - -A [project](#project) can be a component or a flow. Projects are saved as part of your collection. - -For example, the **OpenAI LLM** is a **component** of the **Basic prompting** flow, and the **flow** is stored in a **collection**. - -## Component diff --git a/docs/docs/migration/migrating-to-one-point-zero.mdx b/docs/docs/migration/migrating-to-one-point-zero.mdx index 973393606..e58620347 100644 --- a/docs/docs/migration/migrating-to-one-point-zero.mdx +++ b/docs/docs/migration/migrating-to-one-point-zero.mdx @@ -2,15 +2,6 @@ import Admonition from "@theme/Admonition"; # Migrating to Langflow 1.0: A Guide - -

- We are currently working on updating this guide to provide the most accurate - and up-to-date information on migrating to Langflow 1.0. We will be adding - more content and examples to help you navigate the changes and improvements - in the new version. -

- - Langflow 1.0 is a significant update that brings many exciting changes and improvements to the platform. This guide will walk you through the key improvements and help you migrate your existing projects to the new version. diff --git a/docs/docs/migration/possible-installation-issues.mdx b/docs/docs/migration/possible-installation-issues.mdx index a012a1c09..feeddab48 100644 --- a/docs/docs/migration/possible-installation-issues.mdx +++ b/docs/docs/migration/possible-installation-issues.mdx @@ -4,14 +4,10 @@ This is a list of possible issues that you may encounter when installing Langflo ## _`No module named 'langflow.__main__'`_ -### TL;DR - 1. Run _`python -m langflow run`_ instead of _`langflow run`_. 2. If that doesn't work, reinstall Langflow with _`_python -m pip install langflow --pre -U`_. 3. If that doesn't work, reinstall Langflow and its dependencies with _`python -m pip install langflow --pre -U --force-reinstall`_. -### Details - When you try to run Langflow using the command `langflow run`, you may encounter the following error: ```bash @@ -33,15 +29,12 @@ There are two possible reasons for this error: ## _`Something went wrong running migrations. Please, run 'langflow migration --fix'`_ -### TL;DR +Clear the cache by deleting the contents of the cache folder. -- Clear the cache by deleting the contents of the cache folder. - This folder can be found at: +This folder can be found at: - **Linux or WSL2 on Windows**: `home//.cache/langflow/` - **MacOS**: `/Users//Library/Caches/langflow/` -### Details - This error can occur during Langflow upgrades when the new version can't override `langflow-pre.db` in `.cache/langflow/`. Clearing the cache removes this file but will also erase your settings. If you wish to retain your files, back them up before clearing the folder. diff --git a/docs/docs/tutorials/chatprompttemplate_guide.mdx b/docs/docs/tutorials/chatprompttemplate_guide.mdx index 48059b134..a01fec1ca 100644 --- a/docs/docs/tutorials/chatprompttemplate_guide.mdx +++ b/docs/docs/tutorials/chatprompttemplate_guide.mdx @@ -3,7 +3,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; import ZoomableImage from "/src/theme/ZoomableImage.js"; import ReactPlayer from "react-player"; -# Building Chatbots with System Message +# Build Chatbots with the System Message Component ## Overview diff --git a/docs/docs/tutorials/custom_components.mdx b/docs/docs/tutorials/custom_components.mdx index 02a137d07..110e5dbc7 100644 --- a/docs/docs/tutorials/custom_components.mdx +++ b/docs/docs/tutorials/custom_components.mdx @@ -14,7 +14,7 @@ A Custom Component is created from a user-defined Python script that uses the _` Let's take a look at the basic rules and features. Then we'll go over an example. -## TL;DR +**TL;DR** - Create a class that inherits from _`CustomComponent`_ and contains a _`build`_ method. - Use arguments with [Type Annotations (or Type Hints)](https://docs.python.org/3/library/typing.html) of the _`build`_ method to create component fields. @@ -355,7 +355,7 @@ All done! This is what our script and brand-new custom component look like: --- -## Loading Custom Components +## Load Custom Components For advanced customization, Langflow offers the option to create and load custom components outside of the standard interface. This process involves creating the desired components using a text editor and loading them using the Langflow CLI. @@ -380,7 +380,7 @@ Your structure should look something like this: └── ... ``` -### Loading Custom Components +### Load Custom Components The recommended way to load custom components is to set the _`LANGFLOW_COMPONENTS_PATH`_ environment variable to the path of your custom components directory. Then, run the Langflow CLI as usual. @@ -397,7 +397,7 @@ langflow run --components-path /path/to/components Langflow will attempt to load all of the components found in the specified directory. If a component fails to load due to errors in the component's code, Langflow will print an error message to the console but will continue loading the rest of the components. -### Interacting with Custom Components +### Interact with Custom Components Once your custom components have been loaded successfully, they will appear in Langflow's sidebar. From there, you can add them to your Langflow canvas for use. However, please note that components with errors will not be available for addition to the canvas. Always ensure your code is error-free before attempting to load components. diff --git a/docs/docs/tutorials/loading_document.mdx b/docs/docs/tutorials/loading_document.mdx index 4a6143a0e..c123624c1 100644 --- a/docs/docs/tutorials/loading_document.mdx +++ b/docs/docs/tutorials/loading_document.mdx @@ -3,7 +3,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; import ZoomableImage from "/src/theme/ZoomableImage.js"; import ReactPlayer from "react-player"; -# Integrating Documents with Prompt Variables +# Integrate Documents with Prompt Variables ## Overview