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

Merge dev into shortcuts_settings

Browse source
This commit is contained in:
igorrCarvalho 2024-06-05 16:04:07 -03:00
commit 126d4e19df
305 changed files with 19640 additions and 30776 deletions
Download patch file Download diff file Expand all files Collapse all files

9
.github/actions/poetry_caching/action.yml vendored
View file

@ -74,10 +74,15 @@ runs:
if: steps.cache-bin-poetry.outputs.cache-hit != 'true'
shell: bash
env:
POETRY_VERSION: ${{ inputs.poetry-version }}
POETRY_VERSION: ${{ inputs.poetry-version || env.POETRY_VERSION }}
PYTHON_VERSION: ${{ inputs.python-version }}
# Install poetry using the python version installed by setup-python step.
run: pipx install "poetry==$POETRY_VERSION" --python '${{ steps.setup-python.outputs.python-path }}' --verbose
run: |
pipx install "poetry==$POETRY_VERSION" --python '${{ steps.setup-python.outputs.python-path }}' --verbose
pipx ensurepath
# Ensure the poetry binary is available in the PATH.
# Test that the poetry binary is available.
poetry --version
- name: Restore pip and poetry cached dependencies
uses: actions/cache@v4

64
.github/workflows/create-release.yml vendored Normal file
View file

@ -0,0 +1,64 @@
name: Create Release
on:
workflow_dispatch:
inputs:
version:
description: "Version to release"
required: true
type: string
release_type:
description: "Type of release (base or main)"
required: true
type: choice
options:
- base
- main
env:
POETRY_VERSION: "1.8.2"
jobs:
release:
name: Build Langflow
runs-on: ubuntu-latest
outputs:
version: ${{ steps.check-version.outputs.version }}
steps:
- uses: actions/checkout@v4
- name: Install poetry
run: pipx install poetry==${{ env.POETRY_VERSION }}
- name: Set up Python 3.12
uses: actions/setup-python@v5
with:
python-version: "3.12"
cache: "poetry"
- name: Build project for distribution
run: |
if [ "${{ inputs.release_type }}" == "base" ]; then
make build base=true
else
make build main=true
fi
- name: Upload Artifact
uses: actions/upload-artifact@v4
with:
name: dist${{ inputs.release_type }}
path: ${{ inputs.release_type == 'base' && 'src/backend/base/dist' || 'dist' }}
create_release:
name: Create Release Job
runs-on: ubuntu-latest
needs: release
steps:
- uses: actions/download-artifact@v4
with:
name: dist${{ inputs.release_type }}
path: dist
- name: Create Release Notes
uses: ncipollo/release-action@v1
with:
artifacts: "dist/*"
token: ${{ secrets.GITHUB_TOKEN }}
draft: false
generateReleaseNotes: true
prerelease: true
tag: v${{ inputs.version }}
commit: dev

73
.github/workflows/docker-build.yml vendored
View file

@ -19,6 +19,8 @@ on:
options:
- base
- main
env:
POETRY_VERSION: "1.8.2"
jobs:
docker_build:
@ -35,20 +37,69 @@ jobs:
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Set Dockerfile and Tags
id: set-vars
run: |
if [ "${{ inputs.release_type }}" == "base" ]; then
echo "DOCKERFILE=./docker/build_and_push_base.Dockerfile" >> $GITHUB_ENV
echo "TAGS=langflowai/langflow:base-${{ inputs.version }}" >> $GITHUB_ENV
else
echo "DOCKERFILE=./docker/build_and_push.Dockerfile" >> $GITHUB_ENV
echo "TAGS=langflowai/langflow:${{ inputs.version }},langflowai/langflow:1.0-alpha" >> $GITHUB_ENV
fi
- name: Build and push
uses: docker/build-push-action@v5
with:
context: .
push: true
file: |
if [ "${{ inputs.release_type }}" == "base" ]; then
./docker/build_and_push_base.Dockerfile
else
./docker/build_and_push.Dockerfile
fi
file: ${{ env.DOCKERFILE }}
tags: ${{ env.TAGS }}
- name: Wait for Docker Hub to propagate
run: sleep 120
- name: Build and push (backend)
if: ${{ inputs.release_type == 'main' }}
uses: docker/build-push-action@v5
with:
context: .
push: true
file: ./docker/build_and_push_backend.Dockerfile
build-args: |
LANGFLOW_IMAGE=langflowai/langflow:${{ inputs.version }}
tags: |
if [ "${{ inputs.release_type }}" == "base" ]; then
langflowai/langflow:base-${{ inputs.version }}
else
langflowai/langflow:${{ inputs.version }}
langflowai/langflow:1.0-alpha
langflowai/langflow-backend:${{ inputs.version }}
langflowai/langflow-backend:1.0-alpha
- name: Build and push (frontend)
if: ${{ inputs.release_type == 'main' }}
uses: docker/build-push-action@v5
with:
context: .
push: true
file: ./docker/frontend/build_and_push_frontend.Dockerfile
tags: |
langflowai/langflow-frontend:${{ inputs.version }}
langflowai/langflow-frontend:1.0-alpha
restart-space:
runs-on: ubuntu-latest
strategy:
matrix:
python-version:
- "3.12"
steps:
- uses: actions/checkout@v4
- name: Set up Python ${{ matrix.python-version }} + Poetry ${{ env.POETRY_VERSION }}
uses: "./.github/actions/poetry_caching"
with:
python-version: ${{ matrix.python-version }}
poetry-version: ${{ env.POETRY_VERSION }}
cache-key: ${{ runner.os }}-poetry-${{ env.POETRY_VERSION }}-${{ hashFiles('**/poetry.lock') }}
- name: Install Python dependencies
run: |
poetry env use ${{ matrix.python-version }}
poetry install
- name: Restart HuggingFace Spaces Build
run: |
poetry run python ./scripts/factory_restart_space.py
env:
HUGGINGFACE_API_TOKEN: ${{ secrets.HUGGINGFACE_API_TOKEN }}

61
.github/workflows/docker_test.yml vendored Normal file
View file

@ -0,0 +1,61 @@
name: Test Docker images
on:
push:
branches: [main]
paths:
- "docker/**"
- "poetry.lock"
- "pyproject.toml"
- "src/backend/**"
pull_request:
branches: [dev]
paths:
- "docker/**"
- "poetry.lock"
- "pyproject.toml"
- "src/**"
env:
POETRY_VERSION: "1.8.2"
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Build image
run: |
docker build -t langflowai/langflow:latest-dev \
-f docker/build_and_push.Dockerfile \
.
- name: Test image
run: |
expected_version=$(cat pyproject.toml | grep version | head -n 1 | cut -d '"' -f 2)
version=$(docker run --rm --entrypoint bash langflowai/langflow:latest-dev -c 'python -c "from langflow.version import __version__ as langflow_version; print(langflow_version)"')
if [ "$expected_version" != "$version" ]; then
echo "Expected version: $expected_version"
echo "Actual version: $version"
exit 1
fi
- name: Build backend image
run: |
docker build -t langflowai/langflow-backend:latest-dev \
--build-arg LANGFLOW_IMAGE=langflowai/langflow:latest-dev \
-f docker/build_and_push_backend.Dockerfile \
.
- name: Test backend image
run: |
expected_version=$(cat pyproject.toml | grep version | head -n 1 | cut -d '"' -f 2)
version=$(docker run --rm --entrypoint bash langflowai/langflow-backend:latest-dev -c 'python -c "from langflow.version import __version__ as langflow_version; print(langflow_version)"')
if [ "$expected_version" != "$version" ]; then
echo "Expected version: $expected_version"
echo "Actual version: $version"
exit 1
fi
- name: Build frontend image
run: |
docker build -t langflowai/langflow-frontend:latest-dev \
-f docker/frontend/build_and_push_frontend.Dockerfile \
.

2
.github/workflows/pre-release-base.yml vendored
View file

@ -22,7 +22,7 @@ jobs:
steps:
- uses: actions/checkout@v4
- name: Install poetry
run: pipx install poetry==$POETRY_VERSION
run: pipx install poetry==${{ env.POETRY_VERSION }}
- name: Set up Python 3.10
uses: actions/setup-python@v5
with:

24
.github/workflows/pre-release-langflow.yml vendored
View file

@ -26,7 +26,7 @@ jobs:
steps:
- uses: actions/checkout@v4
- name: Install poetry
run: pipx install poetry==$POETRY_VERSION
run: pipx install poetry==${{ env.POETRY_VERSION }}
- name: Set up Python 3.10
uses: actions/setup-python@v5
with:
@ -82,6 +82,28 @@ jobs:
tags: |
langflowai/langflow:${{ needs.release.outputs.version }}
langflowai/langflow:1.0-alpha
- name: Build and push (frontend)
uses: docker/build-push-action@v5
with:
context: .
push: true
file: ./docker/frontend/build_and_push_frontend.Dockerfile
tags: |
langflowai/langflow-frontend:${{ needs.release.outputs.version }}
langflowai/langflow-frontend:1.0-alpha
- name: Wait for Docker Hub to propagate
run: sleep 120
- name: Build and push (backend)
uses: docker/build-push-action@v5
with:
context: .
push: true
file: ./docker/build_and_push_backend.Dockerfile
build-args: |
LANGFLOW_IMAGE=langflowai/langflow:${{ needs.release.outputs.version }}
tags: |
langflowai/langflow-backend:${{ needs.release.outputs.version }}
langflowai/langflow-backend:1.0-alpha
create_release:
name: Create Release

23
.github/workflows/pre-release.yml vendored
View file

@ -29,7 +29,7 @@ jobs:
steps:
- uses: actions/checkout@v4
- name: Install poetry
run: pipx install poetry==$POETRY_VERSION
run: pipx install poetry==${{ env.POETRY_VERSION }}
- name: Set up Python 3.10
uses: actions/setup-python@v5
with:
@ -67,27 +67,30 @@ jobs:
else
make publish main=true
fi
- name: Upload Artifact
uses: actions/upload-artifact@v4
with:
name: dist${{ inputs.release_type }}
path: ${{ inputs.release_type == 'base' && 'src/backend/base/dist' || 'dist' }}
call_docker_build:
name: Call Docker Build Workflow
runs-on: ubuntu-latest
needs: release
steps:
- uses: actions/checkout@v4
- uses: ./.github/workflows/docker-build.yml
with:
version: ${{ needs.release.outputs.version }}
release_type: ${{ inputs.release_type }}
uses: langflow-ai/langflow/.github/workflows/docker-build.yml@dev
with:
version: ${{ needs.release.outputs.version }}
release_type: ${{ inputs.release_type }}
secrets: inherit
create_release:
name: Create Release
runs-on: ubuntu-latest
needs: [call_docker_build, release]
needs: [release]
if: ${{ inputs.release_type == 'main' }}
steps:
- uses: actions/download-artifact@v4
with:
name: dist
name: dist${{ inputs.release_type }}
path: dist
- name: Create Release
uses: ncipollo/release-action@v1

24
.github/workflows/release.yml vendored
View file

@ -19,7 +19,7 @@ jobs:
steps:
- uses: actions/checkout@v4
- name: Install poetry
run: pipx install poetry==$POETRY_VERSION
run: pipx install poetry==${{ env.POETRY_VERSION }}
- name: Set up Python 3.10
uses: actions/setup-python@v5
with:
@ -54,6 +54,28 @@ jobs:
tags: |
langflowai/langflow:${{ steps.check-version.outputs.version }}
langflowai/langflow:latest
- name: Wait for Docker Hub to propagate
run: sleep 120
- name: Build and push (backend)
uses: docker/build-push-action@v5
with:
context: .
push: true
file: ./docker/build_and_push_backend.Dockerfile
build-args: |
LANGFLOW_IMAGE=langflowai/langflow:${{ steps.check-version.outputs.version }}
tags: |
langflowai/langflow-backend:${{ steps.check-version.outputs.version }}
langflowai/langflow-backend:latest
- name: Build and push (frontend)
uses: docker/build-push-action@v5
with:
context: .
push: true
file: ./docker/frontend/build_and_push_frontend.Dockerfile
tags: |
langflowai/langflow-frontend:${{ steps.check-version.outputs.version }}
langflowai/langflow-frontend:latest
- name: Create Release
uses: ncipollo/release-action@v1
with:

7
.pre-commit-config.yaml
View file

@ -25,13 +25,6 @@ repos:
args:
- --fix=lf
- id: trailing-whitespace
- id: pretty-format-json
exclude: ^tsconfig.*.json
args:
- --autofix
- --indent=4
- --no-sort-keys
- id: check-merge-conflict
- repo: https://github.com/astral-sh/ruff-pre-commit
# Ruff version.
rev: v0.4.2

9
Makefile
View file

@ -7,6 +7,7 @@ port ?= 7860
env ?= .env
open_browser ?= true
path = src/backend/base/langflow/frontend
workers ?= 1
codespell:
@poetry install --with spelling
@ -47,8 +48,8 @@ coverage:
# allow passing arguments to pytest
tests:
poetry run pytest tests --instafail $(args)
# Use like:
poetry run pytest tests --instafail -ra -n auto -m "not api_key_required" $(args)
format:
poetry run ruff check . --fix
@ -144,10 +145,10 @@ backend:
@-kill -9 $(lsof -t -i:7860)
ifdef login
@echo "Running backend autologin is $(login)";
LANGFLOW_AUTO_LOGIN=$(login) poetry run uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --env-file .env --loop asyncio
LANGFLOW_AUTO_LOGIN=$(login) poetry run uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --env-file .env --loop asyncio --workers $(workers)
else
@echo "Running backend respecting the .env file";
poetry run uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --env-file .env --loop asyncio
poetry run uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --env-file .env --loop asyncio --workers $(workers)
endif
build_and_run:

116
README.md
View file

