diff --git a/docs/docs/administration/global-env.mdx b/docs/docs/administration/global-env.mdx index 249981409..c23ca8dd1 100644 --- a/docs/docs/administration/global-env.mdx +++ b/docs/docs/administration/global-env.mdx @@ -2,7 +2,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js"; import Admonition from "@theme/Admonition"; import ReactPlayer from "react-player"; -# Global environment variables +# Global Environment Variables Langflow 1.0 alpha includes the option to add **Global Environment Variables** for your application. diff --git a/docs/docs/administration/login.mdx b/docs/docs/administration/login.mdx index 1d5a1d031..d5d7c1989 100644 --- a/docs/docs/administration/login.mdx +++ b/docs/docs/administration/login.mdx @@ -4,7 +4,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js"; import ReactPlayer from "react-player"; import Admonition from "@theme/Admonition"; -# Sign up and Sign in +# Sign Up and Sign In ## Introduction diff --git a/docs/docs/contributing/contribute-component.md b/docs/docs/contributing/contribute-component.md index b178a5882..f638434e2 100644 --- a/docs/docs/contributing/contribute-component.md +++ b/docs/docs/contributing/contribute-component.md @@ -1,6 +1,6 @@ import ZoomableImage from "/src/theme/ZoomableImage.js"; -# How to contribute components? +# How to Contribute Components? As of Langflow 1.0 alpha, new components are added as objects of the [CustomComponent](https://github.com/langflow-ai/langflow/blob/dev/src/backend/base/langflow/interface/custom/custom_component/custom_component.py) class and any dependencies are added to the [pyproject.toml](https://github.com/langflow-ai/langflow/blob/dev/pyproject.toml#L27) file. diff --git a/docs/docs/getting-started/canvas.mdx b/docs/docs/getting-started/canvas.mdx index 4c8e1c06e..b16807b66 100644 --- a/docs/docs/getting-started/canvas.mdx +++ b/docs/docs/getting-started/canvas.mdx @@ -4,8 +4,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js"; import ReactPlayer from "react-player"; import Admonition from "@theme/Admonition"; - -# 🎨 Langflow canvas +# 🎨 Langflow Canvas The **Langflow canvas** is the central hub of Langflow, where you'll assemble new flows from components, run them, and see the results. @@ -21,11 +20,38 @@ You can either build this flow yourself, or select **New Project** > **Basic pro style={{ width: "30%", margin: "20px auto" }} /> -For more on the difference between flows, components, collections, and projects, see [Flows, collections, components, and projects](./flows-components-collections.mdx). +## Flows, components, collections, and projects -## Components +A [flow](#flow) is a pipeline of components connected together in the Langflow canvas. -A component is a building block of a flow. +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**. + +## Flow + +A **flow** is a pipeline of components connected together in the Langflow canvas. + +For example, the [Basic prompting](../starter-projects/basic-prompting.mdx) flow is a pipeline of four components: + + + +In this flow, the **OpenAI LLM component** receives input (left side) and produces output (right side) - in this case, receiving input from the **Chat Input** and **Prompt** components and producing 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 LangChain [documentation](https://python.langchain.com/docs/integrations/components).
During the flow creation process, you will notice handles (colored circles) @@ -55,7 +81,7 @@ A component is a building block of a flow.
In the top right corner of the component, you'll find the component status icon (![Status icon](/logos/playbutton.svg)). -Run the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button at the bottom right of the canvas. +Build the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** at the bottom right of the canvas. 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. @@ -63,6 +89,16 @@ To debug, hover over the component status to see the outputs. --- +### Component Parameters + +Langflow components can be edited by clicking the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation. + +
+ +
+ ### Component menu Each component is a little unique, but they will all have a menu bar on top that looks something like this. @@ -77,7 +113,7 @@ The menu options are **Code**, **Save**, **Duplicate**, and **More**. style={{ width: "30%", margin: "20px auto" }} /> -#### Code +### Code menu The **Code** button displays your component's Python code. You can modify the code and save it. @@ -189,6 +225,33 @@ For example, changing the **Chat Input** component's `input_value` will change t
+## Collection + +A collection is a snapshot of flows available in a database. + +Collections can be downloaded to local storage and uploaded for future use. + +
+ +
+ +## Project + +A **Project** can be a flow or a component. To view your saved projects, select **My Collection**. + +Your **Projects** are displayed. + +Click the **![Playground icon](/logos/botmessage.svg) Playground** button to run a flow from the **My Collection** screen. + +In the top left corner of the screen are options for **Download Collection**, **Upload Collection**, and **New Project**. + +Select **Download Collection** to save your project to your local machine. This downloads all flows and components as a `.json` file. + +Select **Upload Collection** to upload a flow or component `.json` file from your local machine. + +Select **New Project** to create a new project. In addition to a blank canvas, [starter projects](../starter-projects/basic-prompting.mdx) are also available. + ## Project options menu To see options for your project, in the upper left corner of the canvas, select the dropdown menu. diff --git a/docs/docs/getting-started/flows-components-collections.mdx b/docs/docs/getting-started/flows-components-collections.mdx index 028e46b2a..586f08192 100644 --- a/docs/docs/getting-started/flows-components-collections.mdx +++ b/docs/docs/getting-started/flows-components-collections.mdx @@ -17,97 +17,10 @@ A [project](#project) can be a component or a flow. Projects are saved as part o For example, the **OpenAI LLM** is a **component** of the **Basic prompting** flow, and the **flow** is stored in a **collection**. -## Flow -A **flow** is a pipeline of components connected together in the Langflow canvas. - -For example, the [Basic prompting](../starter-projects/basic-prompting.mdx) flow is a pipeline of four components: - - - -For example, the **OpenAI LLM component** receives input (left side) and produces output (right side) - in this case, receiving input from the **Chat Input** and **Prompt** components and producing 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 LangChain [documentation](https://python.langchain.com/docs/integrations/components). - -
- 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. 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. -
- -{" "} - - - -
-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 canvas. - -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. -
- ---- - -### Component Parameters - -Langflow components can be edited by clicking the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation. - -
- -
-## Collection -A collection is a snapshot of flows available in a database. - -Collections can be downloaded to local storage and uploaded for future use. - -
- -
- -## Project - -A **Project** can be a flow or a component. To view your saved projects, select **My Collection**. - -Your **Projects** are displayed. - -Click the **![Playground icon](/logos/botmessage.svg) Playground** button to run a flow from the **My Collection** screen. - -In the top left corner of the screen are options for **Download Collection**, **Upload Collection**, and **New Project**. - -Select **Download Collection** to save your project to your local machine. This downloads all flows and components as a `.json` file. - -Select **Upload Collection** to upload a flow or component `.json` file from your local machine. - -Select **New Project** to create a new project. In addition to a blank canvas, [starter projects](../starter-projects/basic-prompting.mdx) are also available. diff --git a/docs/docs/getting-started/huggingface-spaces.mdx b/docs/docs/getting-started/huggingface-spaces.mdx deleted file mode 100644 index d2eccc782..000000000 --- a/docs/docs/getting-started/huggingface-spaces.mdx +++ /dev/null @@ -1,38 +0,0 @@ -import ThemedImage from "@theme/ThemedImage"; -import useBaseUrl from "@docusaurus/useBaseUrl"; -import ZoomableImage from "/src/theme/ZoomableImage.js"; -import Admonition from "@theme/Admonition"; - -# 🤗 HuggingFace Spaces - -HuggingFace provides a great alternative for running Langflow in their Spaces environment. This means you can run Langflow without any local installation required. - -In a Chromium-based browser, go to the [Langflow Space](https://huggingface.co/spaces/Langflow/Langflow?duplicate=true) or [Langflow v1.0 alpha Preview Space](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true). - -You'll be presented with the following screen: - - - -Name your Space, define the visibility (Public or Private), and click on **Duplicate Space** to start the installation process. When installation is finished, you'll be redirected to the Space's main page to start using Langflow right away! - -## Run a starter project - -Langflow provides a range of example flows to help you get started. - -Once you get Langflow running in your Space, click on **New Project** in the top right corner of the screen. - -Select a starter project from the list, set up your API keys, and click ⚡ Run. This will open up Langflow's Interaction Panel with the chat console, text inputs, and outputs ready to go. - -For more information on the starter projects, see the guides below: - -* [Basic prompting](/starter-projects/basic-prompting.mdx) -* [Memory chatbot](/starter-projects/memory-chatbot.mdx) -* [Blog writer](/starter-projects/blog-writer.mdx) -* [Document QA](/starter-projects/document-qa.mdx) \ No newline at end of file diff --git a/docs/docs/getting-started/install-langflow.mdx b/docs/docs/getting-started/install-langflow.mdx index 7a567d597..d78514909 100644 --- a/docs/docs/getting-started/install-langflow.mdx +++ b/docs/docs/getting-started/install-langflow.mdx @@ -6,9 +6,7 @@ import Admonition from "@theme/Admonition"; # 📦 Install Langflow - - Langflow v1.0 alpha is also available in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true). Try it out or follow the instructions [here](./huggingface-spaces) to install it locally. - + Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true), to create your own Langflow workspace in minutes. Langflow requires [Python 3.10](https://www.python.org/downloads/release/python-3100/) and [pip](https://pypi.org/project/pip/) or [pipx](https://pipx.pypa.io/stable/installation/) to be installed on your system. @@ -66,4 +64,23 @@ python -m langflow run │ Collaborate, and contribute at our GitHub Repo 🚀 │ ``` -3. Continue on to the [Quickstart](./quickstart.mdx). \ No newline at end of file +3. Continue on to the [Quickstart](./quickstart.mdx). + +## HuggingFace Spaces + +HuggingFace provides a great alternative for running Langflow in their Spaces environment. This means you can run Langflow without any local installation required. + +In a Chromium-based browser, go to the [Langflow Space](https://huggingface.co/spaces/Langflow/Langflow?duplicate=true) or [Langflow v1.0 alpha Preview Space](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true). + +You'll be presented with the following screen: + + + +Name your Space, define the visibility (Public or Private), and click on **Duplicate Space** to start the installation process. When installation is finished, you'll be redirected to the Space's main page to start using Langflow right away! \ No newline at end of file diff --git a/docs/docs/getting-started/quickstart.mdx b/docs/docs/getting-started/quickstart.mdx index f54a07747..ef7d373a6 100644 --- a/docs/docs/getting-started/quickstart.mdx +++ b/docs/docs/getting-started/quickstart.mdx @@ -10,12 +10,12 @@ This guide demonstrates how to build a basic prompt flow and modify that prompt ## Prerequisites -* [Langflow installed](./install-langflow.mdx) +* [Langflow installed and running](./install-langflow.mdx) * [OpenAI API key](https://platform.openai.com) - Langflow v1.0 alpha is also available in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true). Try it out or follow the instructions [here](./huggingface-spaces) to install it locally. + Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes. ## Hello World - Basic Prompting diff --git a/docs/docs/index.mdx b/docs/docs/index.mdx index e807ee086..7fb912e98 100644 --- a/docs/docs/index.mdx +++ b/docs/docs/index.mdx @@ -26,9 +26,11 @@ Its intuitive interface allows for easy manipulation of AI building blocks, enab - [Quickstart](/getting-started/quickstart) - Create a flow and run it. -- [HuggingFace Spaces](/getting-started/huggingface-spaces) - Duplicate the Langflow preview space and try it out before you install. +- [Langflow Canvas](/getting-started/canvas) - Learn more about the Langflow canvas. -- [New to LLMs?](/getting-started/new-to-llms) - Learn more about LLMs, prompting, and more at [promptingguide.ai](https://promptingguide.ai). + + Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes. + ## Learn more about Langflow 1.0 diff --git a/docs/docs/starter-projects/basic-prompting.mdx b/docs/docs/starter-projects/basic-prompting.mdx index ef333643f..6fb7391e2 100644 --- a/docs/docs/starter-projects/basic-prompting.mdx +++ b/docs/docs/starter-projects/basic-prompting.mdx @@ -4,7 +4,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js"; import ReactPlayer from "react-player"; import Admonition from "@theme/Admonition"; -# Basic prompting +# Basic Prompting Prompts serve as the inputs to a large language model (LLM), acting as the interface between human instructions and computational tasks. @@ -14,36 +14,14 @@ This article demonstrates how to use Langflow's prompt tools to issue basic prom ## Prerequisites -1. Install Langflow. -```bash -python -m pip install langflow --pre -``` +* [Langflow installed and running](../getting-started/install-langflow.mdx) -2. Start a local Langflow instance with the Langflow CLI: -```bash -langflow run -``` -Or start Langflow with Python: -```bash -python -m langflow run -``` - -Result: -``` -│ Welcome to ⛓ Langflow │ -│ │ -│ Access http://127.0.0.1:7860 │ -│ Collaborate, and contribute at our GitHub Repo 🚀 │ -``` +* [OpenAI API key created](https://platform.openai.com) - - Langflow v1.0 alpha is also available in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true). Try it out or follow the instructions [here](/getting-started/huggingface-spaces) to install it locally. - + Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes. -3. Create an [OpenAI API key](https://platform.openai.com). - ## Create the basic prompting project 1. From the Langflow dashboard, click **New Project**. diff --git a/docs/docs/starter-projects/blog-writer.mdx b/docs/docs/starter-projects/blog-writer.mdx index 411233c8b..0e8047fd6 100644 --- a/docs/docs/starter-projects/blog-writer.mdx +++ b/docs/docs/starter-projects/blog-writer.mdx @@ -4,42 +4,20 @@ import ZoomableImage from "/src/theme/ZoomableImage.js"; import ReactPlayer from "react-player"; import Admonition from "@theme/Admonition"; -# Blog writer +# Blog Writer Build a blog writer with OpenAI that uses URLs for reference content. ## Prerequisites -1. Install Langflow. -```bash -python -m pip install langflow --pre -``` +* [Langflow installed and running](../getting-started/install-langflow.mdx) -2. Start a local Langflow instance with the Langflow CLI: -```bash -langflow run -``` -Or start Langflow with Python: -```bash -python -m langflow run -``` - -Result: -```bash -│ Welcome to ⛓ Langflow │ -│ │ -│ Access http://127.0.0.1:7860 │ -│ Collaborate, and contribute at our GitHub Repo 🚀 │ -``` +* [OpenAI API key created](https://platform.openai.com) - - Langflow v1.0 alpha is also available in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true). Try it out or follow the instructions [here](/getting-started/huggingface-spaces) to install it locally. - + Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes. -3. Create an [OpenAI API key](https://platform.openai.com). - ## Create the Blog Writer project 1. From the Langflow dashboard, click **New Project**. diff --git a/docs/docs/starter-projects/document-qa.mdx b/docs/docs/starter-projects/document-qa.mdx index 1807bb948..5e5377355 100644 --- a/docs/docs/starter-projects/document-qa.mdx +++ b/docs/docs/starter-projects/document-qa.mdx @@ -10,36 +10,14 @@ Build a question-and-answer chatbot with a document loaded from local memory. ## Prerequisites -1. Install Langflow. -```bash -python -m pip install langflow --pre -``` +* [Langflow installed and running](../getting-started/install-langflow.mdx) -2. Start a local Langflow instance with the Langflow CLI: -```bash -langflow run -``` -Or start Langflow with Python: -```bash -python -m langflow run -``` - -Result: -``` -│ Welcome to ⛓ Langflow │ -│ │ -│ Access http://127.0.0.1:7860 │ -│ Collaborate, and contribute at our GitHub Repo 🚀 │ -``` +* [OpenAI API key created](https://platform.openai.com) - - Langflow v1.0 alpha is also available in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true). Try it out or follow the instructions [here](/getting-started/huggingface-spaces) to install it locally. - + Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes. -3. Create an [OpenAI API key](https://platform.openai.com). - ## Create the Document QA project 1. From the Langflow dashboard, click **New Project**. diff --git a/docs/docs/starter-projects/memory-chatbot.mdx b/docs/docs/starter-projects/memory-chatbot.mdx index e9560d9e5..86c64d368 100644 --- a/docs/docs/starter-projects/memory-chatbot.mdx +++ b/docs/docs/starter-projects/memory-chatbot.mdx @@ -4,42 +4,20 @@ import ZoomableImage from "/src/theme/ZoomableImage.js"; import ReactPlayer from "react-player"; import Admonition from "@theme/Admonition"; -# Memory chatbot +# Memory Chatbot This flow extends the [basic prompting flow](./basic-prompting.mdx) to include chat memory for unique SessionIDs. ## Prerequisites -1. Install Langflow. -```bash -python -m pip install langflow --pre -``` +* [Langflow installed and running](../getting-started/install-langflow.mdx) -2. Start a local Langflow instance with the Langflow CLI: -```bash -langflow run -``` -Or start Langflow with Python: -```bash -python -m langflow run -``` - -Result: -``` -│ Welcome to ⛓ Langflow │ -│ │ -│ Access http://127.0.0.1:7860 │ -│ Collaborate, and contribute at our GitHub Repo 🚀 │ -``` +* [OpenAI API key created](https://platform.openai.com) - - Langflow v1.0 alpha is also available in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true). Try it out or follow the instructions [here](/getting-started/huggingface-spaces) to install it locally. - + Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes. -3. Create an [OpenAI API key](https://platform.openai.com). - ## Create the memory chatbot project 1. From the Langflow dashboard, click **New Project**. diff --git a/docs/docs/starter-projects/vector-store-rag.mdx b/docs/docs/starter-projects/vector-store-rag.mdx index fda7e432b..ddb0a1d46 100644 --- a/docs/docs/starter-projects/vector-store-rag.mdx +++ b/docs/docs/starter-projects/vector-store-rag.mdx @@ -4,7 +4,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js"; import ReactPlayer from "react-player"; import Admonition from "@theme/Admonition"; -# Vector store RAG +# Vector Store RAG Retrieval Augmented Generation, or RAG, is a pattern for training LLMs on your data and querying it. @@ -17,10 +17,10 @@ We've chosen [Astra DB](https://astra.datastax.com/signup?utm_source=langflow-pr ## Prerequisites - Langflow v1.0 alpha is also available in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true). Try it out or follow the instructions [here](../getting-started/huggingface-spaces) to install it locally. + Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes. -* [Langflow installed](../getting-started/install-langflow.mdx) +* [Langflow installed and running](../getting-started/install-langflow.mdx) * [OpenAI API key](https://platform.openai.com) diff --git a/docs/docs/tutorials/chatprompttemplate_guide.mdx b/docs/docs/tutorials/chatprompttemplate_guide.mdx index 05a8f3333..48059b134 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 +# Building Chatbots with System Message ## Overview diff --git a/docs/docs/tutorials/loading_document.mdx b/docs/docs/tutorials/loading_document.mdx index 73fb85968..4a6143a0e 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 +# Integrating Documents with Prompt Variables ## Overview diff --git a/docs/sidebars.js b/docs/sidebars.js index b03fb76e8..2b891b589 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -14,9 +14,7 @@ module.exports = { "index", "getting-started/install-langflow", "getting-started/quickstart", - "getting-started/huggingface-spaces", "getting-started/canvas", - "getting-started/flows-components-collections", "migration/possible-installation-issues", "getting-started/new-to-llms", ],