mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-23 22:15:24 +08:00
266 lines
68 KiB
HTML
266 lines
68 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-1.10.0 docs-doc-page docs-doc-id-Components/concepts-components" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.9.2">
|
||
<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="1.10.0"><meta data-rh="true" name="docusaurus_tag" content="docs-default-1.10.0"><meta data-rh="true" name="docsearch:version" content="1.10.0"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-1.10.0"><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>window._ibmAnalytics={settings:{name:"DataStax",tealiumProfileName:"ibm-subsidiary"},trustarc:{privacyPolicyLink:"https://ibm.com/privacy"},"digitalData.page.services.google.enabled":!0},window.digitalData={page:{pageInfo:{ibm:{siteId:"IBM_"+_ibmAnalytics.settings.name},segment:{enabled:!0,env:"prod",key:"B04fNhD06DqDPuaRfQl5lZ2iQICdxxuh",coremetrics:!1,carbonComponentEvents:!1}},category:{primaryCategory:"PC230"}},commonProperties:{productTitle:"IBM Elite Support for Langflow",productCode:"5900BUB",productCodeType:"WWPC",UT30:"30AS5",instanceId:"docs-site",subscriptionId:"public-access",productPlanName:"Public",productPlanType:"freemium",userId:"IBMid-ANONYMOUS"}}</script>
|
||
<script src="//1.www.s81c.com/common/stats/ibm-common.js" async="true"></script>
|
||
|
||
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Sora:wght@550;600&display=swap">
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("consent","default",{ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied",analytics_storage:"denied"})</script>
|
||
<script>!function(){function e(){if(void 0!==window.truste&&window.truste.cma){var e=window.truste.cma.callApi("getConsent",window.location.href)||{},n=1===e[2],t=1===e[3];gtag("consent","update",{ad_storage:n?"granted":"denied",ad_user_data:n?"granted":"denied",ad_personalization:n?"granted":"denied",analytics_storage:t?"granted":"denied"})}}window.addEventListener&&(window.addEventListener("cm_data_subject_consent_changed",e),window.addEventListener("cm_consent_preferences_set",e)),"complete"===document.readyState?e():window.addEventListener("load",e)}()</script><link rel="stylesheet" href="/assets/css/styles.0d9d771d.css">
|
||
<script src="/assets/js/runtime~main.c313665b.js" defer="defer"></script>
|
||
<script src="/assets/js/main.12b252df.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<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"><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 class="navbar__item dropdown dropdown--hoverable"><a aria-current="page" class="navbar__link active" aria-haspopup="true" aria-expanded="false" role="button" href="/concepts-components">1.10.x</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/next/concepts-components">1.11.x (Next)</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/concepts-components">1.10.x</a></li><li><a class="dropdown__link" href="/1.9.0/concepts-components">1.9.x</a></li><li><a class="dropdown__link" href="/1.8.0/concepts-components">1.8.x</a></li></ul></div></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" aria-label="GitHub" data-event="UI Interaction" data-action="clicked" data-channel="docs" data-element-id="social-github" data-namespace="header" data-platform-title="Langflow"></a><a href="https://twitter.com/langflow_ai" target="_blank" class="navbar__item navbar__link header-twitter-link" aria-label="Twitter" data-event="UI Interaction" data-action="clicked" data-channel="docs" data-element-id="social-twitter" data-namespace="header" data-platform-title="Langflow"></a><a href="https://discord.gg/EqksyE2EX9" target="_blank" class="navbar__item navbar__link header-discord-link" aria-label="Discord" data-event="UI Interaction" data-action="clicked" data-channel="docs" data-element-id="social-discord" data-namespace="header" data-platform-title="Langflow"></a><div class="toggle_MW0i colorModeToggle_DEke"><button class="clean-btn toggleButton_yw5v toggleButtonDisabled_BJd7" 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" focusable="false" role="presentation" class="toggleIcon_oIOL lightToggleIcon_SFTY"><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" focusable="false" role="presentation" class="toggleIcon_oIOL darkToggleIcon_ekgs"><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" focusable="false" role="presentation" class="toggleIcon_oIOL systemToggleIcon_yi_a"><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 (Meta+k)" aria-keyshortcuts="Meta+k"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8" stroke="currentColor" fill="none" stroke-width="1.4"></circle><path d="m21 21-4.3-4.3" stroke="currentColor" fill="none" 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 aria-label="Documentation sidebar" class="theme-doc-sidebar-container docSidebarContainer_RSuS"><div class="sidebarViewport_pYEE"><div class="sidebar_njMd"><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 sidebar-group-divider"><div class="sidebar-group-label">Build</div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed sidebar-category-with-icon sidebar-icon-rocket"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/"><span title="Get started" class="categoryLinkLabel_W154">Get started</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed sidebar-category-with-icon sidebar-icon-workflow"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/concepts-overview"><span title="Flows" class="categoryLinkLabel_W154">Flows</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed sidebar-category-with-icon sidebar-icon-bot"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/agents"><span title="Agents" class="categoryLinkLabel_W154">Agents</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed sidebar-category-with-icon sidebar-icon-plug"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/mcp-client"><span title="Model Context Protocol (MCP)" class="categoryLinkLabel_W154">Model Context Protocol (MCP)</span></a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 sidebar-group-divider"><div class="sidebar-group-label">Develop & Deploy</div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed sidebar-category-with-icon sidebar-icon-code"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/api-keys-and-authentication"><span title="Develop" class="categoryLinkLabel_W154">Develop</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed sidebar-category-with-icon sidebar-icon-cloud"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/deployment-overview"><span title="Deploy" class="categoryLinkLabel_W154">Deploy</span></a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 sidebar-group-divider"><div class="sidebar-group-label">Reference</div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item sidebar-category-with-icon sidebar-icon-blocks"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/concepts-components"><span title="Components reference" class="categoryLinkLabel_W154">Components reference</span></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"><span title="Components overview" class="linkLabel_WmDU">Components overview</span></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="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/chat-input-and-output"><span title="Core components" class="categoryLinkLabel_W154">Core components</span></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="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/components-bundle-components"><span title="Bundles" class="categoryLinkLabel_W154">Bundles</span></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"><span title="Create custom Python components" class="linkLabel_WmDU">Create custom Python components</span></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 sidebar-category-with-icon sidebar-icon-fileCode"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/api-reference-api-examples"><span title="API reference" class="categoryLinkLabel_W154">API reference</span></a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 sidebar-group-divider"><div class="sidebar-group-label">Community</div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed sidebar-category-with-icon sidebar-icon-gitPR"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/contributing-community"><span title="Contribute" class="categoryLinkLabel_W154">Contribute</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed sidebar-category-with-icon sidebar-icon-helpCircle"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/troubleshoot"><span title="Support" class="categoryLinkLabel_W154">Support</span></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" rel="noopener noreferrer" class="menu__link">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
<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_z5aJ"><div class="docItemContainer_c0TR"><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" aria-hidden="true" focusable="false" role="presentation" class="breadcrumbHomeIcon_xK9p"><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="docMetaRow_c2hx"><div class="root_Eutc"><button type="button" class="button_gpNY"><span aria-hidden="true" class="icon_Bm9L"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></span><span class="label_LzDG">Copy page</span></button></div><span class="theme-doc-version-badge badge badge--secondary">Version: 1.10.x</span></div><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><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" role="img" aria-label="Tip icon" focusable="false"><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 anchorTargetStickyNavbar_Vzrq" 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" translate="no"></a></h2>
|
||
<p>To add a component to a flow, drag the component from the <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-component lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><path d="M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"></path><path d="M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z"></path><path d="M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z"></path><path d="M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"></path></svg> <strong>Core components</strong> or <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-blocks lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><rect width="7" height="7" x="14" y="3" rx="1"></rect><path d="M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3"></path></svg> <strong>Bundles</strong> menu into the <a class="" href="/concepts-overview#workspace">workspace</a>.</p>
|
||
<p>Components are grouped by type or provider, and some components are hidden by default:</p>
|
||
<ul>
|
||
<li class="">
|
||
<p><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-component lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><path d="M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"></path><path d="M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z"></path><path d="M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z"></path><path d="M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"></path></svg> <strong>Core components</strong>: Langflow's base components are grouped by purpose, such as <strong>Inputs and Outputs</strong> or <strong>Data</strong>.
|
||
These components either provide generic functionality, like loops and parsing, or they provide single components that support multiple third-party integrations.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><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-blocks lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><rect width="7" height="7" x="14" y="3" rx="1"></rect><path d="M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3"></path></svg> <strong>Bundles</strong>: Bundles contain one or more components that support specific third-party integrations, and they are grouped by service provider.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Legacy</strong>: These components are hidden by default.
|
||
For more information, see <a href="#legacy-components" class="">Legacy components</a>.</p>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" 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" translate="no"></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 <a href="#component-inspection-panel" class="">component inspection panel</a>.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="component-inspection-panel">Component inspection panel<a href="#component-inspection-panel" class="hash-link" aria-label="Direct link to Component inspection panel" title="Direct link to Component inspection panel" translate="no"></a></h3>
|
||
<p>When you select a component in the workspace, a component inspection panel appears on the right side of the screen.</p>
|
||
<p>The inspection panel displays all of a component's parameters, including hidden or advanced parameters.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="component-header-menus">Component header menus<a href="#component-header-menus" class="hash-link" aria-label="Direct link to Component header menus" title="Direct link to Component header menus" translate="no"></a></h3>
|
||
<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-1388a5c249e1f446bce2a7586a87e986.png" width="2368" height="3016" class="img_ev3q"></p>
|
||
<p>The following options are available directly on the header menu:</p>
|
||
<ul>
|
||
<li class=""><strong>Code</strong>: Modify component settings by directly editing the component's Python code.</li>
|
||
<li class=""><strong>Freeze</strong>: Freeze a component and all upstream components to prevent re-running. For more information, see <a href="#freeze-a-component" class="">Freeze a component</a>.</li>
|
||
<li class=""><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="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><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 anchorTargetStickyNavbar_Vzrq" 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" translate="no"></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="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil-line lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><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 anchorTargetStickyNavbar_Vzrq" 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" translate="no"></a></h3>
|
||
<p>To run a single component, click <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-play lf-inline-icon" 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 anchorTargetStickyNavbar_Vzrq" 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" translate="no"></a></h3>
|
||
<p>To view the output and logs for a single component, click <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-text-search lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><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 anchorTargetStickyNavbar_Vzrq" 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" translate="no"></a></h3>
|
||
<div class="theme-admonition theme-admonition-info 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>info</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, and then click <strong>Freeze</strong>.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" 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" translate="no"></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 lf-inline-icon" 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" class="">port's color</a>.
|
||
For example, the <strong>System Message</strong> field accepts <a class="" 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 lf-inline-icon" 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-858130cb1fdfd071e743d5f0b122fd0e.png" width="2644" height="3040" 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 class="" 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" role="img" aria-label="Tip icon" focusable="false"><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 class="">
|
||
<p>In the workspace, hover over a port to see connection details for that port.
|
||
Click a port to <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-search lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg> <strong>Search</strong> for compatible components.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>If two components have incompatible data types, you can use a processing component like the <a class="" href="/type-convert"><strong>Type Convert</strong> component</a> to convert the data between components.</p>
|
||
</li>
|
||
</ul></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" 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" translate="no"></a></h3>
|
||
<p>Some components have ports that are dynamically added or removed.
|
||
For example, the <strong>Prompt Template</strong> component accepts <a class="" href="/components-prompts#define-variables-in-prompts">inputs wrapped in curly braces</a>, and new ports are opened when a value wrapped in 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-858130cb1fdfd071e743d5f0b122fd0e.png" width="2644" height="3040" class="img_ev3q"></p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" 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" translate="no"></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 class="">
|
||
<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 class="">
|
||
<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, a language model component can output <em>either</em> a <strong>Model Response</strong> or <strong>Language Model</strong>.
|
||
The <strong>Model Response</strong> output produces <a class="" 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 class="" href="/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-ad560bd6e07233463111cf2516097571.png" width="2336" height="3168" class="img_ev3q"></p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" 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" translate="no"></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>JSON</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 lf-inline-icon" aria-label="Red data port" style="color:#dc2626;fill:#dc2626"><circle cx="12" cy="12" r="10"></circle></svg></td></tr><tr><td>Table</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 lf-inline-icon" 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 lf-inline-icon" 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 lf-inline-icon" 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 lf-inline-icon" 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 lf-inline-icon" 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 lf-inline-icon" 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 lf-inline-icon" 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 anchorTargetStickyNavbar_Vzrq" 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" translate="no"></a></h2>
|
||
<p>You can edit components in the <a class="" 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="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><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 class="">Determines what configuration options to show in the visual editor.</li>
|
||
<li class="">Validates inputs based on the component's defined input types.</li>
|
||
<li class="">Processes data using the configured parameters, methods, and functions.</li>
|
||
<li class="">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/lfx/src/lfx/components/langchain_utilities/recursive_character.py" target="_blank" rel="noopener noreferrer" class=""><strong>Recursive Character Text Splitter</strong> component</a> is a child of the <a href="https://github.com/langflow-ai/langflow/blob/main/src/lfx/src/lfx/base/textsplitters/model.py" target="_blank" rel="noopener noreferrer" class=""><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" class="">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" style="margin-top:1.25em;margin-bottom:1.25em;border-radius:6px;overflow:hidden;box-shadow:0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3);--ch-t-background:#0d1117;--ch-t-foreground:#c9d1d9;--ch-t-colorScheme:dark;--ch-t-editorLineNumber-foreground:#8b949e;--ch-t-editor-selectionBackground:#264f78"><div class="ch-frame-title-bar" style="padding:0.75rem 1rem;border-bottom:1px solid #30363d;background:#161b22;color:#c9d1d9"><div class="ch-frame-middle-bar">RecursiveCharacterTextSplitter inputs (from recursive_character.py)</div></div><div class="ch-code-wrapper" data-ch-measured="true" style="--ch-t-background:#0d1117;--ch-t-foreground:#c9d1d9;--ch-t-colorScheme:dark;--ch-t-editorLineNumber-foreground:#8b949e;--ch-t-editor-selectionBackground:#264f78"><code class="ch-code-scroll-parent" data-ch-lang="python" style="display:block;padding:1rem"><span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">17</span> inputs = [<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">18</span> IntInput(<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">19</span> name="chunk_size",<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">20</span> display_name="Chunk Size",<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">21</span> info="The maximum length of each chunk.",<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">22</span> value=1000,<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">23</span> ),<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">24</span> IntInput(<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">25</span> name="chunk_overlap",<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">26</span> display_name="Chunk Overlap",<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">27</span> info="The amount of overlap between chunks.",<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">28</span> value=200,<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">29</span> ),<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">30</span> DataInput(<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">31</span> name="data_input",<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">32</span> display_name="Input",<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">33</span> info="The texts to split.",<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">34</span> input_types=["Document", "Data", "JSON"],<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">35</span> required=True,<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">36</span> ),<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">37</span> MessageTextInput(<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">38</span> name="separators",<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">39</span> display_name="Separators",<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">40</span> info='The characters to split on.\nIf left empty defaults to ["\\n\\n", "\\n", " ", ""].',<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">41</span> is_list=True,<!-- -->
|
||
</code><button type="button" title="Copy code" class="ch-code-button"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="1.1em" height="1.1em"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></button></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" style="margin-top:1.25em;margin-bottom:1.25em;border-radius:6px;overflow:hidden;box-shadow:0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3);--ch-t-background:#0d1117;--ch-t-foreground:#c9d1d9;--ch-t-colorScheme:dark;--ch-t-editorLineNumber-foreground:#8b949e;--ch-t-editor-selectionBackground:#264f78"><div class="ch-frame-title-bar" style="padding:0.75rem 1rem;border-bottom:1px solid #30363d;background:#161b22;color:#c9d1d9"><div class="ch-frame-middle-bar">RecursiveCharacterTextSplitter methods (from recursive_character.py)</div></div><div class="ch-code-wrapper" data-ch-measured="true" style="--ch-t-background:#0d1117;--ch-t-foreground:#c9d1d9;--ch-t-colorScheme:dark;--ch-t-editorLineNumber-foreground:#8b949e;--ch-t-editor-selectionBackground:#264f78"><code class="ch-code-scroll-parent" data-ch-lang="python" style="display:block;padding:1rem"><span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">45</span> def get_data_input(self) -> Any:<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">46</span> return self.data_input<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">47</span>
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">48</span> def build_text_splitter(self) -> TextSplitter:<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">49</span> if not self.separators:<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">50</span> separators: list[str] | None = None<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">51</span> else:<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">52</span> # check if the separators list has escaped characters<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">53</span> # if there are escaped characters, unescape them<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">54</span> separators = [unescape_string(x) for x in self.separators]<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">55</span>
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">56</span> return RecursiveCharacterTextSplitter(<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">57</span> separators=separators,<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">58</span> chunk_size=self.chunk_size,<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">59</span> chunk_overlap=self.chunk_overlap,<!-- -->
|
||
<span class="ch-code-line-number" style="width:2ch;margin-right:1.5ch;display:inline-block;text-align:right">60</span> )<!-- -->
|
||
</code><button type="button" title="Copy code" class="ch-code-button"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="1.1em" height="1.1em"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></button></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 anchorTargetStickyNavbar_Vzrq" 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" translate="no"></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 anchorTargetStickyNavbar_Vzrq" 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" translate="no"></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 class="">
|
||
<p><strong>Update ready</strong>: This notification means the component update contains no breaking changes.</p>
|
||
</li>
|
||
<li class="">
|
||
<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 class="">
|
||
<p>Click <strong>Update</strong> to update a single component. This is recommended for updates without breaking changes.</p>
|
||
</li>
|
||
<li class="">
|
||
<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 anchorTargetStickyNavbar_Vzrq" 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" translate="no"></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 tools or vector store components.</p>
|
||
<ol>
|
||
<li class="">
|
||
<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 class="">
|
||
<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="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><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="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><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 <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-component lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><path d="M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"></path><path d="M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z"></path><path d="M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z"></path><path d="M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"></path></svg> <strong>Core components</strong> menu as a custom component.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="legacy-components">Legacy components<a href="#legacy-components" class="hash-link" aria-label="Direct link to Legacy components" title="Direct link to Legacy components" translate="no"></a></h2>
|
||
<!-- -->
|
||
<p>Legacy components are longer supported and can be removed in a future release.
|
||
You can continue to use them in existing flows, but it is recommended that you replace them with supported components as soon as possible.
|
||
Suggested replacements are included in the <strong>Legacy</strong> banner on components in your flows.
|
||
They are also given in release notes and Langflow documentation whenever possible.</p>
|
||
<p>If you aren't sure how to replace a legacy component, <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-search lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg> <strong>Search</strong> for components by provider, service, or component name.
|
||
The component may have been deprecated in favor of a completely new component, a similar component, or a new version of the same component in a different category.</p>
|
||
<p>If there is no obvious replacement, consider whether another component can be adapted to your use case.
|
||
For example, many <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-component lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><path d="M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"></path><path d="M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z"></path><path d="M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z"></path><path d="M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"></path></svg> <strong>Core components</strong> provide generic functionality that can support multiple providers and use cases, such as the <a class="" href="/api-request"><strong>API Request</strong> component</a>.</p>
|
||
<p>If neither of these options are viable, you could use the legacy component's code to create your own custom component, or <a class="" href="/contributing-github-issues">start a discussion</a> about the legacy component.</p>
|
||
<p>To discourage use of legacy components in new flows, these components are hidden by default.
|
||
In the visual editor, you can click <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-sliders-horizontal lf-inline-icon" aria-hidden="true" focusable="false" role="presentation"><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 toggle the <strong>Legacy</strong> filter.</p></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/security"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Security</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/chat-input-and-output"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Chat Input and 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="#component-inspection-panel" class="table-of-contents__link toc-highlight">Component inspection panel</a></li><li><a href="#component-header-menus" class="table-of-contents__link toc-highlight">Component header menus</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><li><a href="#legacy-components" class="table-of-contents__link toc-highlight">Legacy 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>© 2026 Langflow</span>
|
||
<span id="preferenceCenterContainer"> · <a href="#" onclick='return"undefined"!=typeof window&&window.truste&&window.truste.eu&&window.truste.eu.clickListener&&window.truste.eu.clickListener(),!1' style="cursor: pointer;">Manage Privacy Choices</a></span>
|
||
</div></li></ul></div></div></div></footer><div style="position:fixed;right:21px;bottom:21px;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> |