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

Merge branch 'dev' into dependabot/npm_and_yarn/scripts/aws/braces-3.0.3

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-06-27 11:32:45 -07:00 • committed by GitHub
commit 5ccb67ed87
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
343 changed files with 13311 additions and 11979 deletions
Download patch file Download diff file Expand all files Collapse all files

14
.github/workflows/auto-update.yml vendored Normal file
View file

@ -0,0 +1,14 @@
name: Auto-update
on:
push:
branches:
- dev
- main
jobs:
Auto:
name: Auto-update
runs-on: ubuntu-latest
steps:
- uses: tibdex/auto-update@v2

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

@ -8,6 +8,11 @@ on:
release_type:
required: true
type: string
pre_release:
required: false
type: boolean
default: false
workflow_dispatch:
inputs:
version:
@ -19,6 +24,10 @@ on:
options:
- base
- main
pre_release:
required: false
type: boolean
default: true
env:
POETRY_VERSION: "1.8.2"
TEST_TAG: "langflowai/langflow:test"
@ -35,10 +44,14 @@ jobs:
id: set-vars
run: |
if [[ "${{ inputs.release_type }}" == "base" ]]; then
echo "tags=langflowai/langflow:base-${{ inputs.version }}" >> $GITHUB_OUTPUT
echo "tags=langflowai/langflow:base-${{ inputs.version }},langflowai/langflow:base-latest" >> $GITHUB_OUTPUT
echo "file=./docker/build_and_push_base.Dockerfile" >> $GITHUB_OUTPUT
else
echo "tags=langflowai/langflow:${{ inputs.version }},langflowai/langflow:1.0-alpha" >> $GITHUB_OUTPUT
if [[ "${{ inputs.pre_release }}" == "true" ]]; then
echo "tags=langflowai/langflow:${{ inputs.version }}" >> $GITHUB_OUTPUT
else
echo "tags=langflowai/langflow:${{ inputs.version }},langflowai/langflow:latest" >> $GITHUB_OUTPUT
fi
echo "file=./docker/build_and_push.Dockerfile" >> $GITHUB_OUTPUT
fi
build:
@ -54,7 +67,7 @@ jobs:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Build and Push Docker Image
uses: docker/build-push-action@v5
uses: docker/build-push-action@v6
with:
context: .
push: true
@ -73,10 +86,10 @@ jobs:
include:
- component: backend
dockerfile: ./docker/build_and_push_backend.Dockerfile
tags: langflowai/langflow-backend:${{ inputs.version }},langflowai/langflow-backend:1.0-alpha
tags: ${{ inputs.pre_release == 'true' && format('langflowai/langflow-backend:{0}', inputs.version) || format('langflowai/langflow-backend:{0},langflowai/langflow-backend:latest', inputs.version) }}
- component: frontend
dockerfile: ./docker/frontend/build_and_push_frontend.Dockerfile
tags: langflowai/langflow-frontend:${{ inputs.version }},langflowai/langflow-frontend:1.0-alpha
tags: ${{ inputs.pre_release == 'true' && format('langflowai/langflow-frontend:{0}', inputs.version) || format('langflowai/langflow-frontend:{0},langflowai/langflow-frontend:latest', inputs.version) }}
steps:
- uses: actions/checkout@v4
- name: Set up Docker Buildx
@ -89,7 +102,7 @@ jobs:
- name: Wait for Docker Hub to propagate (for backend)
run: sleep 120
- name: Build and push ${{ matrix.component }}
uses: docker/build-push-action@v5
uses: docker/build-push-action@v6
with:
context: .
push: true

47
.github/workflows/docs_test.yml vendored Normal file
View file

