mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-25 00:31:49 +08:00
146 lines
32 KiB
HTML
146 lines
32 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-XHC7G628ZP"></script>
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-XHC7G628ZP",{anonymize_ip:!0})</script>
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script>window.dataLayer=window.dataLayer||[]</script>
|
||
<script>!function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-NK5M4ZT8",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer")</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"><link rel="stylesheet" href="/assets/css/styles.b2eb940a.css">
|
||
<script src="/assets/js/runtime~main.b5838422.js" defer="defer"></script>
|
||
<script src="/assets/js/main.474ff10e.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NK5M4ZT8" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||
|
||
|
||
|
||
|
||
<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="/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-mcp">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-5714c651361659596e80fa4a691701d9.png" width="3438" height="1764" 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 <strong>Code</strong> pane to see a component's 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 these default locations:</p>
|
||
<ul>
|
||
<li><strong>Linux or WSL on Windows</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>
|
||
<p><img decoding="async" loading="lazy" src="/assets/images/workspace-e7f86797a44d56c10b93c12b206d88f0.png" width="3444" height="1898" class="img_ev3q"></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>
|
||
<p>The workspace controls allow you to adjust your view and lock your flows in place.</p>
|
||
<ul>
|
||
<li>Add <strong>Notes</strong> to flows with the <strong>Add Note</strong> button, similar to commenting in code.</li>
|
||
<li>To access the <a href="#settings">Settings</a> menu, 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-label="Gear icon"><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>.</li>
|
||
</ul>
|
||
<p>This menu contains configuration for <strong>Global Variables</strong>, <strong>Langflow API</strong>, <strong>Shortcuts</strong>, and <strong>Messages</strong>.</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/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-and-folders">Projects and folders<a href="#projects-and-folders" class="hash-link" aria-label="Direct link to Projects and folders" title="Direct link to Projects and folders"></a></h2>
|
||
<p>The <strong>My Projects</strong> page displays all the flows and components you've created in the Langflow workspace.</p>
|
||
<p><img decoding="async" loading="lazy" src="/assets/images/my-projects-20f73f0541b2f5b41398ef5df610b7b3.png" width="3412" height="1758" class="img_ev3q"></p>
|
||
<p><strong>My Projects</strong> is the default folder where all new projects and components are initially stored.</p>
|
||
<p>Projects, folders, and flows are exchanged as JSON objects.</p>
|
||
<ul>
|
||
<li>
|
||
<p>To create a new folder, click 📁 <strong>New Folder</strong>.</p>
|
||
</li>
|
||
<li>
|
||
<p>To rename a folder, double-click the folder name.</p>
|
||
</li>
|
||
<li>
|
||
<p>To download a folder, click 📥 <strong>Download</strong>.</p>
|
||
</li>
|
||
<li>
|
||
<p>To upload a folder, click 📤 <strong>Upload</strong>. The default maximum file upload size is 100 MB.</p>
|
||
</li>
|
||
<li>
|
||
<p>To move a flow or component, drag and drop it into the desired folder.</p>
|
||
</li>
|
||
</ul>
|
||
<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><strong>New</strong>: Create a new flow from scratch.</li>
|
||
<li><strong>Settings</strong>: Adjust settings specific to the current flow, such as its name, description, and endpoint name.</li>
|
||
<li><strong>Logs</strong>: View logs for the current project, including execution history, errors, and other runtime events.</li>
|
||
<li><strong>Import</strong>: Import a flow or component from a JSON file into the workspace.</li>
|
||
<li><strong>Export</strong>: Export the current flow as a JSON file.</li>
|
||
<li><strong>Undo (⌘Z)</strong>: Revert the last action taken in the project.</li>
|
||
<li><strong>Redo (⌘Y)</strong>: Reapply a previously undone action.</li>
|
||
<li><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-label="Gear icon"><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</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-and-folders" class="table-of-contents__link toc-highlight">Projects and folders</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><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> |