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

[Docs] - Style Guide Edits (#2114)

Browse source 
Adding style guide suggestions.
This commit is contained in:
Mendon Kissling 2024-06-07 18:12:51 -04:00 • committed by GitHub
commit 7835365c92
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 64 additions and 282 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,9 +14,11 @@ The default values are `langflow` and `langflow`, respectively.
</Admonition>
## 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
<ZoomableImage
alt="Docusaurus themed image"
@ -33,9 +35,29 @@ The default values are `langflow` and `langflow`, respectively.
4. Click on "Create secret key".
5. Copy the API key and store it in a secure location.
## Using the API Key
### Generate an API key with the Langflow CLI
### Using the `x-api-key` Header
```bash
langflow api-key
# or
python -m langflow api-key
╭─────────────────────────────────────────────────────────────────────╮
│ API Key Created Successfully: │
│ │
│ sk-O0elzoWID1izAH8RUKrnnvyyMwIzHi2Wk-uXWoNJ2Ro │
│ │
│ This is the only time the API key will be displayed. │
│ Make sure to store it in a secure location. │
│ │
│ The API key has been copied to your clipboard. Cmd + V to paste it. │
╰──────────────────────────────
```
## Use the Langflow API key
Include your API key in API requests to authenticate requests to Langflow.
### Use the `x-api-key` header
Include the `x-api-key` in the HTTP header when making API requests:
@ -90,7 +112,7 @@ api_key = "<your api key>"
print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS, apiKey=api_key))
```
### Using the Query Parameter
### Use the query parameter
Include the API key as a query parameter in the URL:
@ -101,7 +123,7 @@ curl -X POST \
-d '{"inputs": {"text":""}, "tweaks": {}}'
```
Or with Python:
With Python using `requests`:
```python
import requests
@ -148,6 +170,6 @@ print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS, apiKey=api_key))
- **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
## Revoke an API Key
To revoke an API key, delete it from the UI. This action immediately invalidates the key and prevents it from being used again.

56
docs/docs/administration/chat-interface.mdx
View file

@ -1,56 +0,0 @@
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import ReactPlayer from "react-player";
# Chat Interface
Langflow’s chat interface provides a user-friendly experience and functionality to interact with the model and customize the prompt. The sidebar brings options that allow users to view and edit pre-defined prompt variables. This feature facilitates quick experimentation by enabling the modification of variable values right in the chat.
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/chat_interface.png"),
dark: useBaseUrl("img/chat_interface.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
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.
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/chat_interface2.png"),
dark: useBaseUrl("img/chat_interface2.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
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.
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/chat_interface3.png"),
dark: useBaseUrl("img/chat_interface3.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
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.
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/chat_interface4.png"),
dark: useBaseUrl("img/chat_interface4.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>

29
docs/docs/administration/chat-widget.mdx
View file

@ -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 _`<body>`_ tag, as demonstrated in the video below.
@ -73,15 +73,15 @@ The Chat Widget can be embedded into any HTML page, inside a _`<body>`_ tag, as
---
### React
### Embed your flow with React
To embed the Chat Widget using React, you'll need to insert this _`<script>`_ tag into the React _index.html_ file, inside the _`<body>`_ tag:
1. To embed the Chat Widget using React, insert this _`<script>`_ tag into the React _index.html_ file, inside the _`<body>`_ tag:
```html
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
```
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 _`<script>`_ tag into the Angular _index.html_ file, inside the _`<body>`_ tag.
1. To use the chat widget in Angular, first add this _`<script>`_ tag into the Angular _index.html_ file, inside the _`<body>`_ tag.
```html
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
```
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
<langflow-chat
@ -175,7 +172,7 @@ In your Angular project, find the component belonging to the module where _`CUST
---
## Configuration
## Chat widget configuration
Use the widget API to customize your Chat Widget:

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

@ -127,7 +127,7 @@ python -m langflow run
| `--backend-only` | This parameter, with a default value of `False`, allows running only the backend server without the frontend. It can also be set using the `LANGFLOW_BACKEND_ONLY` environment variable. For more, see [Backend-only](../deployment/backend-only.md).|
| `--store` | This parameter, with a default value of `True`, enables the store features, use `--no-store` to deactivate it. It can be configured using the `LANGFLOW_STORE` environment variable. |
#### Environment Variables
#### CLI environment variables
You can configure many of the CLI options using environment variables. These can be exported in your operating system or added to a `.env` file and loaded using the `--env-file` option.

13
docs/docs/administration/collection.mdx
View file

@ -1,13 +0,0 @@
import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from '@docusaurus/useBaseUrl';
import ZoomableImage from '/src/theme/ZoomableImage.js';
import ReactPlayer from 'react-player';
# Collection
A collection is a snapshot of the flows available in the database. You can download your entire collection for local storage and upload it anytime for future use.
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
/>
</div>

58
docs/docs/administration/components.mdx
View file

@ -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
<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, while their colors are type hints
(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-compenent.png"),
dark: useBaseUrl("img/single-compenent.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
/>
<div style={{ marginBottom: "20px" }}>
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.
</div>
---
### 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.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
</div>

68
docs/docs/administration/features.mdx
View file

@ -1,68 +0,0 @@
# Features
<div style={{ marginBottom: "20px" }}>
When you click for New Project, you will see on the top left corner of the
screen, some options such as <strong>Import</strong>, <strong>Export</strong>,{" "}
<strong>Code</strong> and <strong>Save</strong>, as displayed in the image
below:
</div>
{" "}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/features.png"),
dark: useBaseUrl("img/features.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
/>
<div style={{ marginBottom: "20px" }}>
Further down, we will explain each of these options.
</div>
---
### Import and Export
Flows can be exported and imported as JSON files.
<Admonition type="caution">
Watch out for API keys being stored in local files.
</Admonition>
---
### 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.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_api.mp4" />
</div>
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";

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

@ -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.
</Admonition>
## 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
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>

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

@ -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.

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

@ -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
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>

2
docs/docs/components/inputs-and-outputs.mdx
View file

@ -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

10
docs/docs/deployment/docker.md
View file

@ -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`.

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

@ -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

9
docs/docs/migration/migrating-to-one-point-zero.mdx
View file

@ -2,15 +2,6 @@ import Admonition from "@theme/Admonition";
# Migrating to Langflow 1.0: A Guide
<Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
<p>
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.
</p>
</Admonition>
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.

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

@ -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/<username>/.cache/langflow/`
- **MacOS**: `/Users/<username>/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.

2
docs/docs/tutorials/chatprompttemplate_guide.mdx
View file

@ -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

8
docs/docs/tutorials/custom_components.mdx
View file

@ -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.

2
docs/docs/tutorials/loading_document.mdx
View file

@ -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