@ -0,0 +1,47 @@
name: Test Docs Build
on:
pull_request:
paths:
- "docs/**"
merge_group:
types: [checks_requested]
env:
NODE_VERSION: "21"
jobs:
test-docs-build:
name: Test Docs Build
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
id: setup-node
with:
node-version: ${{ env.NODE_VERSION }}
- name: Cache Node.js dependencies
uses: actions/cache@v4
id: npm-cache
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('docs/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: Install Node.js dependencies
run: |
cd docs
npm install
if: ${{ steps.setup-node.outputs.cache-hit != 'true' }}
- name: Build Docs
run: |
cd docs
npm run build

50
.github/workflows/js_autofix.yml vendored Normal file
View file

@ -0,0 +1,50 @@
name: autofix.ci
on:
pull_request:
types: [opened, synchronize, reopened, auto_merge_enabled, auto_merge_disabled]
paths:
- "src/frontend/**"
push:
branches: [ "main" ]
paths:
- "src/frontend/**"
permissions:
contents: read
env:
NODE_VERSION: "21"
jobs:
autofix:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
id: setup-node
with:
node-version: ${{ env.NODE_VERSION }}
- name: Cache Node.js dependencies
uses: actions/cache@v4
id: npm-cache
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('src/frontend/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: Install Node.js dependencies
run: |
cd src/frontend
npm ci
if: ${{ steps.setup-node.outputs.cache-hit != 'true' }}
- name: Run Prettier
run: |
cd src/frontend
npm run format
- uses: autofix-ci/action@dd55f44df8f7cdb7a6bf74c78677eb8acd40cd0a

10
.github/workflows/lint-js.yml vendored
View file

@ -4,6 +4,8 @@ on:
pull_request:
paths:
- "src/frontend/**"
merge_group:
types: [checks_requested]
env:
NODE_VERSION: "21"
@ -43,10 +45,6 @@ jobs:
- name: Run Prettier
run: |
cd src/frontend
npm run format
- name: Commit changes
uses: stefanzweifel/git-auto-commit-action@v5
with:
commit_message: Apply Prettier formatting
branch: ${{ github.head_ref }}
npm run check-format

12
.github/workflows/lint-py.yml vendored
View file

@ -2,17 +2,15 @@ name: Lint Python
on:
pull_request:
paths:
- "poetry.lock"
- "pyproject.toml"
- "src/backend/**"
- "tests/**"
types: [opened, synchronize, reopened]
merge_group:
types: [checks_requested]
env:
POETRY_VERSION: "1.8.2"
jobs:
lint:
name: Run Mypy
runs-on: ubuntu-latest
strategy:
matrix:
@ -32,6 +30,8 @@ jobs:
run: |
poetry env use ${{ matrix.python-version }}
poetry install
- name: Run Mypy
run: |
make lint
env:
GITHUB_TOKEN: ${{ secrets.github_token }}

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

@ -69,7 +69,7 @@ jobs:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Build and push
uses: docker/build-push-action@v5
uses: docker/build-push-action@v6
with:
context: .
push: true

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

@ -75,7 +75,7 @@ jobs:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Build and push
uses: docker/build-push-action@v5
uses: docker/build-push-action@v6
with:
context: .
push: true
@ -86,7 +86,7 @@ jobs:
langflowai/langflow:${{ needs.release.outputs.version }}
langflowai/langflow:1.0-alpha
- name: Build and push (frontend)
uses: docker/build-push-action@v5
uses: docker/build-push-action@v6
with:
context: .
push: true
@ -99,7 +99,7 @@ jobs:
- name: Wait for Docker Hub to propagate
run: sleep 120
- name: Build and push (backend)
uses: docker/build-push-action@v5
uses: docker/build-push-action@v6
with:
context: .
push: true

29
.github/workflows/py_autofix.yml vendored Normal file
View file

@ -0,0 +1,29 @@
name: autofix.ci
on:
pull_request:
types: [opened, synchronize, reopened, auto_merge_enabled, auto_merge_disabled]
paths:
- "poetry.lock"
- "pyproject.toml"
- "src/backend/**"
- "tests/**"
env:
POETRY_VERSION: "1.8.2"
jobs:
lint:
name: Run Mypy
runs-on: ubuntu-latest
strategy:
matrix:
python-version:
- "3.12"
- "3.11"
- "3.10"
steps:
- uses: actions/checkout@v4
- uses: install-pinned/ruff@6b463d795ce39011cc004438ae507ae56235e12a
- run: ruff --fix-only .
- run: ruff format .
- uses: autofix-ci/action@dd55f44df8f7cdb7a6bf74c78677eb8acd40cd0a

35
.github/workflows/python_test.yml vendored
View file

@ -1,24 +1,17 @@
name: test
name: Python tests
on:
push:
branches: [main]
paths:
- "poetry.lock"
- "pyproject.toml"
- "src/backend/**"
pull_request:
branches: [dev]
paths:
- "poetry.lock"
- "pyproject.toml"
- "src/backend/**"
types: [opened, synchronize, reopened]
branches: [dev, main]
merge_group:
types: [checks_requested]
env:
POETRY_VERSION: "1.8.2"
jobs:
build:
name: Run Unit Tests
runs-on: ubuntu-latest
strategy:
matrix:
@ -43,3 +36,19 @@ jobs:
- name: Run unit tests
run: |
make unit_tests args="-n auto"
- name: Test CLI
run: |
poetry run python -m langflow run --host 127.0.0.1 --port 7860 --backend-only &
SERVER_PID=$!
# Wait for the server to start
timeout 120 bash -c 'until curl -f http://127.0.0.1:7860/api/v1/auto_login; do sleep 5; done' || (echo "Server did not start in time" && kill $SERVER_PID && exit 1)
# Terminate the server
kill $SERVER_PID || (echo "Failed to terminate the server" && exit 1)
sleep 10 # give the server some time to terminate
# Check if the server is still running
if kill -0 $SERVER_PID 2>/dev/null; then
echo "Failed to terminate the server"
exit 1
else
echo "Server terminated successfully"
fi

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

@ -1,21 +1,31 @@
name: release
name: Langflow Release
run-name: Langflow Release by @${{ github.actor }}
on:
pull_request:
types:
- closed
branches:
- main
paths:
- "pyproject.toml"
workflow_dispatch:
inputs:
release_package:
description: "Release package"
required: true
type: boolean
default: false
pre_release:
description: "Pre-release"
required: false
type: boolean
default: true
env:
POETRY_VERSION: "1.8.2"
jobs:
if_release:
if: ${{ (github.event.pull_request.merged == true) && contains(github.event.pull_request.labels.*.name, 'Release') }}
release-base:
name: Release Langflow Base
if: inputs.release_package == true
runs-on: ubuntu-latest
outputs:
version: ${{ steps.check-version.outputs.version }}
steps:
- uses: actions/checkout@v4
- name: Install poetry
@ -25,64 +35,138 @@ jobs:
with:
python-version: "3.10"
cache: "poetry"
- name: Build project for distribution
run: make build
- name: Set up Nodejs 20
uses: actions/setup-node@v4
with:
node-version: "20"
- name: Check Version
id: check-version
run: |
echo version=$(poetry version --short) >> $GITHUB_OUTPUT
version=$(cd src/backend/base && poetry version --short)
last_released_version=$(curl -s "https://pypi.org/pypi/langflow-base/json" | jq -r '.releases | keys | .[]' | sort -V | tail -n 1)
if [ "$version" = "$last_released_version" ]; then
echo "Version $version is already released. Skipping release."
exit 1
else
echo version=$version >> $GITHUB_OUTPUT
fi
- name: Build project for distribution
run: make build base=true
- name: Test CLI
run: |
python -m pip install src/backend/base/dist/*.whl
python -m langflow run --host 127.0.0.1 --port 7860 &
SERVER_PID=$!
# Wait for the server to start
timeout 120 bash -c 'until curl -f http://127.0.0.1:7860/api/v1/auto_login; do sleep 2; done' || (echo "Server did not start in time" && kill $SERVER_PID && exit 1)
# Terminate the server
kill $SERVER_PID || (echo "Failed to terminate the server" && exit 1)
sleep 10 # give the server some time to terminate
# Check if the server is still running
if kill -0 $SERVER_PID 2>/dev/null; then
echo "Failed to terminate the server"
exit 1
else
echo "Server terminated successfully"
fi
- name: Publish to PyPI
env:
POETRY_PYPI_TOKEN_PYPI: ${{ secrets.PYPI_API_TOKEN }}
run: make publish base=true
- name: Upload Artifact
uses: actions/upload-artifact@v4
with:
name: dist-base
path: src/backend/base/dist
release-main:
name: Release Langflow Main
if: inputs.release_package == true
needs: release-base
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.10
uses: actions/setup-python@v5
with:
python-version: "3.10"
cache: "poetry"
- name: Set up Nodejs 20
uses: actions/setup-node@v4
with:
node-version: "20"
- name: Check Version
id: check-version
run: |
poetry publish
- name: Set up QEMU
uses: docker/setup-qemu-action@v3
id: qemu
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Login to Docker Hub
uses: docker/login-action@v3
version=$(poetry version --short)
last_released_version=$(curl -s "https://pypi.org/pypi/langflow/json" | jq -r '.releases | keys | .[]' | sort -V | tail -n 1)
if [ "$version" = "$last_released_version" ]; then
echo "Version $version is already released. Skipping release."
exit 1
else
echo version=$version >> $GITHUB_OUTPUT
fi
- name: Wait for PyPI Propagation
run: sleep 300 # wait for 5 minutes to ensure PyPI propagation
- name: Build project for distribution
run: make build main=true
- name: Test CLI
run: |
python -m pip install dist/*.whl
python -m langflow run --host 127.0.0.1 --port 7860 &
SERVER_PID=$!
# Wait for the server to start
timeout 120 bash -c 'until curl -f http://127.0.0.1:7860/api/v1/auto_login; do sleep 2; done' || (echo "Server did not start in time" && kill $SERVER_PID && exit 1)
# Terminate the server
kill $SERVER_PID || (echo "Failed to terminate the server" && exit 1)
sleep 10 # give the server some time to terminate
# Check if the server is still running
if kill -0 $SERVER_PID 2>/dev/null; then
echo "Failed to terminate the server"
exit 1
else
echo "Server terminated successfully"
fi
- name: Publish to PyPI
env:
POETRY_PYPI_TOKEN_PYPI: ${{ secrets.PYPI_API_TOKEN }}
run: make publish main=true
- name: Upload Artifact
uses: actions/upload-artifact@v4
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Build and push
uses: docker/build-push-action@v5
name: dist-main
path: dist
call_docker_build:
name: Call Docker Build Workflow
needs: [release-base, release-main]
uses: langflow-ai/langflow/.github/workflows/docker-build.yml@main
strategy:
matrix:
release_type:
- base
- main
with:
# version should be needs.release-base.outputs.version if release_type is base
# version should be needs.release-main.outputs.version if release_type is main
version: ${{ matrix.release_type == 'base' && needs.release-base.outputs.version || matrix.release_type == 'main' && needs.release-main.outputs.version }}
release_type: ${{ matrix.release_type }}
pre_release: ${{ inputs.pre_release }}
secrets: inherit
create_release:
name: Create Release
runs-on: ubuntu-latest
needs: release-main
steps:
- uses: actions/download-artifact@v4
with:
context: .
push: true
file: ./docker/build_and_push.Dockerfile
# provenance: false will result in a single manifest for all platforms which makes the image pullable from arm64 machines via the emulation (e.g. Apple Silicon machines)
provenance: false
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
# provenance: false will result in a single manifest for all platforms which makes the image pullable from arm64 machines via the emulation (e.g. Apple Silicon machines)
provenance: false
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
# provenance: false will result in a single manifest for all platforms which makes the image pullable from arm64 machines via the emulation (e.g. Apple Silicon machines)
provenance: false
tags: |
langflowai/langflow-frontend:${{ steps.check-version.outputs.version }}
langflowai/langflow-frontend:latest
name: dist-main
path: dist
- name: Create Release
uses: ncipollo/release-action@v1
with:
@ -90,5 +174,6 @@ jobs:
token: ${{ secrets.GITHUB_TOKEN }}
draft: false
generateReleaseNotes: true
tag: v${{ steps.check-version.outputs.version }}
commit: main
prerelease: ${{ inputs.pre_release }}
tag: v${{ needs.release-main.outputs.version }}
commit: ${{ github.ref }}

19
.github/workflows/style-check-py.yml vendored
View file

@ -1,12 +1,9 @@
name: Ruff Style Check
on:
pull_request:
paths:
- "poetry.lock"
- "pyproject.toml"
- "src/backend/**"
- "tests/**"
pull_request: {}
merge_group:
branches: [dev]
env:
POETRY_VERSION: "1.8.2"
@ -33,14 +30,8 @@ jobs:
poetry install
- name: Register problem matcher
run: echo "::add-matcher::.github/workflows/matchers/ruff.json"
- name: Run Ruff
- name: Run Ruff Check
run: poetry run ruff check --output-format=github .
- name: Run Ruff format
run: poetry run ruff format .
- name: Commit changes
uses: stefanzweifel/git-auto-commit-action@v5
with:
commit_message: Apply Ruff formatting
branch: ${{ github.head_ref }}

28
.github/workflows/typescript_test.yml vendored
View file

@ -2,11 +2,10 @@ name: Run Frontend Tests
on:
pull_request:
paths:
- "src/frontend/**"
merge_group:
env:
POETRY_VERSION: "1.8.2"
POETRY_VERSION: "1.8.3"
NODE_VERSION: "21"
PYTHON_VERSION: "3.12"
# Define the directory where Playwright browsers will be installed.
@ -15,12 +14,16 @@ env:
jobs:
setup-and-test:
name: Run Playwright Tests
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
shardIndex: [1, 2, 3, 4]
shardTotal: [4]
shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
shardTotal: [8]
env:
OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
STORE_API_KEY: ${{ secrets.STORE_API_KEY }}
steps:
- name: Checkout code
uses: actions/checkout@v4
@ -45,14 +48,15 @@ jobs:
cd src/frontend
npm ci
if: ${{ steps.setup-node.outputs.cache-hit != 'true' }}
- name: Cache playwright binaries
uses: actions/cache@v4
- name: Get Playwright version
run: echo "PLAYWRIGHT_VERSION=$(jq '.devDependencies["@playwright/test"]' src/frontend/package.json -r)" >> $GITHUB_ENV
- name: Cache Playwright binaries
id: playwright-cache
uses: actions/cache@v4
with:
path: |
~/.cache/ms-playwright
key: ${{ runner.os }}-playwright-${{ hashFiles('src/frontend/package-lock.json') }}
path: ~/.cache/ms-playwright
key: playwright-browsers-${{ runner.os }}-${{ env.PLAYWRIGHT_VERSION }}
- name: Install Frontend dependencies
run: |
cd src/frontend
@ -88,7 +92,7 @@ jobs:
- name: Run Playwright Tests
run: |
cd src/frontend
npx playwright test --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2
npx playwright test --trace on --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2
- name: Upload blob report to GitHub Actions Artifacts
if: always()

10
.vscode/launch.json vendored
View file

@ -34,14 +34,12 @@
"args": [
"run",
"--path",
"${workspaceFolder}/src/backend/base/langflow/frontend"
"${workspaceFolder}/src/backend/base/langflow/frontend",
"--env-file",
"${workspaceFolder}/.env"
],
"jinja": true,
"justMyCode": false,
"env": {
"LANGFLOW_LOG_LEVEL": "debug"
},
"envFile": "${workspaceFolder}/.env"
"justMyCode": false
},
{
"name": "Python: Remote Attach",

53
Makefile
View file

@ -47,20 +47,22 @@ init:
coverage: ## run the tests and generate a coverage report
poetry run pytest --cov \
--cov-config=.coveragerc \
--cov-report xml \
--cov-report term-missing:skip-covered \
--cov-report lcov:coverage/lcov-pytest.info
@poetry run coverage run
@poetry run coverage erase
# allow passing arguments to pytest
unit_tests:
poetry run pytest --ignore=tests/integration --instafail -ra -n auto -m "not api_key_required" $(args)
poetry run pytest \
--ignore=tests/integration \
--instafail -ra -n auto -m "not api_key_required" \
$(args)
integration_tests:
poetry run pytest tests/integration --instafail -ra -n auto $(args)
poetry run pytest tests/integration \
--instafail -ra -n auto \
$(args)
format: ## run code formatters
poetry run ruff check . --fix
@ -129,9 +131,20 @@ start:
@echo 'Running the CLI'
ifeq ($(open_browser),false)
@make install_backend && poetry run langflow run --path $(path) --log-level $(log_level) --host $(host) --port $(port) --env-file $(env) --no-open-browser
@make install_backend && poetry run langflow run \
--path $(path) \
--log-level $(log_level) \
--host $(host) \
--port $(port) \
--env-file $(env) \
--no-open-browser
else
@make install_backend && poetry run langflow run --path $(path) --log-level $(log_level) --host $(host) --port $(port) --env-file $(env)
@make install_backend && poetry run langflow run \
--path $(path) \
--log-level $(log_level) \
--host $(host) \
--port $(port) \
--env-file $(env)
endif
@ -166,13 +179,27 @@ backend: ## run the backend in development mode
@echo 'Setting up the environment'
@make setup_env
make install_backend
@-kill -9 $(lsof -t -i:7860)
@-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 --workers $(workers)
LANGFLOW_AUTO_LOGIN=$(login) poetry run uvicorn \
--factory langflow.main:create_app \
--host 0.0.0.0 \
--port $(port) \
--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 --workers $(workers)
@echo "Running backend respecting the $(env) file";
poetry run uvicorn \
--factory langflow.main:create_app \
--host 0.0.0.0 \
--port $(port) \
--reload \
--env-file $(env) \
--loop asyncio \
--workers $(workers)
endif

2
README.PT.md
View file

@ -73,7 +73,7 @@ Você também pode visualizar o Langflow no [HuggingFace Spaces](https://hugging
# 🎨 Criar Fluxos
Criar fluxos com Langflow é fácil. Basta arrastar componentes da barra lateral para o canvas e conectá-los para começar a construir sua aplicação.
Criar fluxos com Langflow é fácil. Basta arrastar componentes da barra lateral para o workspace e conectá-los para começar a construir sua aplicação.
Explore editando os parâmetros do prompt, agrupando componentes e construindo seus próprios componentes personalizados (Custom Components).

19
README.md
View file

@ -1,3 +1,8 @@
<div align="center" style="padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9; border-radius: 10px; margin-bottom: 20px;">
<h2 style="margin: 0; font-size: 24px; color: #333;">Langflow 1.0 is OUT! 🎉</h2>
<p style="margin: 5px 0 0 0; font-size: 16px; color: #666;">Read all about it <a href="https://medium.com/p/73d3bdce8440" style="text-decoration: underline; color: #1a73e8;">here</a>!</p>
</div>
<!-- markdownlint-disable MD030 -->
# [![Langflow](./docs/static/img/hero.png)](https://www.langflow.org)
@ -37,6 +42,7 @@
# 📝 Content
- [](#)
- [📝 Content](#-content)
- [📦 Get Started](#-get-started)
- [🎨 Create Flows](#-create-flows)
@ -44,6 +50,7 @@
- [Deploy Langflow on Google Cloud Platform](#deploy-langflow-on-google-cloud-platform)
- [Deploy on Railway](#deploy-on-railway)
- [Deploy on Render](#deploy-on-render)
- [Deploy on Kubernetes](#deploy-on-kubernetes)
- [🖥️ Command Line Interface (CLI)](#️-command-line-interface-cli)
- [Usage](#usage)
- [Environment Variables](#environment-variables)
@ -57,10 +64,6 @@ You can install Langflow with pip:
```shell
# 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
python -m pip install langflow -U
```
@ -74,7 +77,7 @@ You can also preview Langflow in [HuggingFace Spaces](https://huggingface.co/spa
# 🎨 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.
Creating flows with Langflow is easy. Simply drag components from the sidebar onto the workspace and connect them to start building your application.
Explore by editing prompt parameters, grouping components into a single high-level component, and building your own Custom Components.
@ -100,11 +103,7 @@ Alternatively, click the **"Open in Cloud Shell"** button below to launch Google
## 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:
Use this template to deploy Langflow 1.0 on Railway:
[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)

6
docker/build_and_push.Dockerfile
View file

@ -93,5 +93,7 @@ ENV PATH="/app/.venv/bin:${PATH}"
USER user
WORKDIR /app
ENTRYPOINT ["python", "-m", "langflow", "run"]
CMD ["--host", "0.0.0.0", "--port", "7860"]
ENV LANGFLOW_HOST=0.0.0.0
ENV LANGFLOW_PORT=7860
ENTRYPOINT ["python", "-m", "langflow", "run"]

2
docker/build_and_push_backend.Dockerfile
View file

@ -5,4 +5,4 @@ ARG LANGFLOW_IMAGE
FROM $LANGFLOW_IMAGE
RUN rm -rf /app/.venv/langflow/frontend
CMD ["--host", "0.0.0.0", "--port", "7860", "--backend-only"]
CMD ["--backend-only"]

3
docker/build_and_push_base.Dockerfile
View file

@ -95,6 +95,7 @@ USER user
# Install the package from the .tar.gz
RUN python -m pip install /app/src/backend/base/dist/*.tar.gz --user
ENV LANGFLOW_HOST=0.0.0.0
ENV LANGFLOW_PORT=7860
ENTRYPOINT ["python", "-m", "langflow", "run"]
CMD ["--host", "0.0.0.0", "--port", "7860"]

4
docker_example/docker-compose.yml
View file

@ -10,9 +10,9 @@ services:
environment:
- LANGFLOW_DATABASE_URL=postgresql://langflow:langflow@postgres:5432/langflow
# This variable defines where the logs, file storage, monitor data and secret keys are stored.
- LANGFLOW_CONFIG_DIR=/var/lib/langflow
- LANGFLOW_CONFIG_DIR=/app/langflow
volumes:
- langflow-data:/var/lib/langflow
- langflow-data:/app/langflow
postgres:
image: postgres:16

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

@ -4,6 +4,10 @@ import Admonition from "@theme/Admonition";
# API Keys
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</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">
@ -172,7 +176,7 @@ print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS, apiKey=api_key))
## Custom API endpoint
As of Langflow v1.0 alpha, under **Project Settings** > **Endpoint Name**, you can pick a custom name for the endpoint used to call your flow from the API.
Under **Project Settings** > **Endpoint Name**, you can pick a custom name for the endpoint used to call your flow from the API.
## Revoke an API Key

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

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Chat Widget
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
<div style={{ marginBottom: "20px" }}>
The <b>Langflow Chat Widget</b> is a powerful web component that enables
communication with a Langflow project. This widget allows for a chat interface

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

@ -1,5 +1,11 @@
import Admonition from "@theme/Admonition";
# Command Line Interface (CLI)
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Langflow's Command Line Interface (CLI) is a powerful tool that allows you to interact with the Langflow server from the command line. The CLI provides a wide range of commands to help you shape Langflow to your needs.
The available commands are below. Navigate to their individual sections of this page to see the parameters.

105
docs/docs/administration/collections-projects.mdx Normal file
View file

@ -0,0 +1,105 @@
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";
# Collections and Projects
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
My Collection is a space in Langflow where users can manage, organize, and access their flows and components.
Flows and components are displayed as individual cards that provide relevant information.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/my-collection.png"),
dark: useBaseUrl("img/my-collection.png"),
}}
style={{ width: "30%", margin: "20px auto" }}
/>
* **Folders**: Users can organize their projects into folders. Default folders include "My Projects" and the ability to create new folders. Hover over a folder to access options to download or delete it.
* **Search Bar** Enables users to quickly search through their flows and components.
* **Select All**: This feature allows users to select all projects displayed on the page for batch actions like moving, deleting, or exporting.
Click on a flow card to open it in Langflow Workspace or use the **Playground Button** for direct access to execute and interact with the flow’s chatbot interface.
## Collections
Components created or imported by the user are also displayed in **My Collection** and can be directly removed from here.
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 workspace, [starter projects](../starter-projects/basic-prompting) are also available.
## Project options menu
To see options for your project, in the upper left corner of the workspace, select the dropdown menu.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/project-options-menu-light.png"),
dark: useBaseUrl("img/project-options-menu-dark.png"),
}}
style={{ width: "30%", margin: "20px auto" }}
/>
* **New** - Start a new project.
* **Duplicate** - Duplicate the current flow as a new project.
* **Settings** - Modify the project's **Name** or **Description**.
* **Import** - Upload a flow `.json` file from your local machine.
* **Export** - Download your current project to your local machine as a `.json` file.
* **Undo** or **Redo** - Undo or redo your last action.
## Project folders
Multiple projects can be stored in **folders**.
Folders allow you to categorize flows and components into manageable groups. This makes it easier to find and access specific projects quickly.
**My Projects** is a default folder where all new projects and components are initially stored unless specified otherwise. Users can create custom folders to better organize their work according to specific needs.
Hovering over a folder in Langflow provides options to either remove or download the entire folder, allowing you to keep an offline copy or migrate projects between environments
Create new folders with the **New folder** button. One folder can store multiple projects (as the default My Projects folder does).
You can download folders of projects as a single JSON file, and upload files and flows to your folder.
Click the **Trash** icon to delete a folder.

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

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Global Variables
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Global Variables are a useful feature of Langflow, allowing you to define reusable variables accessed from any Text field in your project.
**TL;DR**

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

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Sign Up and Sign In
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
The login functionality in Langflow serves to authenticate users and protect sensitive routes in the application. Starting from version 0.5, Langflow introduces an enhanced login mechanism that is governed by a few environment variables. This allows new secure features.
## Environment variables

28
docs/docs/administration/logs.mdx Normal file
View file

@ -0,0 +1,28 @@
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";
# Logs
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
To view logs, go to **Project Options** > **Logs**.
The **Logs** page provides a detailed record of all component executions within a workspace.
It is designed to help you track actions, debug issues, and understand the flow of data through various components.
Each log entry includes an execution with source and target components, and displays the data and parameters passed from one component to another. The status of each execution is indicated and errors encountered are easily detected.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/playground-logs.png",
dark: "img/playground-logs.png",
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>

38
docs/docs/administration/memories.mdx Normal file
View file

@ -0,0 +1,38 @@
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import Admonition from "@theme/Admonition";
# Chat Memory
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Langflow allows every chat message to be stored, and a single flow can have multiple memory sessions. This enables you to create multiple “memories” for agents to store and recall specific information as needed. You can edit and remove previous messages to inspect and validate a model’s response behavior. Control, explore, and manage conversation histories to get your models acting just right.
The **Chat Memory** component retrieves message histories by session ID. Users can change the session ID in the advanced settings, with the default session ID set to match the flow ID. These memories are accessible and manageable directly from the Playground; modifications to them directly affect the behavior of chatbot responses. Users can remove or edit previous messages to manipulate and explore model responses further.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/chat-memory-component.png",
dark: "img/chat-memory-component.png",
}}
style={{ width: "40%", margin: "20px auto" }}
/>
By default, chat conversations store Message objects categorized by session ID. A a single flow can host multiple session IDs, and different flows can also share the same session ID.
Memories can be visualized and managed directly from the Playground. Modifying these memories will influence the behavior of the chatbot responses, as long as an agent uses them. Here you have the ability to remove or edit previous messages, allowing them to manipulate and explore how these changes affect model responses.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/playground-memories.png",
dark: "img/playground-memories.png",
}}
style={{ width: "40%", margin: "20px auto" }}
/>
You can also display all messages stored across every flow in your workspace by going to **Settings** > **Messages**.

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

@ -6,13 +6,20 @@ import Admonition from "@theme/Admonition";
# Playground
In Langflow 1.0 alpha, the **Playground** replaces the **Interaction Panel**.
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
The **Playground** provides an interface for interacting with flows without opening them in the flow editor.
<Admonition type="info">
From the **My Collection** page, click the Playground button in one of your flow cards.
It will directly open up a window with that project's Playground, without even showing the flow (this also works for flows hosted on the Langflow Store!).
</Admonition>
The **Playground** is a dynamic interface designed for real-time interaction with agents, allowing users to access and manage memories and monitor the inputs and outputs. Here, users can directly prototype and experiment with their configured components or AI models, making adjustments and observing different outcomes in real-time.
It even works for flows hosted on the Langflow store!
As long as you have a flow's environment variables set, you can run it by clicking the **Playground** button.
As long as you have a flow properly working, you can interact with it by clicking the Playground button.
1. From your **Collections** page, click the **![Playground icon](/logos/botmessage.svg)Playground** in one of your flows.
The **Playground** window opens.
@ -36,7 +43,7 @@ As long as you have a flow's environment variables set, you can run it by clicki
## Playground I/O
The Playground's appearance changes depending on what components are in your canvas.
The Playground's window arrangement changes depending on what components are being used.
Adding or removing any of the below components modifies your Playground so you can monitor the inputs and outputs.
@ -59,3 +66,4 @@ Langflow allows every chat message to be stored, and a single flow can have mult
You can edit and remove previous messages to inspect and validate a model’s response behavior.
For more information, see [Memories](./memories).

5
docs/docs/administration/prompt-customization.mdx
View file

@ -2,9 +2,14 @@ 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";
# Prompt Customization
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
The prompt template allows users to create prompts and define variables that provide control over instructing the model.
{" "}

7
docs/docs/administration/settings.mdx
View file

@ -1,5 +1,12 @@
import Admonition from "@theme/Admonition";
# Settings
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Change the **Project Settings** or **General Settings** for Langflow.
## Project Settings

4
docs/docs/components/agents.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Agents
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Agents are components that use reasoning to make decisions and take actions, designed to autonomously perform tasks or provide services with some degree of agency. LLM chains can only perform hardcoded sequences of actions, while agents use LLMs to reason through which actions to take, and in which order.
---

4
docs/docs/components/chains.mdx
View file

@ -5,6 +5,10 @@ import Admonition from "@theme/Admonition";
# Chains
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Chains, in the context of language models, refer to a series of calls made to a language model. This approach allows for using the output of one call as the input for another. Different chain types facilitate varying complexity levels, making them useful for creating pipelines and executing specific scenarios.
---

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

@ -1,105 +1,227 @@
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";
# Custom Components
<Admonition type="info" label="Tip">
Read the [Custom Component Tutorial](../tutorials/custom_components) for
detailed information on custom components.
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Custom components let you extend Langflow by creating reusable and configurable components from a Python script.
Build custom components in Langflow for various data processing and transformation tasks.
## Usage
This guide provides a comprehensive overview of how to create custom components using Langflow.
To create a custom component:
## Basic Structure of a Custom Component
1. Define a class that inherits from `langflow.CustomComponent`.
2. Implement a `build` method in your class.
3. Use type annotations in the `build` method to define component fields.
4. Optionally, use the `build_config` method to customize field appearance and behavior.
A custom component in Langflow typically includes the following parts:
**Parameters**
1. **Class Definition**: Inherits from the `Component` class.
2. **Component Metadata**: Defines display name, description, and icon.
3. **Inputs and Outputs**: Specifies the inputs and outputs for the component.
4. **Processing Logic**: Implements the logic for processing data within the component.
- **Code:** The Python code that defines the component.
A custom component in Python looks like this:
## CustomComponent Class
```python
from langflow.custom import Component
from langflow.inputs import MessageTextInput, IntInput, BoolInput, DropdownInput, HandleInput
from langflow.template import Output
from langflow.schema import Data, Message
from typing import List, Optional
This class is the foundation for creating custom components. It allows users to create new, configurable components tailored to their needs.
class ExampleComponent(Component):
display_name = "Example Component"
description = "A template for creating custom components."
icon = "icon-name"
### Methods
inputs = [
MessageTextInput(
name="input_text",
display_name="Input Text",
info="Text input for the component.",
),
IntInput(
name="input_number",
display_name="Input Number",
info="Numeric input for the component.",
),
BoolInput(
name="input_boolean",
display_name="Input Boolean",
info="Boolean input for the component.",
),
DropdownInput(
name="input_choice",
display_name="Input Choice",
options=["Option1", "Option2", "Option3"],
info="Dropdown input for the component.",
),
]
**build:** This method is essential in a `CustomComponent` class. It defines the component's functionality and how it processes input data. The build method is invoked when you click the **Build** button on the canvas.
outputs = [
Output(display_name="Output Data", name="output_data", method="process_data"),
]
The following types are supported in the build method:
def process_data(self) -> Data:
input_text = self.input_text
input_number = self.input_number
input_boolean = self.input_boolean
input_choice = self.input_choice
| Supported Types |
| ----------------------------------------------------------------- |
| _`str`_, _`int`_, _`float`_, _`bool`_, _`list`_, _`dict`_ |
| _`langflow.field_typing.NestedDict`_ |
| _`langflow.field_typing.Prompt`_ |
| _`langchain.chains.base.Chain`_ |
| _`langchain.PromptTemplate`_ |
| _`from langchain.schema.language_model import BaseLanguageModel`_ |
| _`langchain.Tool`_ |
| _`langchain.document_loaders.base.BaseLoader`_ |
| _`langchain.schema.Document`_ |
| _`langchain.text_splitters.TextSplitter`_ |
| _`langchain.vectorstores.base.VectorStore`_ |
| _`langchain.embeddings.base.Embeddings`_ |
| _`langchain.schema.BaseRetriever`_ |
# Implement your processing logic here
result = f"Processed: {input_text}, {input_number}, {input_boolean}, {input_choice}"
The difference between _`dict`_ and _`langflow.field_typing.NestedDict`_ is that one adds a simple key-value pair field, while the other opens a more robust dictionary editor.
self.status = result
return Data(data={"result": result})
<Admonition type="info">
Use the `Prompt` type by adding **kwargs to the build method. If you want to
add the values of the variables to the template you defined, format the
`PromptTemplate` inside the `CustomComponent` class.
</Admonition>
```
<Admonition type="info">
Use base Python types without a handle by default. To add handles, use the
`input_types` key in the `build_config` method.
</Admonition>
## Create a Custom Component Step-by-Step
**build_config:** Defines the configuration fields of the component. This method returns a dictionary where each key represents a field name and each value defines the field's behavior.
1. Create a class that inherits from the `Component` class.
Supported keys for configuring fields:
```python
class ExampleComponent(Component):
# Class content
```
| Key | Description |
| ------------------- | --------------------------------------------------------- |
| `is_list` | Boolean indicating if the field can hold multiple values. |
| `options` | Dropdown menu options. |
| `multiline` | Boolean indicating if a field allows multiline input. |
| `input_types` | Allows connection handles for string fields. |
| `display_name` | Field name displayed in the UI. |
| `advanced` | Hides the field in the default UI view. |
| `password` | Masks input, useful for sensitive data. |
| `required` | Overrides the default behavior to make a field mandatory. |
| `info` | Tooltip for the field. |
| `file_types` | Accepted file types, useful for file fields. |
| `range_spec` | Defines valid ranges for float fields. |
| `title_case` | Boolean that controls field name capitalization. |
| `refresh_button` | Adds a refresh button that updates field values. |
| `real_time_refresh` | Updates the configuration as field values change. |
| `field_type` | Automatically set based on the build method's type hint. |
2. Define metadata such as `display_name`, `description`, and `icon`.
<Admonition type="info" label="Tip">
Use the `update_build_config` method to dynamically update configurations
based on field values.
</Admonition>
```python
display_name = "Example Component"
description = "A template for creating custom components."
icon = "icon-name"
```
## Additional methods and attributes
3. Define the inputs and outputs for the component using the `inputs` and `outputs` lists.
The `CustomComponent` class also provides helpful methods for specific tasks (e.g., to load and use other flows from the Langflow platform):
**Inputs** can be of various types such as `TextInput`, `IntInput`, `BoolInput`, `DropdownInput`, etc.
### Methods
```python
inputs = [
MessageTextInput(
name="input_text",
display_name="Input Text",
info="Text input for the component.",
),
IntInput(
name="input_number",
display_name="Input Number",
info="Numeric input for the component.",
),
BoolInput(
name="input_boolean",
display_name="Input Boolean",
info="Boolean input for the component.",
),
DropdownInput(
name="input_choice",
display_name="Input Choice",
options=["Option1", "Option2", "Option3"],
info="Dropdown input for the component.",
),
]
- `list_flows`: Lists available flows.
- `get_flow`: Retrieves a specific flow by name or ID.
- `load_flow`: Loads a flow by ID.
```
### Attributes
**Outputs** define the output methods for the component.
- `status`: Shows values from the `build` method, useful for debugging.
- `field_order`: Controls the display order of fields.
- `icon`: Sets the canvas display icon.
```python
outputs = [
Output(display_name="Output Data", name="output_data", method="process_data"),
]
```
4. Implement the logic for processing data within the component. Define methods for processing data and returning results.
```python
def process_data(self) -> Data:
input_text = self.input_text
input_number = self.input_number
input_boolean = self.input_boolean
input_choice = self.input_choice
# Implement your processing logic here
result = f"Processed: {input_text}, {input_number}, {input_boolean}, {input_choice}"
self.status = result
return Data(data={"result": result})
```
## Advanced Example: Create a Conditional Router Component
This example demonstrates a more complex component that routes data based on a condition.
Notice that this component has two outputs associated with the methods `true_response` and `false_response`.
These methods trigger `self.stop` to block the transmission for the selected output, allowing for logic operations to be implemented visually.
```python
from langflow.custom import Component
from langflow.inputs import MessageTextInput, DropdownInput, BoolInput
from langflow.template import Output
from langflow.field_typing import Text
class ConditionalRouterComponent(Component):
display_name = "Conditional Router"
description = "Routes input based on a specified condition."
icon = "router"
inputs = [
MessageTextInput(
name="input_value",
display_name="Input Value",
info="Value to be evaluated.",
),
MessageTextInput(
name="comparison_value",
display_name="Comparison Value",
info="Value to compare against.",
),
DropdownInput(
name="operator",
display_name="Operator",
options=["equals", "not equals", "contains"],
info="Comparison operator.",
),
]
outputs = [
Output(display_name="True Output", name="true_output", method="true_response"),
Output(display_name="False Output", name="false_response", method="false_response"),
]
def evaluate_condition(self, input_value: str, comparison_value: str, operator: str) -> bool:
if operator == "equals":
return input_value == comparison_value
elif operator == "not equals":
return input_value != comparison_value
elif operator == "contains":
return comparison_value in input_value
return False
def true_response(self) -> Text:
if self.evaluate_condition(self.input_value, self.comparison_value, self.operator):
self.stop("false_response")
return self.input_value
else:
self.stop("true_response")
return ""
def false_response(self) -> Text:
if not self.evaluate_condition(self.input_value, self.comparison_value, self.operator):
self.stop("true_response")
return self.input_value
else:
self.stop("false_response")
return ""
```
By following these steps and examples, you can create custom components in Langflow tailored to your specific needs. The modular structure of Custom Components allows for flexible and reusable components that can be easily integrated into your workflows.
---

4
docs/docs/components/data.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Data
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
## API Request
This component sends HTTP requests to the specified URLs.

6
docs/docs/components/embeddings.mdx
View file

@ -1,5 +1,11 @@
import Admonition from "@theme/Admonition";
# Embeddings
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
## Amazon Bedrock Embeddings
Used to load embedding models from [Amazon Bedrock](https://aws.amazon.com/bedrock/).

4
docs/docs/components/experimental.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Experimental
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Components in the experimental phase are currently in beta. They have been initially developed and tested but haven't yet achieved a stable or fully supported status. We encourage users to explore these components, provide feedback, and report any issues encountered.
---

4
docs/docs/components/helpers.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Helpers
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
### Chat memory
This component retrieves stored chat messages based on a specific session ID.

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

@ -4,6 +4,10 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
# Inputs and Outputs
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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.

4
docs/docs/components/loaders.mdx
View file

@ -2,6 +2,10 @@ import Admonition from '@theme/Admonition';
# Loaders
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
<Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
<p>
We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝

4
docs/docs/components/memories.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Memories
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
<Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
<p>
Thanks for your patience as we improve our documentation—it might have some

4
docs/docs/components/model_specs.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Large Language Models (LLMs)
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
A Large Language Model (LLM) is a foundational component of Langflow. It provides a uniform interface for interacting with LLMs from various providers, including OpenAI, Cohere, and HuggingFace. Langflow extensively uses LLMs across its chains and agents, employing them to generate text based on specific prompts or inputs.
---

4
docs/docs/components/models.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Models
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
## Amazon Bedrock
This component facilitates the generation of text using the LLM (Large Language Model) model from Amazon Bedrock.

4
docs/docs/components/retrievers.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Retrievers
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
A retriever is an interface that returns documents in response to an unstructured query. It's broader than a vector store because it doesn't need to store documents; it only needs to retrieve them.
---

8
docs/docs/components/text-and-record.mdx
View file

@ -1,6 +1,12 @@
import Admonition from "@theme/Admonition";
# Text and Data
In Langflow 1.0, we added two main input and output types: `Text` and `Data`.
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
There are two main input and output types: `Text` and `Data`.
`Text` is a simple string input and output type, while `Data` is a structure very similar to a dictionary in Python. It is a key-value pair data structure.

4
docs/docs/components/text-splitters.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Text Splitters
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
A text splitter is a tool that divides a document or text into smaller chunks or segments. This helps make large texts more manageable for analysis or processing.
---

4
docs/docs/components/toolkits.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Toolkits
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
<Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
<p>
We appreciate your understanding as we polish our documentation - it may

4
docs/docs/components/tools.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Tools
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
## SearchApi
SearchApi offers a real-time search engine results API that returns structured JSON data, including answer boxes, knowledge graphs, organic results, and more.

4
docs/docs/components/utilities.mdx
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Utilities
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Utilities are a set of actions that can be used to perform common tasks in a flow. They are available in the **Utilities** section in the sidebar.
---

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

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Vector Stores
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
### Astra DB
The `Astra DB` initializes a vector store using Astra DB from Data. It creates Astra DB-based vector indexes to efficiently store and retrieve documents.

6
docs/docs/contributing/community.md → docs/docs/contributing/community.mdx
View file

@ -1,5 +1,11 @@
import Admonition from "@theme/Admonition";
# Community
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
## 🤖 Join **Langflow** Discord server
Join us to ask questions and showcase your projects.

7
docs/docs/contributing/contribute-component.md → docs/docs/contributing/contribute-component.mdx
View file

@ -1,8 +1,13 @@
import ZoomableImage from "/src/theme/ZoomableImage.js";
import Admonition from "@theme/Admonition";
# 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.
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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.
## Add an example component

6
docs/docs/contributing/github-issues.md → docs/docs/contributing/github-issues.mdx
View file

@ -1,5 +1,11 @@
import Admonition from "@theme/Admonition";
# GitHub Issues
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Our [issues](https://github.com/langflow-ai/langflow/issues) page is kept up to date
with bugs, improvements, and feature requests. There is a taxonomy of labels to help
with sorting and discovery of issues of interest.

6
docs/docs/contributing/how-contribute.md → docs/docs/contributing/how-contribute.mdx
View file

@ -1,5 +1,11 @@
import Admonition from "@theme/Admonition";
# How to Contribute?
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
👋 Hello there! We welcome contributions from developers of all levels to our open-source project on [GitHub](https://github.com/langflow-ai/langflow). If you'd like to contribute, please check our contributing guidelines and help make Langflow more accessible.
As an open-source project in a rapidly developing field, we are extremely open

6
docs/docs/deployment/backend-only.md → docs/docs/deployment/backend-only.mdx
View file

@ -1,5 +1,11 @@
import Admonition from "@theme/Admonition";
# Backend-only
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
You can run Langflow in `--backend-only` mode to expose your Langflow app as an API, without running the frontend UI.
Start langflow in backend-only mode with `python3 -m langflow run --backend-only`.

6
docs/docs/deployment/docker.md → docs/docs/deployment/docker.mdx
View file

@ -1,5 +1,11 @@
import Admonition from "@theme/Admonition";
# Docker
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
This guide will help you get LangFlow up and running using Docker and Docker Compose.
## Prerequisites

6
docs/docs/deployment/gcp-deployment.md → docs/docs/deployment/gcp-deployment.mdx
View file

@ -1,5 +1,11 @@
import Admonition from "@theme/Admonition";
# Deploy on Google Cloud Platform
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
## Run Langflow from a New Google Cloud Project
This guide will help you set up a Langflow development VM in a Google Cloud Platform project using Google Cloud Shell.

6
docs/docs/examples/chat-memory.mdx
View file

@ -6,9 +6,13 @@ import Admonition from "@theme/Admonition";
# Chat Memory
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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.
This component is available under the **Helpers** tab of the Langflow sidebar.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}

6
docs/docs/examples/combine-text.mdx
View file

@ -6,13 +6,17 @@ import Admonition from "@theme/Admonition";
# Combine Text
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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.
This component is available under the **Helpers** tab of the Langflow sidebar.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}

4
docs/docs/examples/create-record.mdx
View file

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Create Data
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
In Langflow, a `Data` has a structure very similar to a Python dictionary. It is a key-value pair data structure.
The **Create Data** component allows you to dynamically create a `Data` 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 `Data`, add keys and fill up values, or pass on values from other components to the component using the input handles.

4
docs/docs/examples/pass.mdx
View file

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Pass
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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!

4
docs/docs/examples/store-message.mdx
View file

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Store Message
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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.

4
docs/docs/examples/sub-flow.mdx
View file

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Sub Flow
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
The **Sub Flow** component enables a user to select a previously built flow and dynamically generate a component out of it.
<div

4
docs/docs/examples/text-operator.mdx
View file

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Text Operator
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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

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

@ -1,315 +0,0 @@
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import ReactPlayer from "react-player";
import Admonition from "@theme/Admonition";
# 🎨 Langflow Canvas
The **Langflow canvas** is the central hub of Langflow, where you'll assemble new flows from components, run them, and see the results.
To get a feel for the canvas, we'll examine a basic prompting flow.
You can either build this flow yourself, or select **New Project** > **Basic prompting** to open a canvas with the flow pre-built.
## Flows, components, collections, and projects
A [flow](#flow) is a pipeline of components connected together in the Langflow canvas.
A [component](#component) is a single building block within a flow. A component has inputs, outputs, and parameters that define its functionality.
A [collection](#collection) is a snapshot of the flows available in your database. Collections can be downloaded to local storage and uploaded for future use.
A [project](#project) can be a component or a flow. Projects are saved as part of your collection.
For example, the **OpenAI LLM** is a **component** of the **Basic prompting** flow, and the **flow** is stored in a **collection**.
## Flow
A **flow** is a pipeline of components connected together in the Langflow canvas.
For example, the [Basic prompting](../starter-projects/basic-prompting) flow is a pipeline of four components:
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/basic-prompting.png"),
dark: useBaseUrl("img/basic-prompting.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "0 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)
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-light.png"),
dark: useBaseUrl("img/single-component-dark.png"),
}}
style={{ width: "40%", 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>
### Multiple outputs
A component can have multiple outputs. For example, this one Chat Input component routes through three prompt chains, and returns three different responses to a single question in the Playground.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/multiple-outputs.png"),
dark: useBaseUrl("img/multiple-outputs.png"),
}}
style={{ width: "40%", margin: "20px auto" }}
/>
### Output Preview
Langflow now includes an output visualizer for components that opens a pop-up screen. This allows you to easily inspect and monitor transmissions between components, providing instant feedback on your workflows.
### Component Parameters
Langflow components can be edited by clicking the component settings button.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
</div>
Hide parameters with the **SHOW** button to reduce complexity and keep the canvas clean and intuitive for experimentation.
Double-click the component name to rename it.
### Component menu
Each component is a little unique, but they will all have a menu bar on top that looks something like this.
The menu options are **Code**, **Advanced Settings**, **Freeze**, and **More**.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/chat-input-light.png"),
dark: useBaseUrl("img/chat-input-dark.png"),
}}
style={{ width: "40%", margin: "20px auto" }}
/>
### Code menu
The **Code** button displays your component's Python code.
You can modify the code and save it.
### Advanced Settings
Modify the parameters of your component.
#### Freeze
After a component runs, lock its previous output state to prevent it from re-running.
This avoids spending tokens when consistent output is expected.
#### More
**Code** - Modify your component's Python code.
**Advanced** - modify the parameters of your component.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
</div>
**Copy** - copy your component.
**Share** - share your component to the Langflow store.
**Docs** - view documentation for your component.
**Delete** - delete your component.
### Group multiple components
Components without input or output nodes can be grouped into a single component for reuse.
This is useful for combining large flows into single components (like RAG with a vector database, for example) and saves space in the canvas.
1. Hold **Shift** and drag to select the **Prompt** and **OpenAI** components.
2. Select **Group**.
3. The components merge into a single component.
4. To save the new component, select **Save**. It can now be reused from the **Saved** components folder.
### Update component version
Canvas component state is stored in a database, while sidebar components are like starter templates.
As soon as you drag a component from the sidebar to the canvas, the two components are no longer in parity.
The canvas component will keep the version number it was initilized to the canvas with. Click the **Update Component** icon to bring the component up to the `latest` version.
## Playground
Run your flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button.
For more, see [Playground](../administration/playground).
## API
The **API** button opens the API window, where Langflow presents code for integrating your flow into external applications.
Modify the call's parameters in the **Tweaks** window, click the **Copy Code** or **Download** buttons, and paste your code where you want to use it.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/api-window.png"),
dark: useBaseUrl("img/api-window.png"),
}}
style={{ width: "60%", margin: "20px auto" }}
/>
### curl
The **curl** tab displays sample code for posting a query to your flow.
Modify the `input_value` to change your input message.
Copy the code and run it to post a query to your flow and get the result.
```curl
curl -X POST \
http://127.0.0.1:7863/api/v1/run/f2eefd80-bb91-4190-9279-0d6ffafeaac4\?stream\=false \
-H 'Content-Type: application/json'\
-d '{"input_value": "is anybody there?",
"output_type": "chat",
"input_type": "chat",
"tweaks": {
"Prompt-uxBqP": {},
"OpenAIModel-k39HS": {},
"ChatOutput-njtka": {},
"ChatInput-P3fgL": {}
}}'
```
Result:
```
{"session_id":"f2eefd80-bb91-4190-9279-0d6ffafeaac4:53856a772b8e1cfcb3dd2e71576b5215399e95bae318d3c02101c81b7c252da3","outputs":[{"inputs":{"input_value":"is anybody there?"},"outputs":[{"results":{"result":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?"},"artifacts":{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI"},"messages":[{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI","component_id":"ChatOutput-njtka"}],"component_display_name":"Chat Output","component_id":"ChatOutput-njtka"}]}]}%
```
### Python API
The **Python API** tab displays code to interact with your flow using the Python HTTP requests library.
### Python Code
The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime.
### Chat Widget HTML
The **Chat Widget HTML** tab displays code that can be inserted in the `<body>` of your HTML to interact with your flow.
For more, see the [Chat widget documentation](../administration/chat-widget).
### Tweaks
The **Tweaks** tab displays the available parameters for your flow.
Modifying the parameters changes the code parameters across all windows.
For example, changing the **Chat Input** component's `input_value` will change that value across all API calls.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_api.mp4" />
</div>
## 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) are also available.
## Project options menu
To see options for your project, in the upper left corner of the canvas, select the dropdown menu.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/project-options-menu-light.png"),
dark: useBaseUrl("img/project-options-menu-dark.png"),
}}
style={{ width: "30%", margin: "20px auto" }}
/>
**New** - Start a new project.
**Duplicate** - Duplicate the current flow as a new project.
**Settings** - Modify the project's **Name** or **Description**.
**Import** - Upload a flow `.json` file from your local machine.
**Export** - Download your current project to your local machine as a `.json` file.
**Undo** or **Redo** - Undo or redo your last action.
## Project folders
As of Langflow 1.0 alpha, more options are available for storing projects with **folders**.
Create new folders with the **New folder** button. One folder can store multiple projects (as the default My Projects folder does).
You can download folders of projects as a single JSON file, and upload files and flows to your folder.
Click the **Trash** icon to delete a folder.

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

@ -6,11 +6,12 @@ import Admonition from "@theme/Admonition";
# 📦 Install Langflow
<Admonition type="info">
Langflow **requires** Python version 3.10 or greater.
Langflow **requires** Python version 3.10 or greater and
[pip](https://pypi.org/project/pip/) or
[pipx](https://pipx.pypa.io/stable/installation/) to be installed on your
system.
</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.
Install Langflow with pip:
```bash
@ -23,29 +24,11 @@ Install Langflow with pipx:
pipx install langflow --python python3.10 --fetch-missing-python
```
Pipx can fetch the missing Python version for you with `--fetch-missing-python`, but you can also install the Python version manually.
## Install Langflow pre-release
To install a pre-release version of Langflow:
pip:
```bash
python -m pip install langflow --pre --force-reinstall
```
pipx:
```bash
pipx install langflow --python python3.10 --fetch-missing-python --pip-args="--pre --force-reinstall"
```
Use `--force-reinstall` to ensure you have the latest version of Langflow and its dependencies.
Pipx can fetch the missing Python version for you with `--fetch-missing-python`, but you can also install the Python version manually. Use `--force-reinstall` to ensure you have the latest version of Langflow and its dependencies.
## Having a problem?
If you encounter a problem, see [Common Installation Issues](/migration/possible-installation-issues).
If you encounter a problem, see [Common Installation Issues](/getting-started/possible-installation-issues).
To get help in the Langflow CLI:
@ -63,25 +46,30 @@ python -m langflow run
2. Confirm that a local Langflow instance starts by visiting `http://127.0.0.1:7860` in a Chromium-based browser.
```bash
│ Welcome to ⛓ Langflow │
│ │
│ Access http://127.0.0.1:7860 │
│ Collaborate, and contribute at our GitHub Repo 🚀 │
```
<ZoomableImage
alt="Instructions for duplicating Langflow space on HuggingFace"
sources={{
light: "img/welcome-to-langflow.png",
dark: "img/welcome-to-langflow.png",
}}
style={{ width: "80%", maxWidth: "800px", margin: "0 auto" }}
/>
3. Continue on to the [Quickstart](./quickstart).
## 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.
HuggingFace provides a great alternative for running Langflow in their Spaces environment. This means you can run Langflow in the cloud without any local installation required. Here's how you can get Langflow up and running on HuggingFace Spaces:
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).
1. **Access Langflow Space**: Open a Chromium-based browser and navigate to the [Langflow Space](https://huggingface.co/spaces/Langflow/Langflow?duplicate=true). This link directs you to a pre-configured environment for Langflow.
You'll be presented with the following screen:
2. **Duplicate the Space**: You'll encounter an option to duplicate the Langflow space. This step involves a few simple decisions:
- **Naming Your Space**: Assign a unique name to your new Space.
- **Visibility Settings**: Choose between Public or Private visibility for your Space.
- After setting these parameters, click on **Duplicate Space** to initiate the setup.
<ZoomableImage
alt="Docusaurus themed image"
alt="Instructions for duplicating Langflow space on HuggingFace"
sources={{
light: "img/duplicate-space.png",
dark: "img/duplicate-space.png",
@ -89,4 +77,6 @@ You'll be presented with the following screen:
style={{ width: "80%", maxWidth: "800px", margin: "0 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!
3. **Complete Installation**: The duplication and setup process begins immediately after you click **Duplicate Space**. Once completed, you will be automatically redirected to the main page of your new Space.
4. **Start Exploring Langflow**: With the setup complete, Langflow is now ready for use in your Space and you can start exploring its features and capabilities right away!

6
docs/docs/getting-started/new-to-llms.mdx
View file

@ -4,7 +4,9 @@ Large Language Models, or LLMs, are part of an exciting new world in computing.
We made Langflow for anyone to create with LLMs, and hope you'll feel comfortable installing Langflow and [getting started](./quickstart).
If you want to learn more about LLMs, prompt engineering, and AI models, Langflow recommends [promptingguide.ai](https://promptingguide.ai), an open-source repository of prompt engineering content maintained by AI experts.
If you want to learn the basics of LLMs, prompt engineering, and AI models, Langflow recommends [promptingguide.ai](https://promptingguide.ai), an open-source repository of prompt engineering content maintained by AI experts.
PromptingGuide offers content for [beginners](https://www.promptingguide.ai/introduction/basics) and [experts](https://www.promptingguide.ai/techniques/cot), as well as the latest [research papers](https://www.promptingguide.ai/papers) and [test results](https://www.promptingguide.ai/research) fueling AI's progress.
Wherever you are on your AI journey, it's helpful to keep Prompting Guide open in a tab.
For an in depth readings, we recommend [Awesome LLM Books](https://github.com/Hannibal046/Awesome-LLM?tab=readme-ov-file#llm-books), a curated list of resources for learning about LLMs and their applications.
{/* Wherever you are on your AI journey, it's helpful to keep Prompting Guide open in a tab. */}

4
docs/docs/migration/possible-installation-issues.mdx → docs/docs/getting-started/possible-installation-issues.mdx
View file

@ -1,6 +1,8 @@
import Admonition from "@theme/Admonition";
# ❗️ Common Installation Issues
This is a list of possible issues that you may encounter when installing Langflow 1.0 alpha and how to solve them.
This is a list of possible issues that you may encounter when installing Langflow and how to solve them.
## _`No module named 'langflow.__main__'`_

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

@ -6,7 +6,7 @@ import Admonition from "@theme/Admonition";
# ⚡️ Quickstart
This guide demonstrates how to build a basic prompt flow and modify that prompt for different outcomes.
This guide demonstrates how to build a basic flow and modify the prompt for different outcomes.
## Prerequisites
@ -16,27 +16,21 @@ This guide demonstrates how to build a basic prompt flow and modify that prompt
- [OpenAI API key](https://platform.openai.com)
<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>
## Hello World - Basic Prompting
Let's start with a Prompt component to instruct an OpenAI Model.
Prompts serve as the inputs to a large language model (LLM), acting as the interface between human instructions and computational tasks.
Prompts serve as the inputs to a large language model (LLM), acting as the interface between human instructions and computational tasks. By submitting natural language requests in a prompt to an LLM, you can obtain answers, generate text, and solve problems.
By submitting natural language requests in a prompt to an LLM, you can obtain answers, generate text, and solve problems.
<br />
1. From the Langflow dashboard, click **New Project**.
2. Select **Basic Prompting**.
3. The **Basic Prompting** flow is created.
<br />
<ZoomableImage
alt="Docusaurus themed image"
alt="Quickstart Guide Screenshot"
sources={{
light: "img/quickstart.png",
dark: "img/quickstart.png",
@ -44,20 +38,25 @@ By submitting natural language requests in a prompt to an LLM, you can obtain an
style={{ width: "80%", margin: "20px auto" }}
/>
This flow allows you to chat with the **OpenAI** component via a **Prompt**.
This flow allows you to chat with the **OpenAI** model by using a **Prompt** to send instructions.
Examine the **Prompt** component. The **Template** field instructs the LLM to `Answer the user as if you were a pirate.`
This should be interesting...
4. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
1. In the **Variable Name** field, enter `openai_api_key`.
2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
3. Click **Save Variable**.
To use the **OpenAI** component, you have two options for providing your OpenAI API Key: directly passing it to the component or creating an environment variable. For better security and manageability, creating an environment variable is recommended. Here's how to set it up:
In the **OpenAI API Key** field, click the **Globe** button to access environment variables, and then click **Add New Variable**.
1. In the **Variable Name** field, enter `openai_api_key`.
2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
3. Click **Save Variable**.
By creating an environment variable, you keep your API key secure and make it easier to manage across different components or projects.
## Run the basic prompting flow
1. Click the **Run** button.
The **Interaction Panel** opens, where you can chat with your bot.
2. Type a message and press Enter.
1. Click the **Playground** button. This where you can interact with your bot.
2. Type any message and press Enter.
And... Ahoy! 🏴‍☠️
The bot responds in a piratical manner!
@ -73,10 +72,8 @@ This should be interesting...
Well done! You've built your first prompt in Langflow. 🎉
By adding Langflow components to your flow, you can create all sorts of interesting behaviors.
By dragging Langflow components to your workspace, you can create all sorts of interesting behaviors. Here are a couple of examples:
Here are a couple of examples:
- [Memory chatbot](/starter-projects/memory-chatbot)
- [Blog writer](/starter-projects/blog-writer)
- [Document QA](/starter-projects/document-qa)
- [Memory Chatbot](/starter-projects/memory-chatbot)
- [Blog Writer](/starter-projects/blog-writer)
- [Document QA](/starter-projects/document-qa)

195
docs/docs/getting-started/rag-with-astradb.mdx
View file

@ -1,195 +0,0 @@
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import Admonition from "@theme/Admonition";
# 🌟 RAG with Astra DB
This guide will walk you through how to build a RAG (Retrieval Augmented Generation) application using **Astra DB** and **Langflow**.
[Astra DB](https://www.datastax.com/products/datastax-astra?utm_source=langflow-pre-release&utm_medium=referral&utm_campaign=langflow-announcement&utm_content=astradb) is a cloud-native database built on Apache Cassandra that is optimized for the cloud. It is a fully managed database-as-a-service that simplifies operations and reduces costs. Astra DB is built on the same technology that powers the largest Cassandra deployments in the world.
In this guide, we will use Astra DB as a vector store to store and retrieve the documents that will be used by the RAG application to generate responses.
<Admonition type="tip">
This guide assumes that you have Langflow up and running. If you are new to
Langflow, you can check out the [Getting Started](/) guide.
</Admonition>
TLDR;
- [Create a free Astra DB account](https://astra.datastax.com/signup?utm_source=langflow-pre-release&utm_medium=referral&utm_campaign=langflow-announcement&utm_content=create-a-free-astra-db-account)
- Duplicate our [Langflow 1.0 Space](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
- Create a new database, get a **Token** and the **API Endpoint**
- Click on the **New Project** button and look for Vector Store RAG. This will create a new project with the necessary components
- Import the project into Langflow by dropping it on the Canvas or My Collection page
- Update the **Token** and **API Endpoint** in the **Astra DB** components
- Update the OpenAI API key in the **OpenAI** components
- Run the ingestion flow which is the one that uses the **Astra DB** component
- Click on the ⚡ _Run_ button and start interacting with your RAG application
# First things first
## Create an Astra DB Database
To get started, you will need to [create an Astra DB database](https://astra.datastax.com/signup?utm_source=langflow-pre-release&utm_medium=referral&utm_campaign=langflow-announcement&utm_content=create-an-astradb-database).
Once you have created an account, you will be taken to the Astra DB dashboard. Click on the **Create Database** button.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/astra-create-database.png",
dark: "img/astra-create-database.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
Now you will need to configure your database. Choose the **Serverless (Vector)** deployment type, and pick a Database name, provider and region.
After you have configured your database, click on the **Create Database** button.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/astra-configure-deployment.png",
dark: "img/astra-configure-deployment.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
Once your database is initialized, to the right of the page, you will see the _Database Details_ section which contains a button for you to copy the **API Endpoint** and another to generate a **Token**.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/astra-generate-token.png",
dark: "img/astra-generate-token.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
Now we are all set to start building our RAG application using Astra DB and Langflow.
## (Optional) Duplicate the Langflow 1.0 HuggingFace Space
If you haven't already, now is the time to launch Langflow. To make things easier, you can duplicate our [Langflow 1.0 Space](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) which sets up a Langflow instance just for you.
## Open the Vector Store RAG Project
To get started, click on the **New Project** button and look for the **Vector Store RAG** project. This will open a starter project with the necessary components to run a RAG application using Astra DB.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/drag-and-drop-flow.png",
dark: "img/drag-and-drop-flow.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
This project consists of two flows. The simpler one is the **Ingestion Flow** which is responsible for ingesting the documents into the Astra DB database.
Your first step should be to understand what each flow does and how they interact with each other.
The ingestion flow consists of:
- **Files** component that uploads a text file to Langflow
- **Recursive Character Text Splitter** component that splits the text into smaller chunks
- **OpenAIEmbeddings** component that generates embeddings for the text chunks
- **Astra DB** component that stores the text chunks in the Astra DB database
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/astra-ingestion-flow.png",
dark: "img/astra-ingestion-flow.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
Now, let's update the **Astra DB** and **Astra DB Search** components with the **Token** and **API Endpoint** that we generated earlier, and the OpenAI Embeddings components with your OpenAI API key.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/astra-ingestion-fields.png",
dark: "img/astra-ingestion-fields.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
And run it! This will ingest the Text data from your file into the Astra DB database.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/astra-ingestion-run.png",
dark: "img/astra-ingestion-run.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
Now, on to the **RAG Flow**. This flow is responsible for generating responses to your queries. It will define all of the steps from getting the User's input to generating a response and displaying it in the Playground.
The RAG flow is a bit more complex. It consists of:
- **Chat Input** component that defines where to put the user input coming from the Playground
- **OpenAI Embeddings** component that generates embeddings from the user input
- **Astra DB Search** component that retrieves the most relevant Data from the Astra DB database
- **Text Output** component that turns the Data into Text by concatenating them and also displays it in the Playground
- One interesting point you'll see here is that this component is named `Extracted Chunks`, and that is how it will appear in the Playground
- **Prompt** component that takes in the user input and the retrieved Data as text and builds a prompt for the OpenAI model
- **OpenAI** component that generates a response to the prompt
- **Chat Output** component that displays the response in the Playground
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/astra-rag-flow.png",
dark: "img/astra-rag-flow.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
To run it all we have to do is click on the ⚡ _Run_ button and start interacting with your RAG application.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/astra-rag-flow-run.png",
dark: "img/astra-rag-flow-run.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
This opens the Playground where you can chat your data.
Because this flow has a **Chat Input** and a **Text Output** component, the Panel displays a chat input at the bottom and the Extracted Chunks section on the left.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/astra-rag-flow-interaction-panel.png",
dark: "img/astra-rag-flow-interaction-panel.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
Once we interact with it we get a response and the Extracted Chunks section is updated with the retrieved data.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/astra-rag-flow-interaction-panel-interaction.png",
dark: "img/astra-rag-flow-interaction-panel-interaction.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
And that's it! You have successfully ran a RAG application using Astra DB and Langflow.
# Conclusion
In this guide, we have learned how to run a RAG application using Astra DB and Langflow.
We have seen how to create an Astra DB database, import the Astra DB RAG Flows project into Langflow, and run the ingestion and RAG flows.

275
docs/docs/getting-started/workspace.mdx Normal file
View file

@ -0,0 +1,275 @@
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import ReactPlayer from "react-player";
import Admonition from "@theme/Admonition";
# 🎨 Langflow Workspace
## The Langflow Workspace Interface
The **Langflow Workspace** is where you assemble new flows and create AIs by connecting and running components. To get started, click on **New Project**. You can either build a flow from scratch (Blank Flow) or choose from pre-built starter examples.
### Sidebar Menu
Located on the left, this menu includes several collapsible sections that categorize the different types of pre-built components available in Langflow.
### Workspace Area
The large central area where users can visually assemble and connect components to create flows.
## Top Navigation Bar
- **Project Options**: Indicates the name of the current project or document. Clicking here allows users to rename the project or access project settings.
- **My Collection**: Provides access to saved or user-defined collections of components or flows.
- **Store**: Opens the component store where users can browse and add new components to their workspace.
In the top navigation bar, the dropdown menu labeled with the project name offers several management and customization options for the current flow in the Langflow Workspace.
<ZoomableImage
alt="Options Dropdown"
sources={{
light: useBaseUrl("img/menu-options.png"),
dark: useBaseUrl("img/menu-options.png"),
}}
style={{ width: "100%", margin: "20px auto" }}
/>
- **New**: Create a new flow from scratch.
- **Settings**: Adjust settings specific to the current flow, such as its Name, Description, and Endpoint Name.
- **Logs**: View logs for the current project, including execution history, errors, and other runtime events.
- **Import**: Import a flow or component from a JSON file into the Workspace.
- **Export**: Export the current flow as a JSON file.
- **Undo (⌘Z)**: Revert the last action taken in the project.
- **Redo (⌘Y)**: Reapply a previously undone action.
- **Refresh All**: Refresh all components and delete cache.
## Control Panel
- **Playground**: Button that executes the current flow in the workspace.
- **API**: Provides API access details and integration options for the current flow.
- **Share**: Allows users to share their AI with others.
## Flows & Components
A [flow](#flow) is a pipeline of components connected together in the Langflow Workspace.
A [component](#component) is a single building block within a flow. It has inputs, outputs, and parameters that define its functionality.
For example, the **OpenAI Model** is a **component** of the **Basic Prompting** flow.
## Flow
A **Flow** is a sequence of components that are connected to perform a series of operations or tasks. Each flow is essentially a pipeline where data functions travel through various components, each modifying or analyzing the data according to its specific functionality.
For example, the [Basic Prompting](../starter-projects/basic-prompting) flow is a pipeline of four components:
<ZoomableImage
alt="Basic Prompting Flow"
sources={{
light: useBaseUrl("img/basic-prompting.png"),
dark: useBaseUrl("img/basic-prompting.png"),
}}
style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
/>
{" "}
In this flow, the **OpenAI Model** receives input (left side) and produces output (right side) - in this case, receiving input from the **Chat Input** and **Prompt** components and passing the 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 below.
<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 use distinct
colors to indicate the types of inputs and outputs that can be interconnected.
Hover over a handle to see connection details.
</div>
{" "}
<ZoomableImage
alt="Single Component"
sources={{
light: useBaseUrl("img/single-component.png"),
dark: useBaseUrl("img/single-component.png"),
}}
style={{ width: "100%", margin: "20px auto" }}
/>
{/* <div style={{ marginBottom: "20px" }}> */}
On the top right corner of the component, you'll find the a play button to run a component. Once it runs, a status icon appears and you can hover over that to visualize success or error messages.
Start interacting with your AI by clicking the **![Playground icon](/logos/botmessage.svg)Playground** at the bottom right of the workspace.
### Output Preview
Langflow includes an output visualizer for components that opens a pop-up screen. This allows you to easily inspect and monitor transmissions between components, providing instant feedback on your workflows.
<ZoomableImage
alt="Single Component"
sources={{
light: useBaseUrl("img/inspect-output.png"),
dark: useBaseUrl("img/inspect-output.png"),
}}
style={{ width: "60%", margin: "20px auto" }}
/>
### Component Menu
Each component is a little unique, but they will all have a menu bar on top that looks something like this.
<ZoomableImage
alt="Component Menu"
sources={{
light: useBaseUrl("img/component-menu.png"),
dark: useBaseUrl("img/component-menu.png"),
}}
style={{ width: "70%", margin: "10px auto" }}
/>
It consists of options such as:
**Code** - displays component's Python code. You can modify the code and save it.
**Advanced** - See and adjust all parameters of a component.
**Freeze** - After a component runs, lock its previous output state to prevent it from re-running.
Click **All** (the "..." button) to see all options.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
</div>
### Advanced Settings
Langflow components can be edited by clicking the **Advanced Settings** button.
<div
style={{
marginBottom: "30px",
marginTop: "30px",
display: "flex",
justifyContent: "center",
}}
>
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
</div>
Hide parameters with the **SHOW** button to reduce complexity and keep the workspace clean and intuitive for experimentation.
You can also double-click a component's name and description to modify those. Component descriptions accept markdown syntax.
### Group Components
Multiple components can be grouped into a single component for reuse. This is useful when combining large flows into single components (like RAG with a vector database, for example) and saving space.
1. Hold **Shift** and drag to select components.
2. Select **Group**.
3. The components merge into a single component.
4. Double click name and description to change them.
5. Save your grouped component to in the sidebar for later use!
### Update component version
A component's state is stored in a database, while sidebar components are like starter templates.
As soon as you drag a component from the sidebar to the workspace, the two components are no longer in parity.
The component will keep the version number it was initilized to the workspace with. Click the **Update Component** icon (exclamation mark) to bring the component up to the `latest` version. This will change the code of the component in place so you can validate that the component was updated by checking its Python code before and after updating it.
<ZoomableImage
alt="Update Component"
sources={{
light: useBaseUrl("img/component-update.png"),
dark: useBaseUrl("img/component-update.png"),
}}
style={{ width: "80%", margin: "20px auto" }}
/>
## Playground
Run your AI by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button.
For more, see [Playground](../administration/playground).
## API
{/* rsn */}
The **API** session presents code templates for integrating your flow into external applications.
{/* Modify parameters in the **Tweaks** window, click **Copy Code** or **Download** buttons, and paste your code where you want to use it. */}
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl("img/api-window.png"),
dark: useBaseUrl("img/api-window.png"),
}}
style={{ width: "60%", margin: "20px auto" }}
/>
### cURL
The **cURL** tab displays sample code for posting a query to your flow.
Modify the `input_value` to change your input message.
Copy the code and run it to post a query to your flow and get the result.
```bash
curl -X POST \
http://127.0.0.1:7863/api/v1/run/f2eefd80-bb91-4190-9279-0d6ffafeaac4\?stream\=false \
-H 'Content-Type: application/json'\
-d '{"input_value": "is anybody there?",
"output_type": "chat",
"input_type": "chat",
"tweaks": {
"Prompt-uxBqP": {},
"OpenAIModel-k39HS": {},
"ChatOutput-njtka": {},
"ChatInput-P3fgL": {}
}}'
```
Result:
```
{"session_id":"f2eefd80-bb91-4190-9279-0d6ffafeaac4:53856a772b8e1cfcb3dd2e71576b5215399e95bae318d3c02101c81b7c252da3","outputs":[{"inputs":{"input_value":"is anybody there?"},"outputs":[{"results":{"result":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?"},"artifacts":{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI"},"messages":[{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI","component_id":"ChatOutput-njtka"}],"component_display_name":"Chat Output","component_id":"ChatOutput-njtka"}]}]}%
```
### Python API
The **Python API** tab displays code to interact with your flow using the Python HTTP requests library.
### Python Code
The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime.
### Chat Widget HTML
The **Chat Widget HTML** tab displays code that can be inserted in the `<body>` of your HTML to interact with your flow.
For more, see the [Chat widget documentation](../administration/chat-widget).
### Tweaks
The **Tweaks** tab displays the available parameters for your flow.
Modifying the parameters changes the code parameters across all windows.
For example, changing the **Chat Input** component's `input_value` will change that value across all API calls.
<div
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
<ReactPlayer playing controls url="/videos/langflow_api.mp4" />
</div>

14
docs/docs/index.mdx
View file

@ -5,14 +5,15 @@ import Admonition from "@theme/Admonition";
# 👋 Welcome to Langflow
Langflow is a new, visual way to build, iterate, and deploy AI applications.
Langflow is a new, visual framework for building multi-agent and RAG applications. It is open-source, Python-powered, fully customizable, LLM and vector store agnostic.
Its intuitive interface allows for easy manipulation of AI building blocks, enabling developers to quickly prototype and turn their ideas into powerful, real-world solutions.
{" "}
{/* rsn */}
<ZoomableImage
alt="Docusaurus themed image"
alt="Interactive guide on using LangFlow"
sources={{
light: "img/langflow_basic_howto.gif",
dark: "img/langflow_basic_howto.gif",
@ -26,14 +27,7 @@ Its intuitive interface allows for easy manipulation of AI building blocks, enab
- [Quickstart](/getting-started/quickstart) - Create a flow and run it.
- [Langflow Canvas](/getting-started/canvas) - Learn more about the Langflow canvas.
<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>
- [Langflow Workspace](/getting-started/workspace) - Learn more about the Langflow Workspace.
## Learn more about Langflow 1.0

46
docs/docs/integrations/langsmith/intro.mdx Normal file
View file

@ -0,0 +1,46 @@
import Admonition from "@theme/Admonition";
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
# LangSmith
LangSmith is a full-lifecycle DevOps service from LangChain that provides monitoring and observability. To integrate with Langflow, just add your LangChain API key as a Langflow environment variable and you are good to go!
## Step-by-step Configuration
1. Obtain your LangChain API key from https://smith.langchain.com
2. Add the following keys to Langflow .env file:
```bash
LANGCHAIN_API_KEY="your-api-key"
LANGCHAIN_PROJECT="your-project-name"
```
or export the environment variables in your terminal:
```bash
export LANGCHAIN_API_KEY="your-api-key"
export LANGCHAIN_PROJECT="your-project-name"
```
3. Restart Langflow using `langflow run --env-file .env`
4. Run any project and check the LangSmith dashboard for monitoring and observability.
<ZoomableImage
alt="LangSmith Flow Example"
sources={{
light: useBaseUrl("img/langsmith-flow.png"),
dark: useBaseUrl("img/langsmith-flow.png"),
}}
style={{ width: "80%", margin: "20px auto" }}
/>
<ZoomableImage
alt="LangSmith Trace"
sources={{
light: useBaseUrl("img/langsmith-trace.png"),
dark: useBaseUrl("img/langsmith-trace.png"),
}}
style={{ width: "80%", margin: "20px auto" }}
/>

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

@ -5,6 +5,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
# Add Content To Page
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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)

4
docs/docs/integrations/notion/intro.md
View file

@ -5,6 +5,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
# Introduction to Notion in Langflow
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
The Notion integration in Langflow enables seamless connectivity with Notion databases, pages, and users, facilitating automation and improving productivity.
<ZoomableImage

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

@ -5,6 +5,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
# Database Properties
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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)

4
docs/docs/integrations/notion/list-pages.md
View file

@ -5,6 +5,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
# List Pages
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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)

4
docs/docs/integrations/notion/list-users.md
View file

@ -5,6 +5,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
# User List
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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)

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

@ -5,6 +5,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
# Page Content
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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)

4
docs/docs/integrations/notion/page-create.md
View file

@ -5,6 +5,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
# Page Create
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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)

6
docs/docs/integrations/notion/page-update.md
View file

@ -5,6 +5,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
# Page Update
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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)
@ -13,7 +17,7 @@ The `NotionPageUpdate` component updates the properties of a Notion page. It pro
To use the `NotionPageUpdate` component in your Langflow flow:
1. Drag and drop the `NotionPageUpdate` component onto the canvas.
1. Drag and drop the `NotionPageUpdate` component onto the workspace.
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.

4
docs/docs/integrations/notion/search.md
View file

@ -5,6 +5,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
# Notion Search
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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)

4
docs/docs/integrations/notion/setup.md
View file

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Setting up a Notion App
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
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

4
docs/docs/migration/compatibility.mdx
View file

@ -3,6 +3,10 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
# Compatibility with Previous Versions
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
## TLDR;
- You'll need to add a few components to your flow to make it compatible with the new version of Langflow.

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

@ -2,6 +2,10 @@ import Admonition from "@theme/Admonition";
# Migrating to Langflow 1.0: A Guide
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Langflow 1.0 is a significant update that brings many exciting changes and improvements to the platform.
This guide will walk you through the key improvements and help you migrate your existing projects to the new version.
@ -19,7 +23,7 @@ We have a special channel in our Discord server dedicated to Langflow 1.0 migrat
- Improved user experience with Text and Data modes
- CustomComponent for all components
- Compatibility with previous versions using Runnable Executor
- Multiple flows in the canvas
- Multiple flows in the workspace
- Improved component status
- Ability to connect Output components to any other Component
- Rename and edit component descriptions
@ -76,9 +80,9 @@ To use flows built in previous versions of Langflow, you can utilize the experim
[Learn more about Compatibility with Previous Versions](./compatibility)
## Multiple Flows in the Canvas
## Multiple Flows in the Workspace
Langflow 1.0 allows you to have more than one flow in the canvas and run them separately. Discover how to create and manage multiple flows within a single project.
Langflow 1.0 allows you to have more than one flow in the workspace and run them separately. Discover how to create and manage multiple flows within a single project.
**Guide coming soon**
@ -86,7 +90,7 @@ Langflow 1.0 allows you to have more than one flow in the canvas and run them se
Each component now displays its status more clearly, allowing you to quickly identify any issues or errors. Explore how to use the new component status feature to troubleshoot and optimize your flows.
[Learn more about Component Status](../getting-started/canvas#component)
[Learn more about Component Status](../getting-started/workspace#component)
## Connecting Output Components
@ -98,13 +102,13 @@ You can now connect Output components to any other component (that has a Text ou
Langflow 1.0 allows you to rename and edit the description of each component, making it easier to understand and interact with the flow. Learn how to customize your component names and descriptions for improved clarity.
[Learn more about Component Descriptions](../getting-started/canvas#component-parameters)
[Learn more about Component Descriptions](../getting-started/workspace#flows--components)
## Passing Tweaks and Inputs in the API
Things got a whole lot easier. You can now pass tweaks and inputs in the API by referencing the Display Name of the component. Discover how to leverage this feature to dynamically control your flow's behavior.
[Learn more about Tweaks and API inputs](../getting-started/canvas#tweaks)
[Learn more about Tweaks and API inputs](../getting-started/workspace#tweaks)
## Global Variables for Text Fields

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

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Basic Prompting
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Prompts serve as the inputs to a large language model (LLM), acting as the interface between human instructions and computational tasks.
By submitting natural language requests in a prompt to an LLM, you can obtain answers, generate text, and solve problems.
@ -18,13 +22,6 @@ This article demonstrates how to use Langflow's prompt tools to issue basic prom
- [OpenAI API key created](https://platform.openai.com)
<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>
## Create the basic prompting project
1. From the Langflow dashboard, click **New Project**.
@ -62,4 +59,4 @@ This should be interesting...
The **Edit Prompt** window opens.
2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Harold Abelson.`
3. Run the basic prompting flow again.
The response will be markedly different.
The response will be markedly different.

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

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Blog Writer
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Build a blog writer with OpenAI that uses URLs for reference content.
## Prerequisites
@ -14,13 +18,6 @@ Build a blog writer with OpenAI that uses URLs for reference content.
- [OpenAI API key created](https://platform.openai.com)
<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>
## Create the Blog Writer project
1. From the Langflow dashboard, click **New Project**.

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

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Document QA
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Build a question-and-answer chatbot with a document loaded from local memory.
## Prerequisites
@ -14,13 +18,6 @@ Build a question-and-answer chatbot with a document loaded from local memory.
- [OpenAI API key created](https://platform.openai.com)
<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>
## Create the Document QA project
1. From the Langflow dashboard, click **New Project**.

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

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Memory Chatbot
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
This flow extends the [basic prompting flow](./basic-prompting) to include chat memory for unique SessionIDs.
## Prerequisites
@ -14,13 +18,6 @@ This flow extends the [basic prompting flow](./basic-prompting) to include chat
- [OpenAI API key created](https://platform.openai.com)
<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>
## Create the memory chatbot project
1. From the Langflow dashboard, click **New Project**.
@ -81,4 +78,4 @@ To store **Session ID** as a Langflow variable, in the **Session ID** field, cli
1. In the **Variable Name** field, enter a name like `customer_chat_emea`.
2. In the **Value** field, enter a value like `1B5EBD79-6E9C-4533-B2C8-7E4FF29E983B`.
3. Click **Save Variable**.
4. Apply this variable to **Chat Input**.
4. Apply this variable to **Chat Input**.

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

@ -6,6 +6,10 @@ import Admonition from "@theme/Admonition";
# Vector Store RAG
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
Retrieval Augmented Generation, or RAG, is a pattern for training LLMs on your data and querying it.
RAG is backed by a **vector store**, a vector database which stores embeddings of the ingested data.
@ -16,13 +20,6 @@ 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. [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 and running](../getting-started/install-langflow)
- [OpenAI API key](https://platform.openai.com)

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

@ -2,9 +2,14 @@ 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";
# Build Chatbots with the System Message Component
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
## Overview
In this guide, we will modify the "Basic Chat with Prompt and History" example, integrating the ChatPromptTemplate with the SystemMessagePromptTemplate and HumanMessagePromptTemplate components. By following these steps, you'll be able to build a personalized chatbot that can interpret and respond based on user-defined System messages.
@ -62,7 +67,7 @@ In this guide, we will modify the "Basic Chat with Prompt and History" example,
16. You should now be able to see and use the defined variables in the chat interface.
17. Click on 'role' to examine the variable you established in the canvas.
17. Click on 'role' to examine the variable you established in the workspace.
18. Now, let's define the 'behavior' variable.

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

@ -8,6 +8,10 @@ import Admonition from "@theme/Admonition";
# Custom Components
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
In Langflow, a Custom Component is a special component type that allows users to extend the platform's functionality by creating their own reusable and configurable components.
A Custom Component is created from a user-defined Python script that uses the _`CustomComponent`_ class provided by the Langflow library. These components can be as simple as a basic function that takes and returns a string or as complex as a combination of multiple sub-components and API calls.
@ -196,7 +200,7 @@ Let's create a custom component that processes a document (_`langchain.schema.Do
### Pick a display name
To start, let's choose a name for our component by adding a _`display_name`_ attribute. This name will appear on the canvas. The name of the class is not relevant, but let's call it _`DocumentProcessor`_.
To start, let's choose a name for our component by adding a _`display_name`_ attribute. This name will appear on the workspace. The name of the class is not relevant, but let's call it _`DocumentProcessor`_.
```python
from langflow.custom import CustomComponent
@ -267,7 +271,7 @@ class DocumentProcessor(CustomComponent):
Here, the build method takes two input parameters: _`document`_, representing the input document to be processed, and _`function`_, a string representing the selected text transformation to be applied (either "Uppercase," "Lowercase," or "Titlecase"). The method processes the text content of the input Document based on the selected function.
The attribute _`repr_value`_ is used to display the result of the component on the canvas. It is optional and can be used to display any string value.
The attribute _`repr_value`_ is used to display the result of the component on the workspace. It is optional and can be used to display any string value.
The return type is _`Document`_.
@ -399,6 +403,6 @@ Langflow will attempt to load all of the components found in the specified direc
### Interact with Custom Components
Once your custom components have been loaded successfully, they will appear in Langflow's sidebar. From there, you can add them to your Langflow canvas for use. However, please note that components with errors will not be available for addition to the canvas. Always ensure your code is error-free before attempting to load components.
Once your custom components have been loaded successfully, they will appear in Langflow's sidebar. From there, you can add them to your Langflow workspace for use. However, please note that components with errors will not be available for addition to the workspace. Always ensure your code is error-free before attempting to load components.
Remember, creating custom components allows you to extend the functionality of Langflow to better suit your unique needs. Happy coding!

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

@ -2,9 +2,14 @@ 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";
# Integrate Documents with Prompt Variables
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
## Overview
This guide takes you through the process of augmenting the "Basic Chat with Prompt and History" example. You'll learn how to embed documents as context into the PromptTemplate component utilizing a WebBaseLoader.
@ -39,7 +44,7 @@ This guide takes you through the process of augmenting the "Basic Chat with Prom
6. Next, open the search bar and type "web".
7. Drag and drop a WebBaseLoader (or any other loader of your choice) onto the canvas.
7. Drag and drop a WebBaseLoader (or any other loader of your choice) onto the workspace.
8. Connect this loader to the `{context}` variable that we just added.

9
docs/docs/tutorials/rag-with-astradb.mdx
View file

@ -5,6 +5,10 @@ import Admonition from "@theme/Admonition";
# 🌟 RAG with Astra DB
<Admonition type="warning" title="warning">
This page may contain outdated information. It will be updated as soon as possible.
</Admonition>
This guide will walk you through how to build a RAG (Retrieval Augmented Generation) application using **Astra DB** and **Langflow**.
[Astra DB](https://www.datastax.com/products/datastax-astra?utm_source=langflow-pre-release&utm_medium=referral&utm_campaign=langflow-announcement&utm_content=astradb) is a cloud-native database built on Apache Cassandra that is optimized for the cloud. It is a fully managed database-as-a-service that simplifies operations and reduces costs. Astra DB is built on the same technology that powers the largest Cassandra deployments in the world.
@ -20,10 +24,9 @@ In this guide, we will use Astra DB as a vector store to store and retrieve the
TLDR;
- [Create a free Astra DB account](https://astra.datastax.com/signup?utm_source=langflow-pre-release&utm_medium=referral&utm_campaign=langflow-announcement&utm_content=create-a-free-astra-db-account)
- Duplicate our [Langflow 1.0 Space](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
- Create a new database, get a **Token** and the **API Endpoint**
- Click on the **New Project** button and look for Vector Store RAG. This will create a new project with the necessary components
- Import the project into Langflow by dropping it on the Canvas or My Collection page
- Start Langflow and click on the **New Project** button and look for Vector Store RAG. This will create a new project with the necessary components
- Import the project into Langflow by dropping it on the Workspace or My Collection page
- Update the **Token** and **API Endpoint** in the **Astra DB** components
- Update the OpenAI API key in the **OpenAI** components
- Run the ingestion flow which is the one that uses the **Astra DB** component

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

@ -1,96 +1,193 @@
# A new chapter for Langflow
import ZoomableImage from "/src/theme/ZoomableImage.js";
# First things first
# 1.0 - A new chapter for Langflow
**Thank you all for being part of the Langflow community**. The journey so far has been amazing and we are happy to have you with us.
<ZoomableImage
alt="1.0"
sources={{
light: "/img/langflow-1-0.png",
dark: "/img/langflow-1-0.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
We have some exciting news to share with you. Langflow is changing, and we want to tell you all about it.
## First things first
## Where have we been?
**Thank you all for being part of the Langflow community**. The journey so far has been amazing, and we are thrilled to have you with us.
We spent the last few months working on a new version of Langflow. We wanted to make it more powerful, more flexible, and easier to use.
We're moving from version 0.6 straight to 1.0 (preview). This is a big change, and we want to explain why we're doing it and what it means for you.
We have some exciting news to share with you. Langflow is evolving, and we want to tell you all about it!
## Why?
## What's new?
In the past year, we learned a lot from the community and our users. We saw the potential of Langflow and the need for a more powerful and flexible tool for building conversational AI applications (and beyond).
We realized that Langflow was hiding things from you that would really help you build better and more complex conversational AI applications. So we decided to make a big change.
In the past year, we learned a lot from the community and our users. We saw the potential of Langflow and the need for a visual, interactive platform for building conversational AI applications (and beyond). You thought us the importance of a platform that is easy to use, but also powerful and controllable, and that made clear to us how Langflow's transparency could be improved.
## The only way to go is forward
Below are some of the new features we included to make that happen!
From all the people we talked to, we learned that the most important thing for (most of) them is to have a tool that is easy to use, but also powerful and controllable. They also told us that Langflow's transparency could be improved.
### Same Component, Multiple Outputs
In those points, we saw an opportunity to make Langflow much more powerful and flexible, while also making it easier to use and understand.
Components can now have more than a single output, allowing for unique flexibility in creating complex flows. The game-changer is output routing — it allows for so many new capabilities it’s almost silly to describe!
One key change you'll notice is that projects now require you to define Inputs and Outputs.
This is a big change, but it's also a big improvement.
It allows you to define the structure of your conversation and the data that flows through it.
This makes it easier to understand and control your conversation.
1. Branch to one or more subsequent components;
2. Apply logic operations like if/else and exploit decision-making;
3. Create classification models that choose between paths;
4. Enable the development of agent architectures from scratch;
5. Build an orchestrator that routes between agents.
This change comes with a new way of visualizing your projects. Before 1.0 you would connect Components to ultimately build one final Component that was processed behind the scenes.
Now, each step of the process is defined by you, is visible on the canvas, and can be monitored and controlled by you. This makes it so that Composition is now just another way of building in Langflow. **Now data flows through your project more transparently**.
<ZoomableImage
alt="Multiple Outputs"
sources={{
light: "/img/multiple_outputs.webp",
dark: "/img/multiple_outputs.webp",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
The caveat is existing projects may need some new Components to get them back to their full functionality.
[We've made this as easy as possible](../migration/compatibility), and there will be improvements to it as we get feedback in our Discord server and on GitHub.
### Flow + Composition
## Custom Interactions
One key change you'll notice is that projects now require you to define **Inputs** and **Outputs**. They allow you to define the structure of your conversation and how data flows through it. This change comes with a new way of visualizing your projects.
The moment we decided to make this change, we saw the potential to make Langflow even more yours.
By having a clear definition of Inputs and Outputs, we could build the experience around that which led us to create the **Playground**.
Before 1.0 you would connect components to ultimately build one final component that was processed behind the scenes. Now, each step of the process is defined by you, is visible on the workspace, and can be monitored and controlled.
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.
This makes it so that composition is now just **another way** of building in Langflow and **data flows through your project more transparently**. This means that the easy stuff is *really* easy and the complex parts are still possible!
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/inputs-and-outputs), rename that to "Prompt Result" and see the output of your Prompt in the Playground.
- **Flow:** Data is processed by one component and then passed to the next component in line for immediate execution.
- **Composition**: Allows components to not only forward data but also share states for modular building.
{/* Add image here of the described above */}
For example, a flow can sequentially process text, and after a few steps, trigger an agent. It can access functions that wait to be called or to respond. This blend of flow and composition brings an unprecedented level of flexibility and control to data workflows in LLM-based apps and agents that use multiple models and APIs working together to achieve tasks.
This is just one example of how the Playground can help you build and debug your projects.
<ZoomableImage
alt="Flow + Composition"
sources={{
light: "/img/flow-composition.webp",
dark: "/img/flow-composition.webp",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
We have many planned features for the Playground, and we're excited to see how you use it and what you think of it.
### Memory Management
## An easier start
Langflow 1.0 natively allows every chat message to be stored, and a single flow can have multiple memory sessions. This enables you to create multiple “memories” for agents to store and recall specific information as needed.
The experience for the first-time user is also something we wanted to improve.
You can edit and remove previous messages to inspect and validate a model’s response behavior. Control, explore, and manage conversation histories to get your models acting just right.
Meet the new and improved **New Project** screen. It's now easier to start a new project, and you can choose from a list of starter projects to get you started.
<ZoomableImage
alt="Playground"
sources={{
light: "/img/playground.png",
dark: "/img/playground.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
{/* Add new project image */}
### Component Freeze 🥶
We wanted to create start projects that would help you learn about new features and also give you a head start on your projects.
Component output freezing is back in Langflow, and it’s cooler than ever!
Once a component runs, you can now lock its previous output state to prevent it from re-running.
Avoid spending extra tokens and remove repetition when output should be constant — plus it's great for debugging and prototyping!
<ZoomableImage
alt="Component Freeze"
sources={{
light: "/img/component-freeze.jpeg",
dark: "/img/component-freeze.jpeg",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
### Output Preview
Each component now includes an output visualizer that opens a pop-up screen, allowing you to easily inspect and monitor transmissions between components. It provides instant feedback on your workflows, letting you see results as they are processed. 🔍
<ZoomableImage
alt="Output Preview"
sources={{
light: "/img/output-preview.gif",
dark: "/img/output-preview.gif",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
### Inputs and Outputs Handling
Inputs and outputs finally make more sense to us, and hopefully to you too.
We’re proposing Langflow-native types to keep things consistent, but not limited to use any Python type. For instance, a Chat Input component sends out what we call a Message object (text + metadata like date, time, and sender), but maybe you want to introduce external types from your favorite Python package? Go wild. Each native type will have their own visualization modes and will evolve according to new integrations added.
### Custom Endpoint Name
Now you can pick a custom name for your endpoint used to call your flow from the API.
<ZoomableImage
alt="Custom Endpoint Name"
sources={{
light: "/img/custom-endpoint.webp",
dark: "/img/custom-endpoint.webp",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
### Logs & Monitoring
A new logs page has been added! Now, both component executions and message history from the chat can be inspected in an interactive table. This will make it easier to debug, inspect, and manage messages passing through components.
<ZoomableImage
alt="Logs and Monitoring"
sources={{
light: "img/logs-monitoring.webp",
dark: "img/logs-monitoring.webp",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
### Folders 📁
We introduced folders on the home page to help categorize flows and components. Create, remove and edit them to keep your work organized.
### Playground
By having a clear definition of Inputs and Outputs, we could build the experience around that, which led us to create the Playground. When building a project, testing and debugging are crucial. The Playground is an interface 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, rename that to "Prompt Result," and see the output of your Prompt in the Playground. We have many planned features for the Playground, and we're excited to see how you'll explore it!
### Multi-Modal
Langflow is now multi-modal! It can now handle images and more soon!
<ZoomableImage
alt="Multi Modal"
sources={{
light: "/img/multi-modal.png",
dark: "/img/multi-modal.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
We’ve also improved project organization, global variables and overall settings, added Python 3.12 compatibility, keyboard shortcuts and a lot of new and fun experimental components!
## An Easier Start
The experience for first-time users is something we wanted to improve. For that we created a couple of Starter Projects. It's now much easier to start a new project, and you can choose from a list of starter projects to get you going.
For now, we have:
- **[Basic Prompting (Hello, World)](/starter-projects/basic-prompting)**: A simple flow that shows you how to use the Prompt Component and how to talk like a pirate.
- **[Vector Store RAG](/tutorials/rag-with-astradb)**: A flow that shows you how to ingest data into a Vector Store and then use it to run a RAG application.
- **[Memory Chatbot](/starter-projects/memory-chatbot)**: This one shows you how to create a simple chatbot that can remember things about the user.
- **[Document QA](/starter-projects/document-qa)**: This flow shows you how to build a simple flow that helps you get answers about a document.
- **[Blog Writer](/starter-projects/blog-writer)**: Shows you how you can expand on the Prompt variables and be creative about what inputs you add to it.
- **Basic Prompting (Hello, World)**: Learn the basics of a Prompt Component.
- **Vector Store RAG**: Ingest data into a Vector Store and then use it to run a RAG application.
- **Memory Chatbot**: Create a simple chatbot that can remember things about the user.
- **Document QA**: Build a simple flow that helps you get answers about a document.
- **Blog Writer**: Expand on the Prompt variables and be creative about what inputs you add to it.
As always, your feedback is invaluable, so please let us know what you think of the new starter projects and what you would like to see in the future.
Please let us know what other starter projects you would like to see in the future!
## Less is more
---
We added many new Components to Langflow and updated some of the existing ones, and we will deprecate some of them.
## What's Next?
The idea is that Langflow has evolved, and we want to make sure that the Components you use are the best they can be.
Some of them don't work well with the others, and some of them are just not needed anymore.
Langflow has gone through a big change, and we are excited to see how you use it and what you think of it. We plan to add more types of Input and Output like Image and Audio, and we also plan to add more Components to help you build more complex projects.
We are working on a list of Components that will be deprecated.
In the preview stages of 1.0, we will have a smaller list of Components so that we make sure that the ones we have are the best they can be.
Regardless, community feedback is very important in this matter, so please let us know what you think of the new Components and which ones you miss.
We are excited to see the community embracing Langflow as their number one AI builder and eagerly wait to see what new inspiring projects will come out of this release! A big thanks to everyone who's supporting or being part of this community in any way. ✨
We are aiming at having a more stable and reliable set of Components that helps you get quickly to useful results.
This also means that your contributions in the [Langflow Store](https://langflow.store) and throughout the community are more important than ever.
Sincerely,
## What's next?
Langflow went through a big change, and we are excited to see how you use it and what you think of it.
We plan to add more types of Input and Output like Image and Audio, and we also plan to add more Components to help you build more complex projects.
We also have some experimental features like a State Management System (so cool!) and a new way of building Grouped Components that we are excited to show you.
## Reach out
One last time, we want to thank you for being part of the Langflow community. Your feedback is invaluable, and we want to hear from you.
**The Langflow Team 🚀**

7
docs/docusaurus.config.js
View file

@ -122,13 +122,6 @@ module.exports = {
/* Respect user preferences, such as low light mode in the evening */
respectPrefersColorScheme: true,
},
announcementBar: {
content:
'⭐️ If you like ⛓️Langflow, star it on <a target="_blank" rel="noopener noreferrer" href="https://github.com/langflow-ai/langflow">GitHub</a>! ⭐️',
backgroundColor: "#E8EBF1", //Mustard Yellow #D19900 #D4B20B - Salmon #E9967A
textColor: "#1C1E21",
isCloseable: false,
},
zoom: {
selector: ".markdown :not(a) > img:not(.no-zoom)",
background: {

339
docs/package-lock.json generated
View file

@ -2571,6 +2571,343 @@
"react-dom": "^18.0.0"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/@docusaurus/core": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-3.2.0.tgz",
"integrity": "sha512-WTO6vW4404nhTmK9NL+95nd13I1JveFwZ8iOBYxb4xt+N2S3KzY+mm+1YtWw2vV37FbYfH+w+KrlrRaWuy5Hzw==",
"dependencies": {
"@babel/core": "^7.23.3",
"@babel/generator": "^7.23.3",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.22.9",
"@babel/preset-env": "^7.22.9",
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
"@babel/runtime": "^7.22.6",
"@babel/runtime-corejs3": "^7.22.6",
"@babel/traverse": "^7.22.8",
"@docusaurus/cssnano-preset": "3.2.0",
"@docusaurus/logger": "3.2.0",
"@docusaurus/mdx-loader": "3.2.0",
"@docusaurus/react-loadable": "5.5.2",
"@docusaurus/utils": "3.2.0",
"@docusaurus/utils-common": "3.2.0",
"@docusaurus/utils-validation": "3.2.0",
"@svgr/webpack": "^6.5.1",
"autoprefixer": "^10.4.14",
"babel-loader": "^9.1.3",
"babel-plugin-dynamic-import-node": "^2.3.3",
"boxen": "^6.2.1",
"chalk": "^4.1.2",
"chokidar": "^3.5.3",
"clean-css": "^5.3.2",
"cli-table3": "^0.6.3",
"combine-promises": "^1.1.0",
"commander": "^5.1.0",
"copy-webpack-plugin": "^11.0.0",
"core-js": "^3.31.1",
"css-loader": "^6.8.1",
"css-minimizer-webpack-plugin": "^4.2.2",
"cssnano": "^5.1.15",
"del": "^6.1.1",
"detect-port": "^1.5.1",
"escape-html": "^1.0.3",
"eta": "^2.2.0",
"eval": "^0.1.8",
"file-loader": "^6.2.0",
"fs-extra": "^11.1.1",
"html-minifier-terser": "^7.2.0",
"html-tags": "^3.3.1",
"html-webpack-plugin": "^5.5.3",
"leven": "^3.1.0",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "^2.7.6",
"p-map": "^4.0.0",
"postcss": "^8.4.26",
"postcss-loader": "^7.3.3",
"prompts": "^2.4.2",
"react-dev-utils": "^12.0.1",
"react-helmet-async": "^1.3.0",
"react-loadable": "npm:@docusaurus/react-loadable@5.5.2",
"react-loadable-ssr-addon-v5-slorber": "^1.0.1",
"react-router": "^5.3.4",
"react-router-config": "^5.1.1",
"react-router-dom": "^5.3.4",
"rtl-detect": "^1.0.4",
"semver": "^7.5.4",
"serve-handler": "^6.1.5",
"shelljs": "^0.8.5",
"terser-webpack-plugin": "^5.3.9",
"tslib": "^2.6.0",
"update-notifier": "^6.0.2",
"url-loader": "^4.1.1",
"webpack": "^5.88.1",
"webpack-bundle-analyzer": "^4.9.0",
"webpack-dev-server": "^4.15.1",
"webpack-merge": "^5.9.0",
"webpackbar": "^5.0.2"
},
"bin": {
"docusaurus": "bin/docusaurus.mjs"
},
"engines": {
"node": ">=18.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/@docusaurus/cssnano-preset": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-3.2.0.tgz",
"integrity": "sha512-H88RXGUia7r/VF3XfyoA4kbwgpUZcKsObF6VvwBOP91EdArTf6lnHbJ/x8Ca79KS/zf98qaWyBGzW+5ez58Iyw==",
"dependencies": {
"cssnano-preset-advanced": "^5.3.10",
"postcss": "^8.4.26",
"postcss-sort-media-queries": "^4.4.1",
"tslib": "^2.6.0"
},
"engines": {
"node": ">=18.0"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/@docusaurus/logger": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@docusaurus/logger/-/logger-3.2.0.tgz",
"integrity": "sha512-Z1R1NcOGXZ8CkIJSvjvyxnuDDSlx/+1xlh20iVTw1DZRjonFmI3T3tTgk40YpXyWUYQpIgAoqqPMpuseMMdgRQ==",
"dependencies": {
"chalk": "^4.1.2",
"tslib": "^2.6.0"
},
"engines": {
"node": ">=18.0"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/@docusaurus/mdx-loader": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@docusaurus/mdx-loader/-/mdx-loader-3.2.0.tgz",
"integrity": "sha512-JtkI5o6R/rJSr1Y23cHKz085aBJCvJw3AYHihJ7r+mBX+O8EuQIynG0e6/XpbSCpr7Ino0U50UtxaXcEbFwg9Q==",
"dependencies": {
"@docusaurus/logger": "3.2.0",
"@docusaurus/utils": "3.2.0",
"@docusaurus/utils-validation": "3.2.0",
"@mdx-js/mdx": "^3.0.0",
"@slorber/remark-comment": "^1.0.0",
"escape-html": "^1.0.3",
"estree-util-value-to-estree": "^3.0.1",
"file-loader": "^6.2.0",
"fs-extra": "^11.1.1",
"image-size": "^1.0.2",
"mdast-util-mdx": "^3.0.0",
"mdast-util-to-string": "^4.0.0",
"rehype-raw": "^7.0.0",
"remark-directive": "^3.0.0",
"remark-emoji": "^4.0.0",
"remark-frontmatter": "^5.0.0",
"remark-gfm": "^4.0.0",
"stringify-object": "^3.3.0",
"tslib": "^2.6.0",
"unified": "^11.0.3",
"unist-util-visit": "^5.0.0",
"url-loader": "^4.1.1",
"vfile": "^6.0.1",
"webpack": "^5.88.1"
},
"engines": {
"node": ">=18.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/@docusaurus/types": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@docusaurus/types/-/types-3.2.0.tgz",
"integrity": "sha512-uG3FfTkkkbZIPPNYx6xRfZHKeGyRd/inIT1cqvYt1FobFLd+7WhRXrSBqwJ9JajJjEAjNioRMVFgGofGf/Wdww==",
"dependencies": {
"@mdx-js/mdx": "^3.0.0",
"@types/history": "^4.7.11",
"@types/react": "*",
"commander": "^5.1.0",
"joi": "^17.9.2",
"react-helmet-async": "^1.3.0",
"utility-types": "^3.10.0",
"webpack": "^5.88.1",
"webpack-merge": "^5.9.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/@docusaurus/utils": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@docusaurus/utils/-/utils-3.2.0.tgz",
"integrity": "sha512-3rgrE7iL60yV2JQivlcoxUNNTK2APmn+OHLUmTvX2pueIM8DEOCEFHpJO4MiWjFO7V/Wq3iA/W1M03JnjdugVw==",
"dependencies": {
"@docusaurus/logger": "3.2.0",
"@docusaurus/utils-common": "3.2.0",
"@svgr/webpack": "^6.5.1",
"escape-string-regexp": "^4.0.0",
"file-loader": "^6.2.0",
"fs-extra": "^11.1.1",
"github-slugger": "^1.5.0",
"globby": "^11.1.0",
"gray-matter": "^4.0.3",
"jiti": "^1.20.0",
"js-yaml": "^4.1.0",
"lodash": "^4.17.21",
"micromatch": "^4.0.5",
"prompts": "^2.4.2",
"resolve-pathname": "^3.0.0",
"shelljs": "^0.8.5",
"tslib": "^2.6.0",
"url-loader": "^4.1.1",
"webpack": "^5.88.1"
},
"engines": {
"node": ">=18.0"
},
"peerDependencies": {
"@docusaurus/types": "*"
},
"peerDependenciesMeta": {
"@docusaurus/types": {
"optional": true
}
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/@docusaurus/utils-common": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@docusaurus/utils-common/-/utils-common-3.2.0.tgz",
"integrity": "sha512-WEQT5L2lT/tBQgDRgeZQAIi9YJBrwEILb1BuObQn1St3T/4K1gx5fWwOT8qdLOov296XLd1FQg9Ywu27aE9svw==",
"dependencies": {
"tslib": "^2.6.0"
},
"engines": {
"node": ">=18.0"
},
"peerDependencies": {
"@docusaurus/types": "*"
},
"peerDependenciesMeta": {
"@docusaurus/types": {
"optional": true
}
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/@docusaurus/utils-validation": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@docusaurus/utils-validation/-/utils-validation-3.2.0.tgz",
"integrity": "sha512-rCzMTqwNrBrEOyU8EaD1fYWdig4TDhfj+YLqB8DY68VUAqSIgbY+yshpqFKB0bznFYNBJbn0bGpvVuImQOa/vA==",
"dependencies": {
"@docusaurus/logger": "3.2.0",
"@docusaurus/utils": "3.2.0",
"@docusaurus/utils-common": "3.2.0",
"joi": "^17.9.2",
"js-yaml": "^4.1.0",
"tslib": "^2.6.0"
},
"engines": {
"node": ">=18.0"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"engines": {
"node": ">=8"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"dependencies": {
"yallist": "^4.0.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/semver": {
"version": "7.6.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
"integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
"dependencies": {
"lru-cache": "^6.0.0"
},
"bin": {
"semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/@docusaurus/plugin-google-gtag/node_modules/yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
},
"node_modules/@docusaurus/plugin-google-tag-manager": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.4.0.tgz",
@ -22888,4 +23225,4 @@
}
}
}
}
}

99
docs/sidebars.js
View file

@ -14,8 +14,8 @@ module.exports = {
"index",
"getting-started/install-langflow",
"getting-started/quickstart",
"getting-started/canvas",
"migration/possible-installation-issues",
"getting-started/workspace",
"getting-started/possible-installation-issues",
"getting-started/new-to-llms",
],
},
@ -40,6 +40,9 @@ module.exports = {
"administration/login",
"administration/cli",
"administration/playground",
"administration/memories",
"administration/logs",
"administration/collections-projects",
"administration/settings",
"administration/global-env",
"administration/chat-widget",
@ -47,7 +50,7 @@ module.exports = {
},
{
type: "category",
label: "Core Components",
label: "Components",
collapsed: false,
items: [
"components/inputs-and-outputs",
@ -60,46 +63,48 @@ module.exports = {
"components/custom",
],
},
{
type: "category",
label: "Extended Components",
collapsed: true,
items: [
"components/agents",
"components/chains",
"components/experimental",
"components/utilities",
"components/model_specs",
"components/retrievers",
"components/text-splitters",
"components/toolkits",
"components/tools",
],
},
{
type: "category",
label: "Example Components",
collapsed: true,
items: [
"examples/chat-memory",
"examples/combine-text",
"examples/create-record",
"examples/pass",
"examples/store-message",
"examples/sub-flow",
"examples/text-operator",
],
},
{
type: "category",
label: "Migration",
collapsed: false,
items: [
"migration/possible-installation-issues",
"migration/migrating-to-one-point-zero",
"migration/compatibility",
],
},
// RSN - Check if we need this
// {
// type: "category",
// label: "Extended Components",
// collapsed: true,
// items: [
// "components/agents",
// "components/chains",
// "components/experimental",
// "components/utilities",
// "components/model_specs",
// "components/retrievers",
// "components/text-splitters",
// "components/toolkits",
// "components/tools",
// ],
// },
// RSN - Check if we need this
// {
// type: "category",
// label: "Example Components",
// collapsed: true,
// items: [
// "examples/chat-memory",
// "examples/combine-text",
// "examples/create-record",
// "examples/pass",
// "examples/store-message",
// "examples/sub-flow",
// "examples/text-operator",
// ],
// },
// RSN - Check if we need this
// {
// type: "category",
// label: "Migration",
// collapsed: false,
// items: [
// "migration/migrating-to-one-point-zero",
// "migration/compatibility",
// ],
// },
{
type: "category",
label: "Tutorials",
@ -139,6 +144,7 @@ module.exports = {
label: "Integrations",
collapsed: false,
items: [
"integrations/langsmith/intro",
{
type: "category",
label: "Notion",
@ -155,6 +161,13 @@ module.exports = {
"integrations/notion/page-content-viewer",
],
},
// {
// type: "category",
// label: "LangSmith",
// items: [
// ,
// ],
// },
],
},
],

4
docs/src/css/custom.css
View file

@ -240,3 +240,7 @@ body {
.ch-scrollycoding-step-content {
min-height: 70px;
}
.theme-doc-sidebar-item-category.theme-doc-sidebar-item-category-level-2.menu__list-item:not(:first-child) {
margin-top: 0.25rem!important;
}

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