mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-24 05:39:16 +08:00
203 lines
57 KiB
HTML
203 lines
57 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-components" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.8.1">
|
||
<title data-rh="true">Components 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-components"><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="Components overview | Langflow Documentation"><meta data-rh="true" name="description" content="Components are the building blocks of your flows."><meta data-rh="true" property="og:description" content="Components are the building blocks of your flows."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.langflow.org/concepts-components"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/concepts-components" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/concepts-components" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://UZK6BDPCVY-dsn.algolia.net" crossorigin="anonymous"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Components overview","item":"https://docs.langflow.org/concepts-components"}]}</script><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">
|
||
|
||
|
||
|
||
<script>!function(){var e="analytics",t=window[e]=window[e]||[];if(!t.initialize)if(t.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{t.invoked=!0,t.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"],t.factory=function(n){return function(){if(window[e].initialized)return window[e][n].apply(window[e],arguments);var r=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(n)>-1){var i=document.querySelector("link[rel='canonical']");r.push({__t:"bpc",c:i&&i.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}return r.unshift(n),t.push(r),t}};for(var n=0;n<t.methods.length;n++){var r=t.methods[n];t[r]=t.factory(r)}t.load=function(n,r){var i=document.createElement("script");i.type="text/javascript",i.async=!0,i.setAttribute("data-global-segment-analytics-key",e),i.src="https://cdn.segment.com/analytics.js/v1/"+n+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(i,a),t._loadOptions=r},t._writeKey="60AfGDrVxy8nAGJngo3fCYWG4LvhMAlG",t.SNIPPET_VERSION="5.2.0",t.load("60AfGDrVxy8nAGJngo3fCYWG4LvhMAlG"),t.page()}}()</script>
|
||
<script>window.__SCROLL_TRACKING_CONFIG__={selectors:[{selector:"h1, h2, h3, h4, h5, h6",eventName:"Docs.langflow.org - Heading Viewed",properties:{element_type:"heading"}},{selector:".ch-codeblock",eventName:"Docs.langflow.org - Codeblock Viewed",properties:{element_type:"code",language:"helper:codeLanguage"}}]}</script>
|
||
|
||
|
||
<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.e756ed1e.css">
|
||
<script src="/assets/js/runtime~main.16a1d68d.js" defer="defer"></script>
|
||
<script src="/assets/js/main.6e50f663.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
|
||
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
|
||
</defs></svg>
|
||
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),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="theme-layout-navbar navbar navbar--fixed-top navbarHideable_m1mJ"><div class="navbar__inner"><div class="theme-layout-navbar-left 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/lf-docs-light.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/lf-docs-dark.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/langflow-ai/langflow" target="_blank" class="navbar__item navbar__link header-github-link" data-event="Docs.langflow.org - Social Clicked" data-platform="github"></a><a href="https://twitter.com/langflow_ai" target="_blank" class="navbar__item navbar__link header-twitter-link" data-event="Docs.langflow.org - Social Clicked" data-platform="x"></a><a href="https://discord.gg/EqksyE2EX9" target="_blank" class="navbar__item navbar__link header-discord-link" data-event="Docs.langflow.org - Social Clicked" data-platform="discord"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP 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" aria-hidden="true" class="toggleIcon_g3eP 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><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></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="theme-layout-main 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/lf-docs-light.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/lf-docs-dark.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="/about-langflow">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="/concepts-overview">Flows</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">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="/mcp-client">Model Context Protocol (MCP)</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-keys-and-authentication">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">Deploy</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-components">Components reference</a></div><ul 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-components">Components overview</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 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" tabindex="0" href="/components-io">Core components</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 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" tabindex="0" href="/components-bundle-components">Bundles</a></div></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="/components-custom-components">Create custom Python components</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="/api-reference-api-examples">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="/contributing-community">Contribute</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="/release-notes">Release notes</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="/troubleshoot">Support</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 sidebar-ad">
|
||
<a href="https://www.langflow.org/desktop" target="_blank" class="menu__link">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g clip-path="url(#clip0_1645_37)">
|
||
<path d="M12 17H20C21.1046 17 22 16.1046 22 15V13M12 17H4C2.89543 17 2 16.1046 2 15V5C2 3.89543 2.89543 3 4 3H10M12 17V21M8 21H12M12 21H16M11.75 10.2917H13.2083L16.125 7.375H17.5833L20.5 4.45833H21.9583M16.125 11.75H17.5833L20.5 8.83333H21.9583M11.75 5.91667H13.2083L16.125 3H17.5833" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_1645_37">
|
||
<rect width="24" height="24" fill="white"/>
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
<div class="sidebar-ad-text-container">
|
||
<span class="sidebar-ad-text">Get started in minutes</span>
|
||
<span class="sidebar-ad-text sidebar-ad-text-gradient">Download Langflow Desktop</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"><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">Components reference</span></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Components overview</span></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>Components overview</h1></header><style>[data-ch-theme="github-dark"] { --ch-t-colorScheme: dark;--ch-t-foreground: #c9d1d9;--ch-t-background: #0d1117;--ch-t-lighter-inlineBackground: #0d1117e6;--ch-t-editor-background: #0d1117;--ch-t-editor-foreground: #c9d1d9;--ch-t-editor-lineHighlightBackground: #6e76811a;--ch-t-editor-rangeHighlightBackground: #ffffff0b;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #264F78;--ch-t-focusBorder: #1f6feb;--ch-t-tab-activeBackground: #0d1117;--ch-t-tab-activeForeground: #c9d1d9;--ch-t-tab-inactiveBackground: #010409;--ch-t-tab-inactiveForeground: #8b949e;--ch-t-tab-border: #30363d;--ch-t-tab-activeBorder: #0d1117;--ch-t-editorGroup-border: #30363d;--ch-t-editorGroupHeader-tabsBackground: #010409;--ch-t-editorLineNumber-foreground: #6e7681;--ch-t-input-background: #0d1117;--ch-t-input-foreground: #c9d1d9;--ch-t-input-border: #30363d;--ch-t-icon-foreground: #8b949e;--ch-t-sideBar-background: #010409;--ch-t-sideBar-foreground: #c9d1d9;--ch-t-sideBar-border: #30363d;--ch-t-list-activeSelectionBackground: #6e768166;--ch-t-list-activeSelectionForeground: #c9d1d9;--ch-t-list-hoverBackground: #6e76811a;--ch-t-list-hoverForeground: #c9d1d9; }</style>
|
||
<!-- -->
|
||
<p>Components are the building blocks of your flows.
|
||
Like classes in an application, each component is designed for a specific use case or integration.</p>
|
||
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><p>Langflow provides keyboard shortcuts for the workspace.</p><p>In the Langflow header, click your profile icon, select <strong>Settings</strong>, and then click <strong>Shortcuts</strong> to view the available shortcuts.</p></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="component-menus">Add a component to a flow<a href="#component-menus" class="hash-link" aria-label="Direct link to Add a component to a flow" title="Direct link to Add a component to a flow"></a></h2>
|
||
<p>To add a component to a flow, drag the component from the <strong>Components</strong> menu to the <a href="/concepts-overview">workspace</a>.</p>
|
||
<p>The <strong>Components</strong> menu is organized by component type or provider, and some components are hidden by default.</p>
|
||
<ul>
|
||
<li><strong>Core</strong>: The categories near the top of the <strong>Components</strong> menu are Langflow's core components. They are grouped by purpose, such as <strong>Inputs and Outputs</strong> or <strong>Data</strong>. <strong>Beta</strong> components are newly released and still in development.</li>
|
||
<li><strong>Bundles</strong>: These components support specific third-party integrations, and they are grouped by provider.</li>
|
||
<li><strong>Legacy</strong>: You can still use these components, but they are no longer supported. Legacy components are hidden by default; 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-sliders-horizontal" aria-hidden="true"><line x1="21" x2="14" y1="4" y2="4"></line><line x1="10" x2="3" y1="4" y2="4"></line><line x1="21" x2="12" y1="12" y2="12"></line><line x1="8" x2="3" y1="12" y2="12"></line><line x1="21" x2="16" y1="20" y2="20"></line><line x1="12" x2="3" y1="20" y2="20"></line><line x1="14" x2="14" y1="2" y2="6"></line><line x1="8" x2="8" y1="10" y2="14"></line><line x1="16" x2="16" y1="18" y2="22"></line></svg> <strong>Component settings</strong> to expose legacy components.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="configure-a-component">Configure a component<a href="#configure-a-component" class="hash-link" aria-label="Direct link to Configure a component" title="Direct link to Configure a component"></a></h3>
|
||
<p>After adding a component to a flow, configure the component's parameters and connect it to the other components in your flows.</p>
|
||
<p>Each component has inputs, outputs, parameters, and controls related to the component's purpose.
|
||
By default, components show only required and common options.
|
||
To access additional settings and controls, including meta settings, use the component's header menu.</p>
|
||
<p>To access a component's header menu, click the component in your workspace.</p>
|
||
<p><img decoding="async" loading="lazy" alt="Agent component" src="/assets/images/agent-component-4c496697124cfebd3883ee9ade19ca5c.png" width="1948" height="3344" class="img_ev3q"></p>
|
||
<p>A few options are available directly on the header menu.
|
||
For example:</p>
|
||
<ul>
|
||
<li><strong>Code</strong>: Modify component settings by directly editing the component's Python code.</li>
|
||
<li><strong>Controls</strong>: Adjust all component parameters, including optional settings that are hidden by default.</li>
|
||
<li><strong>Tool Mode</strong>: Enable this option when combining a component with an <strong>Agent</strong> component.</li>
|
||
</ul>
|
||
<p>For all other options, including <strong>Delete</strong> and <strong>Duplicate</strong> controls, 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-ellipsis" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg> <strong>Show More</strong>.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="rename-a-component">Rename a component<a href="#rename-a-component" class="hash-link" aria-label="Direct link to Rename a component" title="Direct link to Rename a component"></a></h3>
|
||
<p>To modify a component's name or description, click the component in the workspace, 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-pencil-line" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"></path><path d="m15 5 3 3"></path></svg> <strong>Edit</strong>.
|
||
Component descriptions accept Markdown syntax.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="run-a-component">Run a component<a href="#run-a-component" class="hash-link" aria-label="Direct link to Run a component" title="Direct link to Run a component"></a></h3>
|
||
<p>To run a single component, 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-play" aria-label="Play button"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg> <strong>Run component</strong>.
|
||
A <strong>Last Run</strong> value indicates that the component ran successfully.</p>
|
||
<p>Running a single component is different from running an entire flow. In a single component run, the <code>build_vertex</code> function is called, which builds and runs only the single component with direct inputs provided through the visual editor (the <code>inputs_dict</code> parameter). The <code>VertexBuildResult</code> data is passed to the <code>build_and_run</code> method that calls the component's <code>build</code> method and runs it. Unlike running an entire flow, running a single component doesn't automatically execute its upstream dependencies.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="inspect-component-output-and-logs">Inspect component output and logs<a href="#inspect-component-output-and-logs" class="hash-link" aria-label="Direct link to Inspect component output and logs" title="Direct link to Inspect component output and logs"></a></h3>
|
||
<p>To view the output and logs for a single component, 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-text-search" aria-hidden="true"><path d="M21 6H3"></path><path d="M10 12H3"></path><path d="M10 18H3"></path><circle cx="17" cy="15" r="3"></circle><path d="m21 19-1.9-1.9"></path></svg> <strong>Inspect</strong>.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="freeze-a-component">Freeze a component<a href="#freeze-a-component" class="hash-link" aria-label="Direct link to Freeze a component" title="Direct link to Freeze a component"></a></h3>
|
||
<div class="theme-admonition theme-admonition-important admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>important</div><div class="admonitionContent_BuS1"><p>Freezing a component also freezes all components upstream of the selected component.</p></div></div>
|
||
<p>Use the freeze option if you expect consistent output from a component <em>and all upstream components</em>, and you only need to run those components once.</p>
|
||
<p>Freezing a component prevents that component and all upstream components from re-running, and it preserves the last output state for those components.
|
||
Any future flow runs use the preserved output.</p>
|
||
<p>To freeze a component, click the component in the workspace to expose the component's header 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-ellipsis" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg> <strong>Show More</strong>, and then select <strong>Freeze</strong>.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="component-ports">Component ports<a href="#component-ports" class="hash-link" aria-label="Direct link to Component ports" title="Direct link to Component ports"></a></h2>
|
||
<p>Around the border of each component, there are circular port icons like <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle" aria-label="Indigo message port" style="color:#4f46e5;fill:#4f46e5"><circle cx="12" cy="12" r="10"></circle></svg>.
|
||
These indicate a component <em>connection point</em> or <em>port</em>.</p>
|
||
<p>Ports either accept input or produce output of a specific data type.
|
||
You can infer the data type from the field the port is attached to or from the <a href="#port-colors">port's color</a>.
|
||
For example, the <strong>System Message</strong> field accepts <a href="/data-types#message">message data</a>, as illustrated by the blue port icon: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle" aria-label="Indigo message port" style="color:#4f46e5;fill:#4f46e5"><circle cx="12" cy="12" r="10"></circle></svg>.</p>
|
||
<p><img decoding="async" loading="lazy" alt="Prompt Template component with multiple inputs" src="/assets/images/prompt-component-4917278161834031f30525642b4fd87e.png" width="2600" height="3020" class="img_ev3q"></p>
|
||
<p>When building flows, connect output ports to input ports of the same type (color) to transfer that type of data between two components.
|
||
For information about the programmatic representation of each data type, see <a href="/data-types">Langflow data types</a>.</p>
|
||
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><ul>
|
||
<li>
|
||
<p>Hover over a port to see connection details for that port.</p>
|
||
</li>
|
||
<li>
|
||
<p>Click a port to filter the <strong>Components</strong> menu by compatible components.</p>
|
||
</li>
|
||
<li>
|
||
<p>If two components have incompatible data types, you can use a processing component like the <a href="/components-processing#type-convert"><strong>Type Convert</strong> component</a> to convert the data between components.</p>
|
||
</li>
|
||
</ul></div></div>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="dynamic-ports">Dynamic ports<a href="#dynamic-ports" class="hash-link" aria-label="Direct link to Dynamic ports" title="Direct link to Dynamic ports"></a></h3>
|
||
<p>Some components have ports that are dynamically added or removed.
|
||
For example, the <strong>Prompt Template</strong> component accepts inputs within curly braces, and new ports are opened when a value within curly braces is detected in the <strong>Template</strong> field.</p>
|
||
<p><img decoding="async" loading="lazy" alt="Prompt Template component with multiple inputs" src="/assets/images/prompt-component-with-multiple-inputs-6e43783422ff57a873929aa2c97f43f0.png" width="2104" height="2928" class="img_ev3q"></p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="output-type-selection">Output type selection<a href="#output-type-selection" class="hash-link" aria-label="Direct link to Output type selection" title="Direct link to Output type selection"></a></h3>
|
||
<p>All components produce output that is either sent to another component in the flow or returned as the final flow result.</p>
|
||
<p>Some components can produce multiple types of output:</p>
|
||
<ul>
|
||
<li>
|
||
<p>If the component emits all types at once, the component has multiple output ports in the visual editor. In component code, this is represented by <code>group_outputs=True</code></p>
|
||
</li>
|
||
<li>
|
||
<p>If the component emits only one type, you must select the output type by clicking the output label near the output port, and then selecting the desired output type. In component code, this is represented by <code>group_outputs=False</code> or omitting the <code>group_outputs</code> parameter.</p>
|
||
</li>
|
||
</ul>
|
||
<p>For example, the <strong>Language Model</strong> component can output <em>either</em> a <strong>Model Response</strong> or <strong>Language Model</strong>.
|
||
The <strong>Model Response</strong> output produces <a href="/data-types#message"><code>Message</code></a> data that can be passed to another component's <code>Message</code> port.
|
||
The <strong>Language Model</strong> output must be connected to a component with a <strong>Language Model</strong> input, such as the <a href="/components-processing#structured-output"><strong>Structured Output</strong> component</a>, that uses the attached LLM to power the receiving component's reasoning.</p>
|
||
<p><img decoding="async" loading="lazy" alt="Output type selection in the Language Model component" src="/assets/images/select-output-f7d64629d278098e3fba32fe79f79ed6.png" width="280" height="446" class="img_ev3q"></p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="port-colors">Port colors<a href="#port-colors" class="hash-link" aria-label="Direct link to Port colors" title="Direct link to Port colors"></a></h3>
|
||
<p>Component port colors indicate the data type ingested or emitted by the port.
|
||
For example, a <strong>Message</strong> port either accepts or emits <code>Message</code> data.</p>
|
||
<p>The following table lists the component data types and their corresponding port colors:</p>
|
||
<table><thead><tr><th>Data type</th><th>Port color</th><th>Port icon example</th></tr></thead><tbody><tr><td>Data</td><td>Red</td><td><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle" aria-label="Red data port" style="color:#dc2626;fill:#dc2626"><circle cx="12" cy="12" r="10"></circle></svg></td></tr><tr><td>DataFrame</td><td>Pink</td><td><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle" aria-label="Pink dataframe port" style="color:#ec4899;fill:#ec4899"><circle cx="12" cy="12" r="10"></circle></svg></td></tr><tr><td>Embeddings</td><td>Emerald</td><td><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle" aria-label="Emerald embeddings port" style="color:#10b981;fill:#10b981"><circle cx="12" cy="12" r="10"></circle></svg></td></tr><tr><td>LanguageModel</td><td>Fuchsia</td><td><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle" aria-label="Fuchsia language model port" style="color:#c026d3;fill:#c026d3"><circle cx="12" cy="12" r="10"></circle></svg></td></tr><tr><td>Memory</td><td>Orange</td><td><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle" aria-label="Orange memory port" style="color:#f97316;fill:#f97316"><circle cx="12" cy="12" r="10"></circle></svg></td></tr><tr><td>Message</td><td>Indigo</td><td><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle" aria-label="Indigo message port" style="color:#4f46e5;fill:#4f46e5"><circle cx="12" cy="12" r="10"></circle></svg></td></tr><tr><td>Tool</td><td>Cyan</td><td><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle" aria-label="Cyan tool port" style="color:#06b6d4;fill:#06b6d4"><circle cx="12" cy="12" r="10"></circle></svg></td></tr><tr><td>Unknown or multiple types</td><td>Gray</td><td><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle" aria-label="Gray unknown port" style="color:#9CA3AF;fill:#9CA3AF"><circle cx="12" cy="12" r="10"></circle></svg></td></tr></tbody></table>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="component-code">Component code<a href="#component-code" class="hash-link" aria-label="Direct link to Component code" title="Direct link to Component code"></a></h2>
|
||
<p>You can edit components in the <a href="/concepts-overview#workspace">workspace</a> and in code. When editing a flow, select a component, 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-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> to see and edit the component's underlying Python code.</p>
|
||
<p>All components have underlying code that determines how you configure them and what actions they can perform.
|
||
In the context of creating and running flows, component code does the following:</p>
|
||
<ul>
|
||
<li>Determines what configuration options to show in the visual editor.</li>
|
||
<li>Validates inputs based on the component's defined input types.</li>
|
||
<li>Processes data using the configured parameters, methods, and functions.</li>
|
||
<li>Passes results to the next component in the flow.</li>
|
||
</ul>
|
||
<p>All components inherit from a base <code>Component</code> class that defines the component's interface and behavior.
|
||
For example, the <a href="https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py" target="_blank" rel="noopener noreferrer"><strong>Recursive Character Text Splitter</strong> component</a> is a child of the <a href="https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/base/textsplitters/model.py" target="_blank" rel="noopener noreferrer"><code>LCTextSplitterComponent</code></a> class.</p>
|
||
<p>Each component's code includes definitions for inputs and outputs, which are represented in the workspace as <a href="#component-ports">component ports</a>.
|
||
For example, the <code>RecursiveCharacterTextSplitter</code> has four inputs. Each input definition specifies the input type, such as <code>IntInput</code>, as well as the encoded name, display name, description, and other parameters for that specific input.
|
||
These values determine the component settings, such as display names and tooltips in the visual editor.</p>
|
||
<div class="ch-codeblock not-prose" data-ch-theme="github-dark"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> inputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> IntInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> name="chunk_size",</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> display_name="Chunk Size",</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> info="The maximum length of each chunk.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> value=1000,</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> IntInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> name="chunk_overlap",</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> display_name="Chunk Overlap",</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> info="The amount of overlap between chunks.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> value=200,</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> DataInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> name="data_input",</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> display_name="Input",</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> info="The texts to split.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> input_types=["Document", "Data"],</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> MessageTextInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> name="separators",</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> display_name="Separators",</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> info='The characters to split on.\nIf left empty defaults to ["\\n\\n", "\\n", " ", ""].',</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> is_list=True,</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><br></code></div></div>
|
||
<p>Additionally, components have methods or functions that handle their functionality.
|
||
For example, the <code>RecursiveCharacterTextSplitter</code> has two methods:</p>
|
||
<div class="ch-codeblock not-prose" data-ch-theme="github-dark"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> def get_data_input(self) -> Any:</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> return self.data_input</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> def build_text_splitter(self) -> TextSplitter:</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> if not self.separators:</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> separators: list[str] | None = None</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> else:</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> # check if the separators list has escaped characters</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> # if there are escaped characters, unescape them</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> separators = [unescape_string(x) for x in self.separators]</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> return RecursiveCharacterTextSplitter(</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> separators=separators,</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> chunk_size=self.chunk_size,</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> chunk_overlap=self.chunk_overlap,</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> )</span></div></div><br></code></div></div>
|
||
<p>The <code>get_data_input</code> method retrieves the text to be split from the component's input, which makes the data available to the class.
|
||
The <code>build_text_splitter</code> method creates a <code>RecursiveCharacterTextSplitter</code> object by calling its parent class's <code>build</code> method. Then, the text is split with the created splitter and passed to the next component.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="component-versions">Component versions<a href="#component-versions" class="hash-link" aria-label="Direct link to Component versions" title="Direct link to Component versions"></a></h2>
|
||
<p>Component versions and states are stored in an internal Langflow database. When you add a component to a flow, you create a detached copy of the component based on the information in the Langflow database.
|
||
These copies are detached from the primary Langflow database, and they don't synchronize with any updates that can occur when you upgrade your Langflow version.</p>
|
||
<p>In other words, an individual instance of a component retains the version number and state from the moment you add it to a specific flow. For example, if a component is at version 1.0 when you add it to a flow, it remains at version 1.0 <em>in that flow</em> unless you update it.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="update-component-versions">Update component versions<a href="#update-component-versions" class="hash-link" aria-label="Direct link to Update component versions" title="Direct link to Update component versions"></a></h3>
|
||
<p>When editing a flow in the workspace, Langflow notifies you if a component's workspace version is behind the database version so you can update the component's workspace version:</p>
|
||
<ul>
|
||
<li>
|
||
<p><strong>Update ready</strong>: This notification means the component update contains no breaking changes.</p>
|
||
</li>
|
||
<li>
|
||
<p><strong>Update available</strong>: This notification means the component update might contain breaking changes.</p>
|
||
<p>Breaking changes modify component inputs and outputs, causing the components to be disconnected and break the flow. After updating the component, you might need to edit the component settings or reconnect component ports.</p>
|
||
</li>
|
||
</ul>
|
||
<p>There are two ways to update components:</p>
|
||
<ul>
|
||
<li>
|
||
<p>Click <strong>Update</strong> to update a single component. This is recommended for updates without breaking changes.</p>
|
||
</li>
|
||
<li>
|
||
<p>Click <strong>Review</strong> to view all available updates and create a snapshot before updating. This is recommended for updates with breaking changes.</p>
|
||
<p>To save a snapshot of your flow before updating the components, enable <strong>Create backup flow before updating</strong>. Backup flows are stored in the same project folder as the original flow with the suffix <code>(backup)</code>.</p>
|
||
<p>To update specific components, select the components you want to update, and then click <strong>Update Components</strong>.</p>
|
||
</li>
|
||
</ul>
|
||
<p>Components are updated to the latest available version, based on the version of Langflow you are running.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="group-components">Group components<a href="#group-components" class="hash-link" aria-label="Direct link to Group components" title="Direct link to Group components"></a></h2>
|
||
<p>Multiple components can be grouped into a single component for reuse. This is useful for organizing large flows by combining related components together, such as a RAG <strong>Agent</strong> component and it's associated <strong>Embeddings Model</strong> and <strong>Vector Store</strong> components.</p>
|
||
<ol>
|
||
<li>
|
||
<p>Hold <kbd>Shift</kbd>, and then click and drag to highlight all components you want to merge. Components must be completely within the selection area to be merged.</p>
|
||
<p>Alternatively, to select components for merging one by one, hold <kbd>Ctrl</kbd> on Windows or <kbd>Cmd</kbd> on Mac, and then click each component to add them to the group.</p>
|
||
</li>
|
||
<li>
|
||
<p>Release the mouse and keyboard, and then click <strong>Group</strong> to merge the components into a single, group component.</p>
|
||
</li>
|
||
</ol>
|
||
<p>Grouped components are configured and managed as a single component, including the component name, code, and settings.</p>
|
||
<p>To ungroup the components, click the component in the workspace to expose the component's header 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-ellipsis" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg> <strong>Show More</strong>, and then select <strong>Ungroup</strong>.</p>
|
||
<p>If you want to reuse this grouping in other flows, click the component in the workspace to expose the component's header 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-ellipsis" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg> <strong>Show More</strong>, and then select <strong>Save</strong> to save the component to the <strong>Components</strong> menu.</p></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/deployment-render"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Render</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/components-io"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Input / Output</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="#component-menus" class="table-of-contents__link toc-highlight">Add a component to a flow</a><ul><li><a href="#configure-a-component" class="table-of-contents__link toc-highlight">Configure a component</a></li><li><a href="#rename-a-component" class="table-of-contents__link toc-highlight">Rename a component</a></li><li><a href="#run-a-component" class="table-of-contents__link toc-highlight">Run a component</a></li><li><a href="#inspect-component-output-and-logs" class="table-of-contents__link toc-highlight">Inspect component output and logs</a></li><li><a href="#freeze-a-component" class="table-of-contents__link toc-highlight">Freeze a component</a></li></ul></li><li><a href="#component-ports" class="table-of-contents__link toc-highlight">Component ports</a><ul><li><a href="#dynamic-ports" class="table-of-contents__link toc-highlight">Dynamic ports</a></li><li><a href="#output-type-selection" class="table-of-contents__link toc-highlight">Output type selection</a></li><li><a href="#port-colors" class="table-of-contents__link toc-highlight">Port colors</a></li></ul></li><li><a href="#component-code" class="table-of-contents__link toc-highlight">Component code</a></li><li><a href="#component-versions" class="table-of-contents__link toc-highlight">Component versions</a><ul><li><a href="#update-component-versions" class="table-of-contents__link toc-highlight">Update component versions</a></li></ul></li><li><a href="#group-components" class="table-of-contents__link toc-highlight">Group components</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column 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/lf-docs-light.svg" alt="Langflow" class="footer__logo themedComponent_mlkZ themedComponent--light_NVdE" width="160" height="40"><img src="/img/lf-docs-dark.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> |