mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-24 06:10:49 +08:00
250 lines
96 KiB
HTML
250 lines
96 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-Components/components-custom-components" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.7.0">
|
||
<title data-rh="true">Create custom Python components | 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/components-custom-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="Create custom Python components | Langflow Documentation"><meta data-rh="true" name="description" content="Custom components are created within Langflow and extend the platform's functionality with custom, reusable Python code."><meta data-rh="true" property="og:description" content="Custom components are created within Langflow and extend the platform's functionality with custom, reusable Python code."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.langflow.org/components-custom-components"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/components-custom-components" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/components-custom-components" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://UZK6BDPCVY-dsn.algolia.net" crossorigin="anonymous"><link rel="preconnect" href="https://www.google-analytics.com">
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XHC7G628ZP"></script>
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-XHC7G628ZP",{anonymize_ip:!0})</script>
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script>window.dataLayer=window.dataLayer||[]</script>
|
||
<script>!function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-NK5M4ZT8",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer")</script>
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="search" type="application/opensearchdescription+xml" title="Langflow Documentation" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.e5a88218.css">
|
||
<script src="/assets/js/runtime~main.e258ea88.js" defer="defer"></script>
|
||
<script src="/assets/js/main.9d10f1e7.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NK5M4ZT8" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||
|
||
|
||
|
||
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_m1mJ"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/langflow-logo-black.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/langflow-logo-white.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/langflow-ai/langflow" target="_blank" class="navbar__item navbar__link header-github-link"></a><a href="https://twitter.com/langflow_ai" target="_blank" class="navbar__item navbar__link header-twitter-link"></a><a href="https://discord.gg/EqksyE2EX9" target="_blank" class="navbar__item navbar__link header-discord-link"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd sidebarWithHideableNavbar_wUlq"><a tabindex="-1" class="sidebarLogo_isFc" href="/"><img src="/img/langflow-logo-black.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/langflow-logo-white.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"></a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/">Welcome to Langflow</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/get-started-installation">Get started</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/get-started-installation">Install Langflow</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/get-started-quickstart">Quickstart</a></li></ul></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" role="button" aria-expanded="true" href="/starter-projects-basic-prompting">Starter projects</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/starter-projects-basic-prompting">Basic prompting</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/starter-projects-vector-store-rag">Vector store RAG</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/starter-projects-simple-agent">Simple agent</a></li></ul></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" role="button" aria-expanded="true" href="/tutorials-blog-writer">Tutorials</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/tutorials-blog-writer">Blog writer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/tutorials-document-qa">Document QA</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/tutorials-memory-chatbot">Memory chatbot</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/tutorials-math-agent">Math agent</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/tutorials-sequential-agent">Sequential tasks agent</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/tutorials-travel-planning-agent">Travel planning agent</a></li></ul></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" role="button" aria-expanded="true" href="/concepts-overview">Concepts</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-overview">Langflow overview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-playground">Playground</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-components">Components</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/Concepts/concepts-flows">Flows</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-objects">Langflow objects</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts-api">API pane</a></li></ul></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="/components-agents">Components</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-agents">Agents</a></li><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="/components-custom-components">Create custom Python components</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-data">Data</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-embedding-models">Embeddings</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-helpers">Helpers</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-io">Inputs and outputs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-loaders">Loaders</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-logic">Logic</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-memories">Memories</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-models">Models</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-processing">Processing</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-prompts">Prompts</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-tools">Tools</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-vector-stores">Vector stores</a></li></ul></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" role="button" aria-expanded="true" href="/agents-overview">Agents</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/agents-overview">Agents overview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/agents-tool-calling-agent-component">Create a problem-solving agent</a></li></ul></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" role="button" aria-expanded="true" href="/configuration-api-keys">Configuration</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/configuration-api-keys">API keys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/configuration-authentication">Authentication</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/configuration-auto-save">Auto-saving</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/configuration-backend-only">Run Langflow in backend-only mode</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/configuration-cli">Langflow CLI</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/configuration-global-variables">Global variables</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/environment-variables">Environment variables</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/configuration-security-best-practices">Security best practices</a></li></ul></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" role="button" aria-expanded="true" href="/Deployment/deployment-docker">Deployment</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/Deployment/deployment-docker">Docker</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/deployment-gcp">GCP</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/deployment-hugging-face-spaces">HuggingFace Spaces</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/deployment-kubernetes">Kubernetes</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/deployment-railway">Railway</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/deployment-render">Render</a></li></ul></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" role="button" aria-expanded="true" href="/integrations-apify">Integrations</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations-apify">Apify</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations-assemblyai">AssemblyAI</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations-composio">Integrate Composio with Langflow</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations-langfuse">Langfuse</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations-langsmith">LangSmith</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations-langwatch">LangWatch</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" tabindex="0" href="/integrations-setup-google-oauth-langflow">Google</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations-setup-google-oauth-langflow">Integrate Google OAuth with Langflow</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations-setup-google-cloud-vertex-ai-langflow">Integrate Google Cloud Vertex AI with Langflow</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" tabindex="0" href="/integrations/notion/setup">Notion</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations/notion/setup">Setup</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations/notion/notion-agent-conversational">Notion Conversational Agent</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations/notion/notion-agent-meeting-notes">Notion Meeting Notes Agent</a></li></ul></li></ul></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" role="button" aria-expanded="true" href="/contributing-community">Contributing</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/contributing-community">Join the Langflow community</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/contributing-components">Contribute components</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/contributing-github-discussions">Ask for help on the Discussions board</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/contributing-github-issues">Request an enhancement or report a bug</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/contributing-how-to-contribute">Contribute to Langflow</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/contributing-telemetry">Telemetry</a></li></ul></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" role="button" aria-expanded="true" href="/api">API reference</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/api">API documentation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/api-reference-api-examples">API examples</a></li></ul></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 href="https://github.com/langflow-ai/langflow/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true">Changelog</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a href="https://github.com/langflow-ai/langflow/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link menuExternalLink_NmtK" tabindex="0">Changelog<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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"></path></svg></a></li></ul></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Components</span><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Create custom Python components</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Create custom Python components</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>Custom components are created within Langflow and extend the platform's functionality with custom, reusable Python code.</p>
|
||
<p>Since Langflow operates with Python behind the scenes, you can implement any Python function within a Custom Component. This means you can leverage the power of libraries such as Pandas, Scikit-learn, Numpy, and thousands of other packages to create components that handle data processing in unlimited ways. You can use any type as long as the type is properly annotated in the output methods (e.g., <code>> list[int]</code>).</p>
|
||
<p>Custom Components create reusable and configurable components to enhance the capabilities of Langflow, making it a powerful tool for developing complex processing between user and AI messages.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="directory-structure-requirements">Directory structure requirements<a href="#directory-structure-requirements" class="hash-link" aria-label="Direct link to Directory structure requirements" title="Direct link to Directory structure requirements"></a></h2>
|
||
<p>By default, Langflow looks for custom components in the <code>langflow/components</code> directory.</p>
|
||
<p>If you're creating custom components in a different location using the <a href="/environment-variables#LANGFLOW_COMPONENTS_PATH">LANGFLOW_COMPONENTS_PATH</a>
|
||
<code>LANGFLOW_COMPONENTS_PATH</code> environment variable, components must be organized in a specific directory structure to be properly loaded and displayed in the UI:</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">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>/your/custom/components/path/ # Base directory (set by LANGFLOW_COMPONENTS_PATH)</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> └ ── category_name/ # Required category subfolder (determines menu name)</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> └── custom_component.py # Component file</span></div></div><br></code></div></div>
|
||
<p>Components must be placed inside <strong>category folders</strong>, not directly in the base directory.
|
||
The category folder name determines where the component appears in the UI menu.</p>
|
||
<p>For example, to add a component to the <strong>Helpers</strong> menu, place it in a <code>helpers</code> subfolder:</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">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>/app/custom_components/ # LANGFLOW_COMPONENTS_PATH</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> └── helpers/ # Shows up as "Helpers" menu</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> └── custom_component.py # Your component</span></div></div><br></code></div></div>
|
||
<p>You can have <strong>multiple category folders</strong> to organize components into different menus:</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">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>/app/custom_components/</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ├── helpers/</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> │ └── helper_component.py</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> └── tools/</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> └── tool_component.py</span></div></div><br></code></div></div>
|
||
<p>This folder structure is required for Langflow to properly discover and load your custom components. Components placed directly in the base directory will not be loaded.</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">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>/app/custom_components/ # LANGFLOW_COMPONENTS_PATH</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> └── custom_component.py # Won't be loaded - missing category folder!</span></div></div><br></code></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="create-a-custom-component-in-langflow">Create a custom component in Langflow<a href="#create-a-custom-component-in-langflow" class="hash-link" aria-label="Direct link to Create a custom component in Langflow" title="Direct link to Create a custom component in Langflow"></a></h2>
|
||
<p>Creating custom components in Langflow involves creating a Python class that defines the component's functionality, inputs, and outputs.
|
||
The default code provides a working structure for your custom component.</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">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span># from langflow.field_typing import Data</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span>from langflow.custom import Component</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span>from langflow.io import MessageTextInput, Output</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span>from langflow.schema import Data</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span>class CustomComponent(Component):</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Custom Component"</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> description = "Use as a template to create your own component."</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> documentation: str = "https://docs.langflow.org/components-custom-components"</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> icon = "custom_components"</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> name = "CustomComponent"</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> inputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> MessageTextInput(name="input_value", display_name="Input Value", value="Hello, World!"),</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> outputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> Output(display_name="Output", name="output", method="build_output"),</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> def build_output(self) -> Data:</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> data = Data(value=self.input_value)</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> self.status = data</span></div></div><div><span class="ch-code-line-number">_<!-- -->25</span><div style="display:inline-block;margin-left:16px"><span> return data</span></div></div><br></code></div></div>
|
||
<p>You can create your class in your favorite text editor outside of Langflow and paste it in later, or just follow along in the code pane.</p>
|
||
<ol>
|
||
<li>In Langflow, click <strong>+ Custom Component</strong> to add a custom component into the workspace.</li>
|
||
<li>Open the component's code pane.</li>
|
||
<li>Import dependencies.
|
||
Your custom component inherits from the langflow <code>Component</code> class so you need to include it.</li>
|
||
</ol>
|
||
<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">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>from langflow.custom import Component</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>from langflow.io import MessageTextInput, Output</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>from langflow.schema import Data</span></div></div><br></code></div></div>
|
||
<ol start="4">
|
||
<li><strong>Define the Class</strong>: Start by defining a Python class that inherits from <code>Component</code>. This class will encapsulate the functionality of your custom component.</li>
|
||
</ol>
|
||
<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">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>class CustomComponent(Component):</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Custom Component"</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> description = "Use as a template to create your own component."</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> documentation: str = "https://docs.langflow.org/components-custom-components"</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> icon = "custom_components"</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> name = "CustomComponent"</span></div></div><br></code></div></div>
|
||
<ol start="5">
|
||
<li><strong>Specify Inputs and Outputs</strong>: Use Langflow's input and output classes to define the inputs and outputs of your component. They should be declared as class attributes.</li>
|
||
</ol>
|
||
<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">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> inputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> MessageTextInput(name="input_value", display_name="Input Value", value="Hello, World!"),</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> outputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> Output(display_name="Output", name="output", method="build_output"),</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><br></code></div></div>
|
||
<ol start="6">
|
||
<li><strong>Implement Output Methods</strong>: Implement methods for each output, which contains the logic of your component. These methods can access input values using <code>self.<input_name></code> , return processed values and define what to be displayed in the component with the <code>self.status</code> attribute.</li>
|
||
</ol>
|
||
<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">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> def build_output(self) -> Data:</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> data = Data(value=self.input_value)</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> self.status = data</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> return data</span></div></div><br></code></div></div>
|
||
<ol start="7">
|
||
<li><strong>Use Proper Annotations</strong>: Ensure that output methods are properly annotated with their types. Langflow uses these annotations to validate and handle data correctly. For example, this method is annotated to output <code>Data</code>.</li>
|
||
</ol>
|
||
<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">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> def build_output(self) -> Data:</span></div></div><br></code></div></div>
|
||
<ol start="8">
|
||
<li>Click <strong>Check & Save</strong> to confirm your component works.
|
||
You now have an operational custom component.</li>
|
||
</ol>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="add-inputs-and-modify-output-methods">Add inputs and modify output methods<a href="#add-inputs-and-modify-output-methods" class="hash-link" aria-label="Direct link to Add inputs and modify output methods" title="Direct link to Add inputs and modify output methods"></a></h2>
|
||
<p>This code defines a custom component that accepts 5 inputs and outputs a Message.</p>
|
||
<p>Copy and paste it into the Custom Component code pane and click <strong>Check & Save.</strong></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">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span>from langflow.custom import Component</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span>from langflow.inputs import StrInput, MultilineInput, SecretStrInput, IntInput, DropdownInput</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span>from langflow.template import Output, Input</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span>from langflow.schema.message import Message</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span>class MyCustomComponent(Component):</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> display_name = "My Custom Component"</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> description = "An example of a custom component with various input types."</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> inputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> StrInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> name="username",</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> display_name="Username",</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> info="Enter your username."</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> SecretStrInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> name="password",</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> display_name="Password",</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> info="Enter your password."</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> MessageTextInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> name="special_message",</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> display_name="special_message",</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> info="Enter a special message.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> IntInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> name="age",</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> display_name="Age",</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> info="Enter your age."</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> DropdownInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> name="gender",</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> display_name="Gender",</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> options=["Male", "Female", "Other"],</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> info="Select your gender."</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> )</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> outputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> Output(display_name="Result", name="result", method="process_inputs"),</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> def process_inputs(self) -> Message:</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> """</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> Process the user inputs and return a Message object.</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> Returns:</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> Message: A Message object containing the processed information.</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> """</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> try:</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> processed_text = f"User {self.username} (Age: {self.age}, Gender: {self.gender}) " \</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> f"sent the following special message: {self.special_message}"</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> return Message(text=processed_text)</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> except AttributeError as e:</span></div></div><div><span class="ch-code-line-number">_<!-- -->55</span><div style="display:inline-block;margin-left:16px"><span> return Message(text=f"Error processing inputs: {str(e)}")</span></div></div><br></code></div></div>
|
||
<p>Since the component outputs a <code>Message</code>, you can wire it into a chat and pass messages to yourself.</p>
|
||
<p>Your Custom Component accepts the Chat Input message through <code>MessageTextInput</code>, fills in the variables with the <code>process_inputs</code> method, and finally passes the message <code>User Username (Age: 49, Gender: Male) sent the following special message: Hello!</code> to Chat Output.</p>
|
||
<p>By defining inputs this way, Langflow can automatically handle the validation and display of these fields in the user interface, making it easier to create robust and user-friendly custom components.</p>
|
||
<p>All of the types detailed above derive from a general class that can also be accessed through the generic <code>Input</code> class.</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>Use <code>MessageInput</code> to get the entire Message object instead of just the text.</p></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="3815589831f24ab792328ed233c8b00d">Input Types<a href="#3815589831f24ab792328ed233c8b00d" class="hash-link" aria-label="Direct link to Input Types" title="Direct link to Input Types"></a></h2>
|
||
<hr>
|
||
<p>Langflow provides several higher-level input types to simplify the creation of custom components. These input types standardize how inputs are defined, validated, and used. Here’s a guide on how to use these inputs and their primary purposes:</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="fb06c48a326043ffa46badc1ab3ba467"><strong>HandleInput</strong><a href="#fb06c48a326043ffa46badc1ab3ba467" class="hash-link" aria-label="Direct link to fb06c48a326043ffa46badc1ab3ba467" title="Direct link to fb06c48a326043ffa46badc1ab3ba467"></a></h3>
|
||
<p>Represents an input that has a handle to a specific type (e.g., <code>BaseLanguageModel</code>, <code>BaseRetriever</code>, etc.).</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Useful for connecting to specific component types in a flow.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="0e1dcb768e38487180d720b0884a90f5"><strong>DataInput</strong><a href="#0e1dcb768e38487180d720b0884a90f5" class="hash-link" aria-label="Direct link to 0e1dcb768e38487180d720b0884a90f5" title="Direct link to 0e1dcb768e38487180d720b0884a90f5"></a></h3>
|
||
<p>Represents an input that receives a <code>Data</code> object.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Ideal for components that process or manipulate data objects.</li>
|
||
<li><strong>Input Types:</strong> <code>["Data"]</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="4ec6e68ad9ab4cd194e8e607bc5b3411"><strong>StrInput</strong><a href="#4ec6e68ad9ab4cd194e8e607bc5b3411" class="hash-link" aria-label="Direct link to 4ec6e68ad9ab4cd194e8e607bc5b3411" title="Direct link to 4ec6e68ad9ab4cd194e8e607bc5b3411"></a></h3>
|
||
<p>Represents a standard string input field.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Used for any text input where the user needs to provide a string.</li>
|
||
<li><strong>Input Types:</strong> <code>["Text"]</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="9292ac0105e14177af5eff2131b9c71b"><strong>MessageInput</strong><a href="#9292ac0105e14177af5eff2131b9c71b" class="hash-link" aria-label="Direct link to 9292ac0105e14177af5eff2131b9c71b" title="Direct link to 9292ac0105e14177af5eff2131b9c71b"></a></h3>
|
||
<p>Represents an input field specifically for <code>Message</code> objects.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Used in components that handle or process messages.</li>
|
||
<li><strong>Input Types:</strong> <code>["Message"]</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5511f5e32b944b4e973379a6bd5405e4"><strong>MessageTextInput</strong><a href="#5511f5e32b944b4e973379a6bd5405e4" class="hash-link" aria-label="Direct link to 5511f5e32b944b4e973379a6bd5405e4" title="Direct link to 5511f5e32b944b4e973379a6bd5405e4"></a></h3>
|
||
<p>Represents a text input for messages.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Suitable for components that need to extract text from message objects.</li>
|
||
<li><strong>Input Types:</strong> <code>["Message"]</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="e6d8315b0fb44a2fb8c62c3f3184bbe9"><strong>MultilineInput</strong><a href="#e6d8315b0fb44a2fb8c62c3f3184bbe9" class="hash-link" aria-label="Direct link to e6d8315b0fb44a2fb8c62c3f3184bbe9" title="Direct link to e6d8315b0fb44a2fb8c62c3f3184bbe9"></a></h3>
|
||
<p>Represents a text field that supports multiple lines.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Ideal for longer text inputs where the user might need to write extended text.</li>
|
||
<li><strong>Input Types:</strong> <code>["Text"]</code></li>
|
||
<li><strong>Attributes:</strong> <code>multiline=True</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="2283c13aa5f745b8b0009f7d40e59419"><strong>SecretStrInput</strong><a href="#2283c13aa5f745b8b0009f7d40e59419" class="hash-link" aria-label="Direct link to 2283c13aa5f745b8b0009f7d40e59419" title="Direct link to 2283c13aa5f745b8b0009f7d40e59419"></a></h3>
|
||
<p>Represents a password input field.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Used for sensitive text inputs where the input should be hidden (e.g., passwords, API keys).</li>
|
||
<li><strong>Attributes:</strong> <code>password=True</code></li>
|
||
<li><strong>Input Types:</strong> Does not accept input types, meaning it has no input handles for previous nodes/components to connect to it.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="612680db6578451daef695bd19827a56"><strong>IntInput</strong><a href="#612680db6578451daef695bd19827a56" class="hash-link" aria-label="Direct link to 612680db6578451daef695bd19827a56" title="Direct link to 612680db6578451daef695bd19827a56"></a></h3>
|
||
<p>Represents an integer input field.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Used for numeric inputs where the value should be an integer.</li>
|
||
<li><strong>Input Types:</strong> <code>["Integer"]</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="a15e1fdae15b49fc9bfbf38f8bd7b203"><strong>FloatInput</strong><a href="#a15e1fdae15b49fc9bfbf38f8bd7b203" class="hash-link" aria-label="Direct link to a15e1fdae15b49fc9bfbf38f8bd7b203" title="Direct link to a15e1fdae15b49fc9bfbf38f8bd7b203"></a></h3>
|
||
<p>Represents a float input field.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Used for numeric inputs where the value should be a floating-point number.</li>
|
||
<li><strong>Input Types:</strong> <code>["Float"]</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="3083671e0e7f4390a03396485114be66"><strong>BoolInput</strong><a href="#3083671e0e7f4390a03396485114be66" class="hash-link" aria-label="Direct link to 3083671e0e7f4390a03396485114be66" title="Direct link to 3083671e0e7f4390a03396485114be66"></a></h3>
|
||
<p>Represents a boolean input field.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Used for true/false or yes/no type inputs.</li>
|
||
<li><strong>Input Types:</strong> <code>["Boolean"]</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="2866fc4018e743d8a45afde53f1e57be"><strong>NestedDictInput</strong><a href="#2866fc4018e743d8a45afde53f1e57be" class="hash-link" aria-label="Direct link to 2866fc4018e743d8a45afde53f1e57be" title="Direct link to 2866fc4018e743d8a45afde53f1e57be"></a></h3>
|
||
<p>Represents an input field for nested dictionaries.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Used for more complex data structures where the input needs to be a dictionary.</li>
|
||
<li><strong>Input Types:</strong> <code>["NestedDict"]</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="daa2c2398f694ec199b425e2ed4bcf93"><strong>DictInput</strong><a href="#daa2c2398f694ec199b425e2ed4bcf93" class="hash-link" aria-label="Direct link to daa2c2398f694ec199b425e2ed4bcf93" title="Direct link to daa2c2398f694ec199b425e2ed4bcf93"></a></h3>
|
||
<p>Represents an input field for dictionaries.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Suitable for inputs that require a dictionary format.</li>
|
||
<li><strong>Input Types:</strong> <code>["Dict"]</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="14dcdef11bab4d3f8127eaf2e36a77b9"><strong>DropdownInput</strong><a href="#14dcdef11bab4d3f8127eaf2e36a77b9" class="hash-link" aria-label="Direct link to 14dcdef11bab4d3f8127eaf2e36a77b9" title="Direct link to 14dcdef11bab4d3f8127eaf2e36a77b9"></a></h3>
|
||
<p>Represents a dropdown input field.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Used where the user needs to select from a predefined list of options.</li>
|
||
<li><strong>Attributes:</strong> <code>options</code> to define the list of selectable options.</li>
|
||
<li><strong>Input Types:</strong> <code>["Text"]</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="73e6377dc5f446f39517a558a1291410"><strong>FileInput</strong><a href="#73e6377dc5f446f39517a558a1291410" class="hash-link" aria-label="Direct link to 73e6377dc5f446f39517a558a1291410" title="Direct link to 73e6377dc5f446f39517a558a1291410"></a></h3>
|
||
<p>Represents a file input field.</p>
|
||
<ul>
|
||
<li><strong>Usage:</strong> Used to upload files.</li>
|
||
<li><strong>Attributes:</strong> <code>file_types</code> to specify the types of files that can be uploaded.</li>
|
||
<li><strong>Input Types:</strong> <code>["File"]</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="278e2027493e45b68746af0a5b6c06f6">Generic Input<a href="#278e2027493e45b68746af0a5b6c06f6" class="hash-link" aria-label="Direct link to Generic Input" title="Direct link to Generic Input"></a></h3>
|
||
<hr>
|
||
<p>Langflow offers native input types, but you can use any type as long as they are properly annotated in the output methods (e.g., <code>-> list[int]</code>).</p>
|
||
<p>The <code>Input</code> class is highly customizable, allowing you to specify a wide range of attributes for each input field. It has several attributes that can be customized:</p>
|
||
<ul>
|
||
<li><code>field_type</code>: Specifies the type of field (e.g., <code>str</code>, <code>int</code>). Default is <code>str</code>.</li>
|
||
<li><code>required</code>: Boolean indicating if the field is required. Default is <code>False</code>.</li>
|
||
<li><code>placeholder</code>: Placeholder text for the input field. Default is an empty string.</li>
|
||
<li><code>is_list</code>: Boolean indicating if the field should accept a list of values. Default is <code>False</code>.</li>
|
||
<li><code>show</code>: Boolean indicating if the field should be shown. Default is <code>True</code>.</li>
|
||
<li><code>multiline</code>: Boolean indicating if the field should allow multi-line input. Default is <code>False</code>.</li>
|
||
<li><code>value</code>: Default value for the input field. Default is <code>None</code>.</li>
|
||
<li><code>file_types</code>: List of accepted file types (for file inputs). Default is an empty list.</li>
|
||
<li><code>file_path</code>: File path if the field is a file input. Default is <code>None</code>.</li>
|
||
<li><code>password</code>: Boolean indicating if the field is a password. Default is <code>False</code>.</li>
|
||
<li><code>options</code>: List of options for the field (for dropdowns). Default is <code>None</code>.</li>
|
||
<li><code>name</code>: Name of the input field. Default is <code>None</code>.</li>
|
||
<li><code>display_name</code>: Display name for the input field. Default is <code>None</code>.</li>
|
||
<li><code>advanced</code>: Boolean indicating if the field is an advanced parameter. Default is <code>False</code>.</li>
|
||
<li><code>input_types</code>: List of accepted input types. Default is <code>None</code>.</li>
|
||
<li><code>dynamic</code>: Boolean indicating if the field is dynamic. Default is <code>False</code>.</li>
|
||
<li><code>info</code>: Additional information or tooltip for the input field. Default is an empty string.</li>
|
||
<li><code>real_time_refresh</code>: Boolean indicating if the field should refresh in real-time. Default is <code>None</code>.</li>
|
||
<li><code>refresh_button</code>: Boolean indicating if the field should have a refresh button. Default is <code>None</code>.</li>
|
||
<li><code>refresh_button_text</code>: Text for the refresh button. Default is <code>None</code>.</li>
|
||
<li><code>range_spec</code>: Range specification for numeric fields. Default is <code>None</code>.</li>
|
||
<li><code>load_from_db</code>: Boolean indicating if the field should load from the database. Default is <code>False</code>.</li>
|
||
<li><code>title_case</code>: Boolean indicating if the display name should be in title case. Default is <code>True</code>.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="create-a-custom-component-with-generic-input">Create a Custom Component with Generic Input<a href="#create-a-custom-component-with-generic-input" class="hash-link" aria-label="Direct link to Create a Custom Component with Generic Input" title="Direct link to Create a Custom Component with Generic Input"></a></h2>
|
||
<p>Here is an example of how to define inputs for a component using the <code>Input</code> class.</p>
|
||
<p>Copy and paste it into the Custom Component code pane and click <strong>Check & Save.</strong></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">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span>from langflow.template import Input, Output</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span>from langflow.custom import Component</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span>from langflow.field_typing import Text</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span>from langflow.schema.message import Message</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span>from typing import Dict, Any</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span>class TextAnalyzerComponent(Component):</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Text Analyzer"</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> description = "Analyzes input text and provides basic statistics."</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> inputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> Input(</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> name="input_text",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> display_name="Input Text",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> field_type="Message",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> required=True,</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> placeholder="Enter text to analyze",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> multiline=True,</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> info="The text you want to analyze.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> input_types=["Text"]</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> Input(</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> name="include_word_count",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> display_name="Include Word Count",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> field_type="bool",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> required=False,</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> info="Whether to include word count in the analysis.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> Input(</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> name="perform_sentiment_analysis",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> display_name="Perform Sentiment Analysis",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> field_type="bool",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> required=False,</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> info="Whether to perform basic sentiment analysis.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> outputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> Output(display_name="Analysis Results", name="results", method="analyze_text"),</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> def analyze_text(self) -> Message:</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> # Extract text from the Message object</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> if isinstance(self.input_text, Message):</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> text = self.input_text.text</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> else:</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> text = str(self.input_text)</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> results = {</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> "character_count": len(text),</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> "sentence_count": text.count('.') + text.count('!') + text.count('?')</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> if self.include_word_count:</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> results["word_count"] = len(text.split())</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> if self.perform_sentiment_analysis:</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> # Basic sentiment analysis</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> text_lower = text.lower()</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> if "happy" in text_lower or "good" in text_lower:</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> sentiment = "positive"</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> elif "sad" in text_lower or "bad" in text_lower:</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> sentiment = "negative"</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> else:</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> sentiment = "neutral"</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> results["sentiment"] = sentiment</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> # Convert the results dictionary to a formatted string</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> formatted_results = "\n".join([f"{key}: {value}" for key, value in results.items()])</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> # Return a Message object</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span> return Message(text=formatted_results)</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span># Define how to use the inputs and outputs</span></div></div><div><span class="ch-code-line-number">_<!-- -->76</span><div style="display:inline-block;margin-left:16px"><span>component = TextAnalyzerComponent()</span></div></div><br></code></div></div>
|
||
<p>In this custom component:</p>
|
||
<ul>
|
||
<li>
|
||
<p>The <code>input_text</code> input is a required multi-line text field that accepts a Message object or a string. It's used to provide the text for analysis.</p>
|
||
</li>
|
||
<li>
|
||
<p>The <code>include_word_count</code> input is an optional boolean field. When set to True, it adds a word count to the analysis results.</p>
|
||
</li>
|
||
<li>
|
||
<p>The <code>perform_sentiment_analysis</code> input is an optional boolean field. When set to True, it triggers a basic sentiment analysis of the input text.</p>
|
||
</li>
|
||
</ul>
|
||
<p>The component performs basic text analysis, including character count and sentence count (based on punctuation marks). If word count is enabled, it splits the text and counts the words. If sentiment analysis is enabled, it performs a simple keyword-based sentiment classification (positive, negative, or neutral).</p>
|
||
<p>Since the component inputs and outputs a <code>Message</code>, you can wire the component into a chat and see how the basic custom component logic interacts with your input.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="6f225be8a142450aa19ee8e46a3b3c8c">Create a Custom Component with Multiple Outputs<a href="#6f225be8a142450aa19ee8e46a3b3c8c" class="hash-link" aria-label="Direct link to Create a Custom Component with Multiple Outputs" title="Direct link to Create a Custom Component with Multiple Outputs"></a></h2>
|
||
<hr>
|
||
<p>In Langflow, custom components can have multiple outputs. Each output can be associated with a specific method in the component, allowing you to define distinct behaviors for each output path. This feature is particularly useful when you want to route data based on certain conditions or process it in multiple ways.</p>
|
||
<ol>
|
||
<li><strong>Definition of Outputs</strong>: Each output is defined in the <code>outputs</code> list of the component. Each output is associated with a display name, an internal name, and a method that gets called to generate the output.</li>
|
||
<li><strong>Output Methods</strong>: The methods associated with outputs are responsible for generating the data for that particular output. These methods are called when the component is executed, and each method can independently produce its result.</li>
|
||
</ol>
|
||
<p>This example component has two outputs:</p>
|
||
<ul>
|
||
<li><code>process_data</code>: Processes the input text (e.g., converts it to uppercase) and returns it.</li>
|
||
<li><code>get_processing_function</code>: Returns the <code>process_data</code> method itself to be reused in composition.</li>
|
||
</ul>
|
||
<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">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span>from typing import Callable</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span>from langflow.custom import Component</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span>from langflow.inputs import StrInput</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span>from langflow.template import Output</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span>from langflow.field_typing import Text</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span>class DualOutputComponent(Component):</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Dual Output"</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> description = "Processes input text and returns both the result and the processing function."</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> icon = "double-arrow"</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> inputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> StrInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> name="input_text",</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> display_name="Input Text",</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> info="The text input to be processed.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> outputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> Output(display_name="Processed Data", name="processed_data", method="process_data"),</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> Output(display_name="Processing Function", name="processing_function", method="get_processing_function"),</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> def process_data(self) -> Text:</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> # Process the input text (e.g., convert to uppercase)</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> processed = self.input_text.upper()</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> self.status = processed</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> return processed</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> def get_processing_function(self) -> Callable[[], Text]:</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> # Return the processing function itself</span></div></div><div><span class="ch-code-line-number">_<!-- -->33</span><div style="display:inline-block;margin-left:16px"><span> return self.process_data</span></div></div><br></code></div></div>
|
||
<p>This example shows how to define multiple outputs in a custom component. The first output returns the processed data, while the second output returns the processing function itself.</p>
|
||
<p>The <code>processing_function</code> output can be used in scenarios where the function itself is needed for further processing or dynamic flow control. Notice how both outputs are properly annotated with their respective types, ensuring clarity and type safety.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="special-operations">Special Operations<a href="#special-operations" class="hash-link" aria-label="Direct link to Special Operations" title="Direct link to Special Operations"></a></h2>
|
||
<p>Advanced methods and attributes offer additional control and functionality. Understanding how to leverage these can enhance your custom components' capabilities.</p>
|
||
<ul>
|
||
<li><code>self.inputs</code>: Access all defined inputs. Useful when an output method needs to interact with multiple inputs.</li>
|
||
<li><code>self.outputs</code>: Access all defined outputs. This is particularly useful if an output function needs to trigger another output function.</li>
|
||
<li><code>self.status</code>: Use this to update the component's status or intermediate results. It helps track the component's internal state or store temporary data.</li>
|
||
<li><code>self.graph.flow_id</code>: Retrieve the flow ID, useful for maintaining context or debugging.</li>
|
||
<li><code>self.stop("output_name")</code>: Use this method within an output function to prevent data from being sent through other components. This method stops next component execution and is particularly useful for specific operations where a component should stop from running based on specific conditions.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="contribute-custom-components-to-langflow">Contribute Custom Components to Langflow<a href="#contribute-custom-components-to-langflow" class="hash-link" aria-label="Direct link to Contribute Custom Components to Langflow" title="Direct link to Contribute Custom Components to Langflow"></a></h2>
|
||
<p>See <a href="/contributing-components">How to Contribute</a> to contribute your custom component to Langflow.</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/components-agents"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Agents</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/components-data"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Data</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="#directory-structure-requirements" class="table-of-contents__link toc-highlight">Directory structure requirements</a></li><li><a href="#create-a-custom-component-in-langflow" class="table-of-contents__link toc-highlight">Create a custom component in Langflow</a></li><li><a href="#add-inputs-and-modify-output-methods" class="table-of-contents__link toc-highlight">Add inputs and modify output methods</a></li><li><a href="#3815589831f24ab792328ed233c8b00d" class="table-of-contents__link toc-highlight">Input Types</a><ul><li><a href="#fb06c48a326043ffa46badc1ab3ba467" class="table-of-contents__link toc-highlight"><strong>HandleInput</strong></a></li><li><a href="#0e1dcb768e38487180d720b0884a90f5" class="table-of-contents__link toc-highlight"><strong>DataInput</strong></a></li><li><a href="#4ec6e68ad9ab4cd194e8e607bc5b3411" class="table-of-contents__link toc-highlight"><strong>StrInput</strong></a></li><li><a href="#9292ac0105e14177af5eff2131b9c71b" class="table-of-contents__link toc-highlight"><strong>MessageInput</strong></a></li><li><a href="#5511f5e32b944b4e973379a6bd5405e4" class="table-of-contents__link toc-highlight"><strong>MessageTextInput</strong></a></li><li><a href="#e6d8315b0fb44a2fb8c62c3f3184bbe9" class="table-of-contents__link toc-highlight"><strong>MultilineInput</strong></a></li><li><a href="#2283c13aa5f745b8b0009f7d40e59419" class="table-of-contents__link toc-highlight"><strong>SecretStrInput</strong></a></li><li><a href="#612680db6578451daef695bd19827a56" class="table-of-contents__link toc-highlight"><strong>IntInput</strong></a></li><li><a href="#a15e1fdae15b49fc9bfbf38f8bd7b203" class="table-of-contents__link toc-highlight"><strong>FloatInput</strong></a></li><li><a href="#3083671e0e7f4390a03396485114be66" class="table-of-contents__link toc-highlight"><strong>BoolInput</strong></a></li><li><a href="#2866fc4018e743d8a45afde53f1e57be" class="table-of-contents__link toc-highlight"><strong>NestedDictInput</strong></a></li><li><a href="#daa2c2398f694ec199b425e2ed4bcf93" class="table-of-contents__link toc-highlight"><strong>DictInput</strong></a></li><li><a href="#14dcdef11bab4d3f8127eaf2e36a77b9" class="table-of-contents__link toc-highlight"><strong>DropdownInput</strong></a></li><li><a href="#73e6377dc5f446f39517a558a1291410" class="table-of-contents__link toc-highlight"><strong>FileInput</strong></a></li><li><a href="#278e2027493e45b68746af0a5b6c06f6" class="table-of-contents__link toc-highlight">Generic Input</a></li></ul></li><li><a href="#create-a-custom-component-with-generic-input" class="table-of-contents__link toc-highlight">Create a Custom Component with Generic Input</a></li><li><a href="#6f225be8a142450aa19ee8e46a3b3c8c" class="table-of-contents__link toc-highlight">Create a Custom Component with Multiple Outputs</a></li><li><a href="#special-operations" class="table-of-contents__link toc-highlight">Special Operations</a></li><li><a href="#contribute-custom-components-to-langflow" class="table-of-contents__link toc-highlight">Contribute Custom Components to Langflow</a></li></ul></div></div></div></div></main></div></div></div><div style="position:fixed;right:20px;bottom:20px;z-index:100;display:flex;align-items:center;gap:10px;cursor:pointer"><div style="background-color:#f6f6f6;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.1)"><img src="/img/langflow-icon-black-transparent.svg" style="width:40px" alt="Search"></div></div></div>
|
||
</body>
|
||
</html> |