mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-25 04:10:28 +08:00
63 lines
36 KiB
HTML
63 lines
36 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-components/custom">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v2.4.1">
|
||
<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://logspace-ai.github.io/components/custom"><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="Used to create a custom component, a special type of Langflow component that allows users to extend the functionality of the platform by creating their own reusable and configurable components from a Python script."><meta data-rh="true" property="og:description" content="Used to create a custom component, a special type of Langflow component that allows users to extend the functionality of the platform by creating their own reusable and configurable components from a Python script."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://logspace-ai.github.io/components/custom"><link data-rh="true" rel="alternate" href="https://logspace-ai.github.io/components/custom" hreflang="en"><link data-rh="true" rel="alternate" href="https://logspace-ai.github.io/components/custom" hreflang="x-default"><link rel="stylesheet" href="/assets/css/styles.20a7d952.css">
|
||
<link rel="preload" href="/assets/js/runtime~main.7b74dc3b.js" as="script">
|
||
<link rel="preload" href="/assets/js/main.847862f8.js" as="script">
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</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><div class="announcementBar_mb4j" style="background-color:#E8EBF1;color:#1C1E21" role="banner"><div class="content_knG7 announcementBarContent_xLdY">⭐️ If you like ⛓️Langflow, star it on <a target="_blank" rel="noopener noreferrer" href="https://github.com/logspace-ai/langflow">GitHub</a>! ⭐️</div></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="themedImage_ToTc themedImage--light_HNdA"><img src="/img/chain.png" alt="Langflow" class="themedImage_ToTc themedImage--dark_i4oU"></div><b class="navbar__title text--truncate">Langflow</b></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/logspace-ai/langflow" target="_blank" class="navbar__item navbar__link header-github-link"></a><a href="https://twitter.com/logspace_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="searchBox_ZlJk"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0 docsWrapper_BCFX"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docPage__5DB"><aside class="theme-doc-sidebar-container docSidebarContainer_b6E3"><div class="sidebarViewport_Xe31"><div class="sidebar_njMd sidebarWithHideableNavbar_wUlq"><a tabindex="-1" class="sidebarLogo_isFc" href="/"><img src="/img/chain.png" alt="Langflow" class="themedImage_ToTc themedImage--light_HNdA"><img src="/img/chain.png" alt="Langflow" class="themedImage_ToTc themedImage--dark_i4oU"><b>Langflow</b></a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG menuWithAnnouncementBar_GW3s"><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" 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">📦 How to install?</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/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="/getting-started/creating-flows">🎨 Creating Flows</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" aria-expanded="true" href="/guidelines/login">Guidelines</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="/guidelines/login">Sign up and Sign in</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="/guidelines/api">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="/guidelines/async-api">Asynchronous 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="/guidelines/components">Component</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="/guidelines/features">Features</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="/guidelines/collection">Collection</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="/guidelines/prompt-customization">Prompt Customization</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="/guidelines/chat-interface">Chat Interface</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="/guidelines/chat-widget">Chat Widget</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="/guidelines/custom-component">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 menu__link--active" aria-expanded="true" href="/components/agents">Component 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="/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" tabindex="0" href="/components/chains">Chains</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">Custom 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/embeddings">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/llms">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="/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/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/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/retrievers">Retrievers</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/text-splitters">Text Splitters</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/toolkits">Toolkits</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/utilities">Utilities</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" tabindex="0" href="/components/wrappers">Wrappers</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" aria-expanded="true" href="/guides/async-tasks">Step-by-Step 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/async-tasks">Async 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="/guides/loading_document">Integrating documents with prompt 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="/guides/chatprompttemplate_guide">Building chatbots with System Message</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/langfuse_integration">Integrating Langfuse with 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" aria-expanded="true" href="/examples/flow-runner">Examples</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="/examples/flow-runner">FlowRunner Component</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="/examples/conversation-chain">Conversation Chain</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="/examples/buffer-memory">Buffer 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="/examples/midjourney-prompt-chain">MidJourney Prompt Chain</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="/examples/csv-loader">CSV Loader</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="/examples/serp-api-tool">Serp API Tool</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="/examples/multiple-vectorstores">Multiple 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" tabindex="0" href="/examples/python-function">Python Function</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="/examples/how-upload-examples">📚 How to Upload 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 class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="true" href="/deployment/gcp-deployment">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/gcp-deployment">Deploy on Google Cloud Platform</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" aria-expanded="true" href="/contributing/how-contribute">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/how-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_gTbr"><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">Component Reference</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">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"><style>[data-ch-theme="github-light"] { --ch-t-colorScheme: light;--ch-t-foreground: #24292f;--ch-t-background: #ffffff;--ch-t-lighter-inlineBackground: #ffffffe6;--ch-t-editor-background: #ffffff;--ch-t-editor-foreground: #24292f;--ch-t-editor-lineHighlightBackground: #eaeef280;--ch-t-editor-rangeHighlightBackground: #fdff0033;--ch-t-editor-infoForeground: #1a85ff;--ch-t-editor-selectionBackground: #ADD6FF;--ch-t-focusBorder: #0969da;--ch-t-tab-activeBackground: #ffffff;--ch-t-tab-activeForeground: #24292f;--ch-t-tab-inactiveBackground: #f6f8fa;--ch-t-tab-inactiveForeground: #57606a;--ch-t-tab-border: #d0d7de;--ch-t-tab-activeBorder: #ffffff;--ch-t-editorGroup-border: #d0d7de;--ch-t-editorGroupHeader-tabsBackground: #f6f8fa;--ch-t-editorLineNumber-foreground: #8c959f;--ch-t-input-background: #ffffff;--ch-t-input-foreground: #24292f;--ch-t-input-border: #d0d7de;--ch-t-icon-foreground: #57606a;--ch-t-sideBar-background: #f6f8fa;--ch-t-sideBar-foreground: #24292f;--ch-t-sideBar-border: #d0d7de;--ch-t-list-activeSelectionBackground: #afb8c133;--ch-t-list-activeSelectionForeground: #24292f;--ch-t-list-hoverBackground: #eaeef280;--ch-t-list-hoverForeground: #24292f; }</style>
|
||
<!-- -->
|
||
<!-- -->
|
||
<h1>Custom Components</h1>
|
||
<p>Used to create a custom component, a special type of Langflow component that allows users to extend the functionality of the platform by creating their own reusable and configurable components from a Python script.</p>
|
||
<p>To use a custom component, follow these steps:</p>
|
||
<ul>
|
||
<li>Create a class that inherits from <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langflow.CustomComponent</span></code></span> and contains a <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">build</span></code></span> method.</li>
|
||
<li>Use arguments with <a href="https://docs.python.org/3/library/typing.html" target="_blank" rel="noopener noreferrer">Type Annotations (or Type Hints)</a> of the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">build</span></code></span> method to create component fields.</li>
|
||
<li>If applicable, use the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">build_config</span></code></span> method to customize how these fields look and behave.</li>
|
||
</ul>
|
||
<div class="theme-admonition theme-admonition-info alert alert--info admonition_LlT9"><div class="admonitionHeading_tbUL"><span class="admonitionIcon_kALy"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_S0QG"><p>For an in-depth explanation of custom components, their rules, and applications, make sure to read <a href="/guidelines/custom-component">Custom Component guidelines</a>.</p></div></div>
|
||
<p><strong>Params</strong></p>
|
||
<ul>
|
||
<li><strong>Code:</strong> The Python code to define the component.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="the-customcomponent-class">The CustomComponent Class<a href="#the-customcomponent-class" class="hash-link" aria-label="Direct link to The CustomComponent Class" title="Direct link to The CustomComponent Class"></a></h2>
|
||
<p>The CustomComponent class serves as the foundation for creating custom components. By inheriting this class, users can create new, configurable components, tailored to their specific requirements.</p>
|
||
<p><strong>Methods</strong></p>
|
||
<ul>
|
||
<li>
|
||
<p><strong>build</strong>: This method is required within a Custom Component class. It defines the component's functionality and specifies how it processes input data to produce output data. This method is called when the component is built (i.e., when you click the <em>Build</em> ⚡ button in the canvas).</p>
|
||
<p>The type annotations of the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">build</span></code></span> instance method are used to create the fields of the component.</p>
|
||
<table><thead><tr><th>Supported Types</th></tr></thead><tbody><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">str</span></code></span>, <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">int</span></code></span>, <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">float</span></code></span>, <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">bool</span></code></span>, <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">list</span></code></span>, <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">dict</span></code></span></td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langflow.field_typing.NestedDict</span></code></span></td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langchain.chains.base.Chain</span></code></span></td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langchain.PromptTemplate</span></code></span></td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langchain.llms.base.BaseLLM</span></code></span></td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langchain.Tool</span></code></span></td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langchain.document_loaders.base.BaseLoader</span></code></span></td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langchain.schema.Document</span></code></span></td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langchain.text_splitters.TextSplitter</span></code></span></td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langchain.vectorstores.base.VectorStore</span></code></span></td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langchain.embeddings.base.Embeddings</span></code></span></td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langchain.schema.BaseRetriever</span></code></span></td></tr></tbody></table>
|
||
<p>The difference between <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">dict</span></code></span> and <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">langflow.field_typing.NestedDict</span></code></span> is that one adds a simple key-value pair field, while the other opens a more robust dictionary editor.</p>
|
||
<div class="theme-admonition theme-admonition-info alert alert--info admonition_LlT9"><div class="admonitionHeading_tbUL"><span class="admonitionIcon_kALy"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_S0QG"><p>Unlike Langchain types, base Python types do not add a
|
||
<a href="/guidelines/components">handle</a> to the field by default. To add handles,
|
||
use the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">input_types</span></code></span> key in the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">build_config</span></code></span> method.</p></div></div>
|
||
</li>
|
||
<li>
|
||
<p><strong>build_config</strong>: Used to define the configuration fields of the component (if applicable). It should always return a dictionary with specific keys representing the field names and corresponding configurations. This method is called when the code is processed (i.e., when you click <em>Check and Save</em> in the code editor). It must follow the format described below:</p>
|
||
<ul>
|
||
<li>Top-level keys are field names.</li>
|
||
<li>Their values are also of type <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">dict</span></code></span>. They specify the behavior of the generated fields.</li>
|
||
</ul>
|
||
<p>Below are the available keys used to configure component fields:</p>
|
||
<table><thead><tr><th>Key</th><th>Description</th></tr></thead><tbody><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#953800">field_type</span><span style="color:#24292F">: str</span></code></span></td><td>The type of the field (can be any of the types supported by the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">build</span></code></span> method).</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#953800">is_list</span><span style="color:#24292F">: bool</span></code></span></td><td>If the field can be a list of values, meaning that the user can manually add more inputs to the same field.</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#953800">options</span><span style="color:#24292F">: List[str]</span></code></span></td><td>When defined, the field becomes a dropdown menu where a list of strings defines the options to be displayed. If the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">value</span></code></span> attribute is set to one of the options, that option becomes default. For this parameter to work, <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">field_type</span></code></span> should invariably be <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">str</span></code></span>.</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#953800">multiline</span><span style="color:#24292F">: bool</span></code></span></td><td>Defines if a string field opens a text editor. Useful for longer texts.</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#953800">input_types</span><span style="color:#24292F">: List[str]</span></code></span></td><td>Used when you want a <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">str</span></code></span> field to have connectable handles.</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#953800">display_name</span><span style="color:#24292F">: str</span></code></span></td><td>Defines the name of the field.</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#953800">advanced</span><span style="color:#24292F">: bool</span></code></span></td><td>Hide the field in the canvas view (displayed component settings only). Useful when a field is for advanced users.</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#953800">password</span><span style="color:#24292F">: bool</span></code></span></td><td>To mask the input text. Useful to hide sensitive text (e.g. API keys).</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#953800">required</span><span style="color:#24292F">: bool</span></code></span></td><td>Makes the field required.</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#953800">info</span><span style="color:#24292F">: str</span></code></span></td><td>Adds a tooltip to the field.</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#953800">file_types</span><span style="color:#24292F">: List[str]</span></code></span></td><td>This is a requirement if the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">field_type</span></code></span> is <em>file</em>. Defines which file types will be accepted. For example, <em>json</em>, <em>yaml</em> or <em>yml</em>.</td></tr></tbody></table>
|
||
</li>
|
||
<li>
|
||
<p>The CustomComponent class also provides helpful methods for specific tasks (e.g., to load and use other flows from the Langflow platform):</p>
|
||
<table><thead><tr><th>Method Name</th><th>Description</th></tr></thead><tbody><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">list_flows</span></code></span></td><td>Returns a list of Flow objects with an <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">id</span></code></span> and a <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">name</span></code></span>.</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">get_flow</span></code></span></td><td>Returns a Flow object. Parameters are <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">flow_name</span></code></span> or <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">flow_id</span></code></span>.</td></tr><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">load_flow</span></code></span></td><td>Loads a flow from a given <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">id</span></code></span>.</td></tr></tbody></table>
|
||
</li>
|
||
<li>
|
||
<p>Useful attributes:</p>
|
||
<table><thead><tr><th>Attribute Name</th><th>Description</th></tr></thead><tbody><tr><td><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">repr_value</span></code></span></td><td>Displays the value it receives in the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">build</span></code></span> method. Useful for debugging.</td></tr></tbody></table>
|
||
<div class="theme-admonition theme-admonition-info alert alert--info admonition_LlT9"><div class="admonitionHeading_tbUL"><span class="admonitionIcon_kALy"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_S0QG"><p>Check out the <a href="/examples/flow-runner">FlowRunner</a> example to understand how to call a flow from a custom component.</p></div></div>
|
||
</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/chains"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Chains</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/components/embeddings"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Embeddings</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="#the-customcomponent-class" class="table-of-contents__link toc-highlight">The CustomComponent Class</a></li></ul></div></div></div></div></main></div></div><footer class="footer"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2023 Logspace.</div></div></div></footer><div 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>
|
||
<script src="/assets/js/runtime~main.7b74dc3b.js"></script>
|
||
<script src="/assets/js/main.847862f8.js"></script>
|
||
</body>
|
||
</html> |