@ -1,21 +1,63 @@
<!-- markdownlint-disable MD030 -->
# [![Langflow](https://github.com/langflow-ai/langflow/blob/dev/docs/static/img/hero.png)](https://www.langflow.org)
# [![Langflow](./docs/static/img/hero.png)](https://www.langflow.org)
### [Langflow](https://www.langflow.org) is a new, visual way to build, iterate and deploy AI apps.
<p align="center"><strong>
A visual framework for building multi-agent and RAG applications
</strong></p>
<p align="center" style="font-size: 12px;">
Open-source, Python-powered, fully customizable, LLM and vector store agnostic
</p>
# ⚡️ Documentation and Community
<p align="center" style="font-size: 12px;">
<a href="https://docs.langflow.org" style="text-decoration: underline;">Docs</a> -
<a href="https://discord.com/invite/EqksyE2EX9" style="text-decoration: underline;">Join our Discord</a> -
<a href="https://twitter.com/langflow_ai" style="text-decoration: underline;">Follow us on X</a> -
<a href="https://huggingface.co/spaces/Langflow/Langflow-Preview" style="text-decoration: underline;">Live demo</a>
</p>
- [Documentation](https://docs.langflow.org)
- [Discord](https://discord.com/invite/EqksyE2EX9)
<p align="center">
<a href="https://github.com/langflow-ai/langflow">
<img src="https://img.shields.io/github/stars/langflow-ai/langflow">
</a>
<a href="https://discord.com/invite/EqksyE2EX9">
<img src="https://img.shields.io/discord/1116803230643527710?label=Discord">
</a>
</p>
# 📦 Installation
<div align="center">
<a href="./README.md"><img alt="README in English" src="https://img.shields.io/badge/English-d9d9d9"></a>
<a href="./README.zh_CN.md"><img alt="README in Simplified Chinese" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
</div>
<p align="center">
<img src="./docs/static/img/langflow_basic_howto.gif" alt="Your GIF" style="border: 3px solid #211C43;">
</p>
# 📝 Content
- [](#)
- [📝 Content](#-content)
- [📦 Get Started](#-get-started)
- [🎨 Create Flows](#-create-flows)
- [Deploy](#deploy)
- [Deploy Langflow on Google Cloud Platform](#deploy-langflow-on-google-cloud-platform)
- [Deploy on Railway](#deploy-on-railway)
- [Deploy on Render](#deploy-on-render)
- [🖥️ Command Line Interface (CLI)](#️-command-line-interface-cli)
- [Usage](#usage)
- [Environment Variables](#environment-variables)
- [👋 Contribute](#-contribute)
- [🌟 Contributors](#-contributors)
- [📄 License](#-license)
# 📦 Get Started
You can install Langflow with pip:
```shell
# Make sure you have Python 3.10 installed on your system.
# Install the pre-release version
# Make sure you have >=Python 3.10 installed on your system.
# Install the pre-release version (recommended for the latest updates)
python -m pip install langflow --pre --force-reinstall
# or stable version
@ -28,9 +70,9 @@ Then, run Langflow with:
python -m langflow run
```
You can also preview Langflow in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview). [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true), to create your own Langflow workspace in minutes.
You can also preview Langflow in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview). [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes.
# 🎨 Creating Flows
# 🎨 Create Flows
Creating flows with Langflow is easy. Simply drag components from the sidebar onto the canvas and connect them to start building your application.
@ -46,6 +88,32 @@ from langflow.load import run_flow_from_json
results = run_flow_from_json("path/to/flow.json", input_value="Hello, World!")
```
# Deploy
## Deploy Langflow on Google Cloud Platform
Follow our step-by-step guide to deploy Langflow on Google Cloud Platform (GCP) using Google Cloud Shell. The guide is available in the [**Langflow in Google Cloud Platform**](https://github.com/langflow-ai/langflow/blob/dev/docs/docs/deployment/gcp-deployment.md) document.
Alternatively, click the **"Open in Cloud Shell"** button below to launch Google Cloud Shell, clone the Langflow repository, and start an **interactive tutorial** that will guide you through the process of setting up the necessary resources and deploying Langflow on your GCP project.
[![Open in Cloud Shell](https://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/langflow-ai/langflow&working_dir=scripts/gcp&shellonly=true&tutorial=walkthroughtutorial_spot.md)
## Deploy on Railway
Use this template to deploy Langflow 1.0 Preview on Railway:
[![Deploy 1.0 Preview on Railway](https://railway.app/button.svg)](https://railway.app/template/UsJ1uB?referralCode=MnPSdg)
Or this one to deploy Langflow 0.6.x:
[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)
## Deploy on Render
<a href="https://render.com/deploy?repo=https://github.com/langflow-ai/langflow/tree/dev">
<img src="https://render.com/images/deploy-to-render-button.svg" alt="Deploy to Render" />
</a>
# 🖥️ Command Line Interface (CLI)
Langflow provides a command-line interface (CLI) for easy management and configuration.
@ -87,33 +155,7 @@ You can configure many of the CLI options using environment variables. These can
A sample `.env` file named `.env.example` is included with the project. Copy this file to a new file named `.env` and replace the example values with your actual settings. If you're setting values in both your OS and the `.env` file, the `.env` settings will take precedence.
# Deployment
## Deploy Langflow on Google Cloud Platform
Follow our step-by-step guide to deploy Langflow on Google Cloud Platform (GCP) using Google Cloud Shell. The guide is available in the [**Langflow in Google Cloud Platform**](GCP_DEPLOYMENT.md) document.
Alternatively, click the **"Open in Cloud Shell"** button below to launch Google Cloud Shell, clone the Langflow repository, and start an **interactive tutorial** that will guide you through the process of setting up the necessary resources and deploying Langflow on your GCP project.
[![Open in Cloud Shell](https://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/langflow-ai/langflow&working_dir=scripts/gcp&shellonly=true&tutorial=walkthroughtutorial_spot.md)
## Deploy on Railway
Use this template to deploy Langflow 1.0 Preview on Railway:
[![Deploy 1.0 Preview on Railway](https://railway.app/button.svg)](https://railway.app/template/UsJ1uB?referralCode=MnPSdg)
Or this one to deploy Langflow 0.6.x:
[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)
## Deploy on Render
<a href="https://render.com/deploy?repo=https://github.com/langflow-ai/langflow/tree/main">
<img src="https://render.com/images/deploy-to-render-button.svg" alt="Deploy to Render" />
</a>
# 👋 Contributing
# 👋 Contribute
We welcome contributions from developers of all levels to our open-source project on GitHub. If you'd like to contribute, please check our [contributing guidelines](./CONTRIBUTING.md) and help make Langflow more accessible.

172
README.zh_CN.md Normal file
View file

@ -0,0 +1,172 @@
<!-- markdownlint-disable MD030 -->
# [![Langflow](./docs/static/img/hero.png)](https://www.langflow.org)
<p align="center"><strong>
一种用于构建多智能体和RAG应用的可视化框架
</strong></p>
<p align="center" style="font-size: 12px;">
开源、Python驱动、完全可定制、大模型且不依赖于特定的向量存储
</p>
<p align="center" style="font-size: 12px;">
<a href="https://docs.langflow.org" style="text-decoration: underline;">文档</a> -
<a href="https://discord.com/invite/EqksyE2EX9" style="text-decoration: underline;">加入我们的Discord社区</a> -
<a href="https://twitter.com/langflow_ai" style="text-decoration: underline;">在X上关注我们</a> -
<a href="https://huggingface.co/spaces/Langflow/Langflow-Preview" style="text-decoration: underline;">在线体验</a>
</p>
<p align="center">
<a href="https://github.com/langflow-ai/langflow">
<img src="https://img.shields.io/github/stars/langflow-ai/langflow">
</a>
<a href="https://discord.com/invite/EqksyE2EX9">
<img src="https://img.shields.io/discord/1116803230643527710?label=Discord">
</a>
</p>
<div align="center">
<a href="./README.md"><img alt="README in English" src="https://img.shields.io/badge/英文-d9d9d9"></a>
<a href="./README.zh_CN.md"><img alt="README in Simplified Chinese" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
</div>
<p align="center">
<img src="./docs/static/img/langflow_basic_howto.gif" alt="Your GIF" style="border: 3px solid #211C43;">
</p>
# 📝 目录
- [📝 目录](#-目录)
- [📦 快速开始](#-快速开始)
- [🎨 创建工作流](#-创建工作流)
- [部署](#部署)
- [在Google Cloud Platform上部署Langflow](#在google-cloud-platform上部署langflow)
- [在Railway上部署](#在railway上部署)
- [在Render上部署](#在render上部署)
- [🖥️ 命令行界面 (CLI)](#️-命令行界面-cli)
- [用法](#用法)
- [环境变量](#环境变量)
- [👋 贡献](#-贡献)
- [🌟 贡献者](#-贡献者)
- [📄 许可证](#-许可证)
# 📦 快速开始
使用 pip 安装 Langflow：
```shell
# 确保您的系统已经安装上>=Python 3.10
# 安装Langflow预发布版本
python -m pip install langflow --pre --force-reinstall
# 安装Langflow稳定版本
python -m pip install langflow -U
```
然后运行Langflow：
```shell
python -m langflow run
```
您可以在[HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview)中在线体验 Langflow，也可以使用该链接[克隆空间](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)，在几分钟内创建您自己的 Langflow 运行工作空间。
# 🎨 创建工作流
使用 Langflow 来创建工作流非常简单。只需从侧边栏拖动组件到画布上，然后连接组件即可开始构建应用程序。
您可以通过编辑提示参数、将组件分组到单个高级组件中以及构建您自己的自定义组件来展开探索。
完成后，可以将工作流导出为 JSON 文件。
然后使用以下脚本加载工作流：
```python
from langflow.load import run_flow_from_json
results = run_flow_from_json("path/to/flow.json", input_value="Hello, World!")
```
# 部署
## 在Google Cloud Platform上部署Langflow
请按照我们的分步指南使用 Google Cloud Shell 在 Google Cloud Platform (GCP) 上部署 Langflow。该指南在 [**Langflow in Google Cloud Platform**](GCP_DEPLOYMENT.md) 文档中提供。
或者，点击下面的 "Open in Cloud Shell" 按钮，启动 Google Cloud Shell，克隆 Langflow 仓库，并开始一个互动教程，该教程将指导您设置必要的资源并在 GCP 项目中部署 Langflow。
[![Open in Cloud Shell](https://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/langflow-ai/langflow&working_dir=scripts/gcp&shellonly=true&tutorial=walkthroughtutorial_spot.md)
## 在Railway上部署
使用此模板在 Railway 上部署 Langflow 1.0 预览版：
[![Deploy 1.0 Preview on Railway](https://railway.app/button.svg)](https://railway.app/template/UsJ1uB?referralCode=MnPSdg)
或者使用此模板部署 Langflow 0.6.x：
[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)
## 在Render上部署
<a href="https://render.com/deploy?repo=https://github.com/langflow-ai/langflow/tree/dev">
<img src="https://render.com/images/deploy-to-render-button.svg" alt="Deploy to Render" />
</a>
# 🖥️ 命令行界面 (CLI)
Langflow提供了一个命令行界面以便于平台的管理和配置。
## 用法
您可以使用以下命令运行Langflow：
```shell
langflow run [OPTIONS]
```
命令行参数的详细说明：
- `--help`: 显示所有可用参数。
- `--host`: 定义绑定服务器的主机host参数，可以使用 LANGFLOW_HOST 环境变量设置，默认值为 127.0.0.1。
- `--workers`: 设置工作进程的数量，可以使用 LANGFLOW_WORKERS 环境变量设置，默认值为 1。
- `--timeout`: 设置工作进程的超时时间（秒），默认值为 60。
- `--port`: 设置服务监听的端口，可以使用 LANGFLOW_PORT 环境变量设置，默认值为 7860。
- `--config`: 定义配置文件的路径，默认值为 config.yaml。
- `--env-file`: 指定包含环境变量的 .env 文件路径，默认值为 .env。
- `--log-level`: 定义日志记录级别，可以使用 LANGFLOW_LOG_LEVEL 环境变量设置，默认值为 critical。
- `--components-path`: 指定包含自定义组件的目录路径，可以使用 LANGFLOW_COMPONENTS_PATH 环境变量设置，默认值为 langflow/components。
- `--log-file`: 指定日志文件的路径，可以使用 LANGFLOW_LOG_FILE 环境变量设置，默认值为 logs/langflow.log。
- `--cache`: 选择要使用的缓存类型，可选项为 InMemoryCache 和 SQLiteCache，可以使用 LANGFLOW_LANGCHAIN_CACHE 环境变量设置，默认值为 SQLiteCache。
- `--dev/--no-dev`: 切换开发/非开发模式，默认值为 no-dev即非开发模式。
- `--path`: 指定包含前端构建文件的目录路径，此参数仅用于开发目的，可以使用 LANGFLOW_FRONTEND_PATH 环境变量设置。
- `--open-browser/--no-open-browser`: 切换启动服务器后是否打开浏览器，可以使用 LANGFLOW_OPEN_BROWSER 环境变量设置，默认值为 open-browser即启动后打开浏览器。
- `--remove-api-keys/--no-remove-api-keys`: 切换是否从数据库中保存的项目中移除 API 密钥，可以使用 LANGFLOW_REMOVE_API_KEYS 环境变量设置，默认值为 no-remove-api-keys。
- `--install-completion [bash|zsh|fish|powershell|pwsh]`: 为指定的 shell 安装自动补全。
- `--show-completion [bash|zsh|fish|powershell|pwsh]`: 显示指定 shell 的自动补全，使您可以复制或自定义安装。
- `--backend-only`: 此参数默认为 False，允许仅运行后端服务器而不运行前端，也可以使用 LANGFLOW_BACKEND_ONLY 环境变量设置。
- `--store`: 此参数默认为 True，启用存储功能，使用 --no-store 可禁用它，可以使用 LANGFLOW_STORE 环境变量配置。
这些参数对于需要定制 Langflow 行为的用户尤其重要，特别是在开发或者特殊部署场景中。
### 环境变量
您可以使用环境变量配置许多 CLI 参数选项。这些变量可以在操作系统中导出，或添加到 .env 文件中，并使用 --env-file 参数加载。
项目中包含一个名为 .env.example 的示例 .env 文件。将此文件复制为新文件 .env，并用实际设置值替换示例值。如果同时在操作系统和 .env 文件中设置值，则 .env 设置优先。
# 👋 贡献
我们欢迎各级开发者为我们的 GitHub 开源项目做出贡献，并帮助 Langflow 更加易用，如果您想参与贡献，请查看我们的贡献指南 [contributing guidelines](./CONTRIBUTING.md) 。
---
[![Star History Chart](https://api.star-history.com/svg?repos=langflow-ai/langflow&type=Timeline)](https://star-history.com/#langflow-ai/langflow&Date)
# 🌟 贡献者
[![langflow contributors](https://contrib.rocks/image?repo=langflow-ai/langflow)](https://github.com/langflow-ai/langflow/graphs/contributors)
# 📄 许可证
Langflow 以 MIT 许可证发布。有关详细信息，请参阅 [LICENSE](LICENSE) 文件。

4
docker/.dockerignore
View file

@ -4,4 +4,6 @@ node_modules
**/node_modules/
dist/
**/build/
src/backend/langflow/frontend
src/backend/langflow/frontend
**/langflow-pre.db
**/langflow.db

78
docker/build_and_push.Dockerfile
View file

@ -1,21 +1,13 @@
# syntax=docker/dockerfile:1
# Keep this syntax directive! It's used to enable Docker BuildKit
# Based on https://github.com/python-poetry/poetry/discussions/1879?sort=top#discussioncomment-216865
# but I try to keep it updated (see history)
################################
# PYTHON-BASE
# Sets up all our shared environment variables
# BUILDER-BASE
# Used to build deps + create our virtual environment
################################
FROM python:3.12-slim as python-base
FROM python:3.12-slim as builder-base
# python
ENV PYTHONUNBUFFERED=1 \
# prevents python creating .pyc files
PYTHONDONTWRITEBYTECODE=1 \
ENV PYTHONDONTWRITEBYTECODE=1 \
\
# pip
PIP_DISABLE_PIP_VERSION_CHECK=on \
@ -37,51 +29,49 @@ ENV PYTHONUNBUFFERED=1 \
PYSETUP_PATH="/opt/pysetup" \
VENV_PATH="/opt/pysetup/.venv"
# prepend poetry and venv to path
ENV PATH="$POETRY_HOME/bin:$VENV_PATH/bin:$PATH"
################################
# BUILDER-BASE
# Used to build deps + create our virtual environment
################################
FROM python-base as builder-base
RUN apt-get update \
&& apt-get install --no-install-recommends -y \
# deps for installing poetry
curl \
# deps for building python deps
build-essential \
# npm
npm \
build-essential npm \
# gcc
gcc \
&& apt-get clean \
&& rm -rf /var/lib/apt/lists/*
# Now we need to copy the entire project into the image
WORKDIR /app
COPY pyproject.toml poetry.lock ./
COPY src ./src
COPY scripts ./scripts
COPY Makefile ./
COPY README.md ./
RUN --mount=type=cache,target=/root/.cache \
curl -sSL https://install.python-poetry.org | python3 -
RUN python -m pip install requests && cd ./scripts && python update_dependencies.py
RUN $POETRY_HOME/bin/poetry lock
RUN $POETRY_HOME/bin/poetry build
# Copy virtual environment and built .tar.gz from builder base
RUN useradd -m -u 1000 user
RUN chown -R user:user /app
WORKDIR /app
COPY pyproject.toml poetry.lock README.md ./
COPY src/ ./src
COPY scripts/ ./scripts
RUN python -m pip install requests --user && cd ./scripts && python update_dependencies.py
RUN $POETRY_HOME/bin/poetry lock --no-update \
&& $POETRY_HOME/bin/poetry install --no-interaction --no-ansi -E deploy \
&& $POETRY_HOME/bin/poetry build -f wheel \
&& $POETRY_HOME/bin/poetry run pip install dist/*.whl
################################
# RUNTIME
# Setup user, utilities and copy the virtual environment only
################################
FROM python:3.12-slim as runtime
LABEL org.opencontainers.image.title=langflow
LABEL org.opencontainers.image.authors=['Langflow']
LABEL org.opencontainers.image.licenses=MIT
LABEL org.opencontainers.image.url=https://github.com/langflow-ai/langflow
LABEL org.opencontainers.image.source=https://github.com/langflow-ai/langflow
RUN useradd user -u 1000 -g 0 --no-create-home --home-dir /app/data
COPY --from=builder-base --chown=1000 /app/.venv /app/.venv
ENV PATH="/app/.venv/bin:${PATH}"
USER user
# Install the package from the .tar.gz
RUN python -m pip install /app/dist/*.tar.gz
WORKDIR /app
ENTRYPOINT ["python", "-m", "langflow", "run"]
CMD ["--host", "0.0.0.0", "--port", "7860"]
CMD ["--host", "0.0.0.0", "--port", "7860"]

8
docker/build_and_push_backend.Dockerfile Normal file
View file

@ -0,0 +1,8 @@
# syntax=docker/dockerfile:1
# Keep this syntax directive! It's used to enable Docker BuildKit
ARG LANGFLOW_IMAGE
FROM $LANGFLOW_IMAGE
RUN rm -rf /app/.venv/langflow/frontend
CMD ["--host", "0.0.0.0", "--port", "7860", "--backend-only"]

12
docker/build_and_push_base.Dockerfile
View file

@ -78,14 +78,20 @@ RUN cd src/frontend && npm run build
COPY src/backend ./src/backend
RUN cp -r src/frontend/build src/backend/base/langflow/frontend
RUN rm -rf src/backend/base/dist
RUN useradd -m -u 1000 user && \
mkdir -p /app/langflow && \
chown -R user:user /app && \
chmod -R u+w /app/langflow
# Update PATH with home/user/.local/bin
ENV PATH="/home/user/.local/bin:${PATH}"
RUN cd src/backend/base && $POETRY_HOME/bin/poetry build
# Copy virtual environment and built .tar.gz from builder base
RUN useradd -m -u 1000 user
RUN chown -R user:user /app
USER user
# Install the package from the .tar.gz
RUN python -m pip install /app/src/backend/base/dist/*.tar.gz
RUN python -m pip install /app/src/backend/base/dist/*.tar.gz --user
ENTRYPOINT ["python", "-m", "langflow", "run"]

27
docker/frontend/build_and_push_frontend.Dockerfile Normal file
View file

@ -0,0 +1,27 @@
# syntax=docker/dockerfile:1
# Keep this syntax directive! It's used to enable Docker BuildKit
################################
# BUILDER-BASE
################################
FROM node:lts-bookworm-slim as builder-base
COPY src/frontend /frontend
RUN cd /frontend && npm install && npm run build
################################
# RUNTIME
################################
FROM nginxinc/nginx-unprivileged:stable-bookworm-perl as runtime
LABEL org.opencontainers.image.title=langflow-frontend
LABEL org.opencontainers.image.authors=['Langflow']
LABEL org.opencontainers.image.licenses=MIT
LABEL org.opencontainers.image.url=https://github.com/langflow-ai/langflow
LABEL org.opencontainers.image.source=https://github.com/langflow-ai/langflow
COPY --from=builder-base --chown=nginx /frontend/build /usr/share/nginx/html
COPY --chown=nginx ./docker/frontend/nginx.conf /etc/nginx/conf.d/default.conf
COPY --chown=nginx ./docker/frontend/start-nginx.sh /start-nginx.sh
RUN chmod +x /start-nginx.sh
ENTRYPOINT ["/start-nginx.sh"]

22
docker/frontend/nginx.conf Normal file
View file

@ -0,0 +1,22 @@
server {
gzip on;
gzip_comp_level 2;
gzip_min_length 1000;
gzip_types text/xml text/css;
gzip_http_version 1.1;
gzip_vary on;
gzip_disable "MSIE [4-6] \.";
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api {
proxy_pass __BACKEND_URL__;
}
include /etc/nginx/extra-conf.d/*.conf;
}

16
docker/frontend/start-nginx.sh Normal file
View file

@ -0,0 +1,16 @@
#!/bin/sh
set -e
trap 'kill -TERM $PID' TERM INT
if [ -z "$BACKEND_URL" ]; then
BACKEND_URL="$1"
fi
if [ -z "$BACKEND_URL" ]; then
echo "BACKEND_URL must be set as an environment variable or as first parameter. (e.g. http://localhost:7860)"
exit 1
fi
sed -i "s|__BACKEND_URL__|$BACKEND_URL|g" /etc/nginx/conf.d/default.conf
cat /etc/nginx/conf.d/default.conf
# Start nginx
exec nginx -g 'daemon off;'

1
docker/render.pre-release.Dockerfile Normal file
View file

@ -0,0 +1 @@
FROM langflowai/langflow:1.0-alpha

2
docker_example/pre.docker-compose.yml
View file

@ -12,7 +12,7 @@ services:
# This variable defines where the logs, file storage, monitor data and secret keys are stored.
- LANGFLOW_CONFIG_DIR=app/langflow
volumes:
- langflow-data:app/langflow
- langflow-data:/app/langflow
postgres:
image: postgres:16

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

@ -7,10 +7,12 @@ import Admonition from "@theme/Admonition";
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 the LANGFLOW_SUPERUSER
and LANGFLOW_SUPERUSER_PASSWORD environment variables. The default values are
langflow and langflow, respectively.
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

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

@ -7,12 +7,12 @@ Langflow's Command Line Interface (CLI) is a powerful tool that allows you to in
Running the CLI without any arguments will display a list of available commands and options.
```bash
python -m langflow --help
python -m langflow run --help
# or
python -m langflow
python -m langflow run
```
Each option is detailed below:
Each option for `run` command are detailed below:
- `--help`: Displays all available options.
- `--host`: Defines the host to bind the server to. Can be set using the `LANGFLOW_HOST` environment variable. The default is `127.0.0.1`.
@ -35,6 +35,41 @@ Each option is detailed below:
These parameters are important for users who need to customize the behavior of Langflow, especially in development or specialized deployment scenarios.
### API Key Command
The `api-key` command allows you to create an API key for accessing Langflow's API when `LANGFLOW_AUTO_LOGIN` is set to `True`.
```bash
python -m langflow api-key --help
Usage: langflow api-key [OPTIONS]
Creates an API key for the default superuser if AUTO_LOGIN is enabled.
Args: log_level (str, optional): Logging level. Defaults to "error".
Returns: None
╭─ Options ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ --log-level TEXT Logging level. [env var: LANGFLOW_LOG_LEVEL] [default: error] │
│ --help Show this message and exit. │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
```
Once you run the `api-key` command, it will create an API key for the default superuser if `LANGFLOW_AUTO_LOGIN` is set to `True`.
```bash
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. │
╰─────────────────────────────────────────────────────────────────────╯
```
### 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.

5
docs/docs/administration/custom-component.mdx
View file

@ -74,11 +74,6 @@ class DocumentProcessor(CustomComponent):
</div>
<Admonition type="tip">
Check out [FlowRunner Component](../examples/flow-runner) for a more complex
example.
</Admonition>
---
## Rules

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

@ -1,31 +1,39 @@
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import Admonition from "@theme/Admonition";
import ReactPlayer from "react-player";
import Admonition from "@theme/Admonition";
# Global environment variables
# Global Variables
Langflow 1.0 alpha includes the option to add **Global Environment Variables** for your application.
Global Variables are a useful feature of Langflow, allowing you to define reusable variables accessed from any Text field in your project.
## Add a global variable to a project
## TL;DR
In this example, you'll add the `openai_api_key` credential as a global environment variable to the **Basic Prompting** starter project.
- 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**.
- Define the **Name**, **Type**, and **Value** of the variable.
- Click **Save Variable** to create it.
- 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.
For more information on the starter flow, see [Basic prompting](../starter-projects/basic-prompting.mdx).
## Creating and Adding a Global Variable
1. From the Langflow dashboard, click **New Project**.
2. Select **Basic Prompting**.
To create and add a global variable, click the 🌐 button in a Text field, and then click **+ Add New Variable**.
The **Basic Prompting** flow is created.
Text fields are where you write text without opening a Text area, and are identified with the 🌐 icon.
3. To create an environment variable for the **OpenAI** component:
1. In the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
2. In the **Variable Name** field, enter `openai_api_key`.
3. In the **Value** field, paste your OpenAI API Key (`sk-...`).
4. For the variable **Type**, select **Credential**.
5. In the **Apply to Fields** field, select **OpenAI API Key** to apply this variable to all fields named **OpenAI API Key**.
6. Click **Save Variable**.
For example, to create an environment variable for the **OpenAI** component:
1. In the **OpenAI API Key** text field, click the 🌐 button, then **Add New Variable**.
2. Enter `openai_api_key` in the **Variable Name** field.
3. Paste your OpenAI API Key (`sk-...`) in the **Value** field.
4. Select **Credential** for the **Type**.
5. Choose **OpenAI API Key** in the **Apply to Fields** field to apply this variable to all fields named **OpenAI API Key**.
6. Click **Save Variable**.
You now have a `openai_api_key` global environment variable for your Langflow project.
Subsequently, clicking the 🌐 button in a Text field will display the new variable in the dropdown.
<Admonition type="tip">
You can also create global variables in **Settings** > **Variables and
@ -41,10 +49,55 @@ You now have a `openai_api_key` global environment variable for your Langflow pr
style={{ width: "40%", margin: "20px auto" }}
/>
4. To view and manage your project's global environment variables, visit **Settings** > **Variables and Secrets**.
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).
{/* All variables are encrypted */}
<Admonition type="warning">
All Credential Global Variables are encrypted and accessible only by you.
</Admonition>
## Configuring 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.
These variables are accessible like any other Global Variable.
<Admonition type="tip">
To prevent this behavior, set `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to
`false` in your `.env` file.
</Admonition>
You can specify variables to get from the environment by listing them in `LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`.
Specify variables as a comma-separated list (e.g., _`"VARIABLE1, VARIABLE2"`_) or a JSON-encoded string (e.g., _`'["VARIABLE1", "VARIABLE2"]'`_).
The default list of variables includes:
- ANTHROPIC_API_KEY
- ASTRA_DB_API_ENDPOINT
- ASTRA_DB_APPLICATION_TOKEN
- AZURE_OPENAI_API_KEY
- AZURE_OPENAI_API_DEPLOYMENT_NAME
- AZURE_OPENAI_API_EMBEDDINGS_DEPLOYMENT_NAME
- AZURE_OPENAI_API_INSTANCE_NAME
- AZURE_OPENAI_API_VERSION
- COHERE_API_KEY
- GOOGLE_API_KEY
- GROQ_API_KEY
- HUGGINGFACEHUB_API_TOKEN
- OPENAI_API_KEY
- PINECONE_API_KEY
- SEARCHAPI_API_KEY
- SERPAPI_API_KEY
- UPSTASH_VECTOR_REST_URL
- UPSTASH_VECTOR_REST_TOKEN
- VECTARA_CUSTOMER_ID
- VECTARA_CORPUS_ID
- VECTARA_API_KEY
## Video
<div

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

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

5
docs/docs/components/custom.mdx
View file

@ -103,8 +103,3 @@ The `CustomComponent` class also provides helpful methods for specific tasks (e.
- `status`: Shows values from the `build` method, useful for debugging.
- `field_order`: Controls the display order of fields.
- `icon`: Sets the canvas display icon.
<Admonition type="info" label="Tip">
Check out the [FlowRunner](../examples/flow-runner) example to understand how
to call a flow from a custom component.
</Admonition>

161
docs/docs/components/inputs-and-outputs.mdx Normal file
View file

@ -0,0 +1,161 @@
import Admonition from "@theme/Admonition";
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.
They also dynamically change the Playground and can be renamed to facilitate building and maintaining your flows.
## Inputs
Inputs are components used to define where data enters your flow. They can receive data from the user, a database, or any other source that can be converted to Text or Record.
The difference between Chat Input and other Input components is the output format, the number of configurable fields, and the way they are displayed in the Playground.
Chat Input components can output `Text` or `Record`. When you want to pass the sender name or sender to the next component, use the `Record` output. To pass only the message, use the `Text` output, useful when saving the message to a database or memory system like Zep.
You can find out more about Chat Input and other Inputs [here](#chat-input).
### Chat Input
This component collects user input from the chat.
**Parameters**
- **Sender Type:** Specifies the sender type. Defaults to `User`. Options are `Machine` and `User`.
- **Sender Name:** Specifies the name of the sender. Defaults to `User`.
- **Message:** Specifies the message text. It is a multiline text input.
- **Session ID:** Specifies the session ID of the chat history. If provided, the message will be saved in the Message History.
<Admonition type="note" title="Note">
<p>
If `As Record` is `true` and the `Message` is a `Record`, the data of the
`Record` will be updated with the `Sender`, `Sender Name`, and `Session ID`.
</p>
</Admonition>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/chat-input-expanded.png",
dark: "img/chat-input-expanded.png",
}}
style={{ width: "40%", margin: "20px auto" }}
/>
One significant capability of the Chat Input component is its ability to transform the Playground into a chat window. This feature is particularly valuable for scenarios requiring user input to initiate or influence the flow.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/interaction-panel-with-chat-input.png",
dark: "img/interaction-panel-with-chat-input.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
### Text Input
The **Text Input** component adds an **Input** field on the Playground. This enables you to define parameters while running and testing your flow.
**Parameters**
- **Value:** Specifies the text input value. This is where the user inputs text data that will be passed to the next component in the sequence. If no value is provided, it defaults to an empty string.
- **Record Template:** Specifies how a `Record` should be converted into `Text`.
The **Record Template** field is used to specify how a `Record` should be converted into `Text`. This is particularly useful when you want to extract specific information from a `Record` and pass it as text to the next component in the sequence.
For example, if you have a `Record` with the following structure:
```json
{
"name": "John Doe",
"age": 30,
"email": "johndoe@email.com"
}
```
A template with `Name: {name}, Age: {age}` will convert the `Record` into a text string of `Name: John Doe, Age: 30`.
If you pass more than one `Record`, the text will be concatenated with a new line separator.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/text-input-expanded.png",
dark: "img/text-input-expanded.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
## Outputs
Outputs are components that are used to define where data comes out of your flow. They can be used to send data to the user, to the Playground, or to define how the data will be displayed in the Playground.
The Chat Output works similarly to the Chat Input but does not have a field that allows for written input. It is used as an Output definition and can be used to send data to the user.
You can find out more about it and the other Outputs [here](#chat-output).
### Chat Output
This component sends a message to the chat.
**Parameters**
- **Sender Type:** Specifies the sender type. Default is `"Machine"`. Options are `"Machine"` and `"User"`.
- **Sender Name:** Specifies the sender's name. Default is `"AI"`.
- **Session ID:** Specifies the session ID of the chat history. If provided, messages are saved in the Message History.
- **Message:** Specifies the text of the message.
<Admonition type="note" title="Note">
<p>
If `As Record` is `true` and the `Message` is a `Record`, the data in the
`Record` is updated with the `Sender`, `Sender Name`, and `Session ID`.
</p>
</Admonition>
### Text Output
This component displays text data to the user. It is useful when you want to show text without sending it to the chat.
**Parameters**
- **Value:** Specifies the text data to be displayed. Defaults to an empty string.
The `TextOutput` component provides a simple way to display text data. It allows textual data to be visible in the chat window during your interaction flow.
## Prompts
A prompt is the input provided to a language model, consisting of multiple components and can be parameterized using prompt templates. A prompt template offers a reproducible method for generating prompts, enabling easy customization through input variables.
### Prompt
This component creates a prompt template with dynamic variables. This is useful for structuring prompts and passing dynamic data to a language model.
**Parameters**
- **Template:** The template for the prompt. This field allows you to create other fields dynamically by using curly brackets `{}`. For example, if you have a template like `Hello {name}, how are you?`, a new field called `name` will be created. Prompt variables can be created with any name inside curly brackets, e.g. `{variable_name}`.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/prompt-with-template.png",
dark: "img/prompt-with-template.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
### PromptTemplate
The `PromptTemplate` component enables users to create prompts and define variables that control how the model is instructed. Users can input a set of variables which the template uses to generate the prompt when a conversation starts.
<Admonition type="info">
After defining a variable in the prompt template, it acts as its own component
input. See [Prompt Customization](../administration/prompt-customization) for
more details.
</Admonition>
- **template:** The template used to format an individual request.

97
docs/docs/components/inputs.mdx
View file

@ -1,97 +0,0 @@
import Admonition from "@theme/Admonition";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# Inputs
## Chat Input
This component obtains user input from the chat.
**Parameters**
- **Sender Type:** Specifies the sender type. Defaults to `User`. Options are `Machine` and `User`.
- **Sender Name:** Specifies the name of the sender. Defaults to `User`.
- **Message:** Specifies the message text. It is a multiline text input.
- **Session ID:** Specifies the session ID of the chat history. If provided, the message will be saved in the Message History.
<Admonition type="note" title="Note">
<p>
If `As Record` is `true` and the `Message` is a `Record`, the data of the
`Record` will be updated with the `Sender`, `Sender Name`, and `Session ID`.
</p>
</Admonition>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/chat-input-expanded.png",
dark: "img/chat-input-expanded.png",
}}
style={{ width: "40%", margin: "20px auto" }}
/>
One significant capability of the Chat Input component is its ability to transform the Playground into a chat window. This feature is particularly valuable for scenarios requiring user input to initiate or influence the flow.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/interaction-panel-with-chat-input.png",
dark: "img/interaction-panel-with-chat-input.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
---
## Prompt
This component creates a prompt template with dynamic variables. This is useful for structuring prompts and passing dynamic data to a language model.
**Parameters**
- **Template:** The template for the prompt. This field allows you to create other fields dynamically by using curly brackets `{}`. For example, if you have a template like `Hello {name}, how are you?`, a new field called `name` will be created. Prompt variables can be created with any name inside curly brackets, e.g. `{variable_name}`.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/prompt-with-template.png",
dark: "img/prompt-with-template.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
---
## Text Input
The **Text Input** component adds an **Input** field on the Playground. This enables you to define parameters while running and testing your flow.
**Parameters**
- **Value:** Specifies the text input value. This is where the user inputs text data that will be passed to the next component in the sequence. If no value is provided, it defaults to an empty string.
- **Record Template:** Specifies how a `Record` should be converted into `Text`.
The **Record Template** field is used to specify how a `Record` should be converted into `Text`. This is particularly useful when you want to extract specific information from a `Record` and pass it as text to the next component in the sequence.
For example, if you have a `Record` with the following structure:
```json
{
"name": "John Doe",
"age": 30,
"email": "johndoe@email.com"
}
```
A template with `Name: {name}, Age: {age}` will convert the `Record` into a text string of `Name: John Doe, Age: 30`.
If you pass more than one `Record`, the text will be concatenated with a new line separator.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/text-input-expanded.png",
dark: "img/text-input-expanded.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>

34
docs/docs/components/outputs.mdx
View file

@ -1,34 +0,0 @@
import Admonition from "@theme/Admonition";
# Outputs
## Chat Output
This component sends a message to the chat.
**Parameters**
- **Sender Type:** Specifies the sender type. Default is `"Machine"`. Options are `"Machine"` and `"User"`.
- **Sender Name:** Specifies the sender's name. Default is `"AI"`.
- **Session ID:** Specifies the session ID of the chat history. If provided, messages are saved in the Message History.
- **Message:** Specifies the text of the message.
<Admonition type="note" title="Note">
<p>
If `As Record` is `true` and the `Message` is a `Record`, the data in the
`Record` is updated with the `Sender`, `Sender Name`, and `Session ID`.
</p>
</Admonition>
## Text Output
This component displays text data to the user. It is useful when you want to show text without sending it to the chat.
**Parameters**
- **Value:** Specifies the text data to be displayed. Defaults to an empty string.
The `TextOutput` component provides a simple way to display text data. It allows textual data to be visible in the chat window during your interaction flow.

27
docs/docs/components/prompts.mdx
View file

@ -1,27 +0,0 @@
import Admonition from "@theme/Admonition";
# Prompts
<Admonition type="caution" icon="🚧" title="Zone Under Construction">
<p>
Thank you for your patience as we refine our documentation. It may still
have some areas under development. Please share your feedback or report any
issues to help us improve!
</p>
</Admonition>
A prompt is the input provided to a language model, consisting of multiple components and can be parameterized using prompt templates. A prompt template offers a reproducible method for generating prompts, enabling easy customization through input variables.
---
### PromptTemplate
The `PromptTemplate` component enables users to create prompts and define variables that control how the model is instructed. Users can input a set of variables which the template uses to generate the prompt when a conversation starts.
<Admonition type="info">
After defining a variable in the prompt template, it acts as its own component
input. See [Prompt Customization](../administration/prompt-customization) for
more details.
</Admonition>
- **template:** The template used to format an individual request.

49
docs/docs/components/text-and-record.mdx Normal file
View file

@ -0,0 +1,49 @@
# Text and Record
In Langflow 1.0, we added two main input and output types: `Text` and `Record`.
`Text` is a simple string input and output type, while `Record` is a structure very similar to a dictionary in Python. It is a key-value pair data structure.
We've created a few components to help you work with these types. Let's see how a few of them work.
## Records To Text
This is a component that takes in Records and outputs a `Text`. It does this using a template string and concatenating the values of the `Record`, one per line.
If we have the following Records:
```json
{
"sender_name": "Alice",
"message": "Hello!"
}
{
"sender_name": "John",
"message": "Hi!"
}
```
And the template string is: _`{sender_name}: {message}`_
The output is:
```
Alice: Hello!
John: Hi!
```
## Create Record
This component allows you to create a `Record` from a number of inputs. You can add as many key-value pairs as you want (as long as it is less than 15). Once you've picked that number you'll need to write the name of the Key and can pass `Text` values from other components to it.
## Documents To Records
This component takes in a LangChain `Document` and outputs a `Record`. It does this by extracting the `page_content` and the `metadata` from the `Document` and adding them to the `Record` as text and data respectively.
## Why is this useful?
The idea was to create a unified way to work with complex data in Langflow and to make it easier to work with data that is not just a simple string. This way you can create more complex workflows and use the data in more ways.
## What's next?
We are planning to integrate an array of modalities to Langflow, such as images, audio, and video. This will allow you to create even more complex workflows and use cases. Stay tuned for more updates! 🚀

2
docs/docs/components/vector-stores.mdx
View file

@ -1,6 +1,6 @@
import Admonition from "@theme/Admonition";
# Vector Stores Documentation
# Vector Stores
### Astra DB

2
docs/docs/contributing/contribute-component.md
View file

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

35
docs/docs/examples/buffer-memory.mdx
View file

@ -1,35 +0,0 @@
import Admonition from "@theme/Admonition";
# Buffer Memory
For certain applications, retaining past interactions is crucial. For that, chains and agents may accept a memory component as one of their input parameters. The `ConversationBufferMemory` component is one of them. It stores messages and extracts them into variables.
## ⛓️ Langflow Example
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/buffer-memory.png",
dark: "img/buffer-memory.png",
}}
style={{
width: "80%",
margin: "20px auto",
display: "flex",
justifyContent: "center",
}}
/>
#### <a target="\_blank" href="json_files/Buffer_Memory.json" download>Download Flow</a>
<Admonition type="note" title="LangChain Components 🦜🔗">
- [`ConversationBufferMemory`](https://python.langchain.com/docs/modules/memory/types/buffer)
- [`ConversationChain`](https://python.langchain.com/docs/modules/chains/)
- [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
</Admonition>

17
docs/docs/examples/chat-memory.mdx Normal file
View file

@ -0,0 +1,17 @@
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";
# Chat Memory
The **Chat Memory** component restores previous messages given a Session ID, which can be any string.
This component is available under the **Helpers** tab of the Langflow preview.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/chat_memory.mp4" />
</div>

21
docs/docs/examples/combine-text.mdx Normal file
View file

@ -0,0 +1,21 @@
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";
# Combine Text
With LLM pipelines, combining text from different sources may be as important as splitting text.
The **Combine Text** component concatenates two text inputs into a single chunk using a specified delimiter, such as whitespace or a newline.
Also, check out **Combine Texts (Unsorted)** as a similar alternative.
This component is available under the **Helpers** tab of the Langflow preview.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/combine_text.mp4" />
</div>

41
docs/docs/examples/conversation-chain.mdx
View file

@ -1,41 +0,0 @@
import Admonition from "@theme/Admonition";
# Conversation Chain
This example shows how to instantiate a simple `ConversationChain` component using a Language Model (LLM). Once the Node Status turns green 🟢, the chat will be ready to take in user messages. Here, we used `ChatOpenAI` to act as the required LLM input, but you can use any LLM for this purpose.
<Admonition type="info">
Make sure to always get the API key from the provider.
</Admonition>
## ⛓️ Langflow Example
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/basic-chat.png",
dark: "img/basic-chat.png",
}}
style={{
width: "80%",
margin: "20px auto",
display: "flex",
justifyContent: "center",
}}
/>
#### <a target="\_blank" href="json_files/Basic_Chat.json" download>Download Flow</a>
<Admonition type="note" title="LangChain Components 🦜🔗">
- [`ConversationChain`](https://python.langchain.com/docs/modules/chains/)
- [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
</Admonition>

17
docs/docs/examples/create-record.mdx Normal file
View file

@ -0,0 +1,17 @@
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";
# Create Record
In Langflow, a `Record` has a structure very similar to a Python dictionary. It is a key-value pair data structure.
The **Create Record** component allows you to dynamically create a `Record` from a specified number of inputs. You can add as many key-value pairs as you want (as long as it is less than 15 😅). Once you've chosen the number of `Records`, add keys and fill up values, or pass on values from other components to the component using the input handles.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/create_record.mp4" />
</div>

57
docs/docs/examples/csv-loader.mdx
View file

@ -1,57 +0,0 @@
import Admonition from "@theme/Admonition";
# CSV Loader
The `VectoStoreAgent` component retrieves information from one or more vector stores. This example shows a `VectoStoreAgent` connected to a CSV file through the `Chroma` vector store. Process description:
- The `CSVLoader` loads a CSV file into a list of documents.
- The extracted data is then processed by the `CharacterTextSplitter`, which splits the text into small, meaningful chunks (usually sentences).
- These chunks feed the `Chroma` vector store, which converts them into vectors and stores them for fast indexing.
- Finally, the agent accesses the information of the vector store through the `VectorStoreInfo` tool.
<Admonition type="info">
The vector store is used for efficient semantic search, while
`VectorStoreInfo` carries information about it, such as its name and
description. Embeddings are a way to represent words, phrases, or any entities
in a vector space. Learn more about them
[here](https://platform.openai.com/docs/guides/embeddings/what-are-embeddings).
</Admonition>
<Admonition type="tip">
Once you build this flow, ask questions about the data in the chat interface
(e.g., number of rows or columns).
</Admonition>
## ⛓️ Langflow Example
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/csv-loader.png",
dark: "img/csv-loader.png",
}}
style={{
width: "80%",
margin: "20px auto",
display: "flex",
justifyContent: "center",
}}
/>
#### <a target="\_blank" href="json_files/CSV_Loader.json" download>Download Flow</a>
<Admonition type="note" title="LangChain Components 🦜🔗">
- [`CSVLoader`](https://python.langchain.com/docs/integrations/document_loaders/csv)
- [`CharacterTextSplitter`](https://python.langchain.com/docs/modules/data_connection/document_transformers/text_splitters/character_text_splitter)
- [`OpenAIEmbedding`](https://python.langchain.com/docs/integrations/text_embedding/openai)
- [`Chroma`](https://python.langchain.com/docs/integrations/vectorstores/chroma)
- [`VectorStoreInfo`](https://python.langchain.com/docs/modules/data_connection/vectorstores/)
- [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
- [`VectorStoreAgent`](https://js.langchain.com/docs/modules/agents/tools/how_to/agents_with_vectorstores)
</Admonition>

368
docs/docs/examples/flow-runner.mdx
View file

@ -1,368 +0,0 @@
---
description: Custom Components
hide_table_of_contents: true
---
# FlowRunner Component
The CustomComponent class allows us to create components that interact with Langflow itself. In this example, we will make a component that runs other flows available in "My Collection".
<ZoomableImage
alt="Document Processor Component"
sources={{
light: "img/flow_runner.png",
dark: "img/flow_runner.png",
}}
style={{
width: "30%",
margin: "20px auto",
display: "flex",
justifyContent: "center",
}}
/>
We will cover how to:
- List Collection flows using the _`list_flows`_ method.
- Load a flow using the _`load_flow`_ method.
- Configure a dropdown input field using the _`options`_ parameter.
<details open>
<summary>Example Code</summary>
```python
from langflow.custom import CustomComponent
from langchain.schema import Document
class FlowRunner(CustomComponent):
display_name = "Flow Runner"
description = "Run other flows using a document as input."
def build_config(self):
flows = self.list_flows()
flow_names = [f.name for f in flows]
return {"flow_name": {"options": flow_names,
"display_name": "Flow Name",
},
"document": {"display_name": "Document"}
}
def build(self, flow_name: str, document: Document) -> Document:
# List the flows
flows = self.list_flows()
# Get the flow that matches the selected name
# You can also get the flow by id
# using self.get_flow(flow_id=flow_id)
tweaks = {}
flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
# Get the page_content from the document
if document and isinstance(document, list):
document = document[0]
page_content = document.page_content
# Use it in the flow
result = flow(page_content)
return Document(page_content=str(result))
```
</details>
<CH.Scrollycoding rows={20} className={""}>
```python
from langflow.custom import CustomComponent
class MyComponent(CustomComponent):
display_name = "Custom Component"
description = "This is a custom component"
def build_config(self):
...
def build(self):
...
```
The typical structure of a Custom Component is composed of _`display_name`_ and _`description`_ attributes, _`build`_ and _`build_config`_ methods.
---
```python
from langflow.custom import CustomComponent
# focus
class FlowRunner(CustomComponent):
# focus
display_name = "Flow Runner"
# focus
description = "Run other flows"
def build_config(self):
...
def build(self):
...
```
Let's start by defining our component's _`display_name`_ and _`description`_.
---
```python
from langflow.custom import CustomComponent
# focus
from langchain.schema import Document
class FlowRunner(CustomComponent):
display_name = "Flow Runner"
description = "Run other flows using a document as input."
def build_config(self):
...
def build(self):
...
```
Second, we will import _`Document`_ from the [_langchain.schema_](https://docs.langchain.com/docs/components/schema/) module. This will be the return type of the _`build`_ method.
---
```python
from langflow.custom import CustomComponent
# focus
from langchain.schema import Document
class FlowRunner(CustomComponent):
display_name = "Flow Runner"
description = "Run other flows using a document as input."
def build_config(self):
...
# focus
def build(self, flow_name: str, document: Document) -> Document:
...
```
Now, let's add the [parameters](focus://11[20:55]) and the [return type](focus://11[60:69]) to the _`build`_ method. The parameters added are:
- _`flow_name`_ is the name of the flow we want to run.
- _`document`_ is the input document to be passed to that flow.
- Since _`Document`_ is a Langchain type, it will add an input [handle](../administration/components) to the component ([see more](../components/custom)).
---
```python focus=13:14
from langflow.custom import CustomComponent
from langchain.schema import Document
class FlowRunner(CustomComponent):
display_name = "Flow Runner"
description = "Run other flows using a document as input."
def build_config(self):
...
def build(self, flow_name: str, document: Document) -> Document:
# List the flows
flows = self.list_flows()
```
We can now start writing the _`build`_ method. Let's list available flows in "My Collection" using the _`list_flows`_ method.
---
```python focus=15:18
from langflow.custom import CustomComponent
from langchain.schema import Document
class FlowRunner(CustomComponent):
display_name = "Flow Runner"
description = "Run other flows using a document as input."
def build_config(self):
...
def build(self, flow_name: str, document: Document) -> Document:
# List the flows
flows = self.list_flows()
# Get the flow that matches the selected name
# You can also get the flow by id
# using self.get_flow(flow_id=flow_id)
tweaks = {}
flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
```
And retrieve a flow that matches the selected name (we'll make a dropdown input field for the user to choose among flow names).
<Admonition type="caution">
From version 0.4.0, names are unique, which was not the case in previous
versions. This might lead to unexpected results if using flows with the same
name.
</Admonition>
---
```python
from langflow.custom import CustomComponent
from langchain.schema import Document
class FlowRunner(CustomComponent):
display_name = "Flow Runner"
description = "Run other flows using a document as input."
def build_config(self):
...
def build(self, flow_name: str, document: Document) -> Document:
# List the flows
flows = self.list_flows()
# Get the flow that matches the selected name
# You can also get the flow by id
# using self.get_flow(flow_id=flow_id)
tweaks = {}
flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
```
You can load this flow using _`get_flow`_ and set a _`tweaks`_ dictionary to customize it. Find more about tweaks in our [features guidelines](../administration/features#code).
---
```python
from langflow.custom import CustomComponent
from langchain.schema import Document
class FlowRunner(CustomComponent):
display_name = "Flow Runner"
description = "Run other flows using a document as input."
def build_config(self):
...
def build(self, flow_name: str, document: Document) -> Document:
# List the flows
flows = self.list_flows()
# Get the flow that matches the selected name
# You can also get the flow by id
# using self.get_flow(flow_id=flow_id)
tweaks = {}
flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
# Get the page_content from the document
if document and isinstance(document, list):
document = document[0]
page_content = document.page_content
# Use it in the flow
result = flow(page_content)
return Document(page_content=str(result))
```
We are using a _`Document`_ as input because it is a straightforward way to pass text data in Langflow (specifically because you can connect it to many [loaders](../components/loaders)).
Generally, a flow will take a string or a dictionary as input because that's what LangChain components expect.
In case you are passing a dictionary, you need to build it according to the needs of the flow you are using.
The content of a document can be extracted using the _`page_content`_ attribute, which is a string, and passed as an argument to the selected flow.
---
```python focus=9:16
from langflow.custom import CustomComponent
from langchain.schema import Document
class FlowRunner(CustomComponent):
display_name = "Flow Runner"
description = "Run other flows using a document as input."
def build_config(self):
flows = self.list_flows()
flow_names = [f.name for f in flows]
return {"flow_name": {"options": flow_names,
"display_name": "Flow Name",
},
"document": {"display_name": "Document"}
}
def build(self, flow_name: str, document: Document) -> Document:
# List the flows
flows = self.list_flows()
# Get the flow that matches the selected name
# You can also get the flow by id
# using self.get_flow(flow_id=flow_id)
tweaks = {}
flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
# Get the page_content from the document
if document and isinstance(document, list):
document = document[0]
page_content = document.page_content
# Use it in the flow
result = flow(page_content)
return Document(page_content=str(result))
```
Finally, we can add field customizations through the _`build_config`_ method. Here we added the _`options`_ key to make the _`flow_name`_ field a dropdown menu. Check out the [custom component reference](../components/custom) for a list of available keys.
<Admonition type="caution">
Make sure that the field type is _`str`_ and _`options`_ values are strings.
</Admonition>
</CH.Scrollycoding>
Done! This is what our script and custom component looks like:
<div style={{
display: "flex",
justifyContent: "center",
}}>
<ZoomableImage
alt="Document Processor Code"
sources={{
light: "img/flow_runner_code.png",
dark: "img/flow_runner_code.png",
}}
style={{
maxWidth: "100%",
margin: "0 auto",
display: "flex",
justifyContent: "center",
}}
/>
<ZoomableImage
alt="Document Processor Component"
sources={{
light: "img/flow_runner.png",
dark: "img/flow_runner.png",
}}
style={{
width: "40%",
margin: "0 auto",
display: "flex",
justifyContent: "center",
}}
/>
</div>
import ZoomableImage from "/src/theme/ZoomableImage.js";
import Admonition from "@theme/Admonition";

17
docs/docs/examples/pass.mdx Normal file
View file

@ -0,0 +1,17 @@
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";
# Pass
Sometimes all you need to do is… nothing!
The **Pass** component enables you to ignore one input and move forward with another one. This is super helpful to swap routes for A/B testing!
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/pass.mp4" />
</div>

62
docs/docs/examples/python-function.mdx
View file

@ -1,62 +0,0 @@
import Admonition from "@theme/Admonition";
# Python Function
Langflow allows you to create a customized tool using the `PythonFunction` connected to a `Tool` component. In this example, Regex is used in Python to validate a pattern.
```python
import re
def is_brazilian_zipcode(zipcode: str) -> bool:
pattern = r"\d{5}-?\d{3}"
# Check if the zip code matches the pattern
if re.match(pattern, zipcode):
return True
return False
```
<Admonition type="tip">
When a tool is called, it is often desirable to have its output returned
directly to the user. You can do this by setting the **return_direct** flag
for a tool to be True.
</Admonition>
The `AgentInitializer` component is a quick way to construct an agent from the model and tools.
<Admonition type="info">
The `PythonFunction` is a custom component that uses the LangChain 🦜🔗 tool
decorator. Learn more about it
[here](https://python.langchain.com/docs/modules/agents/tools/custom_tools).
</Admonition>
## ⛓️ Langflow Example
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/python-function.png",
dark: "img/python-function.png",
}}
style={{
width: "80%",
margin: "20px auto",
display: "flex",
justifyContent: "center",
}}
/>
#### <a target="\_blank" href="json_files/Python_Function.json" download>Download Flow</a>
<Admonition type="note" title="LangChain Components 🦜🔗">
- [`PythonFunctionTool`](https://python.langchain.com/docs/modules/agents/tools/custom_tools)
- [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
- [`AgentInitializer`](https://python.langchain.com/docs/modules/agents/)
</Admonition>

52
docs/docs/examples/searchapi-tool.mdx
View file

@ -1,52 +0,0 @@
import Admonition from "@theme/Admonition";
# SearchApi Tool
The [SearchApi](https://www.searchapi.io/) allows developers to retrieve results from search engines such as Google, Google Scholar, YouTube, YouTube transcripts, and more, and can be used as in Langflow through the `SearchApi` tool.
<Admonition type="info">
To use the SearchApi, you must first obtain an API key by registering at [SearchApi's website](https://www.searchapi.io/).
</Admonition>
In the given example, we specify `engine` as `youtube_transcripts` and provide a `video_id`.
<Admonition type="info">
All engines and parameters can be found in [SearchApi documentation](https://www.searchapi.io/docs/google).
</Admonition>
The `RetrievalQA` chain processes a `Document` along with a user's question to return an answer.
<Admonition type="tip">
In this example, we used [`ChatOpenAI`](https://platform.openai.com/) as the
LLM, but feel free to experiment with other Language Models!
</Admonition>
The `RetrievalQA` takes `CombineDocsChain` and `SearchApi` tool as inputs, using the tool as a `Document` to answer questions.
<Admonition type="info">
Learn more about the SearchApi
[here](https://python.langchain.com/docs/integrations/tools/searchapi).
</Admonition>
## ⛓️ Langflow Example
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/searchapi-tool.png",
}}
/>
#### <a target="\_blank" href="json_files/SearchApi_Tool.json" download>Download Flow</a>
<Admonition type="note" title="LangChain Components 🦜🔗">
- [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
- [`SearchApiAPIWrapper`](https://python.langchain.com/docs/integrations/providers/searchapi#wrappers)
- [`ZeroShotAgent`](https://python.langchain.com/docs/modules/agents/how_to/custom_mrkl_agent)
</Admonition>

58
docs/docs/examples/serp-api-tool.mdx
View file

@ -1,58 +0,0 @@
import Admonition from "@theme/Admonition";
# Serp API Tool
The [Serp API](https://serpapi.com/) (Search Engine Results Page) allows developers to scrape results from search engines such as Google, Bing and Yahoo, and can be used as in Langflow through the `Search` component.
<Admonition type="info">
To use the Serp API, you first need to sign up [Serp
API](https://serpapi.com/) for an API key on the provider's website.
</Admonition>
Here, the `ZeroShotPrompt` component specifies a prompt template for the `ZeroShotAgent`. Set a _Prefix_ and _Suffix_ with rules for the agent to obey. In the example, we used default templates.
The `LLMChain` is a simple chain that takes in a prompt template, formats it with the user input, and returns the response from an LLM.
<Admonition type="tip">
In this example, we used [`ChatOpenAI`](https://platform.openai.com/) as the
LLM, but feel free to experiment with other Language Models!
</Admonition>
The `ZeroShotAgent` takes the `LLMChain` and the `Search` tool as inputs, using the tool to find information when necessary.
<Admonition type="info">
Learn more about the Serp API
[here](https://python.langchain.com/docs/integrations/providers/serpapi ).
</Admonition>
## ⛓️ Langflow Example
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/serp-api-tool.png",
dark: "img/serp-api-tool.png",
}}
style={{
width: "80%",
margin: "20px auto",
display: "flex",
justifyContent: "center",
}}
/>
#### <a target="\_blank" href="json_files/SerpAPI_Tool.json" download>Download Flow</a>
<Admonition type="note" title="LangChain Components 🦜🔗">
- [`ZeroShotPrompt`](https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/)
- [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
- [`LLMChain`](https://python.langchain.com/docs/modules/chains/foundational/llm_chain)
- [`Search`](https://python.langchain.com/docs/integrations/providers/serpapi)
- [`ZeroShotAgent`](https://python.langchain.com/docs/modules/agents/how_to/custom_mrkl_agent)
</Admonition>

17
docs/docs/examples/store-message.mdx Normal file
View file

@ -0,0 +1,17 @@
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";
# Store Message
The **Store Message** component allows you to save information under a specified Session ID and sender type.
The **Message History** component can then be used to retrieve stored messages.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/store_message.mp4" />
</div>

15
docs/docs/examples/sub-flow.mdx Normal file
View file

@ -0,0 +1,15 @@
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";
# Sub Flow
The **Sub Flow** component enables a user to select a previously built flow and dynamically generate a component out of it.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/sub_flow.mp4" />
</div>

15
docs/docs/examples/text-operator.mdx Normal file
View file

@ -0,0 +1,15 @@
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";
# Text Operator
The **Text Operator** component simplifies logic. It evaluates the results from another component (for example, if the input text exactly equals `Tuna`) and runs another component based on the results. Basically, the text operator is an if/else component for your flow.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/text_operator.mp4" />
</div>

77
docs/docs/getting-started/canvas.mdx
View file

@ -4,7 +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.
@ -20,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:
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/basic-prompting.png",
dark: "img/basic-prompting.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
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).
<div style={{ marginBottom: "20px" }}>
During the flow creation process, you will notice handles (colored circles)
@ -55,7 +82,7 @@ A component is a building block of a flow.
<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.
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.
@ -64,6 +91,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.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
</div>
### Component menu
Each component is a little unique, but they will all have a menu bar on top that looks something like this.
@ -78,7 +115,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.
@ -191,6 +228,34 @@ For example, changing the **Chat Input** component's `input_value` will change t
<ReactPlayer playing controls url="/videos/langflow_api.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.
## Project options menu
To see options for your project, in the upper left corner of the canvas, select the dropdown menu.

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

@ -17,99 +17,4 @@ 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:
<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.

38
docs/docs/getting-started/huggingface-spaces.mdx
View file

@ -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:
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/duplicate-space.png",
dark: "img/duplicate-space.png",
}}
style={{ width: "100%", margin: "20px auto" }}
/>
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)

28
docs/docs/getting-started/install-langflow.mdx
View file

@ -6,12 +6,13 @@ import Admonition from "@theme/Admonition";
# 📦 Install Langflow
<Admonition type="info">
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.
</Admonition>
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.
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.
Install Langflow with pip:
@ -73,3 +74,22 @@ python -m langflow run
```
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:
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/duplicate-space.png",
dark: "img/duplicate-space.png",
}}
style={{ width: "100%", margin: "20px auto" }}
/>
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!

10
docs/docs/getting-started/quickstart.mdx
View file

@ -10,15 +10,15 @@ 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)
<Admonition type="info">
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.
</Admonition>
## Hello World - Basic Prompting

13
docs/docs/index.mdx
View file

@ -14,8 +14,8 @@ Its intuitive interface allows for easy manipulation of AI building blocks, enab
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/new_langflow_demo.gif",
dark: "img/new_langflow_demo.gif",
light: "img/langflow_basic_howto.gif",
dark: "img/langflow_basic_howto.gif",
}}
style={{ width: "100%" }}
/>
@ -26,9 +26,14 @@ 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).
<Admonition type="info">
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.
</Admonition>
## Learn more about Langflow 1.0

138
docs/docs/integrations/notion/add-content-to-page.md Normal file
View file

@ -0,0 +1,138 @@
import Admonition from "@theme/Admonition";
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# Add Content To Page
The `AddContentToPage` component converts markdown text to Notion blocks and appends them to a Notion page.
[Notion Reference](https://developers.notion.com/reference/patch-block-children)
<Admonition type="tip" title="Component Functionality">
The `AddContentToPage` component enables you to:
- Convert markdown text to Notion blocks.
- Append the converted blocks to a specified Notion page.
- Seamlessly integrate Notion content creation into Langflow workflows.
</Admonition>
## Component Usage
To use the `AddContentToPage` component in a Langflow flow:
1. **Add the `AddContentToPage` component** to your flow.
2. **Configure the component** by providing:
- `markdown_text`: The markdown text to convert.
- `block_id`: The ID of the Notion page/block to append the content.
- `notion_secret`: The Notion integration token for authentication.
3. **Connect the component** to other nodes in your flow as needed.
4. **Run the flow** to convert the markdown text and append it to the specified Notion page.
## Component Python Code
```python
import json
from typing import Optional
import requests
from langflow.custom import CustomComponent
class NotionPageCreator(CustomComponent):
display_name = "Create Page [Notion]"
description = "A component for creating Notion pages."
documentation: str = "https://docs.langflow.org/integrations/notion/add-content-to-page"
icon = "NotionDirectoryLoader"
def build_config(self):
return {
"database_id": {
"display_name": "Database ID",
"field_type": "str",
"info": "The ID of the Notion database.",
},
"notion_secret": {
"display_name": "Notion Secret",
"field_type": "str",
"info": "The Notion integration token.",
"password": True,
},
"properties": {
"display_name": "Properties",
"field_type": "str",
"info": "The properties of the new page. Depending on your database setup, this can change. E.G: {'Task name': {'id': 'title', 'type': 'title', 'title': [{'type': 'text', 'text': {'content': 'Send Notion Components to LF', 'link': null}}]}}",
},
}
def build(
self,
database_id: str,
notion_secret: str,
properties: str = '{"Task name": {"id": "title", "type": "title", "title": [{"type": "text", "text": {"content": "Send Notion Components to LF", "link": null}}]}}',
) -> str:
if not database_id or not properties:
raise ValueError("Invalid input. Please provide 'database_id' and 'properties'.")
headers = {
"Authorization": f"Bearer {notion_secret}",
"Content-Type": "application/json",
"Notion-Version": "2022-06-28",
}
data = {
"parent": {"database_id": database_id},
"properties": json.loads(properties),
}
response = requests.post("https://api.notion.com/v1/pages", headers=headers, json=data)
if response.status_code == 200:
page_id = response.json()["id"]
self.status = f"Successfully created Notion page with ID: {page_id}\n {str(response.json())}"
return response.json()
else:
error_message = f"Failed to create Notion page. Status code: {response.status_code}, Error: {response.text}"
self.status = error_message
raise Exception(error_message)
```
## Example Usage
<Admonition type="info" title="Example Usage">
Example of using the `AddContentToPage` component in a Langflow flow using Markdown as input:
<ZoomableImage
alt="NotionDatabaseProperties Flow Example"
sources={{
light: "img/notion/AddContentToPage_flow_example.png",
dark: "img/notion/AddContentToPage_flow_example.png",
}}
style={{ width: "100%", margin: "20px 0" }}
/>
In this example, the `AddContentToPage` component connects to a `MarkdownLoader` component to provide the markdown text input. The converted Notion blocks are appended to the specified Notion page using the provided `block_id` and `notion_secret`.
</Admonition>
## Best Practices
When using the `AddContentToPage` component:
- Ensure markdown text is well-formatted.
- Verify the `block_id` corresponds to the right Notion page/block.
- Keep your Notion integration token secure.
- Test with sample markdown text before production use.
The `AddContentToPage` component is a powerful tool for integrating Notion content creation into Langflow workflows, facilitating easy conversion of markdown text to Notion blocks and appending them to specific pages.
## Troubleshooting
If you encounter any issues while using the `AddContentToPage` component, consider the following:
- Verify the Notion integration token’s validity and permissions.
- Check the Notion API documentation for updates.
- Ensure markdown text is properly formatted.
- Double-check the `block_id` for correctness.

43
docs/docs/integrations/notion/intro.md Normal file
View file

@ -0,0 +1,43 @@
import Admonition from "@theme/Admonition";
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# Introduction to Notion in Langflow
The Notion integration in Langflow enables seamless connectivity with Notion databases, pages, and users, facilitating automation and improving productivity.
<ZoomableImage
alt="Notion Components in Langflow"
sources={{
light: "img/notion/notion_bundle.jpg",
dark: "img/notion/notion_bundle.jpg",
}}
style={{ width: "100%", margin: "20px 0" }}
/>
#### <a target="\_blank" href="json_files/Notion_Components_bundle.json" download>Download Notion Components Bundle</a>
### Key Features of Notion Integration in Langflow
- **List Pages**: Retrieve a list of pages from a Notion database and access data stored in your Notion workspace.
- **List Database Properties**: Obtain insights into the properties of a Notion database, allowing for easy understanding of its structure and metadata.
- **Add Page Content**: Programmatically add new content to a Notion page, simplifying the creation and updating of pages.
- **List Users**: Retrieve a list of users with access to a Notion workspace, aiding in user management and collaboration.
- **Update Property**: Update the value of a specific property in a Notion page, enabling easy modification and maintenance of Notion data.
### Potential Use Cases for Notion Integration in Langflow
- **Task Automation**: Automate task creation in Notion using Langflow's AI capabilities. Describe the required tasks, and they will be automatically created and updated in Notion.
- **Context Extraction from Meetings**: Leverage AI to analyze meeting contexts, extract key points, and update the relevant Notion pages automatically.
- **Content Creation**: Utilize AI to generate ideas, suggest templates, and populate Notion pages with relevant data, enhancing content management efficiency.
### Getting Started with Notion Integration in Langflow
1. **Set Up Notion Integration**: Follow the guide [Setting up a Notion App](./setup) to set up a Notion integration in your workspace.
2. **Configure Notion Components**: Provide the necessary authentication details and parameters to configure the Notion components in your Langflow flows.
3. **Connect Components**: Integrate Notion components with other Langflow components to build your workflow.
4. **Test and Refine**: Ensure your Langflow flow operates as intended by testing and refining it.
5. **Deploy and Run**: Deploy your Langflow flow to automate Notion-related tasks and processes.
The Notion integration in Langflow offers a powerful toolset for automation and productivity enhancement. Whether managing tasks, extracting meeting insights, or creating content, Langflow and Notion provide robust solutions for streamlining workflows.

117
docs/docs/integrations/notion/list-database-properties.md Normal file
View file

@ -0,0 +1,117 @@
import Admonition from "@theme/Admonition";
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# Database Properties
The `NotionDatabaseProperties` component retrieves properties of a Notion database. It provides a convenient way to integrate Notion database information into your Langflow workflows.
[Notion Reference](https://developers.notion.com/reference/post-database-query)
<Admonition type="tip" title="Component Functionality">
The `NotionDatabaseProperties` component enables you to:
- Retrieve properties of a Notion database
- Access the retrieved properties in your Langflow flows
- Integrate Notion database information seamlessly into your workflows
</Admonition>
## Component Usage
To use the `NotionDatabaseProperties` component in a Langflow flow, follow these steps:
1. Add the `NotionDatabaseProperties` component to your flow.
2. Configure the component by providing the required inputs:
- `database_id`: The ID of the Notion database you want to retrieve properties from.
- `notion_secret`: The Notion integration token for authentication.
3. Connect the output of the `NotionDatabaseProperties` component to other components in your flow as needed.
## Component Python code
```python
import requests
from typing import Dict
from langflow import CustomComponent
from langflow.schema import Record
class NotionDatabaseProperties(CustomComponent):
display_name = "List Database Properties [Notion]"
description = "Retrieve properties of a Notion database."
documentation: str = "https://docs.langflow.org/integrations/notion/list-database-properties"
icon = "NotionDirectoryLoader"
def build_config(self):
return {
"database_id": {
"display_name": "Database ID",
"field_type": "str",
"info": "The ID of the Notion database.",
},
"notion_secret": {
"display_name": "Notion Secret",
"field_type": "str",
"info": "The Notion integration token.",
"password": True,
},
}
def build(
self,
database_id: str,
notion_secret: str,
) -> Record:
url = f"https://api.notion.com/v1/databases/{database_id}"
headers = {
"Authorization": f"Bearer {notion_secret}",
"Notion-Version": "2022-06-28", # Use the latest supported version
}
response = requests.get(url, headers=headers)
response.raise_for_status()
data = response.json()
properties = data.get("properties", {})
record = Record(text=str(response.json()), data=properties)
self.status = f"Retrieved {len(properties)} properties from the Notion database.\n {record.text}"
return record
```
## Example Usage
<Admonition type="info" title="Example Usage">
Here's an example of how you can use the `NotionDatabaseProperties` component in a Langflow flow:
<ZoomableImage
alt="NotionDatabaseProperties Flow Example"
sources={{
light: "img/notion/NotionDatabaseProperties_flow_example.png",
dark: "img/notion/NotionDatabaseProperties_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
/>
In this example, the `NotionDatabaseProperties` component retrieves the properties of a Notion database, and the retrieved properties are then used as input for subsequent components in the flow.
</Admonition>
## Best Practices
When using the `NotionDatabaseProperties` component, consider the following best practices:
- Ensure that you have a valid Notion integration token with the necessary permissions to access the desired database.
- Double-check the database ID to avoid retrieving properties from the wrong database.
- Handle potential errors gracefully by checking the response status and providing appropriate error messages.
The `NotionDatabaseProperties` component simplifies the process of retrieving properties from a Notion database and integrating them into your Langflow workflows. By leveraging this component, you can easily access and utilize Notion database information in your flows, enabling powerful integrations and automations.
Feel free to explore the capabilities of the `NotionDatabaseProperties` component and experiment with different use cases to enhance your Langflow workflows!
## Troubleshooting
If you encounter any issues while using the `NotionDatabaseProperties` component, consider the following:
- Verify that the Notion integration token is valid and has the required permissions.
- Check the database ID to ensure it matches the intended Notion database.
- Inspect the response from the Notion API for any error messages or status codes that may indicate the cause of the issue.

179
docs/docs/integrations/notion/list-pages.md Normal file
View file

@ -0,0 +1,179 @@
import Admonition from "@theme/Admonition";
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# List Pages
The `NotionListPages` component queries a Notion database with filtering and sorting. It provides a convenient way to integrate Notion database querying capabilities into your Langflow workflows.
[Notion Reference](https://developers.notion.com/reference/post-database-query)
<Admonition type="tip" title="Component Functionality">
The `NotionListPages` component enables you to:
- Query a Notion database with custom filters and sorting options
- Retrieve specific pages from a Notion database based on the provided criteria
- Integrate Notion database data seamlessly into your Langflow workflows
</Admonition>
## Component Usage
To use the `NotionListPages
` component in a Langflow flow, follow these steps:
1. **Add the `NotionListPages
` component to your flow.**
2. **Configure the component by providing the required parameters:**
- `notion_secret`: The Notion integration token for authentication.
- `database_id`: The ID of the Notion database you want to query.
- `query_payload`: A JSON string containing the filters and sorting options for the query.
3. **Connect the `NotionListPages
` component to other components in your flow as needed.**
## Component Python code
```python
import requests
import json
from typing import Dict, Any, List
from langflow.custom import CustomComponent
from langflow.schema import Record
class NotionListPages(CustomComponent):
display_name = "List Pages [Notion]"
description = (
"Query a Notion database with filtering and sorting. "
"The input should be a JSON string containing the 'filter' and 'sorts' objects. "
"Example input:\n"
'{"filter": {"property": "Status", "select": {"equals": "Done"}}, "sorts": [{"timestamp": "created_time", "direction": "descending"}]}'
)
documentation: str = "https://docs.langflow.org/integrations/notion/list-pages"
icon = "NotionDirectoryLoader"
field_order = [
"notion_secret",
"database_id",
"query_payload",
]
def build_config(self):
return {
"notion_secret": {
"display_name": "Notion Secret",
"field_type": "str",
"info": "The Notion integration token.",
"password": True,
},
"database_id": {
"display_name": "Database ID",
"field_type": "str",
"info": "The ID of the Notion database to query.",
},
"query_payload": {
"display_name": "Database query",
"field_type": "str",
"info": "A JSON string containing the filters that will be used for querying the database. EG: {'filter': {'property': 'Status', 'status': {'equals': 'In progress'}}}",
},
}
def build(
self,
notion_secret: str,
database_id: str,
query_payload: str = "{}",
) -> List[Record]:
try:
query_data = json.loads(query_payload)
filter_obj = query_data.get("filter")
sorts = query_data.get("sorts", [])
url = f"https://api.notion.com/v1/databases/{database_id}/query"
headers = {
"Authorization": f"Bearer {notion_secret}",
"Content-Type": "application/json",
"Notion-Version": "2022-06-28",
}
data = {
"sorts": sorts,
}
if filter_obj:
data["filter"] = filter_obj
response = requests.post(url, headers=headers, json=data)
response.raise_for_status()
results = response.json()
records = []
combined_text = f"Pages found: {len(results['results'])}\n\n"
for page in results['results']:
page_data = {
'id': page['id'],
'url': page['url'],
'created_time': page['created_time'],
'last_edited_time': page['last_edited_time'],
'properties': page['properties'],
}
text = (
f"id: {page['id']}\n"
f"url: {page['url']}\n"
f"created_time: {page['created_time']}\n"
f"last_edited_time: {page['last_edited_time']}\n"
f"properties: {json.dumps(page['properties'], indent=2)}\n\n"
)
combined_text += text
records.append(Record(text=text, data=page_data))
self.status = combined_text.strip()
return records
except Exception as e:
self.status = f"An error occurred: {str(e)}"
return [Record(text=self.status, data=[])]
```
<Admonition type="info" title="Example Usage">
## Example Usage
Here's an example of how you can use the `NotionListPages` component in a Langflow flow and passing to the Prompt component:
<ZoomableImage
alt="NotionListPages
Flow Example"
sources={{
light: "img/notion/NotionListPages_flow_example.png",
dark: "img/notion/NotionListPages_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
/>
In this example, the `NotionListPages` component is used to retrieve specific pages from a Notion database based on the provided filters and sorting options. The retrieved data can then be processed further in the subsequent components of the flow.
</Admonition>
## Best Practices
When using the `NotionListPages
` component, consider the following best practices:
- Ensure that you have a valid Notion integration token with the necessary permissions to query the desired database.
- Construct the `query_payload` JSON string carefully, following the Notion API documentation for filtering and sorting options.
The `NotionListPages
` component provides a powerful way to integrate Notion database querying capabilities into your Langflow workflows. By leveraging this component, you can easily retrieve specific pages from a Notion database based on custom filters and sorting options, enabling you to build more dynamic and data-driven flows.
We encourage you to explore the capabilities of the `NotionListPages
` component further and experiment with different querying scenarios to unlock the full potential of integrating Notion databases into your Langflow workflows.
## Troubleshooting
If you encounter any issues while using the `NotionListPages` component, consider the following:
- Double-check that the `notion_secret` and `database_id` are correct and valid.
- Verify that the `query_payload` JSON string is properly formatted and contains valid filtering and sorting options.
- Check the Notion API documentation for any updates or changes that may affect the component's functionality.

127
docs/docs/integrations/notion/list-users.md Normal file
View file

@ -0,0 +1,127 @@
import Admonition from "@theme/Admonition";
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# User List
The `NotionUserList` component retrieves users from Notion. It provides a convenient way to integrate Notion user data into your Langflow workflows.
[Notion Reference](https://developers.notion.com/reference/get-users)
<Admonition type="tip" title="Component Functionality">
The `NotionUserList` component enables you to:
- Retrieve user data from Notion
- Access user information such as ID, type, name, and avatar URL
- Integrate Notion user data seamlessly into your Langflow workflows
</Admonition>
## Component Usage
To use the `NotionUserList` component in a Langflow flow, follow these steps:
1. Add the `NotionUserList` component to your flow.
2. Configure the component by providing the required Notion secret token.
3. Connect the component to other nodes in your flow as needed.
## Component Python code
```python
import requests
from typing import List
from langflow import CustomComponent
from langflow.schema import Record
class NotionUserList(CustomComponent):
display_name = "List Users [Notion]"
description = "Retrieve users from Notion."
documentation: str = "https://docs.langflow.org/integrations/notion/list-users"
icon = "NotionDirectoryLoader"
def build_config(self):
return {
"notion_secret": {
"display_name": "Notion Secret",
"field_type": "str",
"info": "The Notion integration token.",
"password": True,
},
}
def build(
self,
notion_secret: str,
) -> List[Record]:
url = "https://api.notion.com/v1/users"
headers = {
"Authorization": f"Bearer {notion_secret}",
"Notion-Version": "2022-06-28",
}
response = requests.get(url, headers=headers)
response.raise_for_status()
data = response.json()
results = data['results']
records = []
for user in results:
id = user['id']
type = user['type']
name = user.get('name', '')
avatar_url = user.get('avatar_url', '')
record_data = {
"id": id,
"type": type,
"name": name,
"avatar_url": avatar_url,
}
output = "User:\n"
for key, value in record_data.items():
output += f"{key.replace('_', ' ').title()}: {value}\n"
output += "________________________\n"
record = Record(text=output, data=record_data)
records.append(record)
self.status = "\n".join(record.text for record in records)
return records
```
## Example Usage
<Admonition type="info" title="Example Usage">
Here's an example of how you can use the `NotionUserList` component in a Langflow flow and passing the outputs to the Prompt component:
<ZoomableImage
alt="NotionUserList Flow Example"
sources={{
light: "img/notion/NotionUserList_flow_example.png",
dark: "img/notion/NotionUserList_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
/>
</Admonition>
## Best Practices
When using the `NotionUserList` component, consider the following best practices:
- Ensure that you have a valid Notion integration token with the necessary permissions to retrieve user data.
- Handle the retrieved user data securely and in compliance with Notion's API usage guidelines.
The `NotionUserList` component provides a seamless way to integrate Notion user data into your Langflow workflows. By leveraging this component, you can easily retrieve and utilize user information from Notion, enhancing the capabilities of your Langflow applications. Feel free to explore and experiment with the `NotionUserList` component to unlock new possibilities in your Langflow projects!
## Troubleshooting
If you encounter any issues while using the `NotionUserList` component, consider the following:
- Double-check that your Notion integration token is valid and has the required permissions.
- Verify that you have installed the necessary dependencies (`requests`) for the component to function properly.
- Check the Notion API documentation for any updates or changes that may affect the component's functionality.

142
docs/docs/integrations/notion/page-content-viewer.md Normal file
View file

@ -0,0 +1,142 @@
import Admonition from "@theme/Admonition";
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# Page Content
The `NotionPageContent` component retrieves the content of a Notion page as plain text. It provides a convenient way to integrate Notion page content into your Langflow workflows.
[Notion Reference](https://developers.notion.com/reference/get-page)
<Admonition type="tip" title="Component Functionality">
The `NotionPageContent` component enables you to:
- Retrieve the content of a Notion page as plain text
- Extract text from various block types, including paragraphs, headings, lists, and more
- Integrate Notion page content seamlessly into your Langflow workflows
</Admonition>
## Component Usage
To use the `NotionPageContent` component in a Langflow flow, follow these steps:
1. Add the `NotionPageContent` component to your flow.
2. Configure the component by providing the required inputs:
- `page_id`: The ID of the Notion page you want to retrieve.
- `notion_secret`: Your Notion integration token for authentication.
3. Connect the output of the `NotionPageContent` component to other components in your flow as needed.
## Component Python code
```python
import requests
from typing import Dict, Any
from langflow import CustomComponent
from langflow.schema import Record
class NotionPageContent(CustomComponent):
display_name = "Page Content Viewer [Notion]"
description = "Retrieve the content of a Notion page as plain text."
documentation: str = "https://docs.langflow.org/integrations/notion/page-content-viewer"
icon = "NotionDirectoryLoader"
def build_config(self):
return {
"page_id": {
"display_name": "Page ID",
"field_type": "str",
"info": "The ID of the Notion page to retrieve.",
},
"notion_secret": {
"display_name": "Notion Secret",
"field_type": "str",
"info": "The Notion integration token.",
"password": True,
},
}
def build(
self,
page_id: str,
notion_secret: str,
) -> Record:
blocks_url = f"https://api.notion.com/v1/blocks/{page_id}/children?page_size=100"
headers = {
"Authorization": f"Bearer {notion_secret}",
"Notion-Version": "2022-06-28", # Use the latest supported version
}
# Retrieve the child blocks
blocks_response = requests.get(blocks_url, headers=headers)
blocks_response.raise_for_status()
blocks_data = blocks_response.json()
# Parse the blocks and extract the content as plain text
content = self.parse_blocks(blocks_data["results"])
self.status = content
return Record(data={"content": content}, text=content)
def parse_blocks(self, blocks: list) -> str:
content = ""
for block in blocks:
block_type = block["type"]
if block_type in ["paragraph", "heading_1", "heading_2", "heading_3", "quote"]:
content += self.parse_rich_text(block[block_type]["rich_text"]) + "\n\n"
elif block_type in ["bulleted_list_item", "numbered_list_item"]:
content += self.parse_rich_text(block[block_type]["rich_text"]) + "\n"
elif block_type == "to_do":
content += self.parse_rich_text(block["to_do"]["rich_text"]) + "\n"
elif block_type == "code":
content += self.parse_rich_text(block["code"]["rich_text"]) + "\n\n"
elif block_type == "image":
content += f"[Image: {block['image']['external']['url']}]\n\n"
elif block_type == "divider":
content += "---\n\n"
return content.strip()
def parse_rich_text(self, rich_text: list) -> str:
text = ""
for segment in rich_text:
text += segment["plain_text"]
return text
```
## Example Usage
<Admonition type="info" title="Example Usage">
Here's an example of how you can use the `NotionPageContent` component in a Langflow flow:
<ZoomableImage
alt="NotionPageContent Flow Example"
sources={{
light: "img/notion/NotionPageContent_flow_example.png",
dark: "img/notion/NotionPageContent_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
/>
</Admonition>
## Best Practices
When using the `NotionPageContent` component, consider the following best practices:
- Ensure that you have the necessary permissions to access the Notion page you want to retrieve.
- Keep your Notion integration token secure and avoid sharing it publicly.
- Be mindful of the content you retrieve and ensure that it aligns with your intended use case.
The `NotionPageContent` component provides a seamless way to integrate Notion page content into your Langflow workflows. By leveraging this component, you can easily retrieve and process the content of Notion pages, enabling you to build powerful and dynamic applications. Explore the capabilities of the `NotionPageContent` component and unlock new possibilities in your Langflow projects!
## Troubleshooting
If you encounter any issues while using the `NotionPageContent` component, consider the following:
- Double-check that you have provided the correct Notion page ID.
- Verify that your Notion integration token is valid and has the necessary permissions.
- Check the Notion API documentation for any updates or changes that may affect the component's functionality.

131
docs/docs/integrations/notion/page-create.md Normal file
View file

@ -0,0 +1,131 @@
import Admonition from "@theme/Admonition";
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# Page Create
The `NotionPageCreator` component creates pages in a Notion database. It provides a convenient way to integrate Notion page creation into your Langflow workflows.
[Notion Reference](https://developers.notion.com/reference/patch-block-children)
<Admonition type="tip" title="Component Functionality">
The `NotionPageCreator` component enables you to:
- Create new pages in a specified Notion database
- Set custom properties for the created pages
- Retrieve the ID and URL of the newly created pages
</Admonition>
## Component Usage
To use the `NotionPageCreator` component in a Langflow flow, follow these steps:
1. Add the `NotionPageCreator` component to your flow.
2. Configure the component by providing the required inputs:
- `database_id`: The ID of the Notion database where the pages will be created.
- `notion_secret`: The Notion integration token for authentication.
- `properties`: The properties of the new page, specified as a JSON string.
3. Connect the component to other components in your flow as needed.
4. Run the flow to create Notion pages based on the configured inputs.
## Component Python Code
```python
import json
from typing import Optional
import requests
from langflow.custom import CustomComponent
class NotionPageCreator(CustomComponent):
display_name = "Create Page [Notion]"
description = "A component for creating Notion pages."
documentation: str = "https://docs.langflow.org/integrations/notion/page-create"
icon = "NotionDirectoryLoader"
def build_config(self):
return {
"database_id": {
"display_name": "Database ID",
"field_type": "str",
"info": "The ID of the Notion database.",
},
"notion_secret": {
"display_name": "Notion Secret",
"field_type": "str",
"info": "The Notion integration token.",
"password": True,
},
"properties": {
"display_name": "Properties",
"field_type": "str",
"info": "The properties of the new page. Depending on your database setup, this can change. E.G: {'Task name': {'id': 'title', 'type': 'title', 'title': [{'type': 'text', 'text': {'content': 'Send Notion Components to LF', 'link': null}}]}}",
},
}
def build(
self,
database_id: str,
notion_secret: str,
properties: str = '{"Task name": {"id": "title", "type": "title", "title": [{"type": "text", "text": {"content": "Send Notion Components to LF", "link": null}}]}}',
) -> str:
if not database_id or not properties:
raise ValueError("Invalid input. Please provide 'database_id' and 'properties'.")
headers = {
"Authorization": f"Bearer {notion_secret}",
"Content-Type": "application/json",
"Notion-Version": "2022-06-28",
}
data = {
"parent": {"database_id": database_id},
"properties": json.loads(properties),
}
response = requests.post("https://api.notion.com/v1/pages", headers=headers, json=data)
if response.status_code == 200:
page_id = response.json()["id"]
self.status = f"Successfully created Notion page with ID: {page_id}\n {str(response.json())}"
return response.json()
else:
error_message = f"Failed to create Notion page. Status code: {response.status_code}, Error: {response.text}"
self.status = error_message
raise Exception(error_message)
```
## Example Usage
<Admonition type="info" title="Example Usage">
Here's an example of how to use the `NotionPageCreator` component in a Langflow flow:
<ZoomableImage
alt="NotionPageCreator Flow Example"
sources={{
light: "img/notion/NotionPageCreator_flow_example.png",
dark: "img/notion/NotionPageCreator_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
/>
</Admonition>
## Best Practices
When using the `NotionPageCreator` component, consider the following best practices:
- Ensure that you have a valid Notion integration token with the necessary permissions to create pages in the specified database.
- Properly format the `properties` input as a JSON string, matching the structure and field types of your Notion database.
- Handle any errors or exceptions that may occur during the page creation process and provide appropriate error messages.
- To avoid the hassle of messing with JSON, we recommend using the LLM to create the JSON for you as input.
The `NotionPageCreator` component simplifies the process of creating pages in a Notion database directly from your Langflow workflows. By leveraging this component, you can seamlessly integrate Notion page creation functionality into your automated processes, saving time and effort. Feel free to explore the capabilities of the `NotionPageCreator` component and adapt it to suit your specific requirements.
## Troubleshooting
If you encounter any issues while using the `NotionPageCreator` component, consider the following:
- Double-check that the `database_id` and `notion_secret` inputs are correct and valid.
- Verify that the `properties` input is properly formatted as a JSON string and matches the structure of your Notion database.
- Check the Notion API documentation for any updates or changes that may affect the component's functionality.

138
docs/docs/integrations/notion/page-update.md Normal file
View file

@ -0,0 +1,138 @@
import Admonition from "@theme/Admonition";
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# Page Update
The `NotionPageUpdate` component updates the properties of a Notion page. It provides a convenient way to integrate updating Notion page properties into your Langflow workflows.
[Notion Reference](https://developers.notion.com/reference/patch-page)
## Component Usage
To use the `NotionPageUpdate` component in your Langflow flow:
1. Drag and drop the `NotionPageUpdate` component onto the canvas.
2. Double-click the component to open its configuration.
3. Provide the required parameters as defined in the component's `build_config` method.
4. Connect the component to other nodes in your flow as needed.
## Component Python Code
```python
import json
import requests
from typing import Dict, Any
from langflow import CustomComponent
from langflow.schema import Record
class NotionPageUpdate(CustomComponent):
display_name = "Update Page Property [Notion]"
description = "Update the properties of a Notion page."
documentation: str = "https://docs.langflow.org/integrations/notion/page-update"
icon = "NotionDirectoryLoader"
def build_config(self):
return {
"page_id": {
"display_name": "Page ID",
"field_type": "str",
"info": "The ID of the Notion page to update.",
},
"properties": {
"display_name": "Properties",
"field_type": "str",
"info": "The properties to update on the page (as a JSON string).",
"multiline": True,
},
"notion_secret": {
"display_name": "Notion Secret",
"field_type": "str",
"info": "The Notion integration token.",
"password": True,
},
}
def build(
self,
page_id: str,
properties: str,
notion_secret: str,
) -> Record:
url = f"https://api.notion.com/v1/pages/{page_id}"
headers = {
"Authorization": f"Bearer {notion_secret}",
"Content-Type": "application/json",
"Notion-Version": "2022-06-28", # Use the latest supported version
}
try:
parsed_properties = json.loads(properties)
except json.JSONDecodeError as e:
raise ValueError("Invalid JSON format for properties") from e
data = {
"properties": parsed_properties
}
response = requests.patch(url, headers=headers, json=data)
response.raise_for_status()
updated_page = response.json()
output = "Updated page properties:\n"
for prop_name, prop_value in updated_page["properties"].items():
output += f"{prop_name}: {prop_value}\n"
self.status = output
return Record(data=updated_page)
```
Let's break down the key parts of this component:
- The `build_config` method defines the configuration fields for the component. It specifies the required parameters and their properties, such as display names, field types, and any additional information or validation.
- The `build` method contains the main logic of the component. It takes the configured parameters as input and performs the necessary operations to update the properties of a Notion page.
- The component interacts with the Notion API to update the page properties. It constructs the API URL, headers, and request data based on the provided parameters.
- The processed data is returned as a `Record` object, which can be connected to other components in the Langflow flow. The `Record` object contains the updated page data.
- The component also stores the updated page properties in the `status` attribute for logging and debugging purposes.
## Example Usage
<Admonition type="info" title="Example Usage">
Here's an example of how to use the `NotionPageUpdate` component in a Langflow flow using:
<ZoomableImage
alt="NotionPageUpdate Flow Example"
sources={{
light: "img/notion/NotionPageUpdate_flow_example.png",
dark: "img/notion/NotionPageUpdate_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
/>
</Admonition>
## Best Practices
When using the `NotionPageUpdate` component, consider the following best practices:
- Ensure that you have a valid Notion integration token with the necessary permissions to update page properties.
- Handle edge cases and error scenarios gracefully, such as invalid JSON format for properties or API request failures.
- We recommend using an LLM to generate the inputs for this component, to allow flexibilty
By leveraging the `NotionPageUpdate` component in Langflow, you can easily integrate updating Notion page properties into your language model workflows and build powerful applications that extend Langflow's capabilities.
## Troubleshooting
If you encounter any issues while using the `NotionPageUpdate` component, consider the following:
- Double-check that you have correctly configured the component with the required parameters, including the page ID, properties JSON, and Notion integration token.
- Verify that your Notion integration token has the necessary permissions to update page properties.
- Check the Langflow logs for any error messages or exceptions related to the component, such as invalid JSON format or API request failures.
- Consult the [Notion API Documentation](https://developers.notion.com/reference/patch-page) for specific troubleshooting steps or common issues related to updating page properties.

184
docs/docs/integrations/notion/search.md Normal file
View file

@ -0,0 +1,184 @@
import Admonition from "@theme/Admonition";
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# Notion Search
The `NotionSearch` component is designed to search all pages and databases that have been shared with an integration in Notion. It provides a convenient way to integrate Notion search capabilities into your Langflow workflows.
[Notion Reference](https://developers.notion.com/reference/search)
<Admonition type="tip" title="Component Functionality">
The `NotionSearch` component enables you to:
- Search for pages and databases in Notion that have been shared with an integration
- Filter the search results based on object type (pages or databases)
- Sort the search results in ascending or descending order based on the last edited time
</Admonition>
## Component Usage
To use the `NotionSearch` component in a Langflow flow, follow these steps:
1. **Add the `NotionSearch` component to your flow.**
2. **Configure the component by providing the required parameters:**
- `notion_secret`: The Notion integration token for authentication.
- `query`: The text to search for in page and database titles.
- `filter_value`: The type of objects to include in the search results (pages or databases).
- `sort_direction`: The direction to sort the search results (ascending or descending).
3. **Connect the `NotionSearch` component to other components in your flow as needed.**
## Component Python Code
```python
import requests
from typing import Dict, Any, List
from langflow.custom import CustomComponent
from langflow.schema import Record
class NotionSearch(CustomComponent):
display_name = "Search Notion"
description = (
"Searches all pages and databases that have been shared with an integration."
)
documentation: str = "https://docs.langflow.org/integrations/notion/search"
icon = "NotionDirectoryLoader"
field_order = [
"notion_secret",
"query",
"filter_value",
"sort_direction",
]
def build_config(self):
return {
"notion_secret": {
"display_name": "Notion Secret",
"field_type": "str",
"info": "The Notion integration token.",
"password": True,
},
"query": {
"display_name": "Search Query",
"field_type": "str",
"info": "The text that the API compares page and database titles against.",
},
"filter_value": {
"display_name": "Filter Type",
"field_type": "str",
"info": "Limits the results to either only pages or only databases.",
"options": ["page", "database"],
"default_value": "page",
},
"sort_direction": {
"display_name": "Sort Direction",
"field_type": "str",
"info": "The direction to sort the results.",
"options": ["ascending", "descending"],
"default_value": "descending",
},
}
def build(
self,
notion_secret: str,
query: str = "",
filter_value: str = "page",
sort_direction: str = "descending",
) -> List[Record]:
try:
url = "https://api.notion.com/v1/search"
headers = {
"Authorization": f"Bearer {notion_secret}",
"Content-Type": "application/json",
"Notion-Version": "2022-06-28",
}
data = {
"query": query,
"filter": {
"value": filter_value,
"property": "object"
},
"sort":{
"direction": sort_direction,
"timestamp": "last_edited_time"
}
}
response = requests.post(url, headers=headers, json=data)
response.raise_for_status()
results = response.json()
records = []
combined_text = f"Results found: {len(results['results'])}\n\n"
for result in results['results']:
result_data = {
'id': result['id'],
'type': result['object'],
'last_edited_time': result['last_edited_time'],
}
if result['object'] == 'page':
result_data['title_or_url'] = result['url']
text = f"id: {result['id']}\ntitle_or_url: {result['url']}\n"
elif result['object'] == 'database':
if 'title' in result and isinstance(result['title'], list) and len(result['title']) > 0:
result_data['title_or_url'] = result['title'][0]['plain_text']
text = f"id: {result['id']}\ntitle_or_url: {result['title'][0]['plain_text']}\n"
else:
result_data['title_or_url'] = "N/A"
text = f"id: {result['id']}\ntitle_or_url: N/A\n"
text += f"type: {result['object']}\nlast_edited_time: {result['last_edited_time']}\n\n"
combined_text += text
records.append(Record(text=text, data=result_data))
self.status = combined_text
return records
except Exception as e:
self.status = f"An error occurred: {str(e)}"
return [Record(text=self.status, data=[])]
```
## Example Usage
<Admonition type="info" title="Example Usage">
Here's an example of how you can use the `NotionSearch` component in a Langflow flow:
<ZoomableImage
alt="NotionSearch Flow Example"
sources={{
light: "img/notion/NotionSearch_flow_example.png",
dark: "img/notion/NotionSearch_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
/>
In this example, the `NotionSearch` component is used to search for pages and databases in Notion based on the provided query and filter criteria. The retrieved data can then be processed further in the subsequent components of the flow.
</Admonition>
## Best Practices
When using the `NotionSearch` component, consider these best practices:
- Ensure you have a valid Notion integration token with the necessary permissions to search for pages and databases.
- Provide a meaningful search query to narrow down the results to the desired pages or databases.
- Choose the appropriate filter type (`page` or `database`) based on your search requirements.
- Consider the sorting direction (`ascending` or `descending`) to organize the search results effectively.
The `NotionSearch` component provides a powerful way to integrate Notion search capabilities into your Langflow workflows. By leveraging this component, you can easily search for pages and databases in Notion based on custom queries and filters, enabling you to build more dynamic and data-driven flows.
We encourage you to explore the capabilities of the `NotionSearch` component further and experiment with different search scenarios to unlock the full potential of integrating Notion search into your Langflow workflows.
## Troubleshooting
If you encounter any issues while using the `NotionSearch` component, consider the following:
- Double-check that the `notion_secret` is correct and valid.
- Verify that the Notion integration has the necessary permissions to access the desired pages and databases.
- Check the Notion API documentation for any updates or changes that may affect the component's functionality.

78
docs/docs/integrations/notion/setup.md Normal file
View file

@ -0,0 +1,78 @@
import Admonition from "@theme/Admonition";
# Setting up a Notion App
To use Notion components in Langflow, you first need to create a Notion integration and configure it with the necessary capabilities. This guide will walk you through the process of setting up a Notion integration and granting it access to your Notion databases.
## Prerequisites
- A Notion account with access to the workspace where you want to use the integration.
- Admin permissions in the Notion workspace to create and manage integrations.
## Step 1: Create a Notion Integration
1. Go to the [Notion Integrations](https://www.notion.com/my-integrations) page.
2. Click on the "New integration" button.
3. Give your integration a name and select the workspace where you want to use it.
4. Click "Submit" to create the integration.
<Admonition type="info" title="Integration Capabilities">
When creating the integration, make sure to enable the necessary capabilities based on your requirements. Refer to the [Notion Integration Capabilities](https://developers.notion.com/reference/capabilities) documentation for more information on each capability.
</Admonition>
## Step 2: Configure Integration Capabilities
After creating the integration, you need to configure its capabilities to define what actions it can perform and what data it can access.
1. In the integration settings page, go to the **Capabilities** tab.
2. Enable the required capabilities for your integration. For example:
- If your integration needs to read data from Notion, enable the "Read content" capability.
- If your integration needs to create new content in Notion, enable the "Insert content" capability.
- If your integration needs to update existing content in Notion, enable the "Update content" capability.
3. Configure the user information access level based on your integration's requirements.
4. Save the changes.
## Step 3: Obtain Integration Token
To authenticate your integration with Notion, you need to obtain an integration token.
1. In the integration settings page, go to the "Secrets" tab.
2. Copy the "Internal Integration Token" value. This token will be used to authenticate your integration with Notion.
<Admonition type="warning" title="Keep Your Token Secure">
Your integration token is a sensitive piece of information. Make sure to keep it secure and never share it publicly. Store it safely in your Langflow configuration or environment variables.
</Admonition>
## Step 4: Grant Integration Access to Notion Databases
For your integration to interact with Notion databases, you need to grant it access to the specific databases it will be working with.
1. Open the Notion database that you want your integration to access.
2. Click on the "Share" button in the top-right corner of the page.
3. In the "Invite" section, select your integration from the list.
4. Click "Invite" to grant the integration access to the database.
<Admonition type="info" title="Nested Databases">
If your database contains references to other databases, you need to grant the integration access to those referenced databases as well. Repeat step 4 for each referenced database to ensure your integration has the necessary access.
</Admonition>
## Using Notion Components in Langflow
Once you have set up your Notion integration and granted it access to the required databases, you can start using the Notion components in Langflow.
Langflow provides the following Notion components:
- **List Pages**: Retrieves a list of pages from a Notion database.
- **List Database Properties**: Retrieves the properties of a Notion database.
- **Add Page Content**: Adds content to a Notion page.
- **List Users**: Retrieves a list of users with access to a Notion workspace.
- **Update Property**: Updates the value of a property in a Notion page.
Refer to the individual component documentation for more details on how to use each component in your Langflow flows.
## Additional Resources
- [Notion API Documentation](https://developers.notion.com/docs/getting-started)
- [Notion Integration Capabilities](https://developers.notion.com/reference/capabilities)
If you encounter any issues or have questions, please reach out to our support team or consult the Langflow community forums.

0
docs/docs/migration/connecting-output-components.mdx
View file

0
docs/docs/migration/custom-component.mdx
View file

0
docs/docs/migration/experimental-components.mdx
View file

0
docs/docs/migration/flow-of-data.mdx
View file

116
docs/docs/migration/global-variables.mdx
View file

@ -1,116 +0,0 @@
import ZoomableImage from "/src/theme/ZoomableImage.js";
import Admonition from "@theme/Admonition";
# Global Variables
## TLDR;
- Global Variables are reusable variables that can be accessed from any Text field in your project.
- To create a Global Variable, click on the 🌐 button in a Text field and then **+ Add New Variable**.
- Define the **Name**, **Type**, and **Value** of the variable.
- Click on **Save Variable** to create the variable.
- All Credential Global Variables are encrypted and cannot be accessed by anyone but 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.
Global Variables are a really useful feature of Langflow.
They allow you to define reusable variables that can be accessed from any Text field in your project.
The first thing you need to do is find a **Text field** in a Component, so let's talk about what a Text field is.
## Text Fields
Text fields are the fields in a Component where you can write text but that does not allow you to open a Text Area.
The easiest way to find fields that are Text fields, though, is to look for fields that have a 🌐 button.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/ollama-gv.png",
dark: "img/ollama-gv.png",
}}
style={{ width: "50%" }}
/>
## Creating a Global Variable
To create a Global Variable, you need to click on the 🌐 button in a Text field and that will open a dropdown showing your currently available variables and at the end of it **+ Add New Variable**.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/add-new-variable.png",
dark: "img/add-new-variable.png",
}}
style={{ width: "60%" }}
/>
Click on **+ Add New Variable** and a window will open where you can define your new Global Variable.
In it, you can define the **Name** of the variable, the optional **Type** of the variable, and the **Value** of the variable.
The **Name** is the name that you will use to refer to the variable in your Text fields.
The **Type** is optional for now but will be used in the future to allow for more advanced features.
The **Value** is the value that the variable will have.
{/* say that all variables are encrypted */}
<Admonition type="warning">
All Credential Global Variables are encrypted and cannot be accessed by anyone
but you.
</Admonition>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/create-variable-window.png",
dark: "img/create-variable-window.png",
}}
style={{ width: "60%" }}
/>
After you have defined your variable, click on **Save Variable** and your variable will be created.
After that, once you click on the 🌐 button in a Text field, you will see your new variable in the dropdown.
## Environment Variables
If you set _`LANGFLOW_STORE_ENVIRONMENT_VARIABLES`_ to _`true`_ (which is the default value) in your `.env` file, all variables in _`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`_ will be added to your user's Global Variables.
All of these variables can be used in your project as any other Global Variable.
<Admonition type="tip">
You can set _`LANGFLOW_STORE_ENVIRONMENT_VARIABLES`_ to _`false`_ in your
`.env` file to prevent this behavior.
</Admonition>
You can also set _`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`_ to a list of variables that you want to get from the environment.
The default list at the moment is:
- ANTHROPIC_API_KEY
- ASTRA_DB_API_ENDPOINT
- ASTRA_DB_APPLICATION_TOKEN
- AZURE_OPENAI_API_KEY
- AZURE_OPENAI_API_DEPLOYMENT_NAME
- AZURE_OPENAI_API_EMBEDDINGS_DEPLOYMENT_NAME
- AZURE_OPENAI_API_INSTANCE_NAME
- AZURE_OPENAI_API_VERSION
- COHERE_API_KEY
- GOOGLE_API_KEY
- GROQ_API_KEY
- HUGGINGFACEHUB_API_TOKEN
- OPENAI_API_KEY
- PINECONE_API_KEY
- SEARCHAPI_API_KEY
- SERPAPI_API_KEY
- VECTARA_CUSTOMER_ID
- VECTARA_CORPUS_ID
- VECTARA_API_KEY
<Admonition type="tip">
Set _`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`_ as a comma-separated list
of variables (e.g. _`"VARIABLE1, VARIABLE2"`_) or as a JSON-encoded string
(e.g. _`'["VARIABLE1", "VARIABLE2"]'`_).
</Admonition>

36
docs/docs/migration/inputs-and-outputs.mdx
View file

@ -1,36 +0,0 @@
# 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. They also
dynamically change the Playground and can be renamed to make it easier to build and maintain your flows.
## Introduction
Langflow 1.0 introduces new categories of components called Inputs and Outputs. They are used to make it easier to understand and interact with your flows.
Let's start with what they have in common:
- Components in these categories connect to components that have Text or Record inputs or outputs. Some can connect to both but you have to pick what type of data you want to output or input.
- They can be renamed to help you identify them more easily in the Playground and while using the API.
- They dynamically change the Playground to make it easier to understand and interact with your flows.
Native Langflow Components were created to be powerful tools that work around Langflow's features. They are designed to be easy to use and understand, and to help you build your flows faster.
Let's dive into Inputs and Outputs.
## Inputs
Inputs are components that are used to define where data comes into your flow. They can be used to receive data from the user, from a database, or from any other source that can be converted to Text or Record.
The difference between Chat Input and other Input components is the format of the output, the number of configurable fields, and the way they are displayed in the Playground.
Chat Input components can output Text or Record. When you want to pass the sender name, or sender to the next component, you can use the Record output, and when you want to pass the message only you can use the Text output. This is useful when saving the message to a database or a memory system like Zep.
You can find out more about it and the other Inputs [here](../components/inputs).
## Outputs
Outputs are components that are used to define where data comes out of your flow. They can be used to send data to the user, to the Playground, or to define how the data will be displayed in the Playground.
The Chat Output works similarly to the Chat Input but does not have a field that allows for written input. It is used as an Output definition and can be used to send data to the user.
You can find out more about it and the other Outputs [here](../components/outputs).

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

@ -41,7 +41,7 @@ We have a special channel in our Discord server dedicated to Langflow 1.0 migrat
Langflow 1.0 introduces adds the concept of Inputs and Outputs to flows, allowing a clear definition of the data flow between components. Discover how to use Inputs and Outputs to pass data between components and create more dynamic flows.
[Learn more about Inputs and Outputs of Components](../migration/inputs-and-outputs)
[Learn more about Inputs and Outputs of Components](../components/inputs-and-outputs)
## To Compose or Not to Compose: the choice is yours
@ -71,7 +71,7 @@ Langflow 1.0 introduces many new native categories, including Inputs, Outputs, H
With the introduction of Text and Record types connections between Components are more intuitive and easier to understand. This is the first step in a series of improvements to the way you interact with Langflow. Learn how to use Text, and Record and how they help you build better flows.
[Learn more about Text and Record](../migration/text-and-record)
[Learn more about Text and Record](../components/text-and-record)
## CustomComponent for All Components
@ -119,7 +119,7 @@ Things got a whole lot easier. You can now pass tweaks and inputs in the API by
Global Variables can be used in any Text Field across your projects. Learn how to define and utilize Global Variables to streamline your workflow.
[Learn more about Global Variables](../migration/global-variables)
[Learn more about Global Variables](../administration/global-env.mdx)
## Experimental Components

0
docs/docs/migration/multiple-flows.mdx
View file

0
docs/docs/migration/new-categories-and-components.mdx
View file

0
docs/docs/migration/passing-tweaks-and-inputs.mdx
View file

0
docs/docs/migration/renaming-and-editing-components.mdx
View file

0
docs/docs/migration/sidebar-and-interaction-panel.mdx
View file

0
docs/docs/migration/state-management.mdx
View file

0
docs/docs/migration/supported-frameworks.mdx
View file

45
docs/docs/migration/text-and-record.mdx
View file

@ -1,45 +0,0 @@
# Text and Record
In Langflow 1.0 we added two main input and output types: Text and Record. Text is a simple string input and output type, while Record is a structure very similar to a dictionary in Python. It is a key-value pair data structure.
We've created a few components to help you work with these types. Let's see how a few of them work.
### Records To Text
This is a Component that takes in Records and outputs a Text. It does this using a template string and concatenating the values of the Record, one per line.
If we have the following Records:
```json
{
"sender_name": "Alice",
"message": "Hello!"
}
{
"sender_name": "John",
"message": "Hi!"
}
```
And the template string is: _`{sender_name}: {message}`_
```
Alice: Hello!
John: Hi!
```
### Create Record
This Component allows you to create a Record from a number of inputs. You can add as many key-value pairs as you want (as long as it is less than 15 😅). Once you've picked that number you'll need to write the name of the Key and can pass Text values from other components to it.
### Documents To Records
This Component takes in a [LangChain](https://langchain.com) Document and outputs a Record. It does this by extracting the _`page_content`_ and the _`metadata`_ from the Document and adding them to the Record as _`text`_ and _`data`_ respectively.
## Why is this useful?
The idea was to create a unified way to work with complex data in Langflow, and to make it easier to work with data that is not just a simple string. This way you can create more complex workflows and use the data in more ways.
## What's next?
We are planning to integrate an array of modalities to Langflow, such as images, audio, and video. This will allow you to create even more complex workflows and use cases. Stay tuned for more updates! 🚀

38
docs/docs/starter-projects/basic-prompting.mdx
View file

@ -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,41 +14,17 @@ This article demonstrates how to use Langflow's prompt tools to issue basic prom
## Prerequisites
1. Install Langflow.
- [Langflow installed and running](../getting-started/install-langflow.mdx)
```bash
python -m pip install langflow --pre
```
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)
<Admonition type="info">
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.
</Admonition>
3. Create an [OpenAI API key](https://platform.openai.com).
## Create the basic prompting project
1. From the Langflow dashboard, click **New Project**.

38
docs/docs/starter-projects/blog-writer.mdx
View file

@ -4,47 +4,23 @@ 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.
- [Langflow installed and running](../getting-started/install-langflow.mdx)
```bash
python -m pip install langflow --pre
```
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)
<Admonition type="info">
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.
</Admonition>
3. Create an [OpenAI API key](https://platform.openai.com).
## Create the Blog Writer project
1. From the Langflow dashboard, click **New Project**.

36
docs/docs/starter-projects/document-qa.mdx
View file

@ -10,41 +10,17 @@ Build a question-and-answer chatbot with a document loaded from local memory.
## Prerequisites
1. Install Langflow.
- [Langflow installed and running](../getting-started/install-langflow.mdx)
```bash
python -m pip install langflow --pre
```
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)
<Admonition type="info">
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.
</Admonition>
3. Create an [OpenAI API key](https://platform.openai.com).
## Create the Document QA project
1. From the Langflow dashboard, click **New Project**.

38
docs/docs/starter-projects/memory-chatbot.mdx
View file

@ -4,47 +4,23 @@ 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.
- [Langflow installed and running](../getting-started/install-langflow.mdx)
```bash
python -m pip install langflow --pre
```
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)
<Admonition type="info">
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.
</Admonition>
3. Create an [OpenAI API key](https://platform.openai.com).
## Create the memory chatbot project
1. From the Langflow dashboard, click **New Project**.

12
docs/docs/starter-projects/vector-store-rag.mdx
View file

@ -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,13 +17,13 @@ We've chosen [Astra DB](https://astra.datastax.com/signup?utm_source=langflow-pr
## Prerequisites
<Admonition type="info">
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.
</Admonition>
- [Langflow installed](../getting-started/install-langflow.mdx)
- [Langflow installed and running](../getting-started/install-langflow.mdx)
- [OpenAI API key](https://platform.openai.com)

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
# Building Chatbots with System Message
## Overview

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
# Integrating Documents with Prompt Variables
## Overview

2
docs/docs/whats-new/a-new-chapter-langflow.mdx
View file

@ -41,7 +41,7 @@ By having a clear definition of Inputs and Outputs, we could build the experienc
When building a project testing and debugging is crucial. The Playground is a tool that changes dynamically based on the Inputs and Outputs you defined in your project.
For example, let's say you are building a simple RAG application. Generally, you have an Input, some references that come from a Vector Store Search, a Prompt and the answer.
Now, you could plug the output of your Prompt into a [Text Output](../components/outputs#Text-Output), rename that to "Prompt Result" and see the output of your Prompt in the Playground.
Now, you could plug the output of your Prompt into a [Text Output](../components/inputs-and-outputs), rename that to "Prompt Result" and see the output of your Prompt in the Playground.
{/* Add image here of the described above */}

48
docs/sidebars.js
View file

@ -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",
],
@ -51,8 +49,8 @@ module.exports = {
label: "Core Components",
collapsed: false,
items: [
"components/inputs",
"components/outputs",
"components/inputs-and-outputs",
"components/text-and-record",
"components/data",
"components/models",
"components/helpers",
@ -82,26 +80,23 @@ module.exports = {
label: "Example Components",
collapsed: true,
items: [
"examples/flow-runner",
"examples/conversation-chain",
"examples/buffer-memory",
"examples/csv-loader",
"examples/searchapi-tool",
"examples/serp-api-tool",
"examples/python-function",
"examples/chat-memory",
"examples/combine-text",
"examples/create-record",
"examples/pass",
"examples/store-message",
"examples/sub-flow",
"examples/text-operator",
],
},
{
type: "category",
label: "Migration Guides",
label: "Migration",
collapsed: false,
items: [
"migration/possible-installation-issues",
"migration/migrating-to-one-point-zero",
"migration/inputs-and-outputs",
"migration/text-and-record",
"migration/compatibility",
"migration/global-variables",
],
},
{
@ -131,5 +126,28 @@ module.exports = {
"contributing/contribute-component",
],
},
{
type: "category",
label: "Integrations",
collapsed: false,
items: [
{
type: "category",
label: "Notion",
items: [
"integrations/notion/intro",
"integrations/notion/setup",
"integrations/notion/search",
"integrations/notion/list-database-properties",
"integrations/notion/list-pages",
"integrations/notion/list-users",
"integrations/notion/page-create",
"integrations/notion/add-content-to-page",
"integrations/notion/page-update",
"integrations/notion/page-content-viewer",
],
},
],
},
],
};

6504
docs/static/data/AstraDB-RAG-Flows.json vendored
View file

File diff suppressed because one or more lines are too long

BIN
docs/static/img/langflow_basic_howto.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 54 MiB

BIN
docs/static/img/notion/AddContentToPage_flow_example.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
docs/static/img/notion/AddContentToPage_flow_example_dark.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
docs/static/img/notion/NotionDatabaseProperties_flow_example.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
docs/static/img/notion/NotionDatabaseProperties_flow_example_dark.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
docs/static/img/notion/NotionListPages_flow_example.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docs/static/img/notion/NotionListPages_flow_example_dark.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
docs/static/img/notion/NotionPageContent_flow_example.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
docs/static/img/notion/NotionPageContent_flow_example_dark.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
docs/static/img/notion/NotionPageCreator_flow_example.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
docs/static/img/notion/NotionPageCreator_flow_example_dark.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

Some files were not shown because too many files have changed in this diff Show more