Files
langflow/components-io.html
github-merge-queue[bot] dff8ebb9fa deploy: d4fca1fe40
2025-06-20 18:43:03 +00:00

139 lines
46 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Components/components-io" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.7.0">
<title data-rh="true">Inputs and outputs | Langflow Documentation</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://docs.langflow.org/components-io"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Inputs and outputs | Langflow Documentation"><meta data-rh="true" name="description" content="Input and output components define where data enters and exits your flow."><meta data-rh="true" property="og:description" content="Input and output components define where data enters and exits your flow."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.langflow.org/components-io"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/components-io" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/components-io" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://UZK6BDPCVY-dsn.algolia.net" crossorigin="anonymous"><link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SLQFLQ3KPT"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-SLQFLQ3KPT",{})</script>
<link rel="search" type="application/opensearchdescription+xml" title="Langflow Documentation" href="/opensearch.xml">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@550;600&amp;display=swap">
<script>!function(){window.semaphore=window.semaphore||[],window.ketch=function(){window.semaphore.push(arguments)};var e=document.createElement("script");e.type="text/javascript",e.src="https://global.ketchcdn.com/web/v3/config/datastax/langflow_org_web/boot.js",e.defer=e.async=!0,document.getElementsByTagName("head")[0].appendChild(e)}()</script>
<script defer="true">!function(){const e=e=>{if(window.gtag&&e.purposes&&"analytics"in e.purposes&&"targeted_advertising"in e.purposes){const n=!0===e.purposes.analytics?"granted":"denied",t=!0===e.purposes.targeted_advertising?"granted":"denied",a={analytics_storage:n,ad_personalization:t,ad_storage:t,ad_user_data:t};window.gtag("consent","update",a)}};window.ketch&&window.ketch("on","consent",e)}()</script><link rel="stylesheet" href="/assets/css/styles.556d0cc8.css">
<script src="/assets/js/runtime~main.36d0d05a.js" defer="defer"></script>
<script src="/assets/js/main.01cab6af.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_m1mJ"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/lf-docs-light.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/lf-docs-dark.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/langflow-ai/langflow" target="_blank" class="navbar__item navbar__link header-github-link"></a><a href="https://twitter.com/langflow_ai" target="_blank" class="navbar__item navbar__link header-twitter-link"></a><a href="https://discord.gg/EqksyE2EX9" target="_blank" class="navbar__item navbar__link header-discord-link"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd sidebarWithHideableNavbar_wUlq"><a tabindex="-1" class="sidebarLogo_isFc" href="/"><img src="/img/lf-docs-light.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/lf-docs-dark.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"></a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/">Welcome to Langflow</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/get-started-installation">Get started</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/basic-prompting">Templates</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/concepts-overview">Concepts</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/components-agents">Components</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-agents">Agents</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-bundle-components">Bundles</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-components">Create custom Python components</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-data">Data</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-embedding-models">Embeddings</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-helpers">Helpers</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/components-io">Inputs and outputs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-logic">Logic</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-memories">Memories</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-models">Models</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-processing">Processing</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-prompts">Prompts</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-tools">Tools</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-vector-stores">Vector stores</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/agents-overview">Agents</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/mcp-server">Model Context Protocol (MCP)</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/configuration-api-keys">Configuration</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/develop-overview">Develop</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/deployment-overview">Deployment</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/api">API reference</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/integrations-apify">Integrations</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/contributing-community">Contributing</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a href="https://github.com/langflow-ai/langflow/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false">Changelog</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/luna-for-langflow">Support</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 sidebar-ad">
<a href="https://astra.datastax.com/signup?type=langflow" target="_blank" class="menu__link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>
<div class="sidebar-ad-text-container">
<span class="sidebar-ad-text">Use Langflow in the cloud</span>
<span class="sidebar-ad-text sidebar-ad-text-gradient">Sign up for DataStax Langflow</span>
</div>
</a>
</li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Components</span><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Inputs and outputs</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-dark"] { --ch-t-colorScheme: dark;--ch-t-foreground: #c9d1d9;--ch-t-background: #0d1117;--ch-t-lighter-inlineBackground: #0d1117e6;--ch-t-editor-background: #0d1117;--ch-t-editor-foreground: #c9d1d9;--ch-t-editor-lineHighlightBackground: #6e76811a;--ch-t-editor-rangeHighlightBackground: #ffffff0b;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #264F78;--ch-t-focusBorder: #1f6feb;--ch-t-tab-activeBackground: #0d1117;--ch-t-tab-activeForeground: #c9d1d9;--ch-t-tab-inactiveBackground: #010409;--ch-t-tab-inactiveForeground: #8b949e;--ch-t-tab-border: #30363d;--ch-t-tab-activeBorder: #0d1117;--ch-t-editorGroup-border: #30363d;--ch-t-editorGroupHeader-tabsBackground: #010409;--ch-t-editorLineNumber-foreground: #6e7681;--ch-t-input-background: #0d1117;--ch-t-input-foreground: #c9d1d9;--ch-t-input-border: #30363d;--ch-t-icon-foreground: #8b949e;--ch-t-sideBar-background: #010409;--ch-t-sideBar-foreground: #c9d1d9;--ch-t-sideBar-border: #30363d;--ch-t-list-activeSelectionBackground: #6e768166;--ch-t-list-activeSelectionForeground: #c9d1d9;--ch-t-list-hoverBackground: #6e76811a;--ch-t-list-hoverForeground: #c9d1d9; }</style>
<!-- -->
<header><h1>Input and output components in Langflow</h1></header>
<p>Input and output components define where data enters and exits your flow.</p>
<p>Both components accept user input and return a <code>Message</code> object, but serve different purposes.</p>
<p>The <strong>Text Input</strong> component accepts a text string input and returns a <code>Message</code> object containing only the input text. The output does not appear in the <strong>Playground</strong>.</p>
<p>The <strong>Chat Input</strong> component accepts multiple input types including text, files, and metadata, and returns a <code>Message</code> object containing the text along with sender information, session ID, and file attachments.</p>
<p>The <strong>Chat Input</strong> component provides an interactive chat interface in the <strong>Playground</strong>.</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="chat-input">Chat Input<a href="#chat-input" class="hash-link" aria-label="Direct link to Chat Input" title="Direct link to Chat Input"></a></h2>
<p>This component collects user input as <code>Text</code> strings from the chat and wraps it in a <a href="/concepts-objects#message-object">Message</a> object that includes the input text, sender information, session ID, file attachments, and styling properties.</p>
<p>It can optionally store the message in a chat history.</p>
<details class="details_lb9f alert alert--info details_b_Ee" data-collapsed="true"><summary>Parameters</summary><div><div class="collapsibleContent_i85q"><p><strong>Inputs</strong></p><table><thead><tr><th>Name</th><th>Display Name</th><th>Info</th></tr></thead><tbody><tr><td>input_value</td><td>Text</td><td>The Message to be passed as input.</td></tr><tr><td>should_store_message</td><td>Store Messages</td><td>Store the message in the history.</td></tr><tr><td>sender</td><td>Sender Type</td><td>The type of sender.</td></tr><tr><td>sender_name</td><td>Sender Name</td><td>The name of the sender.</td></tr><tr><td>session_id</td><td>Session ID</td><td>The session ID of the chat. If empty, the current session ID parameter is used.</td></tr><tr><td>files</td><td>Files</td><td>The files to be sent with the message.</td></tr><tr><td>background_color</td><td>Background Color</td><td>The background color of the icon.</td></tr><tr><td>chat_icon</td><td>Icon</td><td>The icon of the message.</td></tr><tr><td>text_color</td><td>Text Color</td><td>The text color of the name.</td></tr></tbody></table><p><strong>Outputs</strong></p><table><thead><tr><th>Name</th><th>Display Name</th><th>Info</th></tr></thead><tbody><tr><td>message</td><td>Message</td><td>The resulting chat message object with all specified properties.</td></tr></tbody></table></div></div></details>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="message-method">Message method<a href="#message-method" class="hash-link" aria-label="Direct link to Message method" title="Direct link to Message method"></a></h3>
<p>The <code>ChatInput</code> class provides an asynchronous method to create and store a <code>Message</code> object based on the input parameters.
The <code>Message</code> object is created in the <code>message_response</code> method of the ChatInput class using the <code>Message.create()</code> factory method.</p>
<div class="ch-codeblock not-prose" data-ch-theme="github-dark"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span>message = await Message.create(</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> text=self.input_value,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> sender=self.sender,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> sender_name=self.sender_name,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> session_id=self.session_id,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> files=self.files,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> properties={</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> &quot;background_color&quot;: background_color,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> &quot;text_color&quot;: text_color,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> &quot;icon&quot;: icon,</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>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="text-input">Text Input<a href="#text-input" class="hash-link" aria-label="Direct link to Text Input" title="Direct link to Text Input"></a></h2>
<p>The <strong>Text Input</strong> component accepts a text string input and returns a <code>Message</code> object containing only the input text.</p>
<p>The output does not appear in the <strong>Playground</strong>.</p>
<details class="details_lb9f alert alert--info details_b_Ee" data-collapsed="true"><summary>Parameters</summary><div><div class="collapsibleContent_i85q"><p><strong>Inputs</strong></p><table><thead><tr><th>Name</th><th>Display Name</th><th>Info</th></tr></thead><tbody><tr><td>input_value</td><td>Text</td><td>The text/content to be passed as output.</td></tr></tbody></table><p><strong>Outputs</strong></p><table><thead><tr><th>Name</th><th>Display Name</th><th>Info</th></tr></thead><tbody><tr><td>text</td><td>Text</td><td>The resulting text message.</td></tr></tbody></table></div></div></details>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="chat-output">Chat Output<a href="#chat-output" class="hash-link" aria-label="Direct link to Chat Output" title="Direct link to Chat Output"></a></h2>
<p>The <strong>Chat Output</strong> component creates a <a href="/concepts-objects#message-object">Message</a> object that includes the input text, sender information, session ID, and styling properties.</p>
<p>The component accepts the following input types.</p>
<ul>
<li><a href="/concepts-objects#data-object">Data</a></li>
<li><a href="/concepts-objects#dataframe-object">DataFrame</a></li>
<li><a href="/concepts-objects#message-object">Message</a></li>
</ul>
<details class="details_lb9f alert alert--info details_b_Ee" data-collapsed="true"><summary>Parameters</summary><div><div class="collapsibleContent_i85q"><p><strong>Inputs</strong></p><table><thead><tr><th>Name</th><th>Display Name</th><th>Info</th></tr></thead><tbody><tr><td>input_value</td><td>Text</td><td>The message to be passed as output.</td></tr><tr><td>should_store_message</td><td>Store Messages</td><td>The flag to store the message in the history.</td></tr><tr><td>sender</td><td>Sender Type</td><td>The type of sender.</td></tr><tr><td>sender_name</td><td>Sender Name</td><td>The name of the sender.</td></tr><tr><td>session_id</td><td>Session ID</td><td>The session ID of the chat. If empty, the current session ID parameter is used.</td></tr><tr><td>data_template</td><td>Data Template</td><td>The template to convert Data to Text. If the option is left empty, it is dynamically set to the Data&#x27;s text key.</td></tr><tr><td>background_color</td><td>Background Color</td><td>The background color of the icon.</td></tr><tr><td>chat_icon</td><td>Icon</td><td>The icon of the message.</td></tr><tr><td>text_color</td><td>Text Color</td><td>The text color of the name.</td></tr><tr><td>clean_data</td><td>Basic Clean Data</td><td>When enabled, <code>DataFrame</code> inputs are cleaned when converted to text. Cleaning removes empty rows, empty lines in cells, and multiple newlines.</td></tr></tbody></table><p><strong>Outputs</strong></p><table><thead><tr><th>Name</th><th>Display Name</th><th>Info</th></tr></thead><tbody><tr><td>message</td><td>Message</td><td>The resulting chat message object with all specified properties.</td></tr></tbody></table></div></div></details>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="text-output">Text Output<a href="#text-output" class="hash-link" aria-label="Direct link to Text Output" title="Direct link to Text Output"></a></h2>
<p>The <strong>Text Output</strong> takes a single input of text and returns a <a href="/concepts-objects#message-object">Message</a> object containing that text.</p>
<p>The output does not appear in the <strong>Playground</strong>.</p>
<details class="details_lb9f alert alert--info details_b_Ee" data-collapsed="true"><summary>Parameters</summary><div><div class="collapsibleContent_i85q"><p><strong>Inputs</strong></p><table><thead><tr><th>Name</th><th>Display Name</th><th>Info</th></tr></thead><tbody><tr><td>input_value</td><td>Text</td><td>The text to be passed as output.</td></tr></tbody></table><p><strong>Outputs</strong></p><table><thead><tr><th>Name</th><th>Display Name</th><th>Info</th></tr></thead><tbody><tr><td>text</td><td>Text</td><td>The resulting text message.</td></tr></tbody></table></div></div></details>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="chat-components-example-flow">Chat components example flow<a href="#chat-components-example-flow" class="hash-link" aria-label="Direct link to Chat components example flow" title="Direct link to Chat components example flow"></a></h2>
<ol>
<li>To use the <strong>Chat Input</strong> and <strong>Chat Output</strong> components in a flow, connect them to components that accept or send the <a href="/concepts-objects#message-object">Message</a> type.</li>
</ol>
<p>For this example, connect a <strong>Chat Input</strong> component to an <strong>OpenAI</strong> model component&#x27;s <strong>Input</strong> port, and then connect the <strong>OpenAI</strong> model component&#x27;s <strong>Message</strong> port to the <strong>Chat Output</strong> component.</p>
<ol start="2">
<li>In the <strong>OpenAI</strong> model component, in the <strong>OpenAI API Key</strong> field, add your <strong>OpenAI API key</strong>.</li>
</ol>
<p>The flow looks like this:</p>
<p><img decoding="async" loading="lazy" alt="Chat input and output components connected to an OpenAI model" src="/assets/images/component-chat-io-9dc92d3f9e5da3722f2e4f4872e3ef59.png" width="4000" height="2574" class="img_ev3q"></p>
<ol start="3">
<li>
<p>To send a message to your flow, open the <strong>Playground</strong>, and then enter a message.
The <strong>OpenAI</strong> model component responds.
Optionally, in the <strong>OpenAI</strong> model component, enter a <strong>System Message</strong> to control the model&#x27;s response.</p>
</li>
<li>
<p>In the Langflow UI, click your flow name, and then click <strong>Logs</strong>.
The <strong>Logs</strong> pane opens.
Here, you can inspect your component logs.
<img decoding="async" loading="lazy" alt="Logs pane" src="/assets/images/logs-6ae22cc6a87b128cbc0c7f4559b47f10.png" width="3200" height="1716" class="img_ev3q"></p>
</li>
<li>
<p>Your first message was sent by the <strong>Chat Input</strong> component to the <strong>OpenAI</strong> model component.
Click <strong>Outputs</strong> to view the sent message:</p>
</li>
</ol>
<div class="ch-codeblock not-prose" data-ch-theme="github-dark"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> &quot;messages&quot;: [</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> &quot;message&quot;: &quot;What&#x27;s the recommended way to install Docker on Mac M1?&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> &quot;sender&quot;: &quot;User&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> &quot;sender_name&quot;: &quot;User&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> &quot;session_id&quot;: &quot;Session Apr 21, 17:37:04&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> &quot;stream_url&quot;: null,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> &quot;component_id&quot;: &quot;ChatInput-4WKag&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> &quot;files&quot;: [],</span></div></div><div><span class="ch-code-line-number">_<!-- -->12</span><div style="display:inline-block;margin-left:16px"><span> &quot;type&quot;: &quot;text&quot;</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>
<ol start="6">
<li>Your second message was sent by the <strong>OpenAI</strong> model component to the <strong>Chat Output</strong> component.
This is the raw text output of the model&#x27;s response.
The <strong>Chat Output</strong> component accepts this text as input and presents it as a formatted message.
Click <strong>Outputs</strong> to view the sent message:</li>
</ol>
<div class="ch-codeblock not-prose" data-ch-theme="github-dark"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> &quot;outputs&quot;:</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> &quot;text_output&quot;:</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> &quot;message&quot;: &quot;To install Docker on a Mac with an M1 chip, you should use Docker Desktop for Mac, which is optimized for Apple Silicon. Here&#x27;s a step-by-step guide to installing Docker on your M1 Mac:\n\n1.</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> &quot;type&quot;: &quot;text&quot;</span></div></div><br></code></div></div>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><p>Optionally, to view the outputs of each component in the flow, click <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-search" aria-label="Inspect icon"><path d="M21 6H3"></path><path d="M10 12H3"></path><path d="M10 18H3"></path><circle cx="17" cy="15" r="3"></circle><path d="m21 19-1.9-1.9"></path></svg>.</p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="send-chat-messages-with-the-api">Send chat messages with the API<a href="#send-chat-messages-with-the-api" class="hash-link" aria-label="Direct link to Send chat messages with the API" title="Direct link to Send chat messages with the API"></a></h3>
<p>The <strong>Chat Input</strong> component is often the entry point for passing messages to the Langflow API.
To send the same example messages programmatically to your Langflow server, do the following:</p>
<ol>
<li>To get your Langflow endpoint, click <strong>Publish</strong>, and then click <strong>API access</strong>.</li>
<li>Copy the command from the <strong>cURL</strong> tab, and then paste it in your terminal.
It looks similar to this:</li>
</ol>
<div class="ch-codeblock not-prose" data-ch-theme="github-dark"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>curl --request POST \</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> --url &#x27;http://localhost:7860/api/v1/run/51eed711-4530-4fdc-9bce-5db4351cc73a?stream=false&#x27; \</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> --header &#x27;Content-Type: application/json&#x27; \</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> --data &#x27;{</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> &quot;input_value&quot;: &quot;What&#x27;s the recommended way to install Docker on Mac M1?&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> &quot;output_type&quot;: &quot;chat&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> &quot;input_type&quot;: &quot;chat&quot;</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>}&#x27;</span></div></div><br></code></div></div>
<ol start="3">
<li>Modify <code>input_value</code> so it contains the question, <code>What&#x27;s the recommended way to install Docker on Mac M1?</code>.</li>
</ol>
<p>Note the <code>output_type</code> and <code>input_type</code> parameters that are passed with the message. The <code>chat</code> type provides additional configuration options, and the messages appear in the <strong>Playground</strong>. The <code>text</code> type returns only text strings, and does not appear in the <strong>Playground</strong>.</p>
<ol start="4">
<li>Add a custom <code>session_id</code> to the message&#x27;s <code>data</code> object.</li>
</ol>
<div class="ch-codeblock not-prose" data-ch-theme="github-dark"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>curl --request POST \</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> --url &#x27;http://localhost:7860/api/v1/run/51eed711-4530-4fdc-9bce-5db4351cc73a?stream=false&#x27; \</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> --header &#x27;Content-Type: application/json&#x27; \</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> --data &#x27;{</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> &quot;input_value&quot;: &quot;Whats the recommended way to install Docker on Mac M1&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> &quot;session_id&quot;: &quot;docker-question-on-m1&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> &quot;output_type&quot;: &quot;chat&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> &quot;input_type&quot;: &quot;chat&quot;</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>}&#x27;</span></div></div><br></code></div></div>
<p>The custom <code>session_id</code> value starts a new chat session between your client and the Langflow server, and can be useful in keeping conversations and AI context separate.</p>
<ol start="5">
<li>Send the POST request.
Your request is answered.</li>
<li>Navigate to the <strong>Playground</strong>.
A new chat session called <code>docker-question-on-m1</code> has appeared, using your unique <code>session_id</code>.</li>
<li>To modify additional parameters with <strong>Tweaks</strong> for your <strong>Chat Input</strong> and <strong>Chat Output</strong> components, click <strong>Publish</strong>, and then click <strong>API access</strong>.</li>
<li>Click <strong>Tweaks</strong> to modify parameters in the component&#x27;s <code>data</code> object.
For example, disabling storing messages from the <strong>Chat Input</strong> component adds a <strong>Tweak</strong> to your command:</li>
</ol>
<div class="ch-codeblock not-prose" data-ch-theme="github-dark"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>curl --request POST \</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> --url &#x27;http://localhost:7860/api/v1/run/51eed711-4530-4fdc-9bce-5db4351cc73a?stream=false&#x27; \</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> --header &#x27;Content-Type: application/json&#x27; \</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> --data &#x27;{</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> &quot;input_value&quot;: &quot;Text to input to the flow&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> &quot;output_type&quot;: &quot;chat&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> &quot;input_type&quot;: &quot;chat&quot;,</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> &quot;tweaks&quot;: {</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> &quot;ChatInput-4WKag&quot;: {</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> &quot;should_store_message&quot;: false</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>}&#x27;</span></div></div><br></code></div></div>
<p>To confirm your command is using the tweak, navigate to the <strong>Logs</strong> pane and view the request from the <strong>Chat Input</strong> component.
The value for <code>should_store_message</code> is <code>false</code>.</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/components-helpers"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Helpers</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/components-logic"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Logic</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="#chat-input" class="table-of-contents__link toc-highlight">Chat Input</a><ul><li><a href="#message-method" class="table-of-contents__link toc-highlight">Message method</a></li></ul></li><li><a href="#text-input" class="table-of-contents__link toc-highlight">Text Input</a></li><li><a href="#chat-output" class="table-of-contents__link toc-highlight">Chat Output</a></li><li><a href="#text-output" class="table-of-contents__link toc-highlight">Text Output</a></li><li><a href="#chat-components-example-flow" class="table-of-contents__link toc-highlight">Chat components example flow</a><ul><li><a href="#send-chat-messages-with-the-api" class="table-of-contents__link toc-highlight">Send chat messages with the API</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title"></div><ul class="footer__items clean-list"><li class="footer__item"><div class="footer-links">
<span>© 2025 Langflow</span>
<span id="preferenceCenterContainer"> ·&nbsp; <a href="https://langflow.org/preferences">Manage Privacy Choices</a></span>
</div></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><img src="/img/lf-docs-light.svg" alt="Langflow" class="footer__logo themedComponent_mlkZ themedComponent--light_NVdE" width="160" height="40"><img src="/img/lf-docs-dark.svg" alt="Langflow" class="footer__logo themedComponent_mlkZ themedComponent--dark_xIcU" width="160" height="40"></div></div></div></footer><div style="position:fixed;right:20px;bottom:20px;z-index:100;display:flex;align-items:center;gap:10px;cursor:pointer"><div style="background-color:#f6f6f6;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.1)"><img src="/img/langflow-icon-black-transparent.svg" style="width:40px" alt="Search"></div></div></div>
</body>
</html>