mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-24 23:04:14 +08:00
130 lines
38 KiB
HTML
130 lines
38 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Concepts/concepts-overview" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.7.0">
|
||
<title data-rh="true">Langflow overview | Langflow Documentation</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://docs.langflow.org/concepts-overview"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Langflow overview | Langflow Documentation"><meta data-rh="true" name="description" content="This page explores the fundamental building blocks of Langflow, beginning with the question, "What is a flow?""><meta data-rh="true" property="og:description" content="This page explores the fundamental building blocks of Langflow, beginning with the question, "What is a flow?""><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.langflow.org/concepts-overview"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/concepts-overview" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/concepts-overview" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://UZK6BDPCVY-dsn.algolia.net" crossorigin="anonymous"><link rel="preconnect" href="https://www.google-analytics.com">
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SLQFLQ3KPT"></script>
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-SLQFLQ3KPT",{})</script>
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="search" type="application/opensearchdescription+xml" title="Langflow Documentation" href="/opensearch.xml">
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@550;600&display=swap">
|
||
<script>!function(){window.semaphore=window.semaphore||[],window.ketch=function(){window.semaphore.push(arguments)};var e=document.createElement("script");e.type="text/javascript",e.src="https://global.ketchcdn.com/web/v3/config/datastax/langflow_org_web/boot.js",e.defer=e.async=!0,document.getElementsByTagName("head")[0].appendChild(e)}()</script>
|
||
<script defer="true">!function(){const e=e=>{if(window.gtag&&e.purposes&&"analytics"in e.purposes&&"targeted_advertising"in e.purposes){const n=!0===e.purposes.analytics?"granted":"denied",t=!0===e.purposes.targeted_advertising?"granted":"denied",a={analytics_storage:n,ad_personalization:t,ad_storage:t,ad_user_data:t};window.gtag("consent","update",a)}};window.ketch&&window.ketch("on","consent",e)}()</script><link rel="stylesheet" href="/assets/css/styles.cf9a4109.css">
|
||
<script src="/assets/js/runtime~main.9dabb8d5.js" defer="defer"></script>
|
||
<script src="/assets/js/main.6f40caea.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_m1mJ"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/langflow-logo-black.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/langflow-logo-white.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/langflow-ai/langflow" target="_blank" class="navbar__item navbar__link header-github-link"></a><a href="https://twitter.com/langflow_ai" target="_blank" class="navbar__item navbar__link header-twitter-link"></a><a href="https://discord.gg/EqksyE2EX9" target="_blank" class="navbar__item navbar__link header-discord-link"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd sidebarWithHideableNavbar_wUlq"><a tabindex="-1" class="sidebarLogo_isFc" href="/"><img src="/img/langflow-logo-black.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/langflow-logo-white.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"></a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/">Welcome to Langflow</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/get-started-installation">Get started</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/starter-projects-basic-prompting">Starter projects</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/blog-writer">Sample flows</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/concepts-overview">Concepts</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/concepts-overview">Langflow overview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-playground">Playground</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-components">Components</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-flows">Flows</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-objects">Langflow objects</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-publish">Publish flows</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/mcp-server">Model Context Protocol (MCP) server</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-file-management">Manage files</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-voice-mode">Voice mode</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/components-agents">Components</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/agents-overview">Agents</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/configuration-api-keys">Configuration</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/develop-overview">Develop</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/deployment-overview">Deployment</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/api">API reference</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/integrations-apify">Integrations</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/contributing-community">Contributing</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a href="https://github.com/langflow-ai/langflow/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false">Changelog</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/luna-for-langflow">Support</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 sidebar-ad">
|
||
<a href="https://astra.datastax.com/signup?type=langflow" target="_blank" class="menu__link">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>
|
||
<div class="sidebar-ad-text-container">
|
||
<span class="sidebar-ad-text">Use Langflow in the cloud</span>
|
||
<span class="sidebar-ad-text sidebar-ad-text-gradient">Sign up for DataStax Langflow</span>
|
||
</div>
|
||
</a>
|
||
</li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Concepts</span><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Langflow overview</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Langflow overview</h1></header><p>This page explores the fundamental building blocks of Langflow, beginning with the question, <strong>"What is a flow?"</strong></p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="what-is-a-flow">What is a flow?<a href="#what-is-a-flow" class="hash-link" aria-label="Direct link to What is a flow?" title="Direct link to What is a flow?"></a></h2>
|
||
<p>A <strong>flow</strong> is an application. It receives input, processes it, and produces output.</p>
|
||
<p>Flows are created in the <strong>workspace</strong> with components dragged from the components sidebar.</p>
|
||
<p><img decoding="async" loading="lazy" alt="Basic prompting flow within in the workspace" src="/assets/images/workspace-basic-prompting-75b4cf0952a9f123f0360756d72a4826.png" width="4000" height="2200" class="img_ev3q"></p>
|
||
<p>A flow can be as simple as the <a href="/get-started-quickstart">basic prompting flow</a>, which creates an OpenAI chatbot with four components.</p>
|
||
<ul>
|
||
<li>Each component in a flow is a <strong>node</strong> that performs a specific task, like an AI model or a data source.</li>
|
||
<li>Each component has a <strong>Configuration</strong> menu. Click the <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code" aria-hidden="true"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg> <strong>Code</strong> button on a component to see its underlying Python code.</li>
|
||
<li>Components are connected with <strong>edges</strong> to form flows.</li>
|
||
</ul>
|
||
<p>If you're familiar with <a href="https://reactflow.dev/learn" target="_blank" rel="noopener noreferrer">React Flow</a>, a <strong>flow</strong> is a node-based application, a <strong>component</strong> is a node, and the connections between components are <strong>edges</strong>.</p>
|
||
<p>When a flow is run, Langflow builds a Directed Acyclic Graph (DAG) graph object from the nodes (components) and edges (connections between components), with the nodes sorted to determine the order of execution. The graph build calls the individual components' <code>def_build</code> functions to validate and prepare the nodes. This graph is then processed in dependency order. Each node is built and executed sequentially, with results from each built node being passed to nodes that are dependent on the previous node's results.</p>
|
||
<p>Flows are stored on local disk at the following default locations:</p>
|
||
<ul>
|
||
<li><strong>Linux and WSL</strong>: <code>home/<username>/.cache/langflow/</code></li>
|
||
<li><strong>macOS</strong>: <code>/Users/<username>/Library/Caches/langflow/</code></li>
|
||
</ul>
|
||
<p>The flow storage location can be customized with the <a href="/environment-variables#LANGFLOW_CONFIG_DIR">LANGFLOW_CONFIG_DIR</a> environment variable.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="find-your-way-around">Find your way around<a href="#find-your-way-around" class="hash-link" aria-label="Direct link to Find your way around" title="Direct link to Find your way around"></a></h2>
|
||
<p>If you're new to Langflow, it's OK to feel a bit lost at first. We’ll take you on a tour, so you can orient yourself and start creating applications quickly.</p>
|
||
<p>Langflow has four distinct regions: the <a href="#workspace">workspace</a> is the main area where you build your flows. The components sidebar is on the left, and lists the available <a href="#components">components</a>. The <a href="#playground">playground</a> and <a href="#publish-pane">publish pane</a> are available in the upper right corner.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="workspace">Workspace<a href="#workspace" class="hash-link" aria-label="Direct link to Workspace" title="Direct link to Workspace"></a></h2>
|
||
<p>The <strong>workspace</strong> is where you create AI applications by connecting and running components in flows.</p>
|
||
<ul>
|
||
<li>Click and drag the workspace to move it left, right, up, and down.</li>
|
||
<li>Scroll up and down to zoom in and out of the workspace, or use the <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zoom-in" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line><line x1="11" x2="11" y1="8" y2="14"></line><line x1="8" x2="14" y1="11" y2="11"></line></svg> <strong>Zoom In</strong> and <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zoom-out" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line><line x1="8" x2="14" y1="11" y2="11"></line></svg> <strong>Zoom Out</strong> controls.</li>
|
||
<li>Click <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3"></path><path d="M21 8V5a2 2 0 0 0-2-2h-3"></path><path d="M3 16v3a2 2 0 0 0 2 2h3"></path><path d="M16 21h3a2 2 0 0 0 2-2v-3"></path></svg> <strong>Fit To Zoom</strong> to center the workspace on the current flow.</li>
|
||
<li>Click <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock-open" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg> <strong>Lock</strong> to lock the workspace in place, preventing accidental movement.</li>
|
||
<li>Click <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sticky-note" aria-hidden="true"><path d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z"></path><path d="M15 3v4a2 2 0 0 0 2 2h4"></path></svg> <strong>Add Note</strong> to add a note to your flow, similar to commenting in code.</li>
|
||
</ul>
|
||
<p><img decoding="async" loading="lazy" alt="Empty langflow workspace" src="/assets/images/workspace-d3eac7ad24147e7f962cf00391eaa66a.png" width="4000" height="2184" class="img_ev3q"></p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="components">Components<a href="#components" class="hash-link" aria-label="Direct link to Components" title="Direct link to Components"></a></h2>
|
||
<p>A <strong>component</strong> is a single building block within a flow and consists of inputs, outputs, and parameters that define its functionality.</p>
|
||
<p>To add a component to your flow, drag it from the sidebar onto the workspace.</p>
|
||
<p>To connect components, drag a line from the output handle (⚪) of one component to the input handle of another.</p>
|
||
<p>For more information, see <a href="/concepts-components">Components overview</a>.</p>
|
||
<img src="/img/prompt-component.png" alt="Prompt component" style="display:block;margin:auto;width:300px">
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="playground">Playground<a href="#playground" class="hash-link" aria-label="Direct link to Playground" title="Direct link to Playground"></a></h2>
|
||
<p>The <strong>Playground</strong> executes the current flow in the workspace.</p>
|
||
<p>Chat with your flow, view inputs and outputs, and modify your AI's memories to tune your responses in real time.</p>
|
||
<p>Either the <strong>Chat Input</strong> or <strong>Chat Output</strong> component can be opened in the <strong>Playground</strong> and tested in real time.</p>
|
||
<p>For more information, see the <a href="/concepts-playground">Playground</a>.</p>
|
||
<p><img decoding="async" loading="lazy" src="/assets/images/playground-b2c623fb6849024570bc9bd5285309f5.png" width="3244" height="1776" class="img_ev3q"></p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="publish-pane">Publish pane<a href="#publish-pane" class="hash-link" aria-label="Direct link to Publish pane" title="Direct link to Publish pane"></a></h2>
|
||
<p>The <strong>Publish</strong> pane provides code templates to integrate your flows into external applications.</p>
|
||
<p>For more information, see the <a href="/concepts-publish">Publish pane</a>.</p>
|
||
<p><img decoding="async" loading="lazy" src="/assets/images/api-pane-4813da0217ca7320b12d4d994a9ad921.png" width="2206" height="1278" class="img_ev3q"></p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="view-logs">View logs<a href="#view-logs" class="hash-link" aria-label="Direct link to View logs" title="Direct link to View logs"></a></h2>
|
||
<p>The <strong>Logs</strong> pane provides a detailed record of all component executions within a workspace.</p>
|
||
<p>To access the <strong>Logs</strong> pane, click your <strong>Flow Name</strong>, and then select <strong>Logs</strong>.</p>
|
||
<p><img decoding="async" loading="lazy" src="/assets/images/logs-6ae22cc6a87b128cbc0c7f4559b47f10.png" width="3200" height="1716" class="img_ev3q"></p>
|
||
<p>Langflow stores logs at the location specified in the <code>LANGFLOW_CONFIG_DIR</code> environment variable.</p>
|
||
<p>This directory's default location depends on your operating system.</p>
|
||
<ul>
|
||
<li><strong>Linux and WSL</strong>: <code>~/.cache/langflow/</code></li>
|
||
<li><strong>macOS</strong>: <code>/Users/<username>/Library/Caches/langflow/</code></li>
|
||
<li><strong>Windows</strong>: <code>%LOCALAPPDATA%\langflow\langflow\Cache</code></li>
|
||
</ul>
|
||
<p>To modify the location of your log file:</p>
|
||
<ol>
|
||
<li>Add <code>LANGFLOW_LOG_FILE=path/to/logfile.log</code> in your <code>.env</code> file.</li>
|
||
<li>To start Langflow with the values from your <code>.env</code> file, start Langflow with <code>uv run langflow run --env-file .env</code>.</li>
|
||
</ol>
|
||
<p>An example <code>.env</code> file is available in the <a href="https://github.com/langflow-ai/langflow/blob/main/.env.example" target="_blank" rel="noopener noreferrer">project repository</a>.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="projects">Projects<a href="#projects" class="hash-link" aria-label="Direct link to Projects" title="Direct link to Projects"></a></h2>
|
||
<p>The <strong>Projects</strong> page displays all the flows you've created in the Langflow workspace.</p>
|
||
<p><img decoding="async" loading="lazy" src="/assets/images/my-projects-ecb47861c2d88557320b768d0c17b747.png" width="4000" height="2186" class="img_ev3q"></p>
|
||
<p><strong>Starter Project</strong> is the default space where all new projects are initially stored.
|
||
To create a new project, click <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg> <strong>Create new project</strong>.</p>
|
||
<p>To upload a flow to your project, click <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" x2="12" y1="3" y2="15"></line></svg> <strong>Upload a flow</strong>.</p>
|
||
<p>To delete a flow from your project, click a flow's checkbox to select it, and then click <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2" aria-hidden="true"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg> <strong>Delete</strong>.
|
||
You can select multiple flows in a single action.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="file-management">File management<a href="#file-management" class="hash-link" aria-label="Direct link to File management" title="Direct link to File management"></a></h2>
|
||
<p>Upload, store, and manage files in Langflow's <strong>File management</strong> system.</p>
|
||
<p>For more on managing your files, see <a href="/concepts-file-management">Manage files</a>.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="options-menu">Options menu<a href="#options-menu" class="hash-link" aria-label="Direct link to Options menu" title="Direct link to Options menu"></a></h2>
|
||
<p>The dropdown menu labeled with the project name offers several management and customization options for the current flow in the Langflow workspace:</p>
|
||
<ul>
|
||
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg> <strong>New</strong>: Create a new flow from scratch.</li>
|
||
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg> <strong>Edit Details</strong>: Adjust settings specific to the current flow, such as its name, description, and endpoint name.</li>
|
||
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scroll-text" aria-hidden="true"><path d="M15 12h-5"></path><path d="M15 8h-5"></path><path d="M19 17V5a2 2 0 0 0-2-2H4"></path><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"></path></svg> <strong>Logs</strong>: View logs for the current project, including execution history, errors, and other runtime events.</li>
|
||
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-up" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M12 12v6"></path><path d="m15 15-3-3-3 3"></path></svg> <strong>Import</strong>: Import a flow or component from a JSON file into the workspace.</li>
|
||
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-down" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M12 18v-6"></path><path d="m9 15 3 3 3-3"></path></svg> <strong>Export</strong>: Export the current flow as a JSON file.</li>
|
||
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo" aria-hidden="true"><path d="M3 7v6h6"></path><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"></path></svg> <strong>Undo</strong>: Revert the last action taken in the project. Keyboard shortcut: <kbd>Control+Z</kbd> (or <kbd>Command+Z</kbd> on macOS).</li>
|
||
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo" aria-hidden="true"><path d="M21 7v6h-6"></path><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"></path></svg> <strong>Redo</strong>: Reapply a previously undone action. Keyboard shortcut: <kbd>Control+Y</kbd> (or <kbd>Command+Y</kbd> on macOS).</li>
|
||
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-ccw" aria-hidden="true"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg> <strong>Refresh All</strong>: Refresh all components and delete cache.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="settings">Settings<a href="#settings" class="hash-link" aria-label="Direct link to Settings" title="Direct link to Settings"></a></h2>
|
||
<p>Click <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg> <strong>Settings</strong> to access <strong>Global variables</strong>, <strong>Langflow API keys</strong>, <strong>Shortcuts</strong>, and <strong>Messages</strong>.</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/travel-planning-agent"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Travel planning agent</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/concepts-playground"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Playground</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#what-is-a-flow" class="table-of-contents__link toc-highlight">What is a flow?</a></li><li><a href="#find-your-way-around" class="table-of-contents__link toc-highlight">Find your way around</a></li><li><a href="#workspace" class="table-of-contents__link toc-highlight">Workspace</a></li><li><a href="#components" class="table-of-contents__link toc-highlight">Components</a></li><li><a href="#playground" class="table-of-contents__link toc-highlight">Playground</a></li><li><a href="#publish-pane" class="table-of-contents__link toc-highlight">Publish pane</a></li><li><a href="#view-logs" class="table-of-contents__link toc-highlight">View logs</a></li><li><a href="#projects" class="table-of-contents__link toc-highlight">Projects</a></li><li><a href="#file-management" class="table-of-contents__link toc-highlight">File management</a></li><li><a href="#options-menu" class="table-of-contents__link toc-highlight">Options menu</a></li><li><a href="#settings" class="table-of-contents__link toc-highlight">Settings</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title"></div><ul class="footer__items clean-list"><li class="footer__item"><div class="footer-links">
|
||
<span>© 2025 Langflow</span>
|
||
<span id="preferenceCenterContainer"> · <a href="https://langflow.org/preferences">Manage Privacy Choices</a></span>
|
||
</div></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><img src="/img/langflow-logo-black.svg" alt="Langflow" class="footer__logo themedComponent_mlkZ themedComponent--light_NVdE" width="160" height="40"><img src="/img/langflow-logo-white.svg" alt="Langflow" class="footer__logo themedComponent_mlkZ themedComponent--dark_xIcU" width="160" height="40"></div></div></div></footer><div style="position:fixed;right:20px;bottom:20px;z-index:100;display:flex;align-items:center;gap:10px;cursor:pointer"><div style="background-color:#f6f6f6;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.1)"><img src="/img/langflow-icon-black-transparent.svg" style="width:40px" alt="Search"></div></div></div>
|
||
</body>
|
||
</html> |