jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

[Docs] - Administration folder (#1969)

Browse source 
* video-content

* consolidate-pages

* api

* remove-langfuse-integration

* playground-svg

* update-component-png

* consolidate-items

* status-svgs

* factor-flows-components-collections-docs

* cleanup-page

* component-content

* api-calls

* move-docs

* migration-issues

---------

Co-authored-by: ogabrielluiz <gabriel@langflow.org>
This commit is contained in:
Mendon Kissling 2024-05-27 08:24:30 -04:00 • committed by GitHub
commit bd7d8f4e49
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 397 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

19
docs/docs/administration/api.mdx
View file

@ -4,15 +4,12 @@ import Admonition from "@theme/Admonition";
# API Keys
## Introduction
Langflow offers an API Key functionality that allows users to access their individual components and flows without going through traditional login authentication. The API Key is a user-specific token that can be included in the request's header or query parameter to authenticate API calls. The following documentation outlines how to generate, use, and manage these API Keys in Langflow.
Langflow provides an API key functionality that allows users to access their individual components and flows without traditional login authentication. The API key is a user-specific token that can be included in the request header or query parameter to authenticate API calls. This documentation outlines how to generate, use, and manage API keys in Langflow.
<Admonition type="warning">
This feature requires the `LANGFLOW_AUTO_LOGIN` environment variable to be set
to `False`. The default user and password are set using _`LANGFLOW_SUPERUSER`_
and _`LANGFLOW_SUPERUSER_PASSWORD`_ environment variables. Default values are
_`langflow`_ and _`langflow`_ respectively.
This feature requires the LANGFLOW_AUTO_LOGIN environment variable to be set to False.
The default user and password are set using the LANGFLOW_SUPERUSER and LANGFLOW_SUPERUSER_PASSWORD environment variables.
The default values are langflow and langflow, respectively.
</Admonition>
## Generating an API Key
@ -93,7 +90,7 @@ print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS, apiKey=api_key))
### Using the Query Parameter
Alternatively, you can include the API key as a query parameter in the URL:
Include the API key as a query parameter in the URL:
```bash
curl -X POST \
@ -146,9 +143,9 @@ print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS, apiKey=api_key))
## Security Considerations
- **Visibility**: The API key won't be retrievable again through the UI for security reasons.
- **Scope**: The key only allows access to the flows and components of the specific user to whom it was issued.
- **Visibility**: For security reasons, the API key cannot be retrieved again through the UI.
- **Scope**: The key allows access only to the flows and components of the specific user to whom it was issued.
## Revoking an API Key
To revoke an API key, simply delete it from the UI. This will immediately invalidate the key and prevent it from being used again.
To revoke an API key, delete it from the UI. This action immediately invalidates the key and prevents it from being used again.

2
docs/docs/administration/cli.mdx
View file

@ -1,4 +1,4 @@
# 🖥️ Command Line Interface (CLI)
# Command Line Interface (CLI)
## Overview

9
docs/docs/administration/global-env.mdx
View file

@ -1,5 +1,6 @@
import ZoomableImage from "/src/theme/ZoomableImage.js";
import Admonition from "@theme/Admonition";
import ReactPlayer from "react-player";
# Global environment variables
@ -43,3 +44,11 @@ You now have a `openai_api_key` global environment variable for your Langflow pr
4. To view and manage your project's global environment variables, visit **Settings** > **Variables and Secrets**.
For more on variables in HuggingFace Spaces, see [Managing Secrets](https://huggingface.co/docs/hub/spaces-overview#managing-secrets).
## Video
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_global_variables.mp4" />
</div>

51
docs/docs/administration/langfuse_integration.mdx
View file

@ -1,51 +0,0 @@
# Integrating Langfuse with Langflow
## Introduction
Langfuse is an open-source tracing and analytics tool designed for LLM applications. Integrating Langfuse with Langflow provides detailed production traces and granular insights into quality, cost, and latency. This integration allows you to monitor and debug your Langflow's chat or APIs easily.
## Step-by-Step Instructions
### Step 1: Create a Langfuse account
1. Go to [Langfuse](https://langfuse.com) and click on the "Sign In" button in the top right corner.
2. Click on the "Sign Up" button and create an account.
3. Once logged in, click on "Settings" and then on "Create new API keys."
4. Copy the Public key and the Secret Key and save them somewhere safe.
{/* Add these keys to your environment variables in the following step. */}
### Step 2: Set up Langfuse in Langflow
1. **Export the Environment Variables**: You'll need to export the environment variables `LANGFLOW_LANGFUSE_SECRET_KEY` and `LANGFLOW_LANGFUSE_PUBLIC_KEY` with the values obtained in Step 1.
You can do this by executing the following commands in your terminal:
```bash
export LANGFLOW_LANGFUSE_SECRET_KEY=<your secret key>
export LANGFLOW_LANGFUSE_PUBLIC_KEY=<your public key>
```
Alternatively, you can run the Langflow CLI command:
```bash
LANGFLOW_LANGFUSE_SECRET_KEY=<your secret key>
LANGFLOW_LANGFUSE_PUBLIC_KEY=<your public key>
langflow
```
If you are self-hosting Langfuse, you can also set the environment variable `LANGFLOW_LANGFUSE_HOST` to point to your Langfuse instance. By default, Langfuse points to the cloud instance at `https://cloud.langfuse.com`.
2. **Verify Integration**: Ensure that the environment variables are set correctly by checking their existence in your environment, for example by running:
```bash
echo $LANGFLOW_LANGFUSE_SECRET_KEY
echo $LANGFLOW_LANGFUSE_PUBLIC_KEY
```
3. **Monitor Langflow**: Now, whenever you use Langflow's chat or API, you will be able to see the tracing of your conversations in Langfuse.
That's it! You have successfully integrated Langfuse with Langflow, enhancing observability and debugging capabilities for your LLM application.
---
Note: For more details or customized configurations, please refer to the official [Langfuse documentation](https://langfuse.com/docs/integrations/langchain).

10
docs/docs/administration/playground.mdx
View file

@ -14,7 +14,7 @@ It even works for flows hosted on the Langflow store!
As long as you have a flow's environment variables set, you can run it by clicking the **Playground** button.
1. From your **Collections** page, click **Playground** in one of your flows.
1. From your **Collections** page, click the **![Playground icon](/logos/botmessage.svg)Playground** in one of your flows.
The **Playground** window opens.
<ZoomableImage
@ -27,3 +27,11 @@ 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
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_playground.mp4" />
</div>

221
docs/docs/getting-started/canvas.mdx Normal file
View file

@ -0,0 +1,221 @@
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 canvas
The **Langflow canvas** is the central hub of Langflow, where you'll assemble new flows from components, run them, and see the results.
To get a feel for the canvas, we'll examine a basic prompting flow.
You can either build this flow yourself, or select **New Project** > **Basic prompting** to open a canvas with the flow pre-built.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/basic-prompting.png",
dark: "img/basic-prompting.png",
}}
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).
## Components
A component is a building block of a flow.
<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 represent the
availability to connect to other components. 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.png"),
dark: useBaseUrl("img/single-component.png"),
}}
style={{ width: "50%", maxWidth: "800px", 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)).
Run the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button 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.
</div>
---
### 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**, **Save**, **Duplicate**, and **More**.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/chat-input-with-menu.png",
dark: "img/chat-input-with-menu.png",
}}
style={{ width: "30%", margin: "20px auto" }}
/>
#### Code
The **Code** button displays your component's Python code.
You can modify the code and save it.
#### Save
Save your component to the **Saved** components folder for re-use.
#### Duplicate
Duplicate your component in the canvas.
#### More
**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 re-use.
This is useful for combining large flows into single components (like RAG with a vector database, for example) and saves space in the canvas.
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 re-used from the **Saved** components folder.
## Playground
Run your flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button.
For more, see [Playground](../administration/playground.mdx).
## 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: "img/api-window.png",
dark: "img/api-window.png",
}}
style={{ width: "50%", 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.
```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.mdx).
### 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>
## Project options menu
To see options for your project, in the upper left corner of the canvas, select the dropdown menu.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/project-options-menu.png",
dark: "img/project-options-menu.png",
}}
style={{ width: "30%", margin: "20px auto" }}
/>
**New** - Start a new project.
**Duplicate** - Duplicate the current flow as a new project.
**Settings** - Modify the project's **Name** or **Description**.
**Import** - Upload a flow `.json` file from your local machine.
**Export** - Download your current project to your local machine as a `.json` file.
**Undo** or **Redo** - Undo or redo your last action.

113
docs/docs/getting-started/flows-components-collections.mdx Normal file
View file

@ -0,0 +1,113 @@
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**.
## 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:
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/basic-prompting.png",
dark: "img/basic-prompting.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
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).
<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 represent the
availability to connect to other components. 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.png"),
dark: useBaseUrl("img/single-component.png"),
}}
style={{ width: "50%", maxWidth: "800px", 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 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.
</div>
---
### 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.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
</div>
## Collection
A collection is a snapshot of flows available in a database.
Collections can be downloaded to local storage and uploaded for future use.
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
/>
</div>
## 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.

2
docs/docs/migration/possible-installation-issues.mdx
View file

@ -1,4 +1,4 @@
# Common Installation Issues
# ❗️ Common Installation Issues
This is a list of possible issues that you may encounter when installing Langflow 1.0 alpha and how to solve them.

10
docs/sidebars.js
View file

@ -15,6 +15,9 @@ module.exports = {
"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",
],
},
@ -35,15 +38,12 @@ module.exports = {
label: "Administration",
collapsed: false,
items: [
"administration/login",
"administration/api",
"administration/login",
"administration/cli",
"administration/playground",
"administration/global-env",
"administration/components",
"administration/collection",
"administration/prompt-customization",
"administration/langfuse_integration",
"administration/chat-widget",
],
},
{

BIN
docs/static/img/api-window.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 277 KiB

BIN
docs/static/img/chat-input-with-menu.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
docs/static/img/features.png vendored
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.2 KiB

BIN
docs/static/img/project-options-menu.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
docs/static/img/single-component.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 61 KiB

8
docs/static/logos/botmessage.svg vendored Normal file
View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot-message-square">
<path d="M12 6V2H8" />
<path d="m8 18-4 4V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z" />
<path d="M2 12h2" />
<path d="M9 11v2" />
<path d="M15 11v2" />
<path d="M20 12h2" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 417 B

11
docs/static/logos/greencheck.svg vendored Normal file
View file

@ -0,0 +1,11 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="green"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 6 9 17l-5-5" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 207 B

11
docs/static/logos/playbutton.svg vendored Normal file
View file

@ -0,0 +1,11 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polygon points="5,3 19,12 5,21 5,3" fill="currentColor" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 236 B

BIN
docs/static/videos/langflow_global_variables.mp4 vendored Normal file
View file

Binary file not shown.

BIN
docs/static/videos/langflow_playground.mp4 vendored Normal file
View file

Binary file not shown.