mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-24 06:42:21 +08:00
207 lines
75 KiB
HTML
207 lines
75 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.4.0">
|
||
<title data-rh="true">Custom 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://langflow-ai.github.io/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="Custom Components | Langflow Documentation"><meta data-rh="true" name="description" content="Langflow components can be created from within the platform, allowing users to extend the platform's functionality using Python code. They encapsulate are designed to be independent units, reusable across different workflows."><meta data-rh="true" property="og:description" content="Langflow components can be created from within the platform, allowing users to extend the platform's functionality using Python code. They encapsulate are designed to be independent units, reusable across different workflows."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://langflow-ai.github.io/components-custom-components"><link data-rh="true" rel="alternate" href="https://langflow-ai.github.io/components-custom-components" hreflang="en"><link data-rh="true" rel="alternate" href="https://langflow-ai.github.io/components-custom-components" hreflang="x-default"><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="stylesheet" href="/assets/css/styles.0752b4d1.css">
|
||
<script src="/assets/js/runtime~main.6f36853e.js" defer="defer"></script>
|
||
<script src="/assets/js/main.85ea0f63.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_m1mJ"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/chain.png" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/chain.png" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">Langflow</b></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"><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"></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/chain.png" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/chain.png" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"><b>Langflow</b></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-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="/whats-new-a-new-chapter-langflow">What’s New?</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="/whats-new-a-new-chapter-langflow">1.0 - A new chapter for Langflow</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="/">Getting 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="/">👋 Welcome 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="/getting-started-installation">📦 Installation</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="/getting-started-quickstart">⚡️ Quickstart</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="/getting-started-common-installation-issues">❗️ Common Installation Issues</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-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="/starter-projects-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="/starter-projects-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="/starter-projects-vector-store-rag">Vector Store RAG</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="/guides-new-to-llms">Guides</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="/guides-new-to-llms">📚 New to LLMs?</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="/guides-chat-memory">Chat Memory</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="/guides-data-message">Data & Message</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" href="/workspace">Workspace</a><button aria-label="Collapse sidebar category 'Workspace'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></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="/workspace-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="/workspace-api">API</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="/workspace-logs">Logs</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--active" href="/components">Components</a><button aria-label="Collapse sidebar category 'Components'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></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-io">Inputs & 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-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-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-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-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-embedding-models">Embedding 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-vector-stores">Vector Stores</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">Custom Components</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-hugging-face-spaces">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-hugging-face-spaces">🤗 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-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-render">Render</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></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="/settings-global-variables">Settings</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="/settings-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="/settings-project-general-settings">Project & General Settings</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-authentication">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-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-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-cli">Command Line Interface (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="/365085a8-a90a-43f9-a779-f8769ec7eca1">Folders</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">Backend-Only</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-langsmith">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-langsmith">LangSmith</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="/contributing-telemetry">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-telemetry">Telemetry</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">How to contribute?</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">GitHub Issues</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-community">Community</a></li></ul></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_kv0_"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></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 itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/components"><span itemprop="name">Components</span></a><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">Custom 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>Custom 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>Langflow components can be created from within the platform, allowing users to extend the platform's functionality using Python code. They encapsulate are designed to be independent units, reusable across different workflows.</p>
|
||
<p>These components can be easily connected within a language model pipeline, adding freedom and flexibility to what can be included in between user and AI messages.</p>
|
||
<p><img decoding="async" loading="lazy" src="/assets/images/238089171-8512eacd66ef57e59756d6863fc38afd.png" width="1984" height="1116" class="img_ev3q"></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 packages to create components that handle data processing in unlimited ways.</p>
|
||
<p>Custom Components are not just about extending functionality; they also streamline the development process. By creating reusable and configurable components, you can enhance the capabilities of Langflow, making it a powerful tool for developing complex workflows.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="d3a151089a9e4584bd420461cd1432c6">Key Characteristics:<a class="hash-link" aria-label="Direct link to Key Characteristics:" title="Direct link to Key Characteristics:" href="/components-custom-components#d3a151089a9e4584bd420461cd1432c6"></a></h3>
|
||
<ol>
|
||
<li><strong>Modular and Reusable</strong>: Designed as independent units, components encapsulate specific functionality, making them reusable across different projects and workflows.</li>
|
||
<li><strong>Integration with Python Libraries</strong>: You can import libraries like Pandas, Scikit-learn, Numpy, etc., to build components that handle data processing, machine learning, numerical computations, and more.</li>
|
||
<li><strong>Flexible Inputs and Outputs</strong>: While Langflow offers native input and output types, you can use any type as long as they are properly annotated in the output methods (e.g., <code>> list[int]</code>).</li>
|
||
<li><strong>Python-Powered</strong>: Since Langflow operates with Python behind the scenes, any Python function can be implemented within a custom component.</li>
|
||
<li><strong>Enhanced Workflow</strong>: Custom components serve as reusable building blocks, enabling you to create pre-processing visual blocks with ease and integrate them into your language model pipeline.</li>
|
||
</ol>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="827a2b5acec94426a4a2106a8332622d">Why Use Custom Components?<a class="hash-link" aria-label="Direct link to Why Use Custom Components?" title="Direct link to Why Use Custom Components?" href="/components-custom-components#827a2b5acec94426a4a2106a8332622d"></a></h3>
|
||
<ul>
|
||
<li><strong>Customization</strong>: Tailor the functionality to your specific needs by writing Python code that suits your workflow.</li>
|
||
<li><strong>Flexibility</strong>: Add any Python-based logic or processing step between user/AI messages, enhancing the flexibility of Langflow.</li>
|
||
<li><strong>Efficiency</strong>: Streamline your development process by creating reusable, configurable components that can be easily deployed.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="2088ade519514bb3923cdf7f2ac2089a">How to Write Them<a class="hash-link" aria-label="Direct link to How to Write Them" title="Direct link to How to Write Them" href="/components-custom-components#2088ade519514bb3923cdf7f2ac2089a"></a></h3>
|
||
<hr>
|
||
<p>Writing custom components in Langflow involves creating a Python class that defines the component's functionality, inputs, and outputs. The process involves a few key steps:</p>
|
||
<ol>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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.</li>
|
||
</ol>
|
||
<p>Here's a basic structure of a 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">_<!-- -->31</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">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span>from langflow.inputs import StrInput, IntInput</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</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">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span>class MyCustomComponent(Component):</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> icon = "coffee" # check lucide.dev/icons or pass an emoji</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> inputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> StrInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> name="input_text",</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> display_name="Input Text",</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> info="Text to be processed.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> IntInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> name="input_number",</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> display_name="Input Number",</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> info="Number to be processed.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> outputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> Output(display_name="Processed Text", name="processed_text", method="process_text"),</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> def process_text(self) -> str:</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> input_text = self.input_text</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> input_number = self.input_number</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> # Implement your logic here</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> processed_text = f"{input_text} processed with number {input_number}"</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> self.status = processed_text</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> return processed_text</span></div></div><br></code></div></div>
|
||
<p>Paste that code into the Custom Component code snippet and click <strong>Check & Save.</strong></p>
|
||
<p><img decoding="async" loading="lazy" src="/assets/images/1028644105-85667a76353aa8f1527cdfc0f05b85be.png" width="2976" height="1674" class="img_ev3q"></p>
|
||
<p>You should see something like the component below. Double click the name or description areas to edit them.</p>
|
||
<p><img decoding="async" loading="lazy" src="/assets/images/241280398-3d8a5879a54500d5767f7baa3b146760.png" width="2144" height="1206" class="img_ev3q"></p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="3815589831f24ab792328ed233c8b00d">Input Types<a class="hash-link" aria-label="Direct link to Input Types" title="Direct link to Input Types" href="/components-custom-components#3815589831f24ab792328ed233c8b00d"></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 class="hash-link" aria-label="Direct link to fb06c48a326043ffa46badc1ab3ba467" title="Direct link to fb06c48a326043ffa46badc1ab3ba467" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to 0e1dcb768e38487180d720b0884a90f5" title="Direct link to 0e1dcb768e38487180d720b0884a90f5" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to 4ec6e68ad9ab4cd194e8e607bc5b3411" title="Direct link to 4ec6e68ad9ab4cd194e8e607bc5b3411" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to 9292ac0105e14177af5eff2131b9c71b" title="Direct link to 9292ac0105e14177af5eff2131b9c71b" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to 5511f5e32b944b4e973379a6bd5405e4" title="Direct link to 5511f5e32b944b4e973379a6bd5405e4" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to e6d8315b0fb44a2fb8c62c3f3184bbe9" title="Direct link to e6d8315b0fb44a2fb8c62c3f3184bbe9" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to 2283c13aa5f745b8b0009f7d40e59419" title="Direct link to 2283c13aa5f745b8b0009f7d40e59419" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to 612680db6578451daef695bd19827a56" title="Direct link to 612680db6578451daef695bd19827a56" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to a15e1fdae15b49fc9bfbf38f8bd7b203" title="Direct link to a15e1fdae15b49fc9bfbf38f8bd7b203" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to 3083671e0e7f4390a03396485114be66" title="Direct link to 3083671e0e7f4390a03396485114be66" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to 2866fc4018e743d8a45afde53f1e57be" title="Direct link to 2866fc4018e743d8a45afde53f1e57be" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to daa2c2398f694ec199b425e2ed4bcf93" title="Direct link to daa2c2398f694ec199b425e2ed4bcf93" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to 14dcdef11bab4d3f8127eaf2e36a77b9" title="Direct link to 14dcdef11bab4d3f8127eaf2e36a77b9" href="/components-custom-components#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 class="hash-link" aria-label="Direct link to 73e6377dc5f446f39517a558a1291410" title="Direct link to 73e6377dc5f446f39517a558a1291410" href="/components-custom-components#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>
|
||
<p>Here is an example of how these inputs can be defined in a 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">_<!-- -->44</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">_<!-- -->44</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">_<!-- -->44</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">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span>class MyCustomComponent(Component):</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</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">_<!-- -->44</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">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> inputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> StrInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> name="username",</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> display_name="Username",</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> info="Enter your username."</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> SecretStrInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> name="password",</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> display_name="Password",</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> info="Enter your password."</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> MultilineInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> name="description",</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> display_name="Description",</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> info="Enter a detailed description.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> IntInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> name="age",</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> display_name="Age",</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> info="Enter your age."</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> DropdownInput(</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> name="gender",</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> display_name="Gender",</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> options=["Male", "Female", "Other"],</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> info="Select your gender."</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> )</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> outputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</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">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> def process_inputs(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> # Your processing logic here</span></div></div><div><span class="ch-code-line-number">_<!-- -->44</span><div style="display:inline-block;margin-left:16px"><span> return "Processed"</span></div></div><br></code></div></div>
|
||
<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>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="278e2027493e45b68746af0a5b6c06f6">Generic Input<a class="hash-link" aria-label="Direct link to Generic Input" title="Direct link to Generic Input" href="/components-custom-components#278e2027493e45b68746af0a5b6c06f6"></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>
|
||
<p>Below is an example of how to define inputs for a component using the <code>Input</code> class:</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">_<!-- -->48</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">_<!-- -->48</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">_<!-- -->48</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">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span>class ExampleComponent(Component):</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Example Component"</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> description = "An example component demonstrating input fields."</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> inputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> Input(</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> name="input_text",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> display_name="Input Text",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> field_type="str",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> required=True,</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> placeholder="Enter some text",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> multiline=True,</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> info="This is a required text input.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> input_types=["Text"]</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> Input(</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> name="max_length",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> display_name="Max Length",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> field_type="int",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> required=False,</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> placeholder="Maximum length",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> info="Enter the maximum length of the text.",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> range_spec={"min": 0, "max": 1000},</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> Input(</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> name="options",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> display_name="Options",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> field_type="str",</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> is_list=True,</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> options=["Option 1", "Option 2", "Option 3"],</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> info="Select one or more options."</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> outputs = [</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> Output(display_name="Result", name="result", method="process_input"),</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> ]</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> def process_input(self) -> Text:</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> # Process the inputs and generate output</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span> return Text(value=f"Processed: {self.input_text}, Max Length: {self.max_length}, Options: {self.options}")</span></div></div><div><span class="ch-code-line-number">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->48</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">_<!-- -->48</span><div style="display:inline-block;margin-left:16px"><span>component = ExampleComponent()</span></div></div><br></code></div></div>
|
||
<p>In this example:</p>
|
||
<ul>
|
||
<li>The <code>input_text</code> input is a required multi-line text field.</li>
|
||
<li>The <code>max_length</code> input is an optional integer field with a range specification.</li>
|
||
<li>The <code>options</code> input is a list of strings with predefined options.</li>
|
||
</ul>
|
||
<p>These attributes allow for a high degree of customization, making it easy to create input fields that suit the needs of your specific component.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="6f225be8a142450aa19ee8e46a3b3c8c">Multiple Outputs<a class="hash-link" aria-label="Direct link to Multiple Outputs" title="Direct link to Multiple Outputs" href="/components-custom-components#6f225be8a142450aa19ee8e46a3b3c8c"></a></h3>
|
||
<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>Below is an example of a component with 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="b1ef2d18e2694b93927ae9403d24b96b">Special Operations<a class="hash-link" aria-label="Direct link to Special Operations" title="Direct link to Special Operations" href="/components-custom-components#b1ef2d18e2694b93927ae9403d24b96b"></a></h2>
|
||
<hr>
|
||
<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></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/components-vector-stores"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Vector Stores</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/deployment-hugging-face-spaces"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">🤗 Spaces</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 class="table-of-contents__link toc-highlight" href="/components-custom-components#d3a151089a9e4584bd420461cd1432c6">Key Characteristics:</a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#827a2b5acec94426a4a2106a8332622d">Why Use Custom Components?</a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#2088ade519514bb3923cdf7f2ac2089a">How to Write Them</a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#3815589831f24ab792328ed233c8b00d">Input Types</a><ul><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#fb06c48a326043ffa46badc1ab3ba467"><strong>HandleInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#0e1dcb768e38487180d720b0884a90f5"><strong>DataInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#4ec6e68ad9ab4cd194e8e607bc5b3411"><strong>StrInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#9292ac0105e14177af5eff2131b9c71b"><strong>MessageInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#5511f5e32b944b4e973379a6bd5405e4"><strong>MessageTextInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#e6d8315b0fb44a2fb8c62c3f3184bbe9"><strong>MultilineInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#2283c13aa5f745b8b0009f7d40e59419"><strong>SecretStrInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#612680db6578451daef695bd19827a56"><strong>IntInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#a15e1fdae15b49fc9bfbf38f8bd7b203"><strong>FloatInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#3083671e0e7f4390a03396485114be66"><strong>BoolInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#2866fc4018e743d8a45afde53f1e57be"><strong>NestedDictInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#daa2c2398f694ec199b425e2ed4bcf93"><strong>DictInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#14dcdef11bab4d3f8127eaf2e36a77b9"><strong>DropdownInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#73e6377dc5f446f39517a558a1291410"><strong>FileInput</strong></a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#278e2027493e45b68746af0a5b6c06f6">Generic Input</a></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#6f225be8a142450aa19ee8e46a3b3c8c">Multiple Outputs</a></li></ul></li><li><a class="table-of-contents__link toc-highlight" href="/components-custom-components#b1ef2d18e2694b93927ae9403d24b96b">Special Operations</a></li></ul></div></div></div></div></main></div></div></div><div id="ms-floating-button" class="ms-fixed ms-bottom-4 ms-right-8 ms-z-[100] ms-flex ms-flex-col ms-items-end hover:ms-cursor-pointer"><div class="ms-relative ms-mb-4"><div style="background-color:#f6f6f6" class="ms-absolute -ms-bottom-1 ms-right-6 -ms-z-10 ms-h-4 ms-w-4 ms-rotate-45"></div><div style="background-color:#f6f6f6" class="ms-z-10 ms-flex ms-items-center ms-justify-center ms-rounded-lg ms-px-3 ms-py-2"><p style="color:#000000;margin:0" class="ms-text-sm">Hi, how can I help you?</p></div></div><div style="background-color:#f6f6f6" class="ms-flex ms-h-16 ms-w-16 ms-flex-col ms-items-center ms-justify-center ms-self-end ms-rounded-full ms-p-2 ms-transition"><div class="ms-rotate-0 ms-flex ms-h-full ms-w-full ms-transform ms-cursor-pointer ms-items-center ms-justify-center ms-rounded-full ms-transition-all ms-delay-75 ms-duration-100 ms-ease-in-out"><div style="color:#000000;font-size:22px;width:48px;height:48px;margin:0px;padding:0px;display:flex;align-items:center;justify-content:center;text-align:center"><img src="/img/chain.png" style="width:40px"></div></div></div><div></div></div></div>
|
||
</body>
|
||
</html> |