Langflow is a powerful tool for building and deploying AI-powered agents and workflows. http://www.langflow.org
Find a file
Lucas Oliveira 6b41460bf2
Fix and Enhance Modal, Button, and Layout Functionality (#2064)
#### Description

This pull request introduces several fixes and enhancements related to
modals, buttons, and layout elements within the application. The changes
improve the user experience by addressing bugs, enhancing functionality,
and refining UI components.

#### Summary of Changes

- **Modals:**
  - Added Submit buttons to every modal, except confirmation modals.
  - Fixed submitting issues on `storeApiKeyModal`.
  - Added a close button when the submit button is present.
  - Fixed padding on `deleteConfirmationModal`.

- **Node and Component Enhancements:**
  - Removed the pencil icon from the node name.
- Made node description editable by clicking once and changed the cursor
type.
  - Changed empty component behavior to open the New Project modal.
  - Fixed the node toolbar to allow moving the nodes.
  - Fixed Endpoint Name labeling.
  - Passed duplicate flow function to the main page.
  - Made folders visually more pleasing.
  - Fixed the tooltip that no longer needs removal of the portal.

- **UI and Layout Adjustments:**
  - Fixed bottom padding on settings pages.
  - Fixed scrolling not working in the global variables dropdown.
  - Disabled accordion when it is empty.
  - Removed shadow from card elements.
  - Added a description column to the advanced tab.
  - Implemented unselect on escape.
- Fixed classes and layout for sidebar buttons, ensuring they don't look
strange and behave consistently.
- Fixed button classes to allow loading indicators and ensure proper
sizing and functionality.
  - Modularized loading on buttons.

- **General Fixes and Improvements:**
  - Changed message of the terminal to "Run Langflow".
- Fixed save functionality to use user-provided API keys instead of
default ones.
- Ensured button components can handle multiple children and look
correct.
  - Added icons to various UI elements.
  - Fixed ID scrolling issue when clicking from Store.
  - Removed extra space caused by an unnecessary div element.
- Returned the loader to default settings and ensured buttons work with
`asChild`.

#### Additional Changes
- Merged the remote-tracking branch `origin/dev` into `fix/minor_bugs`
on multiple occasions to keep the branch up-to-date with the latest
developments.

#### Notes

- Please review the changes related to button classes carefully, as they
impact multiple components.
- Further UI enhancements are planned for the next iteration.
2024-06-05 19:14:32 +02:00
.devcontainer Update Python base image to version 3.10 in devcontainer.json 2024-04-17 11:21:05 -03:00
.github chore: Update Poetry version to 1.8.2 2024-06-05 09:45:10 -03:00
.vscode Add version check and new version notice (#1616) 2024-04-05 16:20:17 -03:00
deploy Update Docker image references to langflowai in GitHub workflows and Docker Compose files (#1793) 2024-04-29 13:38:18 -03:00
docker docker: improve image layout and backend-only/frontend-only images (#2071) 2024-06-05 04:46:14 -07:00
docker_example chore: Update docker volume mount path for langflow-data in pre.docker-compose.yml 2024-05-28 20:46:46 -03:00
docs Fix and Enhance Modal, Button, and Layout Functionality (#2064) 2024-06-05 19:14:32 +02:00
scripts Merge remote-tracking branch 'origin/dev' into fix/minor_bugs 2024-06-02 23:00:27 -03:00
src 🔧 (playwright.config.ts): reduce workers to 1 for CI to avoid resource contention 2024-06-05 10:56:47 -03:00
tests (refactor) Update pytest arguments in Makefile for better test execution (#2063) 2024-06-04 08:59:02 -07:00
.env.example Changes default location for the database and adds the option to use the previous behavior (#1907) 2024-05-15 20:41:01 -03:00
.eslintrc.json 🔧 (.pre-commit-config.yaml): Add eslint@9.1.1 as a dependency and enable autofix for pretty-format-json hook 2024-05-02 19:27:40 -03:00
.gitattributes update attribute 2023-08-24 19:42:05 -03:00
.gitignore Update package versions, workflows, LLMChain and Graph sorting (#1674) 2024-04-11 12:20:56 -03:00
.pre-commit-config.yaml feat: Update pre-commit configuration 2024-05-30 19:13:15 -03:00
CODE_OF_CONDUCT.md Update contact email in CODE_OF_CONDUCT.md and pyproject.toml files 2024-04-18 11:55:40 -03:00
CONTRIBUTING.md Update repository URLs to use langflow-ai instead of logspace-ai (#1642) 2024-04-08 15:36:37 -03:00
eslint.config.js 🔧 (.pre-commit-config.yaml): Add eslint@9.1.1 as a dependency and enable autofix for pretty-format-json hook 2024-05-02 19:27:40 -03:00
LICENSE Update organization name and URLs in configuration files 2024-04-18 11:58:19 -03:00
Makefile (refactor) Update pytest arguments in Makefile for better test execution (#2063) 2024-06-04 08:59:02 -07:00
poetry.lock chore: Bump langflow-base version to 0.0.56 2024-06-05 09:13:42 -03:00
pyproject.toml chore: Bump langflow-base version to 0.0.56 2024-06-05 09:13:42 -03:00
README.md Update README and add Chinese README. 2024-06-05 11:50:57 +08:00
README.zh_CN.md Update Chinese README. 2024-06-05 15:00:18 +08:00
render.yaml refactor: Update Dockerfile and render.yaml for pre-release deployment 2024-06-03 14:05:33 -03:00

Langflow

A visual framework for building multi-agent and RAG applications

Open-source, Python-powered, fully customizable, LLM and vector store agnostic

Docs - Join our Discord - Follow us on X - Live demo

README in English README in Simplified Chinese

Your GIF

📝 Content

📦 Get Started

You can install Langflow with pip:

# 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

Then, run Langflow with:

python -m langflow run

You can also preview Langflow in HuggingFace Spaces. Clone the space using this link to create your own Langflow workspace in minutes.

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

Explore by editing prompt parameters, grouping components into a single high-level component, and building your own Custom Components.

Once youre done, you can export your flow as a JSON file.

Load the flow with:

from langflow.load import run_flow_from_json

results = run_flow_from_json("path/to/flow.json", input_value="Hello, World!")

Deploy

Deploy Langflow on Google Cloud Platform

Follow our step-by-step guide to deploy Langflow on Google Cloud Platform (GCP) using Google Cloud Shell. The guide is available in the Langflow in Google Cloud Platform document.

Alternatively, click the "Open in Cloud Shell" button below to launch Google Cloud Shell, clone the Langflow repository, and start an interactive tutorial that will guide you through the process of setting up the necessary resources and deploying Langflow on your GCP project.

Open in Cloud Shell

Deploy on Railway

Use this template to deploy Langflow 1.0 Preview on Railway:

Deploy 1.0 Preview on Railway

Or this one to deploy Langflow 0.6.x:

Deploy on Railway

Deploy on Render

Deploy to Render

🖥️ Command Line Interface (CLI)

Langflow provides a command-line interface (CLI) for easy management and configuration.

Usage

You can run the Langflow using the following command:

langflow run [OPTIONS]

Each option is detailed below:

  • --help: Displays all available options.
  • --host: Defines the host to bind the server to. Can be set using the LANGFLOW_HOST environment variable. The default is 127.0.0.1.
  • --workers: Sets the number of worker processes. Can be set using the LANGFLOW_WORKERS environment variable. The default is 1.
  • --timeout: Sets the worker timeout in seconds. The default is 60.
  • --port: Sets the port to listen on. Can be set using the LANGFLOW_PORT environment variable. The default is 7860.
  • --env-file: Specifies the path to the .env file containing environment variables. The default is .env.
  • --log-level: Defines the logging level. Can be set using the LANGFLOW_LOG_LEVEL environment variable. The default is critical.
  • --components-path: Specifies the path to the directory containing custom components. Can be set using the LANGFLOW_COMPONENTS_PATH environment variable. The default is langflow/components.
  • --log-file: Specifies the path to the log file. Can be set using the LANGFLOW_LOG_FILE environment variable. The default is logs/langflow.log.
  • --cache: Selects the type of cache to use. Options are InMemoryCache and SQLiteCache. Can be set using the LANGFLOW_LANGCHAIN_CACHE environment variable. The default is SQLiteCache.
  • --dev/--no-dev: Toggles the development mode. The default is no-dev.
  • --path: Specifies the path to the frontend directory containing build files. This option is for development purposes only. Can be set using the LANGFLOW_FRONTEND_PATH environment variable.
  • --open-browser/--no-open-browser: Toggles the option to open the browser after starting the server. Can be set using the LANGFLOW_OPEN_BROWSER environment variable. The default is open-browser.
  • --remove-api-keys/--no-remove-api-keys: Toggles the option to remove API keys from the projects saved in the database. Can be set using the LANGFLOW_REMOVE_API_KEYS environment variable. The default is no-remove-api-keys.
  • --install-completion [bash|zsh|fish|powershell|pwsh]: Installs completion for the specified shell.
  • --show-completion [bash|zsh|fish|powershell|pwsh]: Shows completion for the specified shell, allowing you to copy it or customize the installation.
  • --backend-only: This parameter, with a default value of False, allows running only the backend server without the frontend. It can also be set using the LANGFLOW_BACKEND_ONLY environment variable.
  • --store: This parameter, with a default value of True, enables the store features, use --no-store to deactivate it. It can be configured using the LANGFLOW_STORE environment variable.

These parameters are important for users who need to customize the behavior of Langflow, especially in development or specialized deployment scenarios.

Environment Variables

You can configure many of the CLI options using environment variables. These can be exported in your operating system or added to a .env file and loaded using the --env-file option.

A sample .env file named .env.example is included with the project. Copy this file to a new file named .env and replace the example values with your actual settings. If you're setting values in both your OS and the .env file, the .env settings will take precedence.

👋 Contribute

We welcome contributions from developers of all levels to our open-source project on GitHub. If you'd like to contribute, please check our contributing guidelines and help make Langflow more accessible.


Star History Chart

🌟 Contributors

langflow contributors

📄 License

Langflow is released under the MIT License. See the LICENSE file for details.