mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-25 08:39:12 +08:00
54 lines
74 KiB
HTML
54 lines
74 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-examples/flow-runner">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v2.4.1">
|
||
<title data-rh="true">FlowRunner Component | 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/examples/flow-runner"><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="FlowRunner Component | Langflow Documentation"><meta data-rh="true" name="description" content="Custom Components"><meta data-rh="true" property="og:description" content="Custom Components"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://logspace-ai.github.io/examples/flow-runner"><link data-rh="true" rel="alternate" href="https://logspace-ai.github.io/examples/flow-runner" hreflang="en"><link data-rh="true" rel="alternate" href="https://logspace-ai.github.io/examples/flow-runner" 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" 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" 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 menu__link--active" 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 menu__link--active" aria-current="page" 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"><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">Examples</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">FlowRunner Component</span><meta itemprop="position" content="2"></li></ul></nav><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>FlowRunner Component</h1>
|
||
<p>The CustomComponent class allows us to create components that interact with Langflow itself. In this example, we will make a component that runs other flows available in "My Collection".</p>
|
||
<div class="zoomable-image" style="width:30%;margin:0 auto;display:flex;justify-content:center"><img src="/img/flow_runner.png" alt="Document Processor Component" class="themedImage_ToTc themedImage--light_HNdA zoomable-image-inner"><img alt="Document Processor Component" class="themedImage_ToTc themedImage--dark_i4oU zoomable-image-inner"></div>
|
||
<p>We will cover how to:</p>
|
||
<ul>
|
||
<li>List Collection flows using the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">list_flows</span></code></span> method.</li>
|
||
<li>Load a flow using the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">load_flow</span></code></span> method.</li>
|
||
<li>Configure a dropdown input field using the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">options</span></code></span> parameter.</li>
|
||
</ul>
|
||
<details open=""><summary>Example Code</summary><div class="ch-codeblock not-prose" data-ch-theme="github-light"><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">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span>from langflow import CustomComponent</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span>from langchain.schema import Document</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span>class FlowRunner(CustomComponent):</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Flow Runner"</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> description = "Run other flows using a document as input."</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> def build_config(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> flows = self.list_flows()</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> flow_names = [f.name for f in flows]</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> return {"flow_name": {"options": flow_names,</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> "display_name": "Flow Name",</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> "document": {"display_name": "Document"}</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> def build(self, flow_name: str, document: Document) -> Document:</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> # List the flows</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> flows = self.list_flows()</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> # Get the flow that matches the selected name</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> # You can also get the flow by id</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> # using self.get_flow(flow_id=flow_id)</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> tweaks = {}</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> # Get the page_content from the document</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> if document and isinstance(document, list):</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> document = document[0]</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> page_content = document.page_content</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> # Use it in the flow</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> result = flow(page_content)</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> return Document(page_content=str(result))</span></div></div><br></code></div></div></details>
|
||
<style class="ssmq-0">.ssmq-0.ssmq-default{display:block}.ssmq-0:not(.ssmq-default){display: none;}
|
||
@media not screen, (max-width: 768px){.ssmq-0.ssmq-notscreenmax-width768px{display:block}.ssmq-0:not(.ssmq-notscreenmax-width768px){display: none;}}</style><div class="ssmq-0 ssmq-notscreenmax-width768px"><section class="ch-scrollycoding-static" data-ch-theme="github-light"><div class="ch-codeblock not-prose" data-ch-theme="github-light"><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">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span>from langflow import CustomComponent</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span>class MyComponent(CustomComponent):</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Custom Component"</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> description = "This is a custom component"</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> def build_config(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> def build(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><br></code></div></div><p>The typical structure of a Custom Component is composed of <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">display_name</span></code></span> and <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">description</span></code></span> attributes, <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build</span></code></span> and <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build_config</span></code></span> methods.</p><div class="ch-codeblock not-prose" data-ch-theme="github-light"><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">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span>from langflow import CustomComponent</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span>class FlowRunner(CustomComponent):</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Flow Runner"</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> description = "Run other flows"</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> def build_config(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> def build(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><br></code></div></div><p>Let's start by defining our component's <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">display_name</span></code></span> and <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">description</span></code></span>.</p><div class="ch-codeblock not-prose" data-ch-theme="github-light"><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">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>from langflow import CustomComponent</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>from langchain.schema import Document</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>class FlowRunner(CustomComponent):</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Flow Runner"</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> description = "Run other flows using a document as input."</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> def build_config(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> def build(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><br></code></div></div><p>Second, we will import <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">Document</span></code></span> from the <a href="https://docs.langchain.com/docs/components/schema/" target="_blank" rel="noopener noreferrer"><em>langchain.schema</em></a> module. This will be the return type of the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build</span></code></span> method.</p><div class="ch-codeblock not-prose" data-ch-theme="github-light"><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">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>from langflow import CustomComponent</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>from langchain.schema import Document</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>class FlowRunner(CustomComponent):</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Flow Runner"</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> description = "Run other flows using a document as input."</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> def build_config(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> def build(self, flow_name: str, document: Document) -> Document:</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><br></code></div></div><p>Now, let's add the <span class="ch-section-link" data-active="false">parameters</span> and the <span class="ch-section-link" data-active="false">return type</span> to the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build</span></code></span> method. The parameters added are:</p><ul>
|
||
<li><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">flow_name</span></code></span> is the name of the flow we want to run.</li>
|
||
<li><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#0A3069">document</span></code></span> is the input document to be passed to that flow.<!-- -->
|
||
<ul>
|
||
<li>Since <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">Document</span></code></span> is a Langchain type, it will add an input <a href="/guidelines/components">handle</a> to the component (<a href="/components/custom">see more</a>).</li>
|
||
</ul>
|
||
</li>
|
||
</ul><div class="ch-codeblock not-prose" data-ch-theme="github-light"><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">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>from langflow import CustomComponent</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>from langchain.schema import Document</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>class FlowRunner(CustomComponent):</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Flow Runner"</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> description = "Run other flows using a document as input."</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> def build_config(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> def build(self, flow_name: str, document: Document) -> Document:</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> # List the flows</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> flows = self.list_flows()</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><br></code></div></div><p>We can now start writing the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build</span></code></span> method. Let's list available flows in "My Collection" using the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">list_flows</span></code></span> method.</p><div class="ch-codeblock not-prose" data-ch-theme="github-light"><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">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span>from langflow import CustomComponent</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span>from langchain.schema import Document</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span>class FlowRunner(CustomComponent):</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Flow Runner"</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> description = "Run other flows using a document as input."</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> def build_config(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> def build(self, flow_name: str, document: Document) -> Document:</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> # List the flows</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> flows = self.list_flows()</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> # Get the flow that matches the selected name</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> # You can also get the flow by id</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> # using self.get_flow(flow_id=flow_id)</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> tweaks = {}</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><br></code></div></div><p>And retrieve a flow that matches the selected name (we'll make a dropdown input field for the user to choose among flow names).</p><div class="theme-admonition theme-admonition-caution alert alert--warning admonition_LlT9"><div class="admonitionHeading_tbUL"><span class="admonitionIcon_kALy"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</div><div class="admonitionContent_S0QG"><p>From version 0.4.0, names are unique, which was not the case in previous
|
||
versions. This might lead to unexpected results if using flows with the same
|
||
name.</p></div></div><div class="ch-codeblock not-prose" data-ch-theme="github-light"><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">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span>from langflow import CustomComponent</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span>from langchain.schema import Document</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span>class FlowRunner(CustomComponent):</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Flow Runner"</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> description = "Run other flows using a document as input."</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> def build_config(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> def build(self, flow_name: str, document: Document) -> Document:</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> # List the flows</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> flows = self.list_flows()</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> # Get the flow that matches the selected name</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> # You can also get the flow by id</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> # using self.get_flow(flow_id=flow_id)</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> tweaks = {}</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><br></code></div></div><p>You can load this flow using <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#6E7781">get_flow</span></code></span> and set a <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">tweaks</span></code></span> dictionary to customize it. Find more about tweaks in our <a href="/guidelines/features#code">features guidelines</a>.</p><div class="ch-codeblock not-prose" data-ch-theme="github-light"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span>from langflow import CustomComponent</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span>from langchain.schema import Document</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span>class FlowRunner(CustomComponent):</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Flow Runner"</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> description = "Run other flows using a document as input."</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> def build_config(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> def build(self, flow_name: str, document: Document) -> Document:</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> # List the flows</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> flows = self.list_flows()</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> # Get the flow that matches the selected name</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> # You can also get the flow by id</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> # using self.get_flow(flow_id=flow_id)</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> tweaks = {}</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)</span></div></div><div><span class="ch-code-line-number">_<!-- -->26</span><div style="display:inline-block;margin-left:16px"><span> # Get the page_content from the document</span></div></div><br></code></div></div><p>We are using a <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">Document</span></code></span> as input because it is a straightforward way to pass text data in Langflow (specifically because you can connect it to many <a href="/components/loaders">loaders</a>).
|
||
Generally, a flow will take a string or a dictionary as input because that's what LangChain components expect.
|
||
In case you are passing a dictionary, you need to build it according to the needs of the flow you are using.</p><p>The content of a document can be extracted using the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#6E7781">page_content</span></code></span> attribute, which is a string, and passed as an argument to the selected flow.</p><div class="ch-codeblock not-prose" data-ch-theme="github-light"><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">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span>from langflow import CustomComponent</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span>from langchain.schema import Document</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span>class FlowRunner(CustomComponent):</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Flow Runner"</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> description = "Run other flows using a document as input."</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> def build_config(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> flows = self.list_flows()</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> flow_names = [f.name for f in flows]</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> return {"flow_name": {"options": flow_names,</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> "display_name": "Flow Name",</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> "document": {"display_name": "Document"}</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> def build(self, flow_name: str, document: Document) -> Document:</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> # List the flows</span></div></div><div><span class="ch-code-line-number">_<!-- -->32</span><div style="display:inline-block;margin-left:16px"><span> flows = self.list_flows()</span></div></div><br></code></div></div><p>Finally, we can add field customizations through the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build_config</span></code></span> method. Here we added the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#0A3069">options</span></code></span> key to make the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">flow_name</span></code></span> field a dropdown menu. Check out the <a href="/components/custom">custom component reference</a> for a list of available keys.</p><div class="theme-admonition theme-admonition-caution alert alert--warning admonition_LlT9"><div class="admonitionHeading_tbUL"><span class="admonitionIcon_kALy"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</div><div class="admonitionContent_S0QG"><p>Make sure that the field type is <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#0550AE">str</span></code></span> and <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#0A3069">options</span></code></span> values are strings.</p></div></div></section></div><div class="ssmq-0 ssmq-default"><section class="ch-scrollycoding" data-ch-theme="github-light"><div class="ch-scrollycoding-content"><div class="ch-scrollycoding-step-content" data-selected="true"><p>The typical structure of a Custom Component is composed of <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">display_name</span></code></span> and <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">description</span></code></span> attributes, <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build</span></code></span> and <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build_config</span></code></span> methods.</p></div><div class="ch-scrollycoding-step-content"><p>Let's start by defining our component's <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">display_name</span></code></span> and <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">description</span></code></span>.</p></div><div class="ch-scrollycoding-step-content"><p>Second, we will import <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">Document</span></code></span> from the <a href="https://docs.langchain.com/docs/components/schema/" target="_blank" rel="noopener noreferrer"><em>langchain.schema</em></a> module. This will be the return type of the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build</span></code></span> method.</p></div><div class="ch-scrollycoding-step-content"><p>Now, let's add the <span class="ch-section-link" data-active="false">parameters</span> and the <span class="ch-section-link" data-active="false">return type</span> to the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build</span></code></span> method. The parameters added are:</p><ul>
|
||
<li><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">flow_name</span></code></span> is the name of the flow we want to run.</li>
|
||
<li><span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#0A3069">document</span></code></span> is the input document to be passed to that flow.<!-- -->
|
||
<ul>
|
||
<li>Since <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">Document</span></code></span> is a Langchain type, it will add an input <a href="/guidelines/components">handle</a> to the component (<a href="/components/custom">see more</a>).</li>
|
||
</ul>
|
||
</li>
|
||
</ul></div><div class="ch-scrollycoding-step-content"><p>We can now start writing the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build</span></code></span> method. Let's list available flows in "My Collection" using the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">list_flows</span></code></span> method.</p></div><div class="ch-scrollycoding-step-content"><p>And retrieve a flow that matches the selected name (we'll make a dropdown input field for the user to choose among flow names).</p><div class="theme-admonition theme-admonition-caution alert alert--warning admonition_LlT9"><div class="admonitionHeading_tbUL"><span class="admonitionIcon_kALy"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</div><div class="admonitionContent_S0QG"><p>From version 0.4.0, names are unique, which was not the case in previous
|
||
versions. This might lead to unexpected results if using flows with the same
|
||
name.</p></div></div></div><div class="ch-scrollycoding-step-content"><p>You can load this flow using <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#6E7781">get_flow</span></code></span> and set a <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">tweaks</span></code></span> dictionary to customize it. Find more about tweaks in our <a href="/guidelines/features#code">features guidelines</a>.</p></div><div class="ch-scrollycoding-step-content"><p>We are using a <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">Document</span></code></span> as input because it is a straightforward way to pass text data in Langflow (specifically because you can connect it to many <a href="/components/loaders">loaders</a>).
|
||
Generally, a flow will take a string or a dictionary as input because that's what LangChain components expect.
|
||
In case you are passing a dictionary, you need to build it according to the needs of the flow you are using.</p><p>The content of a document can be extracted using the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#6E7781">page_content</span></code></span> attribute, which is a string, and passed as an argument to the selected flow.</p></div><div class="ch-scrollycoding-step-content"><p>Finally, we can add field customizations through the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#8250DF">build_config</span></code></span> method. Here we added the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#0A3069">options</span></code></span> key to make the <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#24292F">flow_name</span></code></span> field a dropdown menu. Check out the <a href="/components/custom">custom component reference</a> for a list of available keys.</p><div class="theme-admonition theme-admonition-caution alert alert--warning admonition_LlT9"><div class="admonitionHeading_tbUL"><span class="admonitionIcon_kALy"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</div><div class="admonitionContent_S0QG"><p>Make sure that the field type is <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#0550AE">str</span></code></span> and <span data-ch-theme="github-light" class="ch-inline-code not-prose"><code><span style="color:#0A3069">options</span></code></span> values are strings.</p></div></div></div></div><div class="ch-scrollycoding-sticker"><div class="ch-codeblock not-prose" data-ch-theme="github-light"><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">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span>from langflow import CustomComponent</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span>class MyComponent(CustomComponent):</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> display_name = "Custom Component"</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> description = "This is a custom component"</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> def build_config(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> def build(self):</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><br></code></div></div></div></section></div><script class="ssmq-0">!function(){for(var e=["not screen, (max-width: 768px)","default"],t=["ssmq-notscreenmax-width768px","ssmq-default"],o="ssmq-0",r=document.getElementsByTagName("script"),c=r[r.length-1].parentNode,s=null,a=0;a<e.length-1;a++)if(window.matchMedia(e[a]).matches){s=c.querySelector(":scope > ."+o+"."+t[a]);break}if(!s){var n=t.pop();s=c.querySelector(":scope > ."+o+"."+n)}s.removeAttribute("class"),c.querySelectorAll(":scope > ."+o).forEach((function(e){c.removeChild(e)}))}()</script>
|
||
<p>Done! This is what our script and custom component looks like:</p>
|
||
<div style="display:flex;justify-content:center"><div class="zoomable-image" style="width:50%;margin:0 auto;display:flex;justify-content:center;max-width:100%"><img src="/img/flow_runner_code.png" alt="Document Processor Code" class="themedImage_ToTc themedImage--light_HNdA zoomable-image-inner"><img alt="Document Processor Code" class="themedImage_ToTc themedImage--dark_i4oU zoomable-image-inner"></div><div class="zoomable-image" style="width:40%;margin:0 auto;display:flex;justify-content:center"><img src="/img/flow_runner.png" alt="Document Processor Component" class="themedImage_ToTc themedImage--light_HNdA zoomable-image-inner"><img alt="Document Processor Component" class="themedImage_ToTc themedImage--dark_i4oU zoomable-image-inner"></div></div></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/guides/langfuse_integration"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Integrating Langfuse with Langflow</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/examples/conversation-chain"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Conversation Chain</div></a></nav></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> |