diff --git a/404.html b/404.html index d647a4b565..8524618bba 100644 --- a/404.html +++ b/404.html @@ -24,7 +24,7 @@ - + diff --git a/agent-tutorial.html b/agent-tutorial.html index 911b5a530f..5e4f68a930 100644 --- a/agent-tutorial.html +++ b/agent-tutorial.html @@ -24,7 +24,7 @@ - + diff --git a/agents-tools.html b/agents-tools.html index 1667e07407..5d47db59e3 100644 --- a/agents-tools.html +++ b/agents-tools.html @@ -24,7 +24,7 @@ - + diff --git a/agents.html b/agents.html index c5040e6ef0..e19043dc27 100644 --- a/agents.html +++ b/agents.html @@ -24,7 +24,7 @@ - + diff --git a/api-build.html b/api-build.html index 9ffba4a092..eb7707ca56 100644 --- a/api-build.html +++ b/api-build.html @@ -24,7 +24,7 @@ - + diff --git a/api-files.html b/api-files.html index 81f0de5399..ab161a2f38 100644 --- a/api-files.html +++ b/api-files.html @@ -24,7 +24,7 @@ - + diff --git a/api-flows-run.html b/api-flows-run.html index 20df66cf83..a28496eebe 100644 --- a/api-flows-run.html +++ b/api-flows-run.html @@ -24,7 +24,7 @@ - + diff --git a/api-flows.html b/api-flows.html index 117f7e4489..1487b1fb2f 100644 --- a/api-flows.html +++ b/api-flows.html @@ -24,7 +24,7 @@ - + diff --git a/api-keys-and-authentication.html b/api-keys-and-authentication.html index 73fa8b0727..62298bb72d 100644 --- a/api-keys-and-authentication.html +++ b/api-keys-and-authentication.html @@ -24,7 +24,7 @@ - + diff --git a/api-logs.html b/api-logs.html index e15a144ded..5f41586efc 100644 --- a/api-logs.html +++ b/api-logs.html @@ -24,7 +24,7 @@ - + diff --git a/api-monitor.html b/api-monitor.html index f0ade768ff..fb1f9319ea 100644 --- a/api-monitor.html +++ b/api-monitor.html @@ -24,7 +24,7 @@ - + diff --git a/api-openai-responses.html b/api-openai-responses.html index 545310a295..4cbcb5f752 100644 --- a/api-openai-responses.html +++ b/api-openai-responses.html @@ -24,7 +24,7 @@ - + diff --git a/api-projects.html b/api-projects.html index 6e5a38ba36..7efb9074ef 100644 --- a/api-projects.html +++ b/api-projects.html @@ -24,7 +24,7 @@ - + diff --git a/api-reference-api-examples.html b/api-reference-api-examples.html index 6151fad25d..4ca6f1e8e6 100644 --- a/api-reference-api-examples.html +++ b/api-reference-api-examples.html @@ -24,7 +24,7 @@ - + diff --git a/api-request.html b/api-request.html index f3c4443554..e70d2635e9 100644 --- a/api-request.html +++ b/api-request.html @@ -24,7 +24,7 @@ - + diff --git a/api-users.html b/api-users.html index bc209b9e4c..2c7e510256 100644 --- a/api-users.html +++ b/api-users.html @@ -24,7 +24,7 @@ - + diff --git a/api.html b/api.html index 7bdbd90bc2..a6d75d895b 100644 --- a/api.html +++ b/api.html @@ -24,7 +24,7 @@ - + diff --git a/api/openapi.json.html b/api/openapi.json.html index 83ff4fa232..e30a43f238 100644 --- a/api/openapi.json.html +++ b/api/openapi.json.html @@ -24,7 +24,7 @@ - + diff --git a/api/openapi.yaml.html b/api/openapi.yaml.html index 6b40cedc35..68d9c5c4d4 100644 --- a/api/openapi.yaml.html +++ b/api/openapi.yaml.html @@ -24,7 +24,7 @@ - + diff --git a/assets/js/20177945.0768ab3a.js b/assets/js/20177945.0768ab3a.js deleted file mode 100644 index be574b3575..0000000000 --- a/assets/js/20177945.0768ab3a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(globalThis.webpackChunklangflow_docs=globalThis.webpackChunklangflow_docs||[]).push([[8392],{11470:(o,t,e)=>{e.d(t,{A:()=>k});var n=e(96540),s=e(18215),r=e(17559),l=e(23104),c=e(56347),p=e(205),a=e(57485),i=e(31682),d=e(70679);function y(o){return n.Children.toArray(o).filter(o=>"\n"!==o).map(o=>{if(!o||(0,n.isValidElement)(o)&&function(o){const{props:t}=o;return!!t&&"object"==typeof t&&"value"in t}(o))return o;throw new Error(`Docusaurus error: Bad child <${"string"==typeof o.type?o.type:o.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)})?.filter(Boolean)??[]}function F(o){const{values:t,children:e}=o;return(0,n.useMemo)(()=>{const o=t??function(o){return y(o).map(({props:{value:o,label:t,attributes:e,default:n}})=>({value:o,label:t,attributes:e,default:n}))}(e);return function(o){const t=(0,i.XI)(o,(o,t)=>o.value===t.value);if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map(o=>o.value).join(", ")}" found in . Every value needs to be unique.`)}(o),o},[t,e])}function h({value:o,tabValues:t}){return t.some(t=>t.value===o)}function u({queryString:o=!1,groupId:t}){const e=(0,c.W6)(),s=function({queryString:o=!1,groupId:t}){if("string"==typeof o)return o;if(!1===o)return null;if(!0===o&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:o,groupId:t});return[(0,a.aZ)(s),(0,n.useCallback)(o=>{if(!s)return;const t=new URLSearchParams(e.location.search);t.set(s,o),e.replace({...e.location,search:t.toString()})},[s,e])]}function D(o){const{defaultValue:t,queryString:e=!1,groupId:s}=o,r=F(o),[l,c]=(0,n.useState)(()=>function({defaultValue:o,tabValues:t}){if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(o){if(!h({value:o,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${o}" but none of its children has the corresponding value. Available values are: ${t.map(o=>o.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return o}const e=t.find(o=>o.default)??t[0];if(!e)throw new Error("Unexpected error: 0 tabValues");return e.value}({defaultValue:t,tabValues:r})),[a,i]=u({queryString:e,groupId:s}),[y,D]=function({groupId:o}){const t=function(o){return o?`docusaurus.tab.${o}`:null}(o),[e,s]=(0,d.Dv)(t);return[e,(0,n.useCallback)(o=>{t&&s.set(o)},[t,s])]}({groupId:s}),m=(()=>{const o=a??y;return h({value:o,tabValues:r})?o:null})();(0,p.A)(()=>{m&&c(m)},[m]);return{selectedValue:l,selectValue:(0,n.useCallback)(o=>{if(!h({value:o,tabValues:r}))throw new Error(`Can't select invalid tab value=${o}`);c(o),i(o),D(o)},[i,D,r]),tabValues:r}}var m=e(92303);const C={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=e(74848);function g({className:o,block:t,selectedValue:e,selectValue:n,tabValues:r}){const c=[],{blockElementScrollPositionUntilNextRender:p}=(0,l.a_)(),a=o=>{const t=o.currentTarget,s=c.indexOf(t),l=r[s].value;l!==e&&(p(t),n(l))},i=o=>{let t=null;switch(o.key){case"Enter":a(o);break;case"ArrowRight":{const e=c.indexOf(o.currentTarget)+1;t=c[e]??c[0];break}case"ArrowLeft":{const e=c.indexOf(o.currentTarget)-1;t=c[e]??c[c.length-1];break}}t?.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":t},o),children:r.map(({value:o,label:t,attributes:n})=>(0,f.jsx)("li",{role:"tab",tabIndex:e===o?0:-1,"aria-selected":e===o,ref:o=>{c.push(o)},onKeyDown:i,onClick:a,...n,className:(0,s.A)("tabs__item",C.tabItem,n?.className,{"tabs__item--active":e===o}),children:t??o},o))})}function x({lazy:o,children:t,selectedValue:e}){const r=(Array.isArray(t)?t:[t]).filter(Boolean);if(o){const o=r.find(o=>o.props.value===e);return o?(0,n.cloneElement)(o,{className:(0,s.A)("margin-top--md",o.props.className)}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:r.map((o,t)=>(0,n.cloneElement)(o,{key:t,hidden:o.props.value!==e}))})}function j(o){const t=D(o);return(0,f.jsxs)("div",{className:(0,s.A)(r.G.tabs.container,"tabs-container",C.tabList),children:[(0,f.jsx)(g,{...t,...o}),(0,f.jsx)(x,{...t,...o})]})}function k(o){const t=(0,m.A)();return(0,f.jsx)(j,{...o,children:y(o.children)},String(t))}},19365:(o,t,e)=>{e.d(t,{A:()=>l});e(96540);var n=e(18215);const s={tabItem:"tabItem_Ymn6"};var r=e(74848);function l({children:o,hidden:t,className:e}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,n.A)(s.tabItem,e),hidden:t,children:o})}},50374:(o,t,e)=>{e.d(t,{Ay:()=>i,RM:()=>p});var n=e(74848),s=e(28453),r=e(24754);const l={annotations:r.hk,Code:r.Cy},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},p=[];function a(o){const t={a:"a",admonition:"admonition",code:"code",li:"li",ol:"ol",p:"p",ul:"ul",...(0,s.R)(),...o.components};return l||d("CH",!1),l.Code||d("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[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; }'}}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:["Create a Python file for your component, such as ",(0,n.jsx)(t.code,{children:"dataframe_processor.py"}),"."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:["Write your component as an object of the ",(0,n.jsx)(t.a,{href:"https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/custom/custom_component/component.py",children:(0,n.jsx)(t.code,{children:"Component"})})," class. Create a new class that inherits from ",(0,n.jsx)(t.code,{children:"Component"})," and override the base class's methods."]}),"\n",(0,n.jsx)(t.admonition,{title:"Backwards compatibility",type:"tip",children:(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"lfx"})," import path replaced the ",(0,n.jsx)(t.code,{children:"import from langflow.custom import Component"})," in Langflow 1.7, but the original input is still compatible and works the same way."]})}),"\n",(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" typing ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Any, Dict, Optional",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" pandas ",props:{style:{color:"#C9D1D9"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" pd",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.custom.custom_component.component ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Component",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"DataFrameProcessor",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' """A component that processes pandas DataFrames with various operations."""',props:{style:{color:"#A5D6FF"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsx)(t.p,{children:"Define class attributes to provide information about your custom component:"}),"\n",(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" typing ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Any, Dict, Optional",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" pandas ",props:{style:{color:"#C9D1D9"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" pd",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.custom.custom_component.component ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Component",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"DataFrameProcessor",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' """A component that processes pandas DataFrames with various operations."""',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"DataFrame Processor"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" description: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"Process and transform pandas DataFrames with various operations like filtering, sorting, and aggregation."',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" documentation: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"https://docs.langflow.org/components-dataframe-processor"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" icon: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"DataframeIcon"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" priority: ",props:{style:{color:"#C9D1D9"}}},{content:"int ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"100",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" name: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"dataframe_processor"',props:{style:{color:"#A5D6FF"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"display_name"}),": A user-friendly name shown in the visual editor."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"description"}),": A brief description of what your component does."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"documentation"}),": A link to detailed documentation."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"icon"}),": An emoji or icon identifier for visual representation.\nLangflow uses ",(0,n.jsx)(t.a,{href:"https://lucide.dev/icons",children:"Lucide"})," for icons. To assign an icon to your component, set the icon attribute to the name of a Lucide icon as a string, such as ",(0,n.jsx)(t.code,{children:'icon = "file-text"'}),". Langflow renders icons from the Lucide library automatically.\nFor more information, see ",(0,n.jsx)(t.a,{href:"/contributing-bundles#add-the-bundle-to-the-frontend-folder",children:"Contributing bundles"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"priority"}),": An optional integer to control display order. Lower numbers appear first."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"name"}),": An optional internal identifier that defaults to class name."]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:["Define the component's interface by specifying its inputs, outputs, and the method that will process them. The method name must match the ",(0,n.jsx)(t.code,{children:"method"})," field in your outputs list, as this is how Langflow knows which method to call to generate each output."]}),"\n",(0,n.jsx)(t.p,{children:"This example creates a minimal custom component skeleton."}),"\n",(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" typing ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Any, Dict, Optional",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" pandas ",props:{style:{color:"#C9D1D9"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" pd",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.custom.custom_component.component ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Component",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"DataFrameProcessor",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' """A component that processes pandas DataFrames with various operations."""',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"DataFrame Processor"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" description: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"Process and transform pandas DataFrames with various operations like filtering, sorting, and aggregation."',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" documentation: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"https://docs.langflow.org/components-dataframe-processor"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" icon: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"DataframeIcon"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" priority: ",props:{style:{color:"#C9D1D9"}}},{content:"int ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"100",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" name: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"dataframe_processor"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # input and output lists",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" inputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" []",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" outputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" []",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # method",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" def ",props:{style:{color:"#FF7B72"}}},{content:"some_output_method",props:{style:{color:"#D2A8FF"}}},{content:"(self):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return ",props:{style:{color:"#FF7B72"}}},{content:"...",props:{style:{color:"#79C0FF"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n"]})]})}function i(o={}){const{wrapper:t}={...(0,s.R)(),...o.components};return t?(0,n.jsx)(t,{...o,children:(0,n.jsx)(a,{...o})}):a(o)}function d(o,t){throw new Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}},58950:(o,t,e)=>{e.r(t),e.d(t,{CH:()=>h,assets:()=>F,chCodeConfig:()=>u,contentTitle:()=>y,default:()=>C,frontMatter:()=>d,metadata:()=>n,toc:()=>D});const n=JSON.parse('{"id":"Components/components-custom-components","title":"Create custom Python components","description":"Create your own custom components to add any functionality you need to Langflow, from API integrations to data processing.","source":"@site/docs/Components/components-custom-components.mdx","sourceDirName":"Components","slug":"/components-custom-components","permalink":"/components-custom-components","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Create custom Python components","slug":"/components-custom-components"},"sidebar":"docs","previous":{"title":"xAI","permalink":"/bundles-xai"},"next":{"title":"Get started with the Langflow API","permalink":"/api-reference-api-examples"}}');var s=e(74848),r=e(28453),l=e(24754),c=e(40619),p=e(11470),a=e(19365),i=e(50374);const d={title:"Create custom Python components",slug:"/components-custom-components"},y=void 0,F={},h={annotations:l.hk,Code:l.Cy},u={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},D=[{value:"Custom component quickstart",id:"quickstart",level:2},{value:"Create a Python file",id:"create-a-python-file",level:3},...i.RM,{value:"Save the custom component",id:"custom-component-path",level:3},{value:"Create the __init__.py file",id:"create-the-__init__py-file",level:3},{value:"Load your component",id:"load-your-component",level:3},{value:"Docker deployment",id:"docker-deployment",level:3},{value:"How components execute",id:"how-components-execute",level:2},{value:"Inputs and outputs",id:"inputs-and-outputs",level:2},{value:"Inputs",id:"inputs",level:3},{value:"Outputs",id:"outputs",level:3},{value:"Associated methods",id:"associated-methods",level:4},{value:"Components with multiple outputs",id:"components-with-multiple-outputs",level:4},{value:"Tool mode",id:"tool-mode",level:3},{value:"Typed annotations",id:"typed-annotations",level:2},{value:"Common return types",id:"common-return-types",level:3},{value:"Enable dynamic fields",id:"enable-dynamic-fields",level:2},{value:"Show or hide fields based on user selections",id:"show-or-hide-fields-based-on-user-selections",level:3},{value:"Error handling and logging",id:"error-handling-and-logging",level:2},{value:"Contribute custom components to Langflow",id:"contribute-custom-components-to-langflow",level:2}];function m(o){const t={a:"a",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...o.components},{Details:e}=t;return h||f("CH",!1),h.Code||f("CH.Code",!0),e||f("Details",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:'[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; }'}}),"\n","\n",(0,s.jsx)(t.p,{children:"Create your own custom components to add any functionality you need to Langflow, from API integrations to data processing."}),"\n",(0,s.jsx)(t.p,{children:'In Langflow\'s node-based environment, each node is a "component" that performs discrete functions.\nCustom components in Langflow are built upon:'}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["The Python class that inherits from ",(0,s.jsx)(t.code,{children:"Component"}),"."]}),"\n",(0,s.jsx)(t.li,{children:"Class-level attributes that identify and describe the component."}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"#inputs-and-outputs",children:"Input and output lists"})," that determine data flow."]}),"\n",(0,s.jsx)(t.li,{children:"Methods that define the component's behavior and logic."}),"\n",(0,s.jsxs)(t.li,{children:["Internal variables for ",(0,s.jsx)(t.a,{href:"#error-handling-and-logging",children:"Error handling and logging"})]}),"\n"]}),"\n",(0,s.jsxs)(t.p,{children:["Use the ",(0,s.jsx)(t.a,{href:"#quickstart",children:"Custom component quickstart"})," to add an example component to Langflow, and then use the reference guide that follows for more advanced component customization."]}),"\n",(0,s.jsx)(t.h2,{id:"quickstart",children:"Custom component quickstart"}),"\n",(0,s.jsxs)(t.p,{children:["Create a custom ",(0,s.jsx)(t.code,{children:"DataFrameProcessor"})," component by creating a Python file, saving it in the correct folder, including an ",(0,s.jsx)(t.code,{children:"__init__.py"})," file, and loading it into Langflow."]}),"\n",(0,s.jsx)(t.h3,{id:"create-a-python-file",children:"Create a Python file"}),"\n",(0,s.jsx)(i.Ay,{}),"\n",(0,s.jsx)(t.h3,{id:"custom-component-path",children:"Save the custom component"}),"\n",(0,s.jsx)(t.p,{children:"Save the custom component in the Langflow directory where the UI will discover and load it."}),"\n",(0,s.jsxs)(t.p,{children:["By default, Langflow looks for custom components in the ",(0,s.jsx)(t.code,{children:"src/lfx/src/lfx/components"})," directory."]}),"\n",(0,s.jsx)(t.p,{children:"When saving components in the default directory, components must be organized in a specific directory structure to be properly loaded and displayed in the visual editor."}),"\n",(0,s.jsx)(t.p,{children:"Components must be placed inside category folders, not directly in the base directory."}),"\n",(0,s.jsxs)(t.p,{children:["The category folder name determines where the component appears in the Langflow ",(0,s.jsx)(c.A,{name:"Component","aria-hidden":"true"})," ",(0,s.jsx)(t.strong,{children:"Core components"})," menu.\nFor example, to add the example ",(0,s.jsx)(t.code,{children:"DataFrameProcessor"})," component to the ",(0,s.jsx)(t.strong,{children:"Data"})," category, place it in the ",(0,s.jsx)(t.code,{children:"data"})," subfolder:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"src/lfx/src/lfx/components/",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 data/ # Category folder (determines menu location)",props:{}}]},{tokens:[{content:" \u251c\u2500\u2500 __init__.py # Required - makes it a Python package",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 dataframe_processor.py # Your custom component file",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["If you're creating custom components in a different location using the ",(0,s.jsx)(t.code,{children:"LANGFLOW_COMPONENTS_PATH"})," ",(0,s.jsx)(t.a,{href:"/environment-variables",children:"environment variable"}),", components must be similarly organized in a specific directory structure to be displayed in the visual editor."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"/your/custom/components/path/ # Base directory set by LANGFLOW_COMPONENTS_PATH",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 category_name/",props:{}}]},{tokens:[{content:" \u251c\u2500\u2500 __init__.py",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 custom_component.py",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsx)(t.p,{children:"You can have multiple category folders to organize components into different categories:"}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"/app/custom_components/",props:{}}]},{tokens:[{content:" \u251c\u2500\u2500 data/",props:{}}]},{tokens:[{content:" \u2502 \u251c\u2500\u2500 __init__.py",props:{}}]},{tokens:[{content:" \u2502 \u2514\u2500\u2500 dataframe_processor.py",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 tools/",props:{}}]},{tokens:[{content:" \u251c\u2500\u2500 __init__.py",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 custom_tool.py",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsxs)(t.h3,{id:"create-the-__init__py-file",children:["Create the ",(0,s.jsx)(t.code,{children:"__init__.py"})," file"]}),"\n",(0,s.jsxs)(t.p,{children:["Each category directory ",(0,s.jsx)(t.strong,{children:"must"})," contain an ",(0,s.jsx)(t.code,{children:"__init__.py"})," file for Langflow to properly recognize and load the components.\nThis is a Python package requirement that ensures the directory is treated as a module."]}),"\n",(0,s.jsxs)(t.p,{children:["To include the ",(0,s.jsx)(t.code,{children:"DataFrameProcessor"})," component, create a file named ",(0,s.jsx)(t.code,{children:"__init__.py"})," in your component's directory with the following content."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" .dataframe_processor ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" DataFrameProcessor",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"__all__ ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}},{content:'"DataFrameProcessor"',props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(e,{closed:!0,children:[(0,s.jsx)("summary",{children:"Lazy load the DataFrameProcessor component"}),(0,s.jsxs)(t.p,{children:["Alternatively, you can load your component ",(0,s.jsx)(t.strong,{children:"lazily"}),", which is better for performance but a little more complex."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from ",props:{style:{color:"#FF7B72"}}},{content:"__future__ ",props:{style:{color:"#79C0FF"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" annotations",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" typing ",props:{style:{color:"#C9D1D9"}}},{content:"import ",props:{style:{color:"#FF7B72"}}},{content:"TYPE_CHECKING",props:{style:{color:"#79C0FF"}}},{content:", Any",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.components._importing ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" import_mod",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"if ",props:{style:{color:"#FF7B72"}}},{content:"TYPE_CHECKING",props:{style:{color:"#79C0FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" from",props:{style:{color:"#FF7B72"}}},{content:" lfx.components.data.dataframe_processor ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" DataFrameProcessor",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"_dynamic_imports ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "DataFrameProcessor"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"dataframe_processor"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"__all__ ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "DataFrameProcessor"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"__getattr__",props:{style:{color:"#79C0FF"}}},{content:"(attr_name: ",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:") -> Any:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' """Lazily import data components on attribute access."""',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" if",props:{style:{color:"#FF7B72"}}},{content:" attr_name ",props:{style:{color:"#C9D1D9"}}},{content:"not in",props:{style:{color:"#FF7B72"}}},{content:" _dynamic_imports:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" msg ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:"\"module '",props:{style:{color:"#A5D6FF"}}},{content:"{__name__}",props:{style:{color:"#79C0FF"}}},{content:"' has no attribute '",props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"attr_name",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:"'\"",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" raise ",props:{style:{color:"#FF7B72"}}},{content:"AttributeError",props:{style:{color:"#79C0FF"}}},{content:"(msg)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" try",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" result ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" import_mod(attr_name, _dynamic_imports[attr_name], ",props:{style:{color:"#C9D1D9"}}},{content:"__spec__",props:{style:{color:"#79C0FF"}}},{content:".parent)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" except",props:{style:{color:"#FF7B72"}}},{content:" (",props:{style:{color:"#C9D1D9"}}},{content:"ModuleNotFoundError",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"ImportError",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"AttributeError",props:{style:{color:"#79C0FF"}}},{content:") ",props:{style:{color:"#C9D1D9"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" e:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" msg ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:"\"Could not import '",props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"attr_name",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:"' from '",props:{style:{color:"#A5D6FF"}}},{content:"{__name__}",props:{style:{color:"#79C0FF"}}},{content:"': ",props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"e",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:'"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" raise ",props:{style:{color:"#FF7B72"}}},{content:"AttributeError",props:{style:{color:"#79C0FF"}}},{content:"(msg) ",props:{style:{color:"#C9D1D9"}}},{content:"from",props:{style:{color:"#FF7B72"}}},{content:" e",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" globals",props:{style:{color:"#79C0FF"}}},{content:"()[attr_name] ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" result",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" result",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"__dir__",props:{style:{color:"#79C0FF"}}},{content:"() -> list[",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:"]:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return ",props:{style:{color:"#FF7B72"}}},{content:"list",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"__all__",props:{style:{color:"#79C0FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),(0,s.jsxs)(t.p,{children:["For an additional example of lazy loading, see the ",(0,s.jsx)(t.a,{href:"https://github.com/langflow-ai/langflow/blob/main/src/lfx/src/lfx/components/FAISS/__init__.py",children:"FAISS component"}),"."]})]}),"\n",(0,s.jsx)(t.h3,{id:"load-your-component",children:"Load your component"}),"\n",(0,s.jsx)(t.p,{children:"Ensure the application builds your component."}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["To rebuild the backend and frontend, run ",(0,s.jsx)(t.code,{children:"make install_frontend && make build_frontend && make install_backend && uv run langflow run --port 7860"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Refresh the frontend application.\nYour new ",(0,s.jsx)(t.code,{children:"DataFrameProcessor"})," component is available in the ",(0,s.jsx)(c.A,{name:"Component","aria-hidden":"true"})," ",(0,s.jsx)(t.strong,{children:"Core components"})," menu under the ",(0,s.jsx)(t.strong,{children:"Data"})," category in the visual editor."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"docker-deployment",children:"Docker deployment"}),"\n",(0,s.jsxs)(t.p,{children:["When running Langflow in Docker, mount your custom components directory and set the ",(0,s.jsx)(t.code,{children:"LANGFLOW_COMPONENTS_PATH"})," environment variable in the ",(0,s.jsx)(t.code,{children:"docker run"})," command to point to the custom components directory."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"docker ",props:{style:{color:"#FFA657"}}},{content:"run ",props:{style:{color:"#A5D6FF"}}},{content:"-d \\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" --name ",props:{style:{color:"#79C0FF"}}},{content:"langflow ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" -p ",props:{style:{color:"#79C0FF"}}},{content:"7860:",props:{style:{color:"#A5D6FF"}}},{content:"7860 \\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" -v ",props:{style:{color:"#79C0FF"}}},{content:"./custom_components:/app/custom_components ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" -e ",props:{style:{color:"#79C0FF"}}},{content:"LANGFLOW_COMPONENTS_PATH=/app/custom_components ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" langflowai/langflow:latest",props:{style:{color:"#A5D6FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["Create the same custom components directory structure as the example in ",(0,s.jsx)(t.a,{href:"#custom-component-path",children:"Save the custom component"}),"."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"/app/custom_components/ # LANGFLOW_COMPONENTS_PATH",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 data/",props:{}}]},{tokens:[{content:" \u251c\u2500\u2500 __init__.py",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 dataframe_processor.py",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsx)(t.h2,{id:"how-components-execute",children:"How components execute"}),"\n",(0,s.jsx)(t.p,{children:"Langflow's engine manages:"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Instantiation"}),": A component is created and internal structures are initialized."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Assigning Inputs"}),": Values from the visual editor or connections are assigned to component fields."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Validation and Setup"}),": Optional hooks like ",(0,s.jsx)(t.code,{children:"_pre_run_setup"}),"."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Outputs Generation"}),": ",(0,s.jsx)(t.code,{children:"run()"})," or ",(0,s.jsx)(t.code,{children:"build_results()"})," triggers output methods."]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"You can customize execution by overriding these optional hooks in your custom component code."}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"_pre_run_setup()"})})," - Used during ",(0,s.jsx)(t.strong,{children:"Validation and Setup"}),".\nAdd this method inside your component class to initialize component state before execution begins:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"MyComponent",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # ... your inputs, outputs, and other attributes ...",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" def ",props:{style:{color:"#FF7B72"}}},{content:"_pre_run_setup",props:{style:{color:"#D2A8FF"}}},{content:"(self):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" if not ",props:{style:{color:"#FF7B72"}}},{content:"hasattr",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"_initialized"',props:{style:{color:"#A5D6FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:"._initialized ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".iteration ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"0",props:{style:{color:"#79C0FF"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.strong,{children:["Override ",(0,s.jsx)(t.code,{children:"run"})," or ",(0,s.jsx)(t.code,{children:"_run"})]})," - Used during ",(0,s.jsx)(t.strong,{children:"Outputs Generation"}),".\nAdd this method inside your component class to customize the main execution logic:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"MyComponent",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" async",props:{style:{color:"#FF7B72"}}},{content:" def_run(",props:{style:{color:"#C9D1D9"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # Custom execution logic here",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" # This runs instead of the default output method calls",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" pass",props:{style:{color:"#FF7B72"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.strong,{children:["Store data in ",(0,s.jsx)(t.code,{children:"self.ctx"})]}),".\nUse ",(0,s.jsx)(t.code,{children:"self.ctx"})," in any of your component methods to share data between method calls."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"MyComponent",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" def ",props:{style:{color:"#FF7B72"}}},{content:"_pre_run_setup",props:{style:{color:"#D2A8FF"}}},{content:"(self):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # Initialize counter in setup",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".ctx[",props:{style:{color:"#C9D1D9"}}},{content:'"processed_items"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"0",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" def ",props:{style:{color:"#FF7B72"}}},{content:"process_data",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # Increment counter during processing",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".ctx[",props:{style:{color:"#C9D1D9"}}},{content:'"processed_items"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"+= ",props:{style:{color:"#FF7B72"}}},{content:"1",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"item"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"f",props:{style:{color:"#FF7B72"}}},{content:'"processed ',props:{style:{color:"#A5D6FF"}}},{content:"{self",props:{style:{color:"#79C0FF"}}},{content:".ctx[",props:{style:{color:"#C9D1D9"}}},{content:"'processed_items'",props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:'"',props:{style:{color:"#A5D6FF"}}},{content:"})",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" def ",props:{style:{color:"#FF7B72"}}},{content:"get_summary",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # Access counter in different method",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" total ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".ctx[",props:{style:{color:"#C9D1D9"}}},{content:'"processed_items"',props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"summary"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"f",props:{style:{color:"#FF7B72"}}},{content:'"Processed ',props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"total",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:' items total"',props:{style:{color:"#A5D6FF"}}},{content:"})",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"inputs-and-outputs",children:"Inputs and outputs"}),"\n",(0,s.jsxs)(t.p,{children:["Inputs and outputs are ",(0,s.jsx)(t.strong,{children:"class-level configurations"})," that define how data flows through the component, how it appears in the visual editor, and how connections to other components are validated."]}),"\n",(0,s.jsx)(t.h3,{id:"inputs",children:"Inputs"}),"\n",(0,s.jsxs)(t.p,{children:["Inputs are defined in a class-level ",(0,s.jsx)(t.code,{children:"inputs"})," list. When Langflow loads the component, it uses this list to render component fields and ",(0,s.jsx)(t.a,{href:"/concepts-components#component-ports",children:"ports"})," in the visual editor. Users or other components provide values or connections to fill these inputs."]}),"\n",(0,s.jsxs)(t.p,{children:["An input is usually an instance of a class from ",(0,s.jsx)(t.code,{children:"lfx.io"})," (such as ",(0,s.jsx)(t.code,{children:"StrInput"}),", ",(0,s.jsx)(t.code,{children:"DataInput"}),", or ",(0,s.jsx)(t.code,{children:"MessageTextInput"}),")."]}),"\n",(0,s.jsxs)(t.p,{children:["For example, this component has three inputs: a text field (",(0,s.jsx)(t.code,{children:"StrInput"}),"), a Boolean toggle (",(0,s.jsx)(t.code,{children:"BoolInput"}),"), and a dropdown selection (",(0,s.jsx)(t.code,{children:"DropdownInput"}),")."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.io ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" StrInput, BoolInput, DropdownInput",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"inputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" StrInput(",props:{style:{color:"#C9D1D9"}}},{content:"name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"title"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Title"',props:{style:{color:"#A5D6FF"}}},{content:"),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" BoolInput(",props:{style:{color:"#C9D1D9"}}},{content:"name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"enabled"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Enabled"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"value",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:"),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" DropdownInput(",props:{style:{color:"#C9D1D9"}}},{content:"name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"mode"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Mode"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"options",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"[",props:{style:{color:"#C9D1D9"}}},{content:'"Fast"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"Safe"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"Experimental"',props:{style:{color:"#A5D6FF"}}},{content:"], ",props:{style:{color:"#C9D1D9"}}},{content:"value",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Safe"',props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"StrInput"})," creates a single-line text field for entering text. The ",(0,s.jsx)(t.code,{children:'name="title"'})," parameter means you access this value in your component methods with ",(0,s.jsx)(t.code,{children:"self.title"}),", while ",(0,s.jsx)(t.code,{children:'display_name="Title"'}),' shows "Title" as the label in the visual editor.']}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"BoolInput"})," creates a boolean toggle that's enabled by default with ",(0,s.jsx)(t.code,{children:"value=True"}),". Users can turn this on or off, and you access the current state with ",(0,s.jsx)(t.code,{children:"self.enabled"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"DropdownInput"}),' provides a selection menu with three predefined options: "Fast", "Safe", and "Experimental".\nThe ',(0,s.jsx)(t.code,{children:'value="Safe"'}),' sets "Safe" as the default selection, and you access the user\'s choice with ',(0,s.jsx)(t.code,{children:"self.mode"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["For a list of all available parameters, see the ",(0,s.jsx)(t.a,{href:"https://github.com/langflow-ai/langflow/blob/main/src/lfx/src/lfx/inputs/input_mixin.py",children:"BaseInputMixin definition"})," in the Langflow codebase."]}),"\n",(0,s.jsxs)(t.p,{children:["For a list of all available input types, see the ",(0,s.jsx)(t.a,{href:"https://github.com/langflow-ai/langflow/blob/main/src/lfx/src/lfx/inputs/inputs.py",children:"input type definitions"})," in the Langflow codebase."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.io ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" StrInput, DataInput, MultilineInput, IntInput, BoolInput, DropdownInput, FileInput, CodeInput, ModelInput, HandleInput, Output",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.h3,{id:"outputs",children:"Outputs"}),"\n",(0,s.jsxs)(t.p,{children:["Outputs are defined in a class-level ",(0,s.jsx)(t.code,{children:"outputs"})," list. When Langflow renders a component, each output becomes a connector point in the visual editor. When you connect something to an output, Langflow automatically calls the corresponding method and passes the returned object to the next component."]}),"\n",(0,s.jsxs)(t.p,{children:["An output is usually an instance of ",(0,s.jsx)(t.code,{children:"Output"})," from ",(0,s.jsx)(t.code,{children:"lfx.io"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["For example, this component has one ",(0,s.jsx)(t.code,{children:"output"})," that returns a ",(0,s.jsx)(t.code,{children:"DataFrame"}),":"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.io ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Output",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.schema ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" DataFrame",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"outputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"df_out"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"DataFrame Output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"build_df"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" )",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"build_df",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> DataFrame:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # Process data and return DataFrame",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" df ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" DataFrame({",props:{style:{color:"#C9D1D9"}}},{content:'"col1"',props:{style:{color:"#A5D6FF"}}},{content:": [",props:{style:{color:"#C9D1D9"}}},{content:"1",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"2",props:{style:{color:"#79C0FF"}}},{content:"], ",props:{style:{color:"#C9D1D9"}}},{content:'"col2"',props:{style:{color:"#A5D6FF"}}},{content:": [",props:{style:{color:"#C9D1D9"}}},{content:"3",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"4",props:{style:{color:"#79C0FF"}}},{content:"]})",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".status ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:'"Built DataFrame with ',props:{style:{color:"#A5D6FF"}}},{content:"{len",props:{style:{color:"#79C0FF"}}},{content:"(df)",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:' rows."',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" df",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"Output"})," creates a connector point in the visual editor labeled ",(0,s.jsx)(t.strong,{children:"DataFrame Output"}),". The ",(0,s.jsx)(t.code,{children:'name="df_out"'})," parameter identifies this output, while ",(0,s.jsx)(t.code,{children:'display_name="DataFrame Output"'})," shows the label in the UI. The ",(0,s.jsx)(t.code,{children:'method="build_df"'})," parameter tells Langflow to call the ",(0,s.jsx)(t.code,{children:"build_df"})," method when this output is connected to another component."]}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"build_df"})," method processes data and returns a ",(0,s.jsx)(t.code,{children:"DataFrame"}),". The ",(0,s.jsx)(t.code,{children:"-> DataFrame"})," type annotation helps Langflow validate connections and provides color-coding in the visual editor. You can also set ",(0,s.jsx)(t.code,{children:"self.status"})," to show progress messages in the UI."]}),"\n",(0,s.jsxs)(t.p,{children:["For a complete list of all available parameters, see the ",(0,s.jsx)(t.a,{href:"https://github.com/langflow-ai/langflow/blob/main/src/lfx/src/lfx/template/field/base.py",children:"Output class definition"})," in the Langflow codebase. Common parameters include:"]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Additional return types:"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"Message"})}),": Structured chat messages"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"Data"})}),": Flexible object with ",(0,s.jsx)(t.code,{children:".data"})," and optional ",(0,s.jsx)(t.code,{children:".text"})]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"DataFrame"})}),": Tabular data (pandas DataFrame subclass)"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Primitive types"}),": ",(0,s.jsx)(t.code,{children:"str"}),", ",(0,s.jsx)(t.code,{children:"int"}),", ",(0,s.jsx)(t.code,{children:"bool"}),", not recommended for type consistency"]}),"\n"]}),"\n",(0,s.jsx)(t.h4,{id:"associated-methods",children:"Associated methods"}),"\n",(0,s.jsxs)(t.p,{children:["Each output is linked to a method where the output method name must match the method name. The method typically returns objects like ",(0,s.jsx)(t.code,{children:"Message"}),", ",(0,s.jsx)(t.code,{children:"Data"}),", or ",(0,s.jsx)(t.code,{children:"DataFrame"}),", and can use inputs with ",(0,s.jsx)(t.code,{children:"self."}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["For example, the ",(0,s.jsx)(t.code,{children:"Output"})," defines a connector point called ",(0,s.jsx)(t.code,{children:"file_contents"})," that will call the ",(0,s.jsx)(t.code,{children:"read_file"})," method when connected. The ",(0,s.jsx)(t.code,{children:"read_file"})," method accesses the filename input with ",(0,s.jsx)(t.code,{children:"self.filename"}),", reads the file content, sets a status message, and returns the content wrapped in a ",(0,s.jsx)(t.code,{children:"Data"})," object."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"file_contents"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"File Contents"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"read_file"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:")",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"read_file",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" path ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".filename",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" with ",props:{style:{color:"#FF7B72"}}},{content:"open",props:{style:{color:"#79C0FF"}}},{content:"(path, ",props:{style:{color:"#C9D1D9"}}},{content:'"r"',props:{style:{color:"#A5D6FF"}}},{content:") ",props:{style:{color:"#C9D1D9"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" f:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" content ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" f.read()",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".status ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:'"Read ',props:{style:{color:"#A5D6FF"}}},{content:"{len",props:{style:{color:"#79C0FF"}}},{content:"(content)",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:" chars from ",props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"path",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:'"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"content"',props:{style:{color:"#A5D6FF"}}},{content:": content})",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.h4,{id:"components-with-multiple-outputs",children:"Components with multiple outputs"}),"\n",(0,s.jsx)(t.p,{children:"A component can define multiple outputs.\nEach output can have a different corresponding method."}),"\n",(0,s.jsx)(t.p,{children:"For example:"}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"outputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}},{content:"display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Processed Data"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"processed_data"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"process_data"',props:{style:{color:"#A5D6FF"}}},{content:"),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}},{content:"display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Debug Info"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"debug_info"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"provide_debug_info"',props:{style:{color:"#A5D6FF"}}},{content:"),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.p,{children:"By default, components in Langflow that produce multiple outputs only allow one output selection in the visual editor.\nThe component will have only one output port where the user can select the preferred output type."}),"\n",(0,s.jsxs)(t.p,{children:["This behavior is controlled by the ",(0,s.jsx)(t.code,{children:"group_outputs"})," parameter:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.strong,{children:[(0,s.jsx)(t.code,{children:"group_outputs=False"})," (default)"]}),": When a component has more than one output and ",(0,s.jsx)(t.code,{children:"group_outputs"})," is ",(0,s.jsx)(t.code,{children:"false"})," or not set, the outputs are grouped in the visual editor, and the user must select one."]}),"\n",(0,s.jsx)(t.p,{children:"Use this option when the component is expected to return only one type of output when used in a flow."}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"group_outputs=True"})}),": All outputs are available simultaneously in the visual editor. The component has one output port for each output, and the user can connect zero or more outputs to other components."]}),"\n",(0,s.jsx)(t.p,{children:"Use this option when the component is expected to return multiple values that are used in parallel by downstream components or processes."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(p.A,{children:[(0,s.jsxs)(a.A,{value:"false",label:"False or not set",default:!0,children:[(0,s.jsxs)(t.p,{children:["In this example, the visual editor provides a single output port, and the user can select one of the outputs.\nSince ",(0,s.jsx)(t.code,{children:"group_outputs=False"})," is the default behavior, it doesn't need to be explicitly set in the component, as shown in this example."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"outputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"structured_output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Structured Output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"build_structured_output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"dataframe_output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"DataFrame Output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"build_structured_dataframe"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]}),(0,s.jsxs)(a.A,{value:"true",label:"True",children:[(0,s.jsx)(t.p,{children:"In this example, all outputs are available simultaneously in the visual editor."}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"outputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"true_result"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"True"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"true_response"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" group_outputs",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"false_result"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"False"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"false_response"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" group_outputs",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"tool-mode",children:"Tool mode"}),"\n",(0,s.jsxs)(t.p,{children:["Components that support ",(0,s.jsx)(t.strong,{children:"Tool Mode"})," can be used as standalone components (when ",(0,s.jsx)(t.em,{children:"not"})," in ",(0,s.jsx)(t.strong,{children:"Tool Mode"}),") or as tools for other components with a ",(0,s.jsx)(t.strong,{children:"Tools"})," input, such as ",(0,s.jsx)(t.strong,{children:"Agent"})," components."]}),"\n",(0,s.jsxs)(t.p,{children:["You can allow a custom component to support ",(0,s.jsx)(t.strong,{children:"Tool Mode"})," by setting ",(0,s.jsx)(t.code,{children:"tool_mode=True"}),":"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"inputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" MessageTextInput(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"message"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Mensage"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" info",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Enter the message that will be processed directly by the tool"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" tool_mode",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.h2,{id:"typed-annotations",children:"Typed annotations"}),"\n",(0,s.jsxs)(t.p,{children:["In Langflow, typed annotations allow Langflow to visually guide users and maintain flow consistency.\nAlways annotate your output methods with return types like ",(0,s.jsx)(t.code,{children:"-> Data"}),", ",(0,s.jsx)(t.code,{children:"-> Message"}),", or ",(0,s.jsx)(t.code,{children:"-> DataFrame"})," to enable proper visual editor color-coding and validation.\nUse ",(0,s.jsx)(t.code,{children:"Data"}),", ",(0,s.jsx)(t.code,{children:"Message"}),", or ",(0,s.jsx)(t.code,{children:"DataFrame"})," wrappers instead of returning plain structures for better consistency. Stay consistent with types across your components to make flows predictable and easier to build."]}),"\n",(0,s.jsxs)(t.p,{children:["Typed annotations provide color-coding where outputs like ",(0,s.jsx)(t.code,{children:"-> Data"})," or ",(0,s.jsx)(t.code,{children:"-> Message"})," get distinct colors, automatic validation that blocks incompatible connections, and improved readability for users to quickly understand data flow between components."]}),"\n",(0,s.jsx)(t.h3,{id:"common-return-types",children:"Common return types"}),"\n",(0,s.jsxs)(p.A,{children:[(0,s.jsxs)(a.A,{value:"message",label:"Message",default:!0,children:[(0,s.jsxs)(t.p,{children:["For chat-style outputs. Connects to any of several ",(0,s.jsx)(t.code,{children:"Message"}),"-compatible inputs."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"produce_message",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Message:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Message(",props:{style:{color:"#C9D1D9"}}},{content:"text",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Hello! from typed method!"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"sender",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"System"',props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]}),(0,s.jsxs)(a.A,{value:"data",label:"Data",children:[(0,s.jsxs)(t.p,{children:["For structured data like dicts or partial texts. Connects only to ",(0,s.jsx)(t.code,{children:"DataInput"})," (ports that accept ",(0,s.jsx)(t.code,{children:"Data"}),")."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"get_processed_data",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" processed ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}},{content:'"key1"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"value1"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"key2"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"123",props:{style:{color:"#79C0FF"}}},{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"processed)",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]}),(0,s.jsxs)(a.A,{value:"dataframe",label:"DataFrame",children:[(0,s.jsxs)(t.p,{children:["For tabular data. Connects only to ",(0,s.jsx)(t.code,{children:"DataFrameInput"})," (ports that accept ",(0,s.jsx)(t.code,{children:"DataFrame"}),")."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"build_df",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> DataFrame:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" pdf ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" pd.DataFrame({",props:{style:{color:"#C9D1D9"}}},{content:'"A"',props:{style:{color:"#A5D6FF"}}},{content:": [",props:{style:{color:"#C9D1D9"}}},{content:"1",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"2",props:{style:{color:"#79C0FF"}}},{content:"], ",props:{style:{color:"#C9D1D9"}}},{content:'"B"',props:{style:{color:"#A5D6FF"}}},{content:": [",props:{style:{color:"#C9D1D9"}}},{content:"3",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"4",props:{style:{color:"#79C0FF"}}},{content:"]})",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" DataFrame(pdf)",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]}),(0,s.jsxs)(a.A,{value:"primitives",label:"Primitive Types",children:[(0,s.jsxs)(t.p,{children:["Returning primitives is allowed, but wrapping in ",(0,s.jsx)(t.code,{children:"Data"})," or ",(0,s.jsx)(t.code,{children:"Message"})," is recommended for better consistency in the visual editor."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"compute_sum",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> ",props:{style:{color:"#C9D1D9"}}},{content:"int",props:{style:{color:"#79C0FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return ",props:{style:{color:"#FF7B72"}}},{content:"sum",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".numbers)",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"enable-dynamic-fields",children:"Enable dynamic fields"}),"\n",(0,s.jsxs)(t.p,{children:["In ",(0,s.jsx)(t.strong,{children:"Langflow"}),", dynamic fields allow inputs to change or appear based on user interactions. You can make an input dynamic by setting ",(0,s.jsx)(t.code,{children:"dynamic=True"}),". Optionally, setting ",(0,s.jsx)(t.code,{children:"real_time_refresh=True"})," triggers the ",(0,s.jsx)(t.code,{children:"update_build_config"})," method to adjust the input's visibility or properties in real time, creating a contextual visual editor experience that only exposes relevant fields based on the user's choices."]}),"\n",(0,s.jsxs)(t.p,{children:["In this example, the operator field triggers updates with ",(0,s.jsx)(t.code,{children:"real_time_refresh=True"}),".\nThe ",(0,s.jsx)(t.code,{children:"regex_pattern"})," field is initially hidden and controlled with ",(0,s.jsx)(t.code,{children:"dynamic=True"}),"."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.custom ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Component",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.io ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" DropdownInput, StrInput",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"RegexRouter",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"Regex Router"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" description ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"Demonstrates dynamic fields for regex input."',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" inputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" DropdownInput(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"operator"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Operator"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" options",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"[",props:{style:{color:"#C9D1D9"}}},{content:'"equals"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"contains"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"regex"',props:{style:{color:"#A5D6FF"}}},{content:"],",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" value",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"equals"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" real_time_refresh",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" StrInput(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Regex Pattern"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" info",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"\"Used if operator='regex'\"",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" dynamic",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" show",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"False",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.h3,{id:"show-or-hide-fields-based-on-user-selections",children:"Show or hide fields based on user selections"}),"\n",(0,s.jsxs)(t.p,{children:["When a user changes a field with ",(0,s.jsx)(t.code,{children:"real_time_refresh=True"}),", Langflow calls your ",(0,s.jsx)(t.code,{children:"update_build_config"})," method."]}),"\n",(0,s.jsx)(t.p,{children:"This method lets you show, hide, or modify other fields based on what the user selected."}),"\n",(0,s.jsxs)(t.p,{children:["This example shows the ",(0,s.jsx)(t.code,{children:"regex_pattern"}),' field only when the user selects "regex" from the operator dropdown.']}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"update_build_config",props:{style:{color:"#D2A8FF"}}},{content:"(self, build_config: ",props:{style:{color:"#C9D1D9"}}},{content:"dict",props:{style:{color:"#79C0FF"}}},{content:", field_value: ",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:", field_name: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"| ",props:{style:{color:"#FF7B72"}}},{content:"None ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"None",props:{style:{color:"#79C0FF"}}},{content:") -> ",props:{style:{color:"#C9D1D9"}}},{content:"dict",props:{style:{color:"#79C0FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" if",props:{style:{color:"#FF7B72"}}},{content:" field_name ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:'"operator"',props:{style:{color:"#A5D6FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" if",props:{style:{color:"#FF7B72"}}},{content:" field_value ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:'"regex"',props:{style:{color:"#A5D6FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"show"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" else",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"show"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"False",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" build_config",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["You can modify additional field properties in ",(0,s.jsx)(t.code,{children:"update_build_config"})," other than just ",(0,s.jsx)(t.code,{children:"show"})," and ",(0,s.jsx)(t.code,{children:"hide"}),"."]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"required"})}),": Make fields required or optional dynamically"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"if",props:{style:{color:"#FF7B72"}}},{content:" field_value ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:'"regex"',props:{style:{color:"#A5D6FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"required"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"else",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"required"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"False",props:{style:{color:"#79C0FF"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"advanced"})}),': Move fields to the "Advanced" section']}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"if",props:{style:{color:"#FF7B72"}}},{content:" field_value ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:'"experimental"',props:{style:{color:"#A5D6FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"advanced"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"False ",props:{style:{color:"#79C0FF"}}},{content:"# Show in main section",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"else",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"advanced"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"True ",props:{style:{color:"#79C0FF"}}},{content:"# Hide in advanced",props:{style:{color:"#8B949E"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"options"})}),": Change dropdown options based on other selections"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"if",props:{style:{color:"#FF7B72"}}},{content:" field_value ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:'"regex"',props:{style:{color:"#A5D6FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"operator"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"options"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}},{content:'"regex"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"contains"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"starts_with"',props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"else",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"operator"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"options"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}},{content:'"equals"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"contains"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"not_equals"',props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"error-handling-and-logging",children:"Error handling and logging"}),"\n",(0,s.jsxs)(t.p,{children:["You can raise standard Python exceptions such as ",(0,s.jsx)(t.code,{children:"ValueError"})," or specialized exceptions like ",(0,s.jsx)(t.code,{children:"ToolException"})," when validation fails. Langflow automatically catches these and displays appropriate error messages in the visual editor, helping users quickly identify what went wrong."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"compute_result",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> ",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" if not ",props:{style:{color:"#FF7B72"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".user_input:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" raise ",props:{style:{color:"#FF7B72"}}},{content:"ValueError",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:'"No input provided."',props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # ...",props:{style:{color:"#8B949E"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["Alternatively, instead of stopping a flow abruptly, you can return a ",(0,s.jsx)(t.code,{children:"Data"})," object containing an ",(0,s.jsx)(t.code,{children:'"error"'})," field. This approach allows the flow to continue operating and enables downstream components to detect and handle the error gracefully."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"run_model",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" try",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # ...",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" except ",props:{style:{color:"#FF7B72"}}},{content:"Exception ",props:{style:{color:"#79C0FF"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" e:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"error"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:"(e)})",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["Langflow provides several tools to help you debug and manage component execution. You can use ",(0,s.jsx)(t.code,{children:"self.status"})," to display short messages about execution results directly in the visual editor, making troubleshooting easier for users."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"parse_data",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# ...",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"self",props:{style:{color:"#79C0FF"}}},{content:".status ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:'"Parsed ',props:{style:{color:"#A5D6FF"}}},{content:"{len",props:{style:{color:"#79C0FF"}}},{content:"(rows)",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:' rows successfully."',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"rows"',props:{style:{color:"#A5D6FF"}}},{content:": rows})",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["You can halt individual output paths when certain conditions fail using ",(0,s.jsx)(t.code,{children:"self.stop()"}),", without stopping other outputs from the same component."]}),"\n",(0,s.jsx)(t.p,{children:"This example stops the output if the user input is empty, preventing the component from processing invalid data."}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"some_output",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"if not ",props:{style:{color:"#FF7B72"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".user_input ",props:{style:{color:"#C9D1D9"}}},{content:"or ",props:{style:{color:"#FF7B72"}}},{content:"len",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".user_input.strip()) ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:"0",props:{style:{color:"#79C0FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".stop(",props:{style:{color:"#C9D1D9"}}},{content:'"some_output"',props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"error"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"Empty input provided"',props:{style:{color:"#A5D6FF"}}},{content:"})",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["You can log key execution details inside components using ",(0,s.jsx)(t.code,{children:"self.log()"}),'. These logs are stored as structured data and displayed in the "Logs" or "Events" section of the component\'s detail view, and can be accessed later through the ',(0,s.jsx)(t.strong,{children:"Logs"})," button in the visual editor or exported files."]}),"\n",(0,s.jsxs)(t.p,{children:["Component logs are distinct from Langflow's main application logging system. ",(0,s.jsx)(t.code,{children:"self.log()"})," creates component-specific logs that appear in the UI, while Langflow's main logging system uses ",(0,s.jsx)(t.a,{href:"https://www.structlog.org",children:"structlog"})," for application-level logging that outputs to ",(0,s.jsx)(t.code,{children:"langflow.log"})," files. For more information, see ",(0,s.jsx)(t.a,{href:"/logging",children:"Logs"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"This example logs a message when the component starts processing a file."}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"process_file",props:{style:{color:"#D2A8FF"}}},{content:"(self, file_path: ",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"self",props:{style:{color:"#79C0FF"}}},{content:".log(",props:{style:{color:"#C9D1D9"}}},{content:"f",props:{style:{color:"#FF7B72"}}},{content:'"Processing file ',props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"file_path",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:'"',props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.h2,{id:"contribute-custom-components-to-langflow",children:"Contribute custom components to Langflow"}),"\n",(0,s.jsxs)(t.p,{children:["To contribute your custom component to the Langflow project, see ",(0,s.jsx)(t.a,{href:"/contributing-components",children:"Contribute components"}),"."]})]})}function C(o={}){const{wrapper:t}={...(0,r.R)(),...o.components};return t?(0,s.jsx)(t,{...o,children:(0,s.jsx)(m,{...o})}):m(o)}function f(o,t){throw new Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]); \ No newline at end of file diff --git a/assets/js/20177945.32fde553.js b/assets/js/20177945.32fde553.js new file mode 100644 index 0000000000..8c14ac6bb9 --- /dev/null +++ b/assets/js/20177945.32fde553.js @@ -0,0 +1 @@ +"use strict";(globalThis.webpackChunklangflow_docs=globalThis.webpackChunklangflow_docs||[]).push([[8392],{11470:(o,t,e)=>{e.d(t,{A:()=>k});var n=e(96540),s=e(18215),r=e(17559),l=e(23104),c=e(56347),p=e(205),a=e(57485),i=e(31682),d=e(70679);function y(o){return n.Children.toArray(o).filter(o=>"\n"!==o).map(o=>{if(!o||(0,n.isValidElement)(o)&&function(o){const{props:t}=o;return!!t&&"object"==typeof t&&"value"in t}(o))return o;throw new Error(`Docusaurus error: Bad child <${"string"==typeof o.type?o.type:o.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)})?.filter(Boolean)??[]}function F(o){const{values:t,children:e}=o;return(0,n.useMemo)(()=>{const o=t??function(o){return y(o).map(({props:{value:o,label:t,attributes:e,default:n}})=>({value:o,label:t,attributes:e,default:n}))}(e);return function(o){const t=(0,i.XI)(o,(o,t)=>o.value===t.value);if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map(o=>o.value).join(", ")}" found in . Every value needs to be unique.`)}(o),o},[t,e])}function h({value:o,tabValues:t}){return t.some(t=>t.value===o)}function u({queryString:o=!1,groupId:t}){const e=(0,c.W6)(),s=function({queryString:o=!1,groupId:t}){if("string"==typeof o)return o;if(!1===o)return null;if(!0===o&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:o,groupId:t});return[(0,a.aZ)(s),(0,n.useCallback)(o=>{if(!s)return;const t=new URLSearchParams(e.location.search);t.set(s,o),e.replace({...e.location,search:t.toString()})},[s,e])]}function D(o){const{defaultValue:t,queryString:e=!1,groupId:s}=o,r=F(o),[l,c]=(0,n.useState)(()=>function({defaultValue:o,tabValues:t}){if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(o){if(!h({value:o,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${o}" but none of its children has the corresponding value. Available values are: ${t.map(o=>o.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return o}const e=t.find(o=>o.default)??t[0];if(!e)throw new Error("Unexpected error: 0 tabValues");return e.value}({defaultValue:t,tabValues:r})),[a,i]=u({queryString:e,groupId:s}),[y,D]=function({groupId:o}){const t=function(o){return o?`docusaurus.tab.${o}`:null}(o),[e,s]=(0,d.Dv)(t);return[e,(0,n.useCallback)(o=>{t&&s.set(o)},[t,s])]}({groupId:s}),m=(()=>{const o=a??y;return h({value:o,tabValues:r})?o:null})();(0,p.A)(()=>{m&&c(m)},[m]);return{selectedValue:l,selectValue:(0,n.useCallback)(o=>{if(!h({value:o,tabValues:r}))throw new Error(`Can't select invalid tab value=${o}`);c(o),i(o),D(o)},[i,D,r]),tabValues:r}}var m=e(92303);const C={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=e(74848);function g({className:o,block:t,selectedValue:e,selectValue:n,tabValues:r}){const c=[],{blockElementScrollPositionUntilNextRender:p}=(0,l.a_)(),a=o=>{const t=o.currentTarget,s=c.indexOf(t),l=r[s].value;l!==e&&(p(t),n(l))},i=o=>{let t=null;switch(o.key){case"Enter":a(o);break;case"ArrowRight":{const e=c.indexOf(o.currentTarget)+1;t=c[e]??c[0];break}case"ArrowLeft":{const e=c.indexOf(o.currentTarget)-1;t=c[e]??c[c.length-1];break}}t?.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":t},o),children:r.map(({value:o,label:t,attributes:n})=>(0,f.jsx)("li",{role:"tab",tabIndex:e===o?0:-1,"aria-selected":e===o,ref:o=>{c.push(o)},onKeyDown:i,onClick:a,...n,className:(0,s.A)("tabs__item",C.tabItem,n?.className,{"tabs__item--active":e===o}),children:t??o},o))})}function x({lazy:o,children:t,selectedValue:e}){const r=(Array.isArray(t)?t:[t]).filter(Boolean);if(o){const o=r.find(o=>o.props.value===e);return o?(0,n.cloneElement)(o,{className:(0,s.A)("margin-top--md",o.props.className)}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:r.map((o,t)=>(0,n.cloneElement)(o,{key:t,hidden:o.props.value!==e}))})}function j(o){const t=D(o);return(0,f.jsxs)("div",{className:(0,s.A)(r.G.tabs.container,"tabs-container",C.tabList),children:[(0,f.jsx)(g,{...t,...o}),(0,f.jsx)(x,{...t,...o})]})}function k(o){const t=(0,m.A)();return(0,f.jsx)(j,{...o,children:y(o.children)},String(t))}},19365:(o,t,e)=>{e.d(t,{A:()=>l});e(96540);var n=e(18215);const s={tabItem:"tabItem_Ymn6"};var r=e(74848);function l({children:o,hidden:t,className:e}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,n.A)(s.tabItem,e),hidden:t,children:o})}},50374:(o,t,e)=>{e.d(t,{Ay:()=>i,RM:()=>p});var n=e(74848),s=e(28453),r=e(24754);const l={annotations:r.hk,Code:r.Cy},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},p=[];function a(o){const t={a:"a",admonition:"admonition",code:"code",li:"li",ol:"ol",p:"p",ul:"ul",...(0,s.R)(),...o.components};return l||d("CH",!1),l.Code||d("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[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; }'}}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:["Create a Python file for your component, such as ",(0,n.jsx)(t.code,{children:"dataframe_processor.py"}),"."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:["Write your component as an object of the ",(0,n.jsx)(t.a,{href:"https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/custom/custom_component/component.py",children:(0,n.jsx)(t.code,{children:"Component"})})," class. Create a new class that inherits from ",(0,n.jsx)(t.code,{children:"Component"})," and override the base class's methods."]}),"\n",(0,n.jsx)(t.admonition,{title:"Backwards compatibility",type:"tip",children:(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"lfx"})," import path replaced the ",(0,n.jsx)(t.code,{children:"import from langflow.custom import Component"})," in Langflow 1.7, but the original input is still compatible and works the same way."]})}),"\n",(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" typing ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Any, Dict, Optional",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" pandas ",props:{style:{color:"#C9D1D9"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" pd",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.custom.custom_component.component ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Component",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"DataFrameProcessor",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' """A component that processes pandas DataFrames with various operations."""',props:{style:{color:"#A5D6FF"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsx)(t.p,{children:"Define class attributes to provide information about your custom component:"}),"\n",(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" typing ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Any, Dict, Optional",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" pandas ",props:{style:{color:"#C9D1D9"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" pd",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.custom.custom_component.component ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Component",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"DataFrameProcessor",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' """A component that processes pandas DataFrames with various operations."""',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"DataFrame Processor"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" description: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"Process and transform pandas DataFrames with various operations like filtering, sorting, and aggregation."',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" documentation: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"https://docs.langflow.org/components-dataframe-processor"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" icon: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"DataframeIcon"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" priority: ",props:{style:{color:"#C9D1D9"}}},{content:"int ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"100",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" name: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"dataframe_processor"',props:{style:{color:"#A5D6FF"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"display_name"}),": A user-friendly name shown in the visual editor."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"description"}),": A brief description of what your component does."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"documentation"}),": A link to detailed documentation."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"icon"}),": An emoji or icon identifier for visual representation.\nLangflow uses ",(0,n.jsx)(t.a,{href:"https://lucide.dev/icons",children:"Lucide"})," for icons. To assign an icon to your component, set the icon attribute to the name of a Lucide icon as a string, such as ",(0,n.jsx)(t.code,{children:'icon = "file-text"'}),". Langflow renders icons from the Lucide library automatically.\nFor more information, see ",(0,n.jsx)(t.a,{href:"/contributing-bundles#add-the-bundle-to-the-frontend-folder",children:"Contributing bundles"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"priority"}),": An optional integer to control display order. Lower numbers appear first."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"name"}),": An optional internal identifier that defaults to class name."]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:["Define the component's interface by specifying its inputs, outputs, and the method that will process them. The method name must match the ",(0,n.jsx)(t.code,{children:"method"})," field in your outputs list, as this is how Langflow knows which method to call to generate each output."]}),"\n",(0,n.jsx)(t.p,{children:"This example creates a minimal custom component skeleton."}),"\n",(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" typing ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Any, Dict, Optional",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" pandas ",props:{style:{color:"#C9D1D9"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" pd",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.custom.custom_component.component ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Component",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"DataFrameProcessor",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' """A component that processes pandas DataFrames with various operations."""',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"DataFrame Processor"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" description: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"Process and transform pandas DataFrames with various operations like filtering, sorting, and aggregation."',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" documentation: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"https://docs.langflow.org/components-dataframe-processor"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" icon: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"DataframeIcon"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" priority: ",props:{style:{color:"#C9D1D9"}}},{content:"int ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"100",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" name: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"dataframe_processor"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # input and output lists",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" inputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" []",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" outputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" []",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # method",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" def ",props:{style:{color:"#FF7B72"}}},{content:"some_output_method",props:{style:{color:"#D2A8FF"}}},{content:"(self):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return ",props:{style:{color:"#FF7B72"}}},{content:"...",props:{style:{color:"#79C0FF"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n"]})]})}function i(o={}){const{wrapper:t}={...(0,s.R)(),...o.components};return t?(0,n.jsx)(t,{...o,children:(0,n.jsx)(a,{...o})}):a(o)}function d(o,t){throw new Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}},58950:(o,t,e)=>{e.r(t),e.d(t,{CH:()=>h,assets:()=>F,chCodeConfig:()=>u,contentTitle:()=>y,default:()=>C,frontMatter:()=>d,metadata:()=>n,toc:()=>D});const n=JSON.parse('{"id":"Components/components-custom-components","title":"Create custom Python components","description":"Create your own custom components to add any functionality you need to Langflow, from API integrations to data processing.","source":"@site/docs/Components/components-custom-components.mdx","sourceDirName":"Components","slug":"/components-custom-components","permalink":"/components-custom-components","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Create custom Python components","slug":"/components-custom-components"},"sidebar":"docs","previous":{"title":"xAI","permalink":"/bundles-xai"},"next":{"title":"Get started with the Langflow API","permalink":"/api-reference-api-examples"}}');var s=e(74848),r=e(28453),l=e(24754),c=e(40619),p=e(11470),a=e(19365),i=e(50374);const d={title:"Create custom Python components",slug:"/components-custom-components"},y=void 0,F={},h={annotations:l.hk,Code:l.Cy},u={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},D=[{value:"Custom component quickstart",id:"quickstart",level:2},{value:"Create a Python file",id:"create-a-python-file",level:3},...i.RM,{value:"Save the custom component",id:"custom-component-path",level:3},{value:"Create the __init__.py file",id:"create-the-__init__py-file",level:3},{value:"Load your component",id:"load-your-component",level:3},{value:"Docker deployment",id:"docker-deployment",level:3},{value:"How components execute",id:"how-components-execute",level:2},{value:"Inputs and outputs",id:"inputs-and-outputs",level:2},{value:"Inputs",id:"inputs",level:3},{value:"Outputs",id:"outputs",level:3},{value:"Associated methods",id:"associated-methods",level:4},{value:"Components with multiple outputs",id:"components-with-multiple-outputs",level:4},{value:"Tool mode",id:"tool-mode",level:3},{value:"Typed annotations",id:"typed-annotations",level:2},{value:"Common return types",id:"common-return-types",level:3},{value:"Enable dynamic fields",id:"enable-dynamic-fields",level:2},{value:"Show or hide fields based on user selections",id:"show-or-hide-fields-based-on-user-selections",level:3},{value:"Error handling and logging",id:"error-handling-and-logging",level:2},{value:"Contribute custom components to Langflow",id:"contribute-custom-components-to-langflow",level:2}];function m(o){const t={a:"a",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...o.components},{Details:e}=t;return h||f("CH",!1),h.Code||f("CH.Code",!0),e||f("Details",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:'[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; }'}}),"\n","\n",(0,s.jsx)(t.p,{children:"Create your own custom components to add any functionality you need to Langflow, from API integrations to data processing."}),"\n",(0,s.jsx)(t.p,{children:'In Langflow\'s node-based environment, each node is a "component" that performs discrete functions.\nCustom components in Langflow are built upon:'}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["The Python class that inherits from ",(0,s.jsx)(t.code,{children:"Component"}),"."]}),"\n",(0,s.jsx)(t.li,{children:"Class-level attributes that identify and describe the component."}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"#inputs-and-outputs",children:"Input and output lists"})," that determine data flow."]}),"\n",(0,s.jsx)(t.li,{children:"Methods that define the component's behavior and logic."}),"\n",(0,s.jsxs)(t.li,{children:["Internal variables for ",(0,s.jsx)(t.a,{href:"#error-handling-and-logging",children:"Error handling and logging"})]}),"\n"]}),"\n",(0,s.jsxs)(t.p,{children:["Use the ",(0,s.jsx)(t.a,{href:"#quickstart",children:"Custom component quickstart"})," to add an example component to Langflow, and then use the reference guide that follows for more advanced component customization."]}),"\n",(0,s.jsx)(t.h2,{id:"quickstart",children:"Custom component quickstart"}),"\n",(0,s.jsxs)(t.p,{children:["Create a custom ",(0,s.jsx)(t.code,{children:"DataFrameProcessor"})," component by creating a Python file, saving it in the correct folder, including an ",(0,s.jsx)(t.code,{children:"__init__.py"})," file, and loading it into Langflow."]}),"\n",(0,s.jsx)(t.h3,{id:"create-a-python-file",children:"Create a Python file"}),"\n",(0,s.jsx)(i.Ay,{}),"\n",(0,s.jsx)(t.h3,{id:"custom-component-path",children:"Save the custom component"}),"\n",(0,s.jsx)(t.p,{children:"Save the custom component in the Langflow directory where the UI will discover and load it."}),"\n",(0,s.jsxs)(t.p,{children:["By default, Langflow looks for custom components in the ",(0,s.jsx)(t.code,{children:"src/lfx/src/lfx/components"})," directory."]}),"\n",(0,s.jsx)(t.p,{children:"When saving components in the default directory, components must be organized in a specific directory structure to be properly loaded and displayed in the visual editor."}),"\n",(0,s.jsx)(t.p,{children:"Components must be placed inside category folders, not directly in the base directory."}),"\n",(0,s.jsxs)(t.p,{children:["The category folder name determines where the component appears in the Langflow ",(0,s.jsx)(c.A,{name:"Component","aria-hidden":"true"})," ",(0,s.jsx)(t.strong,{children:"Core components"})," menu.\nFor example, to add the example ",(0,s.jsx)(t.code,{children:"DataFrameProcessor"})," component to the ",(0,s.jsx)(t.strong,{children:"Data"})," category, place it in the ",(0,s.jsx)(t.code,{children:"data"})," subfolder:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"src/lfx/src/lfx/components/",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 data/ # Category folder (determines menu location)",props:{}}]},{tokens:[{content:" \u251c\u2500\u2500 __init__.py # Required - makes it a Python package",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 dataframe_processor.py # Your custom component file",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["If you're creating custom components in a different location using the ",(0,s.jsx)(t.code,{children:"LANGFLOW_COMPONENTS_PATH"})," ",(0,s.jsx)(t.a,{href:"/environment-variables",children:"environment variable"}),", components must be similarly organized in a specific directory structure to be displayed in the visual editor."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"/your/custom/components/path/ # Base directory set by LANGFLOW_COMPONENTS_PATH",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 category_name/",props:{}}]},{tokens:[{content:" \u251c\u2500\u2500 __init__.py",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 custom_component.py",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsx)(t.p,{children:"You can have multiple category folders to organize components into different categories, with multiple components inside each folder:"}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"/app/custom_components/",props:{}}]},{tokens:[{content:" \u251c\u2500\u2500 data/",props:{}}]},{tokens:[{content:" \u2502 \u251c\u2500\u2500 __init__.py",props:{}}]},{tokens:[{content:" \u2502 \u251c\u2500\u2500 custom_component.py",props:{}}]},{tokens:[{content:" \u2502 \u2514\u2500\u2500 dataframe_processor.py",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 tools/",props:{}}]},{tokens:[{content:" \u251c\u2500\u2500 __init__.py",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 custom_tool.py",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsxs)(t.h3,{id:"create-the-__init__py-file",children:["Create the ",(0,s.jsx)(t.code,{children:"__init__.py"})," file"]}),"\n",(0,s.jsxs)(t.p,{children:["Each category directory ",(0,s.jsx)(t.strong,{children:"must"})," contain an ",(0,s.jsx)(t.code,{children:"__init__.py"})," file for Langflow to properly recognize and load the components.\nThis is a Python package requirement that ensures the directory is treated as a module."]}),"\n",(0,s.jsxs)(t.p,{children:["To include the ",(0,s.jsx)(t.code,{children:"DataFrameProcessor"})," component, create a file named ",(0,s.jsx)(t.code,{children:"__init__.py"})," in your component's directory with the following content."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" .dataframe_processor ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" DataFrameProcessor",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"__all__ ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}},{content:'"DataFrameProcessor"',props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(e,{closed:!0,children:[(0,s.jsx)("summary",{children:"Lazy load the DataFrameProcessor component"}),(0,s.jsxs)(t.p,{children:["Alternatively, you can load your component ",(0,s.jsx)(t.strong,{children:"lazily"}),", which is better for performance but a little more complex."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from ",props:{style:{color:"#FF7B72"}}},{content:"__future__ ",props:{style:{color:"#79C0FF"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" annotations",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" typing ",props:{style:{color:"#C9D1D9"}}},{content:"import ",props:{style:{color:"#FF7B72"}}},{content:"TYPE_CHECKING",props:{style:{color:"#79C0FF"}}},{content:", Any",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.components._importing ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" import_mod",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"if ",props:{style:{color:"#FF7B72"}}},{content:"TYPE_CHECKING",props:{style:{color:"#79C0FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" from",props:{style:{color:"#FF7B72"}}},{content:" lfx.components.data.dataframe_processor ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" DataFrameProcessor",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"_dynamic_imports ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "DataFrameProcessor"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"dataframe_processor"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"__all__ ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "DataFrameProcessor"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"__getattr__",props:{style:{color:"#79C0FF"}}},{content:"(attr_name: ",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:") -> Any:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' """Lazily import data components on attribute access."""',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" if",props:{style:{color:"#FF7B72"}}},{content:" attr_name ",props:{style:{color:"#C9D1D9"}}},{content:"not in",props:{style:{color:"#FF7B72"}}},{content:" _dynamic_imports:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" msg ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:"\"module '",props:{style:{color:"#A5D6FF"}}},{content:"{__name__}",props:{style:{color:"#79C0FF"}}},{content:"' has no attribute '",props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"attr_name",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:"'\"",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" raise ",props:{style:{color:"#FF7B72"}}},{content:"AttributeError",props:{style:{color:"#79C0FF"}}},{content:"(msg)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" try",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" result ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" import_mod(attr_name, _dynamic_imports[attr_name], ",props:{style:{color:"#C9D1D9"}}},{content:"__spec__",props:{style:{color:"#79C0FF"}}},{content:".parent)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" except",props:{style:{color:"#FF7B72"}}},{content:" (",props:{style:{color:"#C9D1D9"}}},{content:"ModuleNotFoundError",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"ImportError",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"AttributeError",props:{style:{color:"#79C0FF"}}},{content:") ",props:{style:{color:"#C9D1D9"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" e:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" msg ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:"\"Could not import '",props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"attr_name",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:"' from '",props:{style:{color:"#A5D6FF"}}},{content:"{__name__}",props:{style:{color:"#79C0FF"}}},{content:"': ",props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"e",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:'"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" raise ",props:{style:{color:"#FF7B72"}}},{content:"AttributeError",props:{style:{color:"#79C0FF"}}},{content:"(msg) ",props:{style:{color:"#C9D1D9"}}},{content:"from",props:{style:{color:"#FF7B72"}}},{content:" e",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" globals",props:{style:{color:"#79C0FF"}}},{content:"()[attr_name] ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" result",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" result",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"__dir__",props:{style:{color:"#79C0FF"}}},{content:"() -> list[",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:"]:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return ",props:{style:{color:"#FF7B72"}}},{content:"list",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"__all__",props:{style:{color:"#79C0FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),(0,s.jsxs)(t.p,{children:["For an additional example of lazy loading, see the ",(0,s.jsx)(t.a,{href:"https://github.com/langflow-ai/langflow/blob/main/src/lfx/src/lfx/components/FAISS/__init__.py",children:"FAISS component"}),"."]})]}),"\n",(0,s.jsx)(t.h3,{id:"load-your-component",children:"Load your component"}),"\n",(0,s.jsx)(t.p,{children:"Ensure the application builds your component."}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["To rebuild the backend and frontend, run ",(0,s.jsx)(t.code,{children:"make install_frontend && make build_frontend && make install_backend && uv run langflow run --port 7860"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Refresh the frontend application.\nYour new ",(0,s.jsx)(t.code,{children:"DataFrameProcessor"})," component is available in the ",(0,s.jsx)(c.A,{name:"Component","aria-hidden":"true"})," ",(0,s.jsx)(t.strong,{children:"Core components"})," menu under the ",(0,s.jsx)(t.strong,{children:"Data"})," category in the visual editor."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"docker-deployment",children:"Docker deployment"}),"\n",(0,s.jsxs)(t.p,{children:["When running Langflow in Docker, mount your custom components directory and set the ",(0,s.jsx)(t.code,{children:"LANGFLOW_COMPONENTS_PATH"})," environment variable in the ",(0,s.jsx)(t.code,{children:"docker run"})," command to point to the custom components directory."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"docker ",props:{style:{color:"#FFA657"}}},{content:"run ",props:{style:{color:"#A5D6FF"}}},{content:"-d \\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" --name ",props:{style:{color:"#79C0FF"}}},{content:"langflow ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" -p ",props:{style:{color:"#79C0FF"}}},{content:"7860:",props:{style:{color:"#A5D6FF"}}},{content:"7860 \\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" -v ",props:{style:{color:"#79C0FF"}}},{content:"./custom_components:/app/custom_components ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" -e ",props:{style:{color:"#79C0FF"}}},{content:"LANGFLOW_COMPONENTS_PATH=/app/custom_components ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" langflowai/langflow:latest",props:{style:{color:"#A5D6FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["Create the same custom components directory structure as the example in ",(0,s.jsx)(t.a,{href:"#custom-component-path",children:"Save the custom component"}),"."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"/app/custom_components/ # LANGFLOW_COMPONENTS_PATH",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 data/",props:{}}]},{tokens:[{content:" \u251c\u2500\u2500 __init__.py",props:{}}]},{tokens:[{content:" \u2514\u2500\u2500 dataframe_processor.py",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsx)(t.h2,{id:"how-components-execute",children:"How components execute"}),"\n",(0,s.jsx)(t.p,{children:"Langflow's engine manages:"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Instantiation"}),": A component is created and internal structures are initialized."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Assigning Inputs"}),": Values from the visual editor or connections are assigned to component fields."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Validation and Setup"}),": Optional hooks like ",(0,s.jsx)(t.code,{children:"_pre_run_setup"}),"."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Outputs Generation"}),": ",(0,s.jsx)(t.code,{children:"run()"})," or ",(0,s.jsx)(t.code,{children:"build_results()"})," triggers output methods."]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"You can customize execution by overriding these optional hooks in your custom component code."}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"_pre_run_setup()"})})," - Used during ",(0,s.jsx)(t.strong,{children:"Validation and Setup"}),".\nAdd this method inside your component class to initialize component state before execution begins:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"MyComponent",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # ... your inputs, outputs, and other attributes ...",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" def ",props:{style:{color:"#FF7B72"}}},{content:"_pre_run_setup",props:{style:{color:"#D2A8FF"}}},{content:"(self):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" if not ",props:{style:{color:"#FF7B72"}}},{content:"hasattr",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"_initialized"',props:{style:{color:"#A5D6FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:"._initialized ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".iteration ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"0",props:{style:{color:"#79C0FF"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.strong,{children:["Override ",(0,s.jsx)(t.code,{children:"run"})," or ",(0,s.jsx)(t.code,{children:"_run"})]})," - Used during ",(0,s.jsx)(t.strong,{children:"Outputs Generation"}),".\nAdd this method inside your component class to customize the main execution logic:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"MyComponent",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" async",props:{style:{color:"#FF7B72"}}},{content:" def_run(",props:{style:{color:"#C9D1D9"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # Custom execution logic here",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" # This runs instead of the default output method calls",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" pass",props:{style:{color:"#FF7B72"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.strong,{children:["Store data in ",(0,s.jsx)(t.code,{children:"self.ctx"})]}),".\nUse ",(0,s.jsx)(t.code,{children:"self.ctx"})," in any of your component methods to share data between method calls."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"MyComponent",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" def ",props:{style:{color:"#FF7B72"}}},{content:"_pre_run_setup",props:{style:{color:"#D2A8FF"}}},{content:"(self):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # Initialize counter in setup",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".ctx[",props:{style:{color:"#C9D1D9"}}},{content:'"processed_items"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"0",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" def ",props:{style:{color:"#FF7B72"}}},{content:"process_data",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # Increment counter during processing",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".ctx[",props:{style:{color:"#C9D1D9"}}},{content:'"processed_items"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"+= ",props:{style:{color:"#FF7B72"}}},{content:"1",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"item"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"f",props:{style:{color:"#FF7B72"}}},{content:'"processed ',props:{style:{color:"#A5D6FF"}}},{content:"{self",props:{style:{color:"#79C0FF"}}},{content:".ctx[",props:{style:{color:"#C9D1D9"}}},{content:"'processed_items'",props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:'"',props:{style:{color:"#A5D6FF"}}},{content:"})",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" def ",props:{style:{color:"#FF7B72"}}},{content:"get_summary",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # Access counter in different method",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" total ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".ctx[",props:{style:{color:"#C9D1D9"}}},{content:'"processed_items"',props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"summary"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"f",props:{style:{color:"#FF7B72"}}},{content:'"Processed ',props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"total",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:' items total"',props:{style:{color:"#A5D6FF"}}},{content:"})",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"inputs-and-outputs",children:"Inputs and outputs"}),"\n",(0,s.jsxs)(t.p,{children:["Inputs and outputs are ",(0,s.jsx)(t.strong,{children:"class-level configurations"})," that define how data flows through the component, how it appears in the visual editor, and how connections to other components are validated."]}),"\n",(0,s.jsx)(t.h3,{id:"inputs",children:"Inputs"}),"\n",(0,s.jsxs)(t.p,{children:["Inputs are defined in a class-level ",(0,s.jsx)(t.code,{children:"inputs"})," list. When Langflow loads the component, it uses this list to render component fields and ",(0,s.jsx)(t.a,{href:"/concepts-components#component-ports",children:"ports"})," in the visual editor. Users or other components provide values or connections to fill these inputs."]}),"\n",(0,s.jsxs)(t.p,{children:["An input is usually an instance of a class from ",(0,s.jsx)(t.code,{children:"lfx.io"})," (such as ",(0,s.jsx)(t.code,{children:"StrInput"}),", ",(0,s.jsx)(t.code,{children:"DataInput"}),", or ",(0,s.jsx)(t.code,{children:"MessageTextInput"}),")."]}),"\n",(0,s.jsxs)(t.p,{children:["For example, this component has three inputs: a text field (",(0,s.jsx)(t.code,{children:"StrInput"}),"), a Boolean toggle (",(0,s.jsx)(t.code,{children:"BoolInput"}),"), and a dropdown selection (",(0,s.jsx)(t.code,{children:"DropdownInput"}),")."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.io ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" StrInput, BoolInput, DropdownInput",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"inputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" StrInput(",props:{style:{color:"#C9D1D9"}}},{content:"name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"title"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Title"',props:{style:{color:"#A5D6FF"}}},{content:"),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" BoolInput(",props:{style:{color:"#C9D1D9"}}},{content:"name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"enabled"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Enabled"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"value",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:"),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" DropdownInput(",props:{style:{color:"#C9D1D9"}}},{content:"name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"mode"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Mode"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"options",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"[",props:{style:{color:"#C9D1D9"}}},{content:'"Fast"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"Safe"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"Experimental"',props:{style:{color:"#A5D6FF"}}},{content:"], ",props:{style:{color:"#C9D1D9"}}},{content:"value",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Safe"',props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"StrInput"})," creates a single-line text field for entering text. The ",(0,s.jsx)(t.code,{children:'name="title"'})," parameter means you access this value in your component methods with ",(0,s.jsx)(t.code,{children:"self.title"}),", while ",(0,s.jsx)(t.code,{children:'display_name="Title"'}),' shows "Title" as the label in the visual editor.']}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"BoolInput"})," creates a boolean toggle that's enabled by default with ",(0,s.jsx)(t.code,{children:"value=True"}),". Users can turn this on or off, and you access the current state with ",(0,s.jsx)(t.code,{children:"self.enabled"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"DropdownInput"}),' provides a selection menu with three predefined options: "Fast", "Safe", and "Experimental".\nThe ',(0,s.jsx)(t.code,{children:'value="Safe"'}),' sets "Safe" as the default selection, and you access the user\'s choice with ',(0,s.jsx)(t.code,{children:"self.mode"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["For a list of all available parameters, see the ",(0,s.jsx)(t.a,{href:"https://github.com/langflow-ai/langflow/blob/main/src/lfx/src/lfx/inputs/input_mixin.py",children:"BaseInputMixin definition"})," in the Langflow codebase."]}),"\n",(0,s.jsxs)(t.p,{children:["For a list of all available input types, see the ",(0,s.jsx)(t.a,{href:"https://github.com/langflow-ai/langflow/blob/main/src/lfx/src/lfx/inputs/inputs.py",children:"input type definitions"})," in the Langflow codebase."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.io ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" StrInput, DataInput, MultilineInput, IntInput, BoolInput, DropdownInput, FileInput, CodeInput, ModelInput, HandleInput, Output",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.h3,{id:"outputs",children:"Outputs"}),"\n",(0,s.jsxs)(t.p,{children:["Outputs are defined in a class-level ",(0,s.jsx)(t.code,{children:"outputs"})," list. When Langflow renders a component, each output becomes a connector point in the visual editor. When you connect something to an output, Langflow automatically calls the corresponding method and passes the returned object to the next component."]}),"\n",(0,s.jsxs)(t.p,{children:["An output is usually an instance of ",(0,s.jsx)(t.code,{children:"Output"})," from ",(0,s.jsx)(t.code,{children:"lfx.io"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["For example, this component has one ",(0,s.jsx)(t.code,{children:"output"})," that returns a ",(0,s.jsx)(t.code,{children:"DataFrame"}),":"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.io ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Output",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.schema ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" DataFrame",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"outputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"df_out"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"DataFrame Output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"build_df"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" )",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"build_df",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> DataFrame:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # Process data and return DataFrame",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" df ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" DataFrame({",props:{style:{color:"#C9D1D9"}}},{content:'"col1"',props:{style:{color:"#A5D6FF"}}},{content:": [",props:{style:{color:"#C9D1D9"}}},{content:"1",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"2",props:{style:{color:"#79C0FF"}}},{content:"], ",props:{style:{color:"#C9D1D9"}}},{content:'"col2"',props:{style:{color:"#A5D6FF"}}},{content:": [",props:{style:{color:"#C9D1D9"}}},{content:"3",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"4",props:{style:{color:"#79C0FF"}}},{content:"]})",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".status ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:'"Built DataFrame with ',props:{style:{color:"#A5D6FF"}}},{content:"{len",props:{style:{color:"#79C0FF"}}},{content:"(df)",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:' rows."',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" df",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"Output"})," creates a connector point in the visual editor labeled ",(0,s.jsx)(t.strong,{children:"DataFrame Output"}),". The ",(0,s.jsx)(t.code,{children:'name="df_out"'})," parameter identifies this output, while ",(0,s.jsx)(t.code,{children:'display_name="DataFrame Output"'})," shows the label in the UI. The ",(0,s.jsx)(t.code,{children:'method="build_df"'})," parameter tells Langflow to call the ",(0,s.jsx)(t.code,{children:"build_df"})," method when this output is connected to another component."]}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"build_df"})," method processes data and returns a ",(0,s.jsx)(t.code,{children:"DataFrame"}),". The ",(0,s.jsx)(t.code,{children:"-> DataFrame"})," type annotation helps Langflow validate connections and provides color-coding in the visual editor. You can also set ",(0,s.jsx)(t.code,{children:"self.status"})," to show progress messages in the UI."]}),"\n",(0,s.jsxs)(t.p,{children:["For a complete list of all available parameters, see the ",(0,s.jsx)(t.a,{href:"https://github.com/langflow-ai/langflow/blob/main/src/lfx/src/lfx/template/field/base.py",children:"Output class definition"})," in the Langflow codebase. Common parameters include:"]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Additional return types:"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"Message"})}),": Structured chat messages"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"Data"})}),": Flexible object with ",(0,s.jsx)(t.code,{children:".data"})," and optional ",(0,s.jsx)(t.code,{children:".text"})]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"DataFrame"})}),": Tabular data (pandas DataFrame subclass)"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Primitive types"}),": ",(0,s.jsx)(t.code,{children:"str"}),", ",(0,s.jsx)(t.code,{children:"int"}),", ",(0,s.jsx)(t.code,{children:"bool"}),", not recommended for type consistency"]}),"\n"]}),"\n",(0,s.jsx)(t.h4,{id:"associated-methods",children:"Associated methods"}),"\n",(0,s.jsxs)(t.p,{children:["Each output is linked to a method where the output method name must match the method name. The method typically returns objects like ",(0,s.jsx)(t.code,{children:"Message"}),", ",(0,s.jsx)(t.code,{children:"Data"}),", or ",(0,s.jsx)(t.code,{children:"DataFrame"}),", and can use inputs with ",(0,s.jsx)(t.code,{children:"self."}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["For example, the ",(0,s.jsx)(t.code,{children:"Output"})," defines a connector point called ",(0,s.jsx)(t.code,{children:"file_contents"})," that will call the ",(0,s.jsx)(t.code,{children:"read_file"})," method when connected. The ",(0,s.jsx)(t.code,{children:"read_file"})," method accesses the filename input with ",(0,s.jsx)(t.code,{children:"self.filename"}),", reads the file content, sets a status message, and returns the content wrapped in a ",(0,s.jsx)(t.code,{children:"Data"})," object."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"file_contents"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"File Contents"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"read_file"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:")",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"read_file",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" path ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".filename",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" with ",props:{style:{color:"#FF7B72"}}},{content:"open",props:{style:{color:"#79C0FF"}}},{content:"(path, ",props:{style:{color:"#C9D1D9"}}},{content:'"r"',props:{style:{color:"#A5D6FF"}}},{content:") ",props:{style:{color:"#C9D1D9"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" f:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" content ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" f.read()",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".status ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:'"Read ',props:{style:{color:"#A5D6FF"}}},{content:"{len",props:{style:{color:"#79C0FF"}}},{content:"(content)",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:" chars from ",props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"path",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:'"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"content"',props:{style:{color:"#A5D6FF"}}},{content:": content})",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.h4,{id:"components-with-multiple-outputs",children:"Components with multiple outputs"}),"\n",(0,s.jsx)(t.p,{children:"A component can define multiple outputs.\nEach output can have a different corresponding method."}),"\n",(0,s.jsx)(t.p,{children:"For example:"}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"outputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}},{content:"display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Processed Data"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"processed_data"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"process_data"',props:{style:{color:"#A5D6FF"}}},{content:"),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}},{content:"display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Debug Info"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"debug_info"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"provide_debug_info"',props:{style:{color:"#A5D6FF"}}},{content:"),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.p,{children:"By default, components in Langflow that produce multiple outputs only allow one output selection in the visual editor.\nThe component will have only one output port where the user can select the preferred output type."}),"\n",(0,s.jsxs)(t.p,{children:["This behavior is controlled by the ",(0,s.jsx)(t.code,{children:"group_outputs"})," parameter:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.strong,{children:[(0,s.jsx)(t.code,{children:"group_outputs=False"})," (default)"]}),": When a component has more than one output and ",(0,s.jsx)(t.code,{children:"group_outputs"})," is ",(0,s.jsx)(t.code,{children:"false"})," or not set, the outputs are grouped in the visual editor, and the user must select one."]}),"\n",(0,s.jsx)(t.p,{children:"Use this option when the component is expected to return only one type of output when used in a flow."}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"group_outputs=True"})}),": All outputs are available simultaneously in the visual editor. The component has one output port for each output, and the user can connect zero or more outputs to other components."]}),"\n",(0,s.jsx)(t.p,{children:"Use this option when the component is expected to return multiple values that are used in parallel by downstream components or processes."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(p.A,{children:[(0,s.jsxs)(a.A,{value:"false",label:"False or not set",default:!0,children:[(0,s.jsxs)(t.p,{children:["In this example, the visual editor provides a single output port, and the user can select one of the outputs.\nSince ",(0,s.jsx)(t.code,{children:"group_outputs=False"})," is the default behavior, it doesn't need to be explicitly set in the component, as shown in this example."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"outputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"structured_output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Structured Output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"build_structured_output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"dataframe_output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"DataFrame Output"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"build_structured_dataframe"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]}),(0,s.jsxs)(a.A,{value:"true",label:"True",children:[(0,s.jsx)(t.p,{children:"In this example, all outputs are available simultaneously in the visual editor."}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"outputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"true_result"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"True"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"true_response"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" group_outputs",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" Output(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"false_result"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"False"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"false_response"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" group_outputs",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"tool-mode",children:"Tool mode"}),"\n",(0,s.jsxs)(t.p,{children:["Components that support ",(0,s.jsx)(t.strong,{children:"Tool Mode"})," can be used as standalone components (when ",(0,s.jsx)(t.em,{children:"not"})," in ",(0,s.jsx)(t.strong,{children:"Tool Mode"}),") or as tools for other components with a ",(0,s.jsx)(t.strong,{children:"Tools"})," input, such as ",(0,s.jsx)(t.strong,{children:"Agent"})," components."]}),"\n",(0,s.jsxs)(t.p,{children:["You can allow a custom component to support ",(0,s.jsx)(t.strong,{children:"Tool Mode"})," by setting ",(0,s.jsx)(t.code,{children:"tool_mode=True"}),":"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"inputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" MessageTextInput(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"message"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Mensage"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" info",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Enter the message that will be processed directly by the tool"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" tool_mode",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.h2,{id:"typed-annotations",children:"Typed annotations"}),"\n",(0,s.jsxs)(t.p,{children:["In Langflow, typed annotations allow Langflow to visually guide users and maintain flow consistency.\nAlways annotate your output methods with return types like ",(0,s.jsx)(t.code,{children:"-> Data"}),", ",(0,s.jsx)(t.code,{children:"-> Message"}),", or ",(0,s.jsx)(t.code,{children:"-> DataFrame"})," to enable proper visual editor color-coding and validation.\nUse ",(0,s.jsx)(t.code,{children:"Data"}),", ",(0,s.jsx)(t.code,{children:"Message"}),", or ",(0,s.jsx)(t.code,{children:"DataFrame"})," wrappers instead of returning plain structures for better consistency. Stay consistent with types across your components to make flows predictable and easier to build."]}),"\n",(0,s.jsxs)(t.p,{children:["Typed annotations provide color-coding where outputs like ",(0,s.jsx)(t.code,{children:"-> Data"})," or ",(0,s.jsx)(t.code,{children:"-> Message"})," get distinct colors, automatic validation that blocks incompatible connections, and improved readability for users to quickly understand data flow between components."]}),"\n",(0,s.jsx)(t.h3,{id:"common-return-types",children:"Common return types"}),"\n",(0,s.jsxs)(p.A,{children:[(0,s.jsxs)(a.A,{value:"message",label:"Message",default:!0,children:[(0,s.jsxs)(t.p,{children:["For chat-style outputs. Connects to any of several ",(0,s.jsx)(t.code,{children:"Message"}),"-compatible inputs."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"produce_message",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Message:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Message(",props:{style:{color:"#C9D1D9"}}},{content:"text",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Hello! from typed method!"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"sender",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"System"',props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]}),(0,s.jsxs)(a.A,{value:"data",label:"Data",children:[(0,s.jsxs)(t.p,{children:["For structured data like dicts or partial texts. Connects only to ",(0,s.jsx)(t.code,{children:"DataInput"})," (ports that accept ",(0,s.jsx)(t.code,{children:"Data"}),")."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"get_processed_data",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" processed ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}},{content:'"key1"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"value1"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"key2"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"123",props:{style:{color:"#79C0FF"}}},{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"processed)",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]}),(0,s.jsxs)(a.A,{value:"dataframe",label:"DataFrame",children:[(0,s.jsxs)(t.p,{children:["For tabular data. Connects only to ",(0,s.jsx)(t.code,{children:"DataFrameInput"})," (ports that accept ",(0,s.jsx)(t.code,{children:"DataFrame"}),")."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"build_df",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> DataFrame:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" pdf ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" pd.DataFrame({",props:{style:{color:"#C9D1D9"}}},{content:'"A"',props:{style:{color:"#A5D6FF"}}},{content:": [",props:{style:{color:"#C9D1D9"}}},{content:"1",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"2",props:{style:{color:"#79C0FF"}}},{content:"], ",props:{style:{color:"#C9D1D9"}}},{content:'"B"',props:{style:{color:"#A5D6FF"}}},{content:": [",props:{style:{color:"#C9D1D9"}}},{content:"3",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"4",props:{style:{color:"#79C0FF"}}},{content:"]})",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" DataFrame(pdf)",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]}),(0,s.jsxs)(a.A,{value:"primitives",label:"Primitive Types",children:[(0,s.jsxs)(t.p,{children:["Returning primitives is allowed, but wrapping in ",(0,s.jsx)(t.code,{children:"Data"})," or ",(0,s.jsx)(t.code,{children:"Message"})," is recommended for better consistency in the visual editor."]}),(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"compute_sum",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> ",props:{style:{color:"#C9D1D9"}}},{content:"int",props:{style:{color:"#79C0FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return ",props:{style:{color:"#FF7B72"}}},{content:"sum",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".numbers)",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"enable-dynamic-fields",children:"Enable dynamic fields"}),"\n",(0,s.jsxs)(t.p,{children:["In ",(0,s.jsx)(t.strong,{children:"Langflow"}),", dynamic fields allow inputs to change or appear based on user interactions. You can make an input dynamic by setting ",(0,s.jsx)(t.code,{children:"dynamic=True"}),". Optionally, setting ",(0,s.jsx)(t.code,{children:"real_time_refresh=True"})," triggers the ",(0,s.jsx)(t.code,{children:"update_build_config"})," method to adjust the input's visibility or properties in real time, creating a contextual visual editor experience that only exposes relevant fields based on the user's choices."]}),"\n",(0,s.jsxs)(t.p,{children:["In this example, the operator field triggers updates with ",(0,s.jsx)(t.code,{children:"real_time_refresh=True"}),".\nThe ",(0,s.jsx)(t.code,{children:"regex_pattern"})," field is initially hidden and controlled with ",(0,s.jsx)(t.code,{children:"dynamic=True"}),"."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.custom ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" Component",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"from",props:{style:{color:"#FF7B72"}}},{content:" lfx.io ",props:{style:{color:"#C9D1D9"}}},{content:"import",props:{style:{color:"#FF7B72"}}},{content:" DropdownInput, StrInput",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"class ",props:{style:{color:"#FF7B72"}}},{content:"RegexRouter",props:{style:{color:"#FFA657"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"Component",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"Regex Router"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" description ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"Demonstrates dynamic fields for regex input."',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" inputs ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" DropdownInput(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"operator"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Operator"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" options",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"[",props:{style:{color:"#C9D1D9"}}},{content:'"equals"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"contains"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"regex"',props:{style:{color:"#A5D6FF"}}},{content:"],",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" value",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"equals"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" real_time_refresh",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" StrInput(",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" display_name",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:'"Regex Pattern"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" info",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"\"Used if operator='regex'\"",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" dynamic",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" show",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"False",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ),",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.h3,{id:"show-or-hide-fields-based-on-user-selections",children:"Show or hide fields based on user selections"}),"\n",(0,s.jsxs)(t.p,{children:["When a user changes a field with ",(0,s.jsx)(t.code,{children:"real_time_refresh=True"}),", Langflow calls your ",(0,s.jsx)(t.code,{children:"update_build_config"})," method."]}),"\n",(0,s.jsx)(t.p,{children:"This method lets you show, hide, or modify other fields based on what the user selected."}),"\n",(0,s.jsxs)(t.p,{children:["This example shows the ",(0,s.jsx)(t.code,{children:"regex_pattern"}),' field only when the user selects "regex" from the operator dropdown.']}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"update_build_config",props:{style:{color:"#D2A8FF"}}},{content:"(self, build_config: ",props:{style:{color:"#C9D1D9"}}},{content:"dict",props:{style:{color:"#79C0FF"}}},{content:", field_value: ",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:", field_name: ",props:{style:{color:"#C9D1D9"}}},{content:"str ",props:{style:{color:"#79C0FF"}}},{content:"| ",props:{style:{color:"#FF7B72"}}},{content:"None ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"None",props:{style:{color:"#79C0FF"}}},{content:") -> ",props:{style:{color:"#C9D1D9"}}},{content:"dict",props:{style:{color:"#79C0FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" if",props:{style:{color:"#FF7B72"}}},{content:" field_name ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:'"operator"',props:{style:{color:"#A5D6FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" if",props:{style:{color:"#FF7B72"}}},{content:" field_value ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:'"regex"',props:{style:{color:"#A5D6FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"show"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" else",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"show"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"False",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" build_config",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["You can modify additional field properties in ",(0,s.jsx)(t.code,{children:"update_build_config"})," other than just ",(0,s.jsx)(t.code,{children:"show"})," and ",(0,s.jsx)(t.code,{children:"hide"}),"."]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"required"})}),": Make fields required or optional dynamically"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"if",props:{style:{color:"#FF7B72"}}},{content:" field_value ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:'"regex"',props:{style:{color:"#A5D6FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"required"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"True",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"else",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"required"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"False",props:{style:{color:"#79C0FF"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"advanced"})}),': Move fields to the "Advanced" section']}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"if",props:{style:{color:"#FF7B72"}}},{content:" field_value ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:'"experimental"',props:{style:{color:"#A5D6FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"advanced"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"False ",props:{style:{color:"#79C0FF"}}},{content:"# Show in main section",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"else",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"regex_pattern"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"advanced"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"True ",props:{style:{color:"#79C0FF"}}},{content:"# Hide in advanced",props:{style:{color:"#8B949E"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"options"})}),": Change dropdown options based on other selections"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"if",props:{style:{color:"#FF7B72"}}},{content:" field_value ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:'"regex"',props:{style:{color:"#A5D6FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"operator"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"options"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}},{content:'"regex"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"contains"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"starts_with"',props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"else",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" build_config[",props:{style:{color:"#C9D1D9"}}},{content:'"operator"',props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:'"options"',props:{style:{color:"#A5D6FF"}}},{content:"] ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}},{content:'"equals"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"contains"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"not_equals"',props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"error-handling-and-logging",children:"Error handling and logging"}),"\n",(0,s.jsxs)(t.p,{children:["You can raise standard Python exceptions such as ",(0,s.jsx)(t.code,{children:"ValueError"})," or specialized exceptions like ",(0,s.jsx)(t.code,{children:"ToolException"})," when validation fails. Langflow automatically catches these and displays appropriate error messages in the visual editor, helping users quickly identify what went wrong."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"compute_result",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> ",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" if not ",props:{style:{color:"#FF7B72"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".user_input:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" raise ",props:{style:{color:"#FF7B72"}}},{content:"ValueError",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:'"No input provided."',props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # ...",props:{style:{color:"#8B949E"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["Alternatively, instead of stopping a flow abruptly, you can return a ",(0,s.jsx)(t.code,{children:"Data"})," object containing an ",(0,s.jsx)(t.code,{children:'"error"'})," field. This approach allows the flow to continue operating and enables downstream components to detect and handle the error gracefully."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"run_model",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" try",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" # ...",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" except ",props:{style:{color:"#FF7B72"}}},{content:"Exception ",props:{style:{color:"#79C0FF"}}},{content:"as",props:{style:{color:"#FF7B72"}}},{content:" e:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"error"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:"(e)})",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["Langflow provides several tools to help you debug and manage component execution. You can use ",(0,s.jsx)(t.code,{children:"self.status"})," to display short messages about execution results directly in the visual editor, making troubleshooting easier for users."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"parse_data",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# ...",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"self",props:{style:{color:"#79C0FF"}}},{content:".status ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:'"Parsed ',props:{style:{color:"#A5D6FF"}}},{content:"{len",props:{style:{color:"#79C0FF"}}},{content:"(rows)",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:' rows successfully."',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"rows"',props:{style:{color:"#A5D6FF"}}},{content:": rows})",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["You can halt individual output paths when certain conditions fail using ",(0,s.jsx)(t.code,{children:"self.stop()"}),", without stopping other outputs from the same component."]}),"\n",(0,s.jsx)(t.p,{children:"This example stops the output if the user input is empty, preventing the component from processing invalid data."}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"some_output",props:{style:{color:"#D2A8FF"}}},{content:"(self) -> Data:",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"if not ",props:{style:{color:"#FF7B72"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".user_input ",props:{style:{color:"#C9D1D9"}}},{content:"or ",props:{style:{color:"#FF7B72"}}},{content:"len",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"self",props:{style:{color:"#79C0FF"}}},{content:".user_input.strip()) ",props:{style:{color:"#C9D1D9"}}},{content:"== ",props:{style:{color:"#FF7B72"}}},{content:"0",props:{style:{color:"#79C0FF"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" self",props:{style:{color:"#79C0FF"}}},{content:".stop(",props:{style:{color:"#C9D1D9"}}},{content:'"some_output"',props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" Data(",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"{",props:{style:{color:"#C9D1D9"}}},{content:'"error"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"Empty input provided"',props:{style:{color:"#A5D6FF"}}},{content:"})",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["You can log key execution details inside components using ",(0,s.jsx)(t.code,{children:"self.log()"}),'. These logs are stored as structured data and displayed in the "Logs" or "Events" section of the component\'s detail view, and can be accessed later through the ',(0,s.jsx)(t.strong,{children:"Logs"})," button in the visual editor or exported files."]}),"\n",(0,s.jsxs)(t.p,{children:["Component logs are distinct from Langflow's main application logging system. ",(0,s.jsx)(t.code,{children:"self.log()"})," creates component-specific logs that appear in the UI, while Langflow's main logging system uses ",(0,s.jsx)(t.a,{href:"https://www.structlog.org",children:"structlog"})," for application-level logging that outputs to ",(0,s.jsx)(t.code,{children:"langflow.log"})," files. For more information, see ",(0,s.jsx)(t.a,{href:"/logging",children:"Logs"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"This example logs a message when the component starts processing a file."}),"\n",(0,s.jsx)(h.Code,{codeConfig:u,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"process_file",props:{style:{color:"#D2A8FF"}}},{content:"(self, file_path: ",props:{style:{color:"#C9D1D9"}}},{content:"str",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"self",props:{style:{color:"#79C0FF"}}},{content:".log(",props:{style:{color:"#C9D1D9"}}},{content:"f",props:{style:{color:"#FF7B72"}}},{content:'"Processing file ',props:{style:{color:"#A5D6FF"}}},{content:"{",props:{style:{color:"#79C0FF"}}},{content:"file_path",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#79C0FF"}}},{content:'"',props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(t.h2,{id:"contribute-custom-components-to-langflow",children:"Contribute custom components to Langflow"}),"\n",(0,s.jsxs)(t.p,{children:["To contribute your custom component to the Langflow project, see ",(0,s.jsx)(t.a,{href:"/contributing-components",children:"Contribute components"}),"."]})]})}function C(o={}){const{wrapper:t}={...(0,r.R)(),...o.components};return t?(0,s.jsx)(t,{...o,children:(0,s.jsx)(m,{...o})}):m(o)}function f(o,t){throw new Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]); \ No newline at end of file diff --git a/assets/js/3bfbe7c9.24a92496.js b/assets/js/3bfbe7c9.24a92496.js new file mode 100644 index 0000000000..40a9fb4c4c --- /dev/null +++ b/assets/js/3bfbe7c9.24a92496.js @@ -0,0 +1 @@ +"use strict";(globalThis.webpackChunklangflow_docs=globalThis.webpackChunklangflow_docs||[]).push([[7720],{8787:(e,o,n)=>{n.r(o),n.d(o,{CH:()=>h,assets:()=>p,chCodeConfig:()=>f,contentTitle:()=>d,default:()=>y,frontMatter:()=>a,metadata:()=>t,toc:()=>u});const t=JSON.parse('{"id":"Deployment/develop-application","title":"Containerize a Langflow application","description":"Designing flows in the visual editor is only the first step in building an application that uses Langflow.","source":"@site/docs/Deployment/develop-application.mdx","sourceDirName":"Deployment","slug":"/develop-application","permalink":"/develop-application","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Containerize a Langflow application","slug":"/develop-application"},"sidebar":"docs","previous":{"title":"Deploy Langflow with Nginx and SSL","permalink":"/deployment-nginx-ssl"},"next":{"title":"Langflow Docker images","permalink":"/deployment-docker"}}');var s=n(74848),r=n(28453),l=n(24754),i=n(40619),c=n(63905);const a={title:"Containerize a Langflow application",slug:"/develop-application"},d=void 0,p={},h={annotations:l.hk,Code:l.Cy},f={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},u=[...c.RM,{value:"Directory structure",id:"directory-structure",level:2},{value:"Package management",id:"package-management",level:3},{value:"Environment variables",id:"docker-env",level:3},{value:"Secrets",id:"secrets",level:3},{value:"Storage",id:"storage",level:3},{value:"Flows",id:"flows",level:3},{value:"Components",id:"components",level:3},{value:"Langflow Dockerfile",id:"dockerfile",level:2},{value:"Backend-only mode",id:"backend-only-mode",level:3},{value:"Test your Langflow Docker image",id:"test-your-langflow-docker-image",level:2},{value:"Deploy to Docker Hub and Kubernetes",id:"deploy-docker",level:2}];function g(e){const o={a:"a",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components},{Details:n}=o;return h||m("CH",!1),h.Code||m("CH.Code",!0),n||m("Details",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:'[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; }'}}),"\n","\n",(0,s.jsx)(c.Ay,{}),"\n",(0,s.jsx)(o.p,{children:"Designing flows in the visual editor is only the first step in building an application that uses Langflow."}),"\n",(0,s.jsx)(o.p,{children:"Once you have a functional flow, you can use that flow in a larger application, such as a website or mobile app.\nBecause Langflow is both an IDE and a runtime, you can use Langflow to build and test your flows locally, and then package and serve your flows in a production environment."}),"\n",(0,s.jsx)(o.p,{children:"This guide introduces application development with Langflow from initial setup through packaging and deployment.\nThis documentation doesn't explain how to write a complete application; it only describes how to include Langflow in the context of a larger application."}),"\n",(0,s.jsx)(o.h2,{id:"directory-structure",children:"Directory structure"}),"\n",(0,s.jsx)(o.p,{children:"The following example describes the directory structure for a minimal Langflow application:"}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"LANGFLOW-APPLICATION/",props:{}}]},{tokens:[{content:"\u251c\u2500\u2500 docker.env",props:{}}]},{tokens:[{content:"\u251c\u2500\u2500 Dockerfile",props:{}}]},{tokens:[{content:"\u251c\u2500\u2500 flows/",props:{}}]},{tokens:[{content:"\u2502 \u251c\u2500\u2500 flow1.json",props:{}}]},{tokens:[{content:"\u2502 \u2514\u2500\u2500 flow2.json",props:{}}]},{tokens:[{content:"\u251c\u2500\u2500 langflow-config-dir/",props:{}}]},{tokens:[{content:"\u251c\u2500\u2500 README.md",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsx)(o.p,{children:"This directory contains the following:"}),"\n",(0,s.jsxs)(o.ul,{children:["\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.a,{href:"#docker-env",children:(0,s.jsx)(o.code,{children:"docker.env"})}),": This file is copied to the Docker image as a ",(0,s.jsx)(o.code,{children:".env"})," file in the container root."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.a,{href:"#dockerfile",children:(0,s.jsx)(o.code,{children:"Dockerfile"})}),": This file controls how your Langflow image is built."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.a,{href:"#flows",children:(0,s.jsx)(o.code,{children:"/flows"})}),": This folder holds the flows you want to host, which are the flows that your application uses."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"/langflow-config-dir"}),": This folder is referenced in the Dockerfile as the location for your Langflow deployment's configuration files, database, and logs."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"README.md"}),": This is a typical README file for your application's documentation."]}),"\n"]}),"\n",(0,s.jsxs)(o.p,{children:["This is a minimal example of a Langflow application directory.\nYour application might have additional files and folders, such as a ",(0,s.jsx)(o.code,{children:"/components"})," folder for custom components, or a ",(0,s.jsx)(o.code,{children:"pyproject.toml"})," file for additional dependencies."]}),"\n",(0,s.jsx)(o.h3,{id:"package-management",children:"Package management"}),"\n",(0,s.jsxs)(o.p,{children:["The base Langflow Docker image includes the Langflow core dependencies because it uses ",(0,s.jsx)(o.code,{children:"langflowai/langflow:latest"})," as the parent image."]}),"\n",(0,s.jsxs)(o.p,{children:["If your application requires additional dependencies, create a ",(0,s.jsx)(o.a,{href:"https://packaging.python.org/en/latest/guides/writing-pyproject-toml",children:(0,s.jsx)(o.code,{children:"pyproject.toml"})})," file for the additional dependencies.\nFor more information, see ",(0,s.jsx)(o.a,{href:"/install-custom-dependencies",children:"Install custom dependencies"}),"."]}),"\n",(0,s.jsxs)(o.p,{children:["To deploy an application with additional dependencies to Docker, you must copy the ",(0,s.jsx)(o.code,{children:"pyproject.toml"})," and ",(0,s.jsx)(o.code,{children:"uv.lock"})," files to the Docker image.\nTo do this, add the following to your Langflow application's Dockerfile:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"COPY pyproject.toml uv.lock /app/",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsx)(o.h3,{id:"docker-env",children:"Environment variables"}),"\n",(0,s.jsxs)(o.p,{children:["The ",(0,s.jsx)(o.code,{children:"docker.env"})," file is a ",(0,s.jsx)(o.code,{children:".env"})," file loaded into your Docker image.\nIt contains ",(0,s.jsx)(o.a,{href:"/environment-variables",children:"Langflow environment variables"})," that are used in flows or control Langflow's behavior, such as authentication, database storage, API keys, and server configurations.\nFor example:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"LANGFLOW_AUTO_LOGIN=True",props:{}}]},{tokens:[{content:"LANGFLOW_SAVE_DB_IN_CONFIG_DIR=True",props:{}}]},{tokens:[{content:"LANGFLOW_BASE_URL=http://0.0.0.0:7860",props:{}}]},{tokens:[{content:"OPENAI_API_KEY=sk-...",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsxs)(o.p,{children:["You can set environment variables in the Dockerfile as well.\nHowever, if you set an environment variable in both ",(0,s.jsx)(o.code,{children:"docker.env"})," and the Dockerfile, Langflow uses the value set in ",(0,s.jsx)(o.code,{children:"docker.env"}),"."]}),"\n",(0,s.jsxs)(o.p,{children:["Langflow can also ",(0,s.jsx)(o.a,{href:"/configuration-global-variables#add-custom-global-variables-from-the-environment",children:"create global variables from your environment variables"}),", or ",(0,s.jsx)(o.a,{href:"/configuration-global-variables#use-environment-variables-for-missing-global-variables",children:"use environment variables as a backup for missing global variables"}),"."]}),"\n",(0,s.jsx)(o.h3,{id:"secrets",children:"Secrets"}),"\n",(0,s.jsx)(o.p,{children:"For simplicity, the examples in the Langflow documentation might use direct references to API keys and other sensitive values.\nIn your own applications, you should always follow industry best practices for managing secrets, such as using environment variables or secret management tools."}),"\n",(0,s.jsxs)(o.p,{children:["For information about generating authentication keys and managing secrets in Langflow, see ",(0,s.jsx)(o.a,{href:"/api-keys-and-authentication",children:"API keys and authentication"}),"."]}),"\n",(0,s.jsx)(o.h3,{id:"storage",children:"Storage"}),"\n",(0,s.jsxs)(o.p,{children:["By default, Langflow uses an ",(0,s.jsx)(o.a,{href:"https://www.sqlite.org/",children:"SQLite"})," database for storage.\nIf you prefer to use PostgreSQL, see ",(0,s.jsx)(o.a,{href:"/configuration-custom-database",children:"Configure an external PostgreSQL database"}),"."]}),"\n",(0,s.jsxs)(o.p,{children:["For more information about storage, including cache and memory, see ",(0,s.jsx)(o.a,{href:"/memory",children:"Memory management options"}),"."]}),"\n",(0,s.jsx)(o.h3,{id:"flows",children:"Flows"}),"\n",(0,s.jsx)(o.p,{children:"Your local Langflow instance might have many flows for different applications.\nWhen you package Langflow as a dependency of an application, you only want to include the flows your application uses."}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:[(0,s.jsx)(o.a,{href:"/concepts-flows-import",children:"Export flows"})," that are relevant to your application."]}),"\n",(0,s.jsxs)(o.p,{children:["If you have chained flows (flows that trigger other flows), make sure you export ",(0,s.jsx)(o.em,{children:"all"})," necessary flows."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Add the exported Langflow JSON files to the ",(0,s.jsx)(o.code,{children:"/flows"})," folder in your application directory."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(o.h3,{id:"components",children:"Components"}),"\n",(0,s.jsxs)(o.p,{children:["The ",(0,s.jsx)(i.A,{name:"Component","aria-hidden":"true"})," ",(0,s.jsx)(o.strong,{children:"Core components"})," and ",(0,s.jsx)(i.A,{name:"Blocks","aria-hidden":"true"})," ",(0,s.jsx)(o.strong,{children:"Bundles"})," that you see in the Langflow visual editor are automatically included in the base Langflow Docker image."]}),"\n",(0,s.jsxs)(o.p,{children:["If you have ",(0,s.jsx)(o.a,{href:"/components-custom-components",children:"custom components"})," for your application, include them in your application directory.\nCustom components must be placed inside category folders, not directly in the base directory:"]}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Create a ",(0,s.jsx)(o.code,{children:"/components"})," folder in your application directory."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Inside ",(0,s.jsx)(o.code,{children:"/components"}),", create category subfolders (for example, ",(0,s.jsx)(o.code,{children:"/components/data"}),", ",(0,s.jsx)(o.code,{children:"/components/tools"}),")."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"Add your custom component files to the appropriate category folders."}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Copy the ",(0,s.jsx)(o.code,{children:"/components"})," folder to your Docker image and set the ",(0,s.jsx)(o.code,{children:"LANGFLOW_COMPONENTS_PATH"})," environment variable:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"COPY",props:{style:{color:"#FF7B72"}}},{content:" components /app/components",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"ENV",props:{style:{color:"#FF7B72"}}},{content:" LANGFLOW_COMPONENTS_PATH=/app/components",props:{style:{color:"#C9D1D9"}}}]}],lang:"dockerfile"},annotations:[]}]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(o.h2,{id:"dockerfile",children:"Langflow Dockerfile"}),"\n",(0,s.jsx)(o.p,{children:"The Dockerfile determines how your Langflow image is built, including the dependencies, flows, components, and configuration files."}),"\n",(0,s.jsx)(o.p,{children:"At minimum, you need to specify the base Langflow image, create the necessary folders in the container, copy folders and files to the container, and provide a startup command."}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"# Use the latest version of the base Langflow image",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"FROM",props:{style:{color:"#FF7B72"}}},{content:" langflowai/langflow:latest",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Create folders and set the working directory in the container",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"RUN",props:{style:{color:"#FF7B72"}}},{content:" mkdir /app/flows",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"RUN",props:{style:{color:"#FF7B72"}}},{content:" mkdir /app/langflow-config-dir",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"WORKDIR",props:{style:{color:"#FF7B72"}}},{content:" /app",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Copy flows, langflow-config-dir, and docker.env to the container",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"COPY",props:{style:{color:"#FF7B72"}}},{content:" flows /app/flows",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"COPY",props:{style:{color:"#FF7B72"}}},{content:" langflow-config-dir /app/langflow-config-dir",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"COPY",props:{style:{color:"#FF7B72"}}},{content:" docker.env /app/.env",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Optional: Copy custom components to the container",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"COPY",props:{style:{color:"#FF7B72"}}},{content:" components /app/components",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Optional: Use custom dependencies",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"COPY",props:{style:{color:"#FF7B72"}}},{content:" pyproject.toml uv.lock /app/",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Set environment variables if not set in docker.env",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"ENV",props:{style:{color:"#FF7B72"}}},{content:" PYTHONPATH=/app",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"ENV",props:{style:{color:"#FF7B72"}}},{content:" LANGFLOW_LOAD_FLOWS_PATH=/app/flows",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"ENV",props:{style:{color:"#FF7B72"}}},{content:" LANGFLOW_CONFIG_DIR=/app/langflow-config-dir",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"ENV",props:{style:{color:"#FF7B72"}}},{content:" LANGFLOW_COMPONENTS_PATH=/app/components",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"ENV",props:{style:{color:"#FF7B72"}}},{content:" LANGFLOW_LOG_ENV=container",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Command to run the Langflow server on port 7860",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"EXPOSE",props:{style:{color:"#FF7B72"}}},{content:" 7860",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"CMD",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}},{content:'"langflow"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"run"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"--backend-only"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"--env-file"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}},{content:'"/app/.env"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}},{content:'"--host"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"0.0.0.0"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"--port"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"7860"',props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"dockerfile"},annotations:[]}]}),"\n",(0,s.jsxs)(o.p,{children:["The environment variables set directly in this Dockerfile specify resource paths for Langflow.\nIf these variables are also set in ",(0,s.jsx)(o.code,{children:"docker.env"}),", the values in ",(0,s.jsx)(o.code,{children:"docker.env"})," override the values set in the Dockerfile."]}),"\n",(0,s.jsxs)(o.p,{children:["In this example, ",(0,s.jsx)(o.code,{children:"ENV LANGFLOW_LOG_ENV=container"})," sets the logging behavior for serialized JSON to ",(0,s.jsx)(o.code,{children:"stdout"})," to track the application's behavior in a containerized environment. For more information, see ",(0,s.jsx)(o.a,{href:"/logging",children:"Logging"}),"."]}),"\n",(0,s.jsx)(o.h3,{id:"backend-only-mode",children:"Backend-only mode"}),"\n",(0,s.jsxs)(o.p,{children:["The ",(0,s.jsx)(o.code,{children:"--backend-only"})," flag in ",(0,s.jsx)(o.code,{children:"CMD"})," starts Langflow in backend-only mode, which provides programmatic access only.\nThis is recommended when running Langflow as a dependency of an application where you don't need access to the visual editor."]}),"\n",(0,s.jsxs)(o.p,{children:["If you want to serve the Langflow visual editor ",(0,s.jsx)(o.em,{children:"and"})," backend, then omit ",(0,s.jsx)(o.code,{children:"--backend-only"}),"."]}),"\n",(0,s.jsxs)(o.p,{children:["For more information, see ",(0,s.jsx)(o.a,{href:"/deployment-docker",children:"Deploy Langflow on Docker"}),"."]}),"\n",(0,s.jsx)(o.h2,{id:"test-your-langflow-docker-image",children:"Test your Langflow Docker image"}),"\n",(0,s.jsx)(o.p,{children:"Build and run your Langflow Docker image to test it."}),"\n",(0,s.jsxs)(o.p,{children:["This example runs the container locally.\nFor information about publishing your image on Docker Hub and running a Langflow container remotely, see ",(0,s.jsx)(o.a,{href:"#deploy-docker",children:"Deploy to Docker Hub and Kubernetes"}),"."]}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"Build the Docker image:"}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"docker ",props:{style:{color:"#FFA657"}}},{content:"build ",props:{style:{color:"#A5D6FF"}}},{content:"-t ",props:{style:{color:"#79C0FF"}}},{content:"langflow-pokedex:",props:{style:{color:"#A5D6FF"}}},{content:"1.2.0 ",props:{style:{color:"#79C0FF"}}},{content:".",props:{style:{color:"#A5D6FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"Run the Docker container to start your Langflow server:"}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"docker ",props:{style:{color:"#FFA657"}}},{content:"run ",props:{style:{color:"#A5D6FF"}}},{content:"-p ",props:{style:{color:"#79C0FF"}}},{content:"7860:",props:{style:{color:"#A5D6FF"}}},{content:"7860 ",props:{style:{color:"#79C0FF"}}},{content:"langflow-pokedex:",props:{style:{color:"#A5D6FF"}}},{content:"1.2.0",props:{style:{color:"#79C0FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"To confirm that the container is serving your flows as expected, use the Langflow API to run a flow:"}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Open one of the JSON files in your application's ",(0,s.jsx)(o.code,{children:"/flows"})," folder, and then find the flow's ",(0,s.jsx)(o.code,{children:"id"})," in the ",(0,s.jsx)(o.a,{href:"/concepts-flows-import#additional-metadata-and-project-information",children:"additional metadata and project information"}),"."]}),"\n",(0,s.jsxs)(o.p,{children:["There are many ",(0,s.jsx)(o.code,{children:"id"})," values; make sure you get the ID for the entire flow, not the ID for an individual component.\nIf your flow is complex, try searching for the flow's name, which is typically near the flow's ",(0,s.jsx)(o.code,{children:"id"}),"."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:'"name"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"Basic Prompting"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:'"description"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"Perform basic prompting with an OpenAI model."',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:'"id"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"e4167236-938f-4aca-845b-21de3f399858"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]}],lang:"json"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Send a POST request to the ",(0,s.jsx)(o.a,{href:"/api-flows-run#run-flow",children:(0,s.jsx)(o.code,{children:"/v1/run/$FLOW_ID"})})," endpoint using the flow ID from the previous step ."]}),"\n",(0,s.jsxs)(o.p,{children:["The following example runs a simple LLM chat flow that responds to a chat input string.\nIf necessary, modify the payload for your flow.\nFor example, if your flow doesn't have a ",(0,s.jsx)(o.strong,{children:"Chat Input"})," component, you must modify the payload to provide the expected input for your flow."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"curl ",props:{style:{color:"#FFA657"}}},{content:"--request ",props:{style:{color:"#79C0FF"}}},{content:"POST ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" --url ",props:{style:{color:"#79C0FF"}}},{content:"'http://localhost:7860/api/v1/run/e4167236-938f-4aca-845b-21de3f399858?stream=true' ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" --header ",props:{style:{color:"#79C0FF"}}},{content:"'Content-Type: application/json' ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" --data ",props:{style:{color:"#79C0FF"}}},{content:"'{",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "input_value": "Tell me about Charizard.",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "output_type": "chat",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "input_type": "chat",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "session_id": "charizard_test_request"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"}'",props:{style:{color:"#A5D6FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n",(0,s.jsxs)(n,{children:[(0,s.jsx)("summary",{children:"About this example"}),(0,s.jsxs)(o.p,{children:["This command runs the ",(0,s.jsx)(o.strong,{children:"Pok\xe9dex"})," template flow.\nIt provides chat input about a specific Pok\xe9mon, uses an optional custom ",(0,s.jsx)(o.code,{children:"session_id"}),", and enables response streaming with ",(0,s.jsx)(o.code,{children:"?stream=true"}),"."]}),(0,s.jsxs)(o.p,{children:["The default ",(0,s.jsx)(o.a,{href:"/session-id",children:"session ID"})," is the flow ID.\nCustom session IDs can help isolate unique conversation threads to keep the LLM's context clean, and they can help identify specific conversations in flow logs to make debugging easier."]}),(0,s.jsxs)(o.p,{children:["This command uses response streaming because the Pok\xe9dex flow can return a large amount of text.\nTo use batching, set ",(0,s.jsx)(o.code,{children:"?stream=false"}),"."]})]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"Verify that the request succeeds and the response is valid, depending on the specific flow you ran."}),"\n",(0,s.jsx)(o.p,{children:"This confirms that your Langflow Docker image is correctly configured and this flow is accessible through the Langflow API server that is hosted on the container.\nWhen you build and test your entire application stack, your front-end application can use Langflow API requests to trigger the flows served by your Langflow container in the same way you manually tested the flow in the previous step."}),"\n",(0,s.jsxs)(o.p,{children:["This example triggered a flow by sending chat input to the ",(0,s.jsx)(o.code,{children:"/v1/run/$FLOW_ID"})," endpoint.\nFor more examples of flow triggers, see ",(0,s.jsx)(o.a,{href:"/webhook",children:"Trigger flows with webhooks"})," and the tutorial to ",(0,s.jsx)(o.a,{href:"/chat-with-files",children:"Create a chatbot that can ingest files"}),"."]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(o.h2,{id:"deploy-docker",children:"Deploy to Docker Hub and Kubernetes"}),"\n",(0,s.jsx)(o.p,{children:"When you're ready to share your application with the world, you need to serve Langflow in a production environment.\nFor more information about deploying Langflow, see the following:"}),"\n",(0,s.jsxs)(o.ul,{children:["\n",(0,s.jsx)(o.li,{children:(0,s.jsx)(o.a,{href:"/deployment-overview",children:"Learn about Langflow deployments"})}),"\n",(0,s.jsx)(o.li,{children:(0,s.jsx)(o.a,{href:"/deployment-docker",children:"Deploy Langflow on Docker"})}),"\n",(0,s.jsx)(o.li,{children:(0,s.jsx)(o.a,{href:"/deployment-kubernetes-prod",children:"Deploy the Langflow production environment on Kubernetes"})}),"\n"]})]})}function y(e={}){const{wrapper:o}={...(0,r.R)(),...e.components};return o?(0,s.jsx)(o,{...e,children:(0,s.jsx)(g,{...e})}):g(e)}function m(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},63905:(e,o,n)=>{n.d(o,{Ay:()=>i,RM:()=>r});var t=n(74848),s=n(28453);const r=[];function l(e){const o={a:"a",admonition:"admonition",p:"p",...(0,s.R)(),...e.components};return(0,t.jsx)(o.admonition,{type:"tip",children:(0,t.jsxs)(o.p,{children:["Podman can be used instead of Docker for all commands shown here. For more information, see the ",(0,t.jsx)(o.a,{href:"https://podman.io/docs",children:"Podman documentation"}),"."]})})}function i(e={}){const{wrapper:o}={...(0,s.R)(),...e.components};return o?(0,t.jsx)(o,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}}}]); \ No newline at end of file diff --git a/assets/js/3bfbe7c9.9691b150.js b/assets/js/3bfbe7c9.9691b150.js deleted file mode 100644 index dab9784506..0000000000 --- a/assets/js/3bfbe7c9.9691b150.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(globalThis.webpackChunklangflow_docs=globalThis.webpackChunklangflow_docs||[]).push([[7720],{8787:(e,o,n)=>{n.r(o),n.d(o,{CH:()=>h,assets:()=>p,chCodeConfig:()=>f,contentTitle:()=>d,default:()=>y,frontMatter:()=>a,metadata:()=>t,toc:()=>u});const t=JSON.parse('{"id":"Deployment/develop-application","title":"Containerize a Langflow application","description":"Designing flows in the visual editor is only the first step in building an application that uses Langflow.","source":"@site/docs/Deployment/develop-application.mdx","sourceDirName":"Deployment","slug":"/develop-application","permalink":"/develop-application","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Containerize a Langflow application","slug":"/develop-application"},"sidebar":"docs","previous":{"title":"Deploy Langflow with Nginx and SSL","permalink":"/deployment-nginx-ssl"},"next":{"title":"Langflow Docker images","permalink":"/deployment-docker"}}');var s=n(74848),r=n(28453),l=n(24754),i=n(40619),c=n(63905);const a={title:"Containerize a Langflow application",slug:"/develop-application"},d=void 0,p={},h={annotations:l.hk,Code:l.Cy},f={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},u=[...c.RM,{value:"Directory structure",id:"directory-structure",level:2},{value:"Package management",id:"package-management",level:3},{value:"Environment variables",id:"docker-env",level:3},{value:"Secrets",id:"secrets",level:3},{value:"Storage",id:"storage",level:3},{value:"Flows",id:"flows",level:3},{value:"Components",id:"components",level:3},{value:"Langflow Dockerfile",id:"dockerfile",level:2},{value:"Backend-only mode",id:"backend-only-mode",level:3},{value:"Test your Langflow Docker image",id:"test-your-langflow-docker-image",level:2},{value:"Deploy to Docker Hub and Kubernetes",id:"deploy-docker",level:2}];function g(e){const o={a:"a",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components},{Details:n}=o;return h||m("CH",!1),h.Code||m("CH.Code",!0),n||m("Details",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:'[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; }'}}),"\n","\n",(0,s.jsx)(c.Ay,{}),"\n",(0,s.jsx)(o.p,{children:"Designing flows in the visual editor is only the first step in building an application that uses Langflow."}),"\n",(0,s.jsx)(o.p,{children:"Once you have a functional flow, you can use that flow in a larger application, such as a website or mobile app.\nBecause Langflow is both an IDE and a runtime, you can use Langflow to build and test your flows locally, and then package and serve your flows in a production environment."}),"\n",(0,s.jsx)(o.p,{children:"This guide introduces application development with Langflow from initial setup through packaging and deployment.\nThis documentation doesn't explain how to write a complete application; it only describes how to include Langflow in the context of a larger application."}),"\n",(0,s.jsx)(o.h2,{id:"directory-structure",children:"Directory structure"}),"\n",(0,s.jsx)(o.p,{children:"The following example describes the directory structure for a minimal Langflow application:"}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"LANGFLOW-APPLICATION/",props:{}}]},{tokens:[{content:"\u251c\u2500\u2500 docker.env",props:{}}]},{tokens:[{content:"\u251c\u2500\u2500 Dockerfile",props:{}}]},{tokens:[{content:"\u251c\u2500\u2500 flows/",props:{}}]},{tokens:[{content:"\u2502 \u251c\u2500\u2500 flow1.json",props:{}}]},{tokens:[{content:"\u2502 \u2514\u2500\u2500 flow2.json",props:{}}]},{tokens:[{content:"\u251c\u2500\u2500 langflow-config-dir/",props:{}}]},{tokens:[{content:"\u251c\u2500\u2500 README.md",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsx)(o.p,{children:"This directory contains the following:"}),"\n",(0,s.jsxs)(o.ul,{children:["\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.a,{href:"#docker-env",children:(0,s.jsx)(o.code,{children:"docker.env"})}),": This file is copied to the Docker image as a ",(0,s.jsx)(o.code,{children:".env"})," file in the container root."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.a,{href:"#dockerfile",children:(0,s.jsx)(o.code,{children:"Dockerfile"})}),": This file controls how your Langflow image is built."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.a,{href:"#flows",children:(0,s.jsx)(o.code,{children:"/flows"})}),": This folder holds the flows you want to host, which are the flows that your application uses."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"/langflow-config-dir"}),": This folder is referenced in the Dockerfile as the location for your Langflow deployment's configuration files, database, and logs."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"README.md"}),": This is a typical README file for your application's documentation."]}),"\n"]}),"\n",(0,s.jsxs)(o.p,{children:["This is a minimal example of a Langflow application directory.\nYour application might have additional files and folders, such as a ",(0,s.jsx)(o.code,{children:"/components"})," folder for custom components, or a ",(0,s.jsx)(o.code,{children:"pyproject.toml"})," file for additional dependencies."]}),"\n",(0,s.jsx)(o.h3,{id:"package-management",children:"Package management"}),"\n",(0,s.jsxs)(o.p,{children:["The base Langflow Docker image includes the Langflow core dependencies because it uses ",(0,s.jsx)(o.code,{children:"langflowai/langflow:latest"})," as the parent image."]}),"\n",(0,s.jsxs)(o.p,{children:["If your application requires additional dependencies, create a ",(0,s.jsx)(o.a,{href:"https://packaging.python.org/en/latest/guides/writing-pyproject-toml",children:(0,s.jsx)(o.code,{children:"pyproject.toml"})})," file for the additional dependencies.\nFor more information, see ",(0,s.jsx)(o.a,{href:"/install-custom-dependencies",children:"Install custom dependencies"}),"."]}),"\n",(0,s.jsxs)(o.p,{children:["To deploy an application with additional dependencies to Docker, you must copy the ",(0,s.jsx)(o.code,{children:"pyproject.toml"})," and ",(0,s.jsx)(o.code,{children:"uv.lock"})," files to the Docker image.\nTo do this, add the following to your Langflow application's Dockerfile:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"COPY pyproject.toml uv.lock /app/",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsx)(o.h3,{id:"docker-env",children:"Environment variables"}),"\n",(0,s.jsxs)(o.p,{children:["The ",(0,s.jsx)(o.code,{children:"docker.env"})," file is a ",(0,s.jsx)(o.code,{children:".env"})," file loaded into your Docker image.\nIt contains ",(0,s.jsx)(o.a,{href:"/environment-variables",children:"Langflow environment variables"})," that are used in flows or control Langflow's behavior, such as authentication, database storage, API keys, and server configurations.\nFor example:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"LANGFLOW_AUTO_LOGIN=True",props:{}}]},{tokens:[{content:"LANGFLOW_SAVE_DB_IN_CONFIG_DIR=True",props:{}}]},{tokens:[{content:"LANGFLOW_BASE_URL=http://0.0.0.0:7860",props:{}}]},{tokens:[{content:"OPENAI_API_KEY=sk-...",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsxs)(o.p,{children:["You can set environment variables in the Dockerfile as well.\nHowever, if you set an environment variable in both ",(0,s.jsx)(o.code,{children:"docker.env"})," and the Dockerfile, Langflow uses the value set in ",(0,s.jsx)(o.code,{children:"docker.env"}),"."]}),"\n",(0,s.jsxs)(o.p,{children:["Langflow can also ",(0,s.jsx)(o.a,{href:"/configuration-global-variables#add-custom-global-variables-from-the-environment",children:"create global variables from your environment variables"}),", or ",(0,s.jsx)(o.a,{href:"/configuration-global-variables#use-environment-variables-for-missing-global-variables",children:"use environment variables as a backup for missing global variables"}),"."]}),"\n",(0,s.jsx)(o.h3,{id:"secrets",children:"Secrets"}),"\n",(0,s.jsx)(o.p,{children:"For simplicity, the examples in the Langflow documentation might use direct references to API keys and other sensitive values.\nIn your own applications, you should always follow industry best practices for managing secrets, such as using environment variables or secret management tools."}),"\n",(0,s.jsxs)(o.p,{children:["For information about generating authentication keys and managing secrets in Langflow, see ",(0,s.jsx)(o.a,{href:"/api-keys-and-authentication",children:"API keys and authentication"}),"."]}),"\n",(0,s.jsx)(o.h3,{id:"storage",children:"Storage"}),"\n",(0,s.jsxs)(o.p,{children:["By default, Langflow uses an ",(0,s.jsx)(o.a,{href:"https://www.sqlite.org/",children:"SQLite"})," database for storage.\nIf you prefer to use PostgreSQL, see ",(0,s.jsx)(o.a,{href:"/configuration-custom-database",children:"Configure an external PostgreSQL database"}),"."]}),"\n",(0,s.jsxs)(o.p,{children:["For more information about storage, including cache and memory, see ",(0,s.jsx)(o.a,{href:"/memory",children:"Memory management options"}),"."]}),"\n",(0,s.jsx)(o.h3,{id:"flows",children:"Flows"}),"\n",(0,s.jsx)(o.p,{children:"Your local Langflow instance might have many flows for different applications.\nWhen you package Langflow as a dependency of an application, you only want to include the flows your application uses."}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:[(0,s.jsx)(o.a,{href:"/concepts-flows-import",children:"Export flows"})," that are relevant to your application."]}),"\n",(0,s.jsxs)(o.p,{children:["If you have chained flows (flows that trigger other flows), make sure you export ",(0,s.jsx)(o.em,{children:"all"})," necessary flows."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Add the exported Langflow JSON files to the ",(0,s.jsx)(o.code,{children:"/flows"})," folder in your application directory."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(o.h3,{id:"components",children:"Components"}),"\n",(0,s.jsxs)(o.p,{children:["The ",(0,s.jsx)(i.A,{name:"Component","aria-hidden":"true"})," ",(0,s.jsx)(o.strong,{children:"Core components"})," and ",(0,s.jsx)(i.A,{name:"Blocks","aria-hidden":"true"})," [",(0,s.jsx)(o.strong,{children:"Bundles"}),"] that you see in the Langflow visual editor are automatically included in the base Langflow Docker image."]}),"\n",(0,s.jsxs)(o.p,{children:["If you have any ",(0,s.jsx)(o.a,{href:"/components-custom-components",children:"custom components"})," that you created for your application, you must include these components in your application directory:"]}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["Create a ",(0,s.jsx)(o.code,{children:"/components"})," folder in your application directory."]}),"\n",(0,s.jsxs)(o.li,{children:["Add your custom component files to the ",(0,s.jsx)(o.code,{children:"/components"})," folder."]}),"\n",(0,s.jsxs)(o.li,{children:["Specify the path to ",(0,s.jsx)(o.code,{children:"/components"})," in your ",(0,s.jsx)(o.code,{children:"docker.env"}),"."]}),"\n"]}),"\n",(0,s.jsx)(o.h2,{id:"dockerfile",children:"Langflow Dockerfile"}),"\n",(0,s.jsx)(o.p,{children:"The Dockerfile determines how your Langflow image is built, including the dependencies, flows, components, and configuration files."}),"\n",(0,s.jsx)(o.p,{children:"At minimum, you need to specify the base Langflow image, create the necessary folders in the container, copy folders and files to the container, and provide a startup command."}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"# Use the latest version of the base Langflow image",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"FROM",props:{style:{color:"#FF7B72"}}},{content:" langflowai/langflow:latest",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Create folders and set the working directory in the container",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"RUN",props:{style:{color:"#FF7B72"}}},{content:" mkdir /app/flows",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"RUN",props:{style:{color:"#FF7B72"}}},{content:" mkdir /app/langflow-config-dir",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"WORKDIR",props:{style:{color:"#FF7B72"}}},{content:" /app",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Copy flows, langflow-config-dir, and docker.env to the container",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"COPY",props:{style:{color:"#FF7B72"}}},{content:" flows /app/flows",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"COPY",props:{style:{color:"#FF7B72"}}},{content:" langflow-config-dir /app/langflow-config-dir",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"COPY",props:{style:{color:"#FF7B72"}}},{content:" docker.env /app/.env",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Optional: Copy custom components to the container",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"COPY",props:{style:{color:"#FF7B72"}}},{content:" components /app/components",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Optional: Use custom dependencies",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"COPY",props:{style:{color:"#FF7B72"}}},{content:" pyproject.toml uv.lock /app/",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Set environment variables if not set in docker.env",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"ENV",props:{style:{color:"#FF7B72"}}},{content:" PYTHONPATH=/app",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"ENV",props:{style:{color:"#FF7B72"}}},{content:" LANGFLOW_LOAD_FLOWS_PATH=/app/flows",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"ENV",props:{style:{color:"#FF7B72"}}},{content:" LANGFLOW_CONFIG_DIR=/app/langflow-config-dir",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"ENV",props:{style:{color:"#FF7B72"}}},{content:" LANGFLOW_COMPONENTS_PATH=/app/components",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"ENV",props:{style:{color:"#FF7B72"}}},{content:" LANGFLOW_LOG_ENV=container",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Command to run the Langflow server on port 7860",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"EXPOSE",props:{style:{color:"#FF7B72"}}},{content:" 7860",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"CMD",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}},{content:'"langflow"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"run"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"--backend-only"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"--env-file"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}},{content:'"/app/.env"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}},{content:'"--host"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"0.0.0.0"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"--port"',props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:'"7860"',props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]}],lang:"dockerfile"},annotations:[]}]}),"\n",(0,s.jsxs)(o.p,{children:["The environment variables set directly in this Dockerfile specify resource paths for Langflow.\nIf these variables are also set in ",(0,s.jsx)(o.code,{children:"docker.env"}),", the values in ",(0,s.jsx)(o.code,{children:"docker.env"})," override the values set in the Dockerfile."]}),"\n",(0,s.jsxs)(o.p,{children:["In this example, ",(0,s.jsx)(o.code,{children:"ENV LANGFLOW_LOG_ENV=container"})," sets the logging behavior for serialized JSON to ",(0,s.jsx)(o.code,{children:"stdout"})," to track the application's behavior in a containerized environment. For more information, see ",(0,s.jsx)(o.a,{href:"/logging",children:"Logging"}),"."]}),"\n",(0,s.jsx)(o.h3,{id:"backend-only-mode",children:"Backend-only mode"}),"\n",(0,s.jsxs)(o.p,{children:["The ",(0,s.jsx)(o.code,{children:"--backend-only"})," flag in ",(0,s.jsx)(o.code,{children:"CMD"})," starts Langflow in backend-only mode, which provides programmatic access only.\nThis is recommended when running Langflow as a dependency of an application where you don't need access to the visual editor."]}),"\n",(0,s.jsxs)(o.p,{children:["If you want to serve the Langflow visual editor ",(0,s.jsx)(o.em,{children:"and"})," backend, then omit ",(0,s.jsx)(o.code,{children:"--backend-only"}),"."]}),"\n",(0,s.jsxs)(o.p,{children:["For more information, see ",(0,s.jsx)(o.a,{href:"/deployment-docker",children:"Deploy Langflow on Docker"}),"."]}),"\n",(0,s.jsx)(o.h2,{id:"test-your-langflow-docker-image",children:"Test your Langflow Docker image"}),"\n",(0,s.jsx)(o.p,{children:"Build and run your Langflow Docker image to test it."}),"\n",(0,s.jsxs)(o.p,{children:["This example runs the container locally.\nFor information about publishing your image on Docker Hub and running a Langflow container remotely, see ",(0,s.jsx)(o.a,{href:"#deploy-docker",children:"Deploy to Docker Hub and Kubernetes"}),"."]}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"Build the Docker image:"}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"docker ",props:{style:{color:"#FFA657"}}},{content:"build ",props:{style:{color:"#A5D6FF"}}},{content:"-t ",props:{style:{color:"#79C0FF"}}},{content:"langflow-pokedex:",props:{style:{color:"#A5D6FF"}}},{content:"1.2.0 ",props:{style:{color:"#79C0FF"}}},{content:".",props:{style:{color:"#A5D6FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"Run the Docker container to start your Langflow server:"}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"docker ",props:{style:{color:"#FFA657"}}},{content:"run ",props:{style:{color:"#A5D6FF"}}},{content:"-p ",props:{style:{color:"#79C0FF"}}},{content:"7860:",props:{style:{color:"#A5D6FF"}}},{content:"7860 ",props:{style:{color:"#79C0FF"}}},{content:"langflow-pokedex:",props:{style:{color:"#A5D6FF"}}},{content:"1.2.0",props:{style:{color:"#79C0FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"To confirm that the container is serving your flows as expected, use the Langflow API to run a flow:"}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Open one of the JSON files in your application's ",(0,s.jsx)(o.code,{children:"/flows"})," folder, and then find the flow's ",(0,s.jsx)(o.code,{children:"id"})," in the ",(0,s.jsx)(o.a,{href:"/concepts-flows-import#additional-metadata-and-project-information",children:"additional metadata and project information"}),"."]}),"\n",(0,s.jsxs)(o.p,{children:["There are many ",(0,s.jsx)(o.code,{children:"id"})," values; make sure you get the ID for the entire flow, not the ID for an individual component.\nIf your flow is complex, try searching for the flow's name, which is typically near the flow's ",(0,s.jsx)(o.code,{children:"id"}),"."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:'"name"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"Basic Prompting"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:'"description"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"Perform basic prompting with an OpenAI model."',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:'"id"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"e4167236-938f-4aca-845b-21de3f399858"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]}],lang:"json"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Send a POST request to the ",(0,s.jsx)(o.a,{href:"/api-flows-run#run-flow",children:(0,s.jsx)(o.code,{children:"/v1/run/$FLOW_ID"})})," endpoint using the flow ID from the previous step ."]}),"\n",(0,s.jsxs)(o.p,{children:["The following example runs a simple LLM chat flow that responds to a chat input string.\nIf necessary, modify the payload for your flow.\nFor example, if your flow doesn't have a ",(0,s.jsx)(o.strong,{children:"Chat Input"})," component, you must modify the payload to provide the expected input for your flow."]}),"\n",(0,s.jsx)(h.Code,{codeConfig:f,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"curl ",props:{style:{color:"#FFA657"}}},{content:"--request ",props:{style:{color:"#79C0FF"}}},{content:"POST ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" --url ",props:{style:{color:"#79C0FF"}}},{content:"'http://localhost:7860/api/v1/run/e4167236-938f-4aca-845b-21de3f399858?stream=true' ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" --header ",props:{style:{color:"#79C0FF"}}},{content:"'Content-Type: application/json' ",props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:" --data ",props:{style:{color:"#79C0FF"}}},{content:"'{",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "input_value": "Tell me about Charizard.",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "output_type": "chat",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "input_type": "chat",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "session_id": "charizard_test_request"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"}'",props:{style:{color:"#A5D6FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n",(0,s.jsxs)(n,{children:[(0,s.jsx)("summary",{children:"About this example"}),(0,s.jsxs)(o.p,{children:["This command runs the ",(0,s.jsx)(o.strong,{children:"Pok\xe9dex"})," template flow.\nIt provides chat input about a specific Pok\xe9mon, uses an optional custom ",(0,s.jsx)(o.code,{children:"session_id"}),", and enables response streaming with ",(0,s.jsx)(o.code,{children:"?stream=true"}),"."]}),(0,s.jsxs)(o.p,{children:["The default ",(0,s.jsx)(o.a,{href:"/session-id",children:"session ID"})," is the flow ID.\nCustom session IDs can help isolate unique conversation threads to keep the LLM's context clean, and they can help identify specific conversations in flow logs to make debugging easier."]}),(0,s.jsxs)(o.p,{children:["This command uses response streaming because the Pok\xe9dex flow can return a large amount of text.\nTo use batching, set ",(0,s.jsx)(o.code,{children:"?stream=false"}),"."]})]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"Verify that the request succeeds and the response is valid, depending on the specific flow you ran."}),"\n",(0,s.jsx)(o.p,{children:"This confirms that your Langflow Docker image is correctly configured and this flow is accessible through the Langflow API server that is hosted on the container.\nWhen you build and test your entire application stack, your front-end application can use Langflow API requests to trigger the flows served by your Langflow container in the same way you manually tested the flow in the previous step."}),"\n",(0,s.jsxs)(o.p,{children:["This example triggered a flow by sending chat input to the ",(0,s.jsx)(o.code,{children:"/v1/run/$FLOW_ID"})," endpoint.\nFor more examples of flow triggers, see ",(0,s.jsx)(o.a,{href:"/webhook",children:"Trigger flows with webhooks"})," and the tutorial to ",(0,s.jsx)(o.a,{href:"/chat-with-files",children:"Create a chatbot that can ingest files"}),"."]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(o.h2,{id:"deploy-docker",children:"Deploy to Docker Hub and Kubernetes"}),"\n",(0,s.jsx)(o.p,{children:"When you're ready to share your application with the world, you need to serve Langflow in a production environment.\nFor more information about deploying Langflow, see the following:"}),"\n",(0,s.jsxs)(o.ul,{children:["\n",(0,s.jsx)(o.li,{children:(0,s.jsx)(o.a,{href:"/deployment-overview",children:"Learn about Langflow deployments"})}),"\n",(0,s.jsx)(o.li,{children:(0,s.jsx)(o.a,{href:"/deployment-docker",children:"Deploy Langflow on Docker"})}),"\n",(0,s.jsx)(o.li,{children:(0,s.jsx)(o.a,{href:"/deployment-kubernetes-prod",children:"Deploy the Langflow production environment on Kubernetes"})}),"\n"]})]})}function y(e={}){const{wrapper:o}={...(0,r.R)(),...e.components};return o?(0,s.jsx)(o,{...e,children:(0,s.jsx)(g,{...e})}):g(e)}function m(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},63905:(e,o,n)=>{n.d(o,{Ay:()=>i,RM:()=>r});var t=n(74848),s=n(28453);const r=[];function l(e){const o={a:"a",admonition:"admonition",p:"p",...(0,s.R)(),...e.components};return(0,t.jsx)(o.admonition,{type:"tip",children:(0,t.jsxs)(o.p,{children:["Podman can be used instead of Docker for all commands shown here. For more information, see the ",(0,t.jsx)(o.a,{href:"https://podman.io/docs",children:"Podman documentation"}),"."]})})}function i(e={}){const{wrapper:o}={...(0,s.R)(),...e.components};return o?(0,t.jsx)(o,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.d00c9a2d.js b/assets/js/runtime~main.68d9e333.js similarity index 98% rename from assets/js/runtime~main.d00c9a2d.js rename to assets/js/runtime~main.68d9e333.js index 2af016ab87..787b317eab 100644 --- a/assets/js/runtime~main.d00c9a2d.js +++ b/assets/js/runtime~main.68d9e333.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,d,f,b,c={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var d=t[e]={id:e,loaded:!1,exports:{}};return c[e].call(d.exports,d,d.exports,r),d.loaded=!0,d.exports}r.m=c,r.c=t,e=[],r.O=(a,d,f,b)=>{if(!d){var c=1/0;for(i=0;i=b)&&Object.keys(r.O).every(e=>r.O[e](d[o]))?d.splice(o--,1):(t=!1,b0&&e[i-1][2]>b;i--)e[i]=e[i-1];e[i]=[d,f,b]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},d=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var b=Object.create(null);r.r(b);var c={};a=a||[null,d({}),d([]),d(d)];for(var t=2&f&&e;"object"==typeof t&&!~a.indexOf(t);t=d(t))Object.getOwnPropertyNames(t).forEach(a=>c[a]=()=>e[a]);return c.default=()=>e,r.d(b,c),b},r.d=(e,a)=>{for(var d in a)r.o(a,d)&&!r.o(e,d)&&Object.defineProperty(e,d,{enumerable:!0,get:a[d]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((a,d)=>(r.f[d](e,a),a),[])),r.u=e=>"assets/js/"+({15:"d803fa53",30:"db8c087e",38:"a99a45c9",44:"e3f369d5",78:"b768a3a5",93:"a3702f61",126:"ae70dfbf",129:"dfa3dc90",253:"bb45d4f9",351:"b9acb8d9",375:"3d81f1cf",446:"a4232cf8",534:"76e36fb0",596:"c2e0ed62",598:"db4f3bbd",600:"ee87c775",681:"ffa0f8b1",750:"33b5ee95",879:"8bee5443",883:"1dfb8d43",889:"08b309e9",956:"03735ec1",957:"c141421f",1006:"47e58a89",1151:"890279ba",1162:"f7e6b9d6",1193:"444a6da6",1303:"41d45d82",1308:"ec030ab7",1345:"fe6d5b4f",1408:"2fc7e024",1446:"c78349fc",1490:"0f761898",1567:"22dd74f7",1703:"ff8bad6c",1861:"8ad67c3b",1876:"5c3b537a",1895:"d375ca1d",1966:"b1582da4",2076:"common",2102:"755d162a",2116:"0f1bef30",2138:"1a4e3797",2272:"ca5faf5d",2278:"c4280da9",2348:"f2da9399",2360:"017d425f",2394:"c2ea283c",2423:"19bcb67f",2457:"46abd5bb",2460:"954b19af",2469:"cd086441",2472:"62f97fbe",2475:"1ab69cbd",2565:"622fd833",2651:"8cd0650d",2741:"43ad9ba4",2752:"e14655eb",2888:"32270e71",2909:"144a43f5",2969:"f0ad3fbb",2990:"1d50b418",3035:"87b7bbd6",3038:"6df123cd",3140:"1a29c454",3147:"c83c70df",3164:"67f2dc6c",3240:"b079b393",3247:"f0b67137",3263:"730da84e",3284:"6398c398",3345:"040305fb",3353:"2b4d41d7",3361:"8f633f11",3368:"efa0f9ee",3387:"3d67876e",3468:"c76bd485",3500:"c3c63498",3536:"2eb731bc",3683:"5a0b74d9",4036:"fbcfc90d",4085:"cb17b4e0",4090:"a8ca941b",4173:"d51059db",4263:"9a5e6f6b",4314:"f6a246db",4341:"e1a0f423",4356:"7b864b08",4384:"622bdc6f",4474:"3db73d6f",4573:"baacc2a1",4612:"6a9eca1a",4614:"e55b8e98",4644:"d3e886ab",4876:"44691977",4907:"86116998",4919:"ce43de4b",4995:"62266e9d",5048:"3c440e04",5110:"e9fe1d10",5144:"944c5f91",5200:"ff7f32ba",5217:"fb0a7a3f",5270:"99931d31",5333:"70909872",5343:"1b10d5ba",5397:"eba86ea4",5412:"a6d50436",5660:"1b208f60",5663:"b1379b2b",5739:"69079906",5742:"aba21aa0",5757:"ad42ff54",5838:"bbb8ec1d",5903:"69d616f2",5985:"e3536031",6108:"2fed9fb3",6224:"ef9aa223",6256:"6888b60e",6289:"45e5859c",6311:"cce672fb",6329:"a7b545c5",6459:"290c78e6",6513:"f13693f0",6538:"719cba95",6559:"7431813e",6601:"81bb6a5c",6801:"acefda8b",6839:"80866714",6999:"d5ec984b",7098:"a7bd4aaa",7118:"7996108c",7243:"5d9d4350",7356:"2ea623f2",7484:"ad01e028",7498:"e4400415",7502:"1a547ad8",7512:"4c09a7b3",7567:"4545d55b",7586:"17856424",7705:"2b91b6ca",7720:"3bfbe7c9",7807:"1a8a0a64",7824:"2b56b65e",7829:"7c27dc91",7859:"593d9d00",7902:"619c7267",7964:"ff35961a",7968:"9b0af131",8090:"6e85978c",8240:"0102a83b",8267:"02f8077b",8268:"a4b6c971",8269:"c7f91cbe",8294:"f2bedfce",8336:"e7fd9095",8392:"20177945",8401:"17896441",8508:"10dd1586",8571:"da1ad91e",8593:"56350599",8607:"681e5335",8611:"0c23d011",8625:"3a9e0e6c",8649:"7de42fc9",8702:"42962acd",8750:"8a484c94",8765:"1a2eaade",8822:"555ae514",8862:"e87b52ac",8963:"56c23a02",8990:"5f1a63c6",9033:"9f55b2fc",9048:"a94703ab",9213:"62d1268c",9227:"7e40e6b3",9264:"c7f32161",9315:"16faf8bf",9331:"ffcd190c",9363:"f3312674",9459:"97254d1d",9482:"a9c1003f",9522:"85dc2a2b",9610:"453ae64a",9640:"3b25a2ae",9647:"5e95c892",9674:"feac1fba",9712:"d8c8efb9",9758:"439d880a",9763:"aece522a",9781:"b796be74",9897:"f0eeb72e",9976:"230d5fdc",9986:"d1f3cfe5"}[e]||e)+"."+{15:"d4103b44",30:"5e412f6d",38:"5c74e1d6",44:"6310a01a",78:"670c02e8",93:"622a1f88",126:"d3c21ad3",129:"a3d7c438",253:"35cb6896",351:"2a1a8be1",375:"44466a25",416:"bba44855",446:"720c59c5",534:"f4a56aad",596:"471fd207",598:"5b1053df",600:"bc28b1d0",681:"26c49a71",750:"4068db8f",879:"655e0843",883:"d44a18cb",889:"df4f3b30",956:"9d5f0507",957:"9350e3d5",1006:"61347995",1151:"4db235b1",1162:"12f31dbe",1193:"d08634fc",1303:"cb77a67a",1308:"19ab43fe",1345:"dd2b7bcf",1408:"5cdd44e5",1446:"bc1d8376",1490:"e5aee754",1567:"aa1955a9",1703:"bb99be98",1861:"f210ffea",1876:"198d048f",1895:"47c5ca9a",1966:"26cfa313",2076:"a147e1aa",2102:"e04c4c2c",2116:"66ba19b7",2138:"b9e35d57",2237:"6bbae924",2272:"0cf63219",2278:"4b2cb97f",2348:"4cb98c8a",2360:"5e727bab",2394:"2541a8c1",2423:"9a704566",2457:"a5d2327d",2460:"b5427fc6",2469:"c18f6bcb",2472:"9b44eed4",2475:"95e18472",2565:"26731c74",2651:"92578320",2693:"380feae7",2741:"1c73b360",2752:"05601a76",2888:"603c895a",2909:"66db384e",2969:"51e6616d",2990:"244599e4",3035:"930378b5",3038:"746b5104",3140:"80d4a164",3147:"b2a4407c",3164:"afb9b764",3240:"759d13b9",3247:"d5683b4f",3263:"da23b2bf",3284:"46083cba",3345:"cd817a66",3353:"f158ad34",3361:"e6042c27",3368:"8c3ea529",3387:"1e3dfa97",3468:"3ae40933",3500:"9efdd30b",3536:"36c717d9",3683:"b0f81b78",4036:"3ba6e711",4085:"e845c52f",4090:"dfdad261",4115:"d645fc23",4173:"bacef605",4263:"bd0de960",4314:"2202791a",4341:"44bf2a73",4356:"450422c1",4384:"1ef5e03e",4474:"2967ccdf",4573:"04372438",4612:"20606c9d",4614:"b129eb58",4644:"a86e3992",4754:"78f469df",4876:"78d44a41",4907:"5ddf17c6",4919:"7a5f58d3",4995:"ece12ff2",5048:"b43aa9f1",5110:"1cd06410",5144:"d825c9b4",5200:"5de1608d",5217:"f332d0d1",5270:"3123c8e7",5333:"40e07bb0",5343:"5fd32b67",5397:"ba97f892",5412:"c8c48fd3",5660:"57b46a92",5663:"8088b191",5739:"2a563c92",5742:"8cdbe811",5757:"9de749fd",5838:"83e91f02",5903:"821f3999",5985:"aafe6790",6108:"365e2569",6224:"fba9a342",6256:"d9ae4c13",6289:"f6e7c945",6311:"af719805",6329:"40158bd3",6459:"2463c0f5",6513:"13baf1e4",6538:"d571e06d",6559:"c4af7bf3",6601:"66f73f50",6801:"6897bd64",6839:"207cc86d",6999:"64627d58",7098:"e566890f",7118:"13f2c6a7",7243:"930b5bd6",7356:"0b394330",7484:"002bb639",7498:"97257edb",7502:"f4acd00b",7512:"27e1103c",7567:"0a1c17c1",7586:"05bd2bee",7705:"1dc17cbb",7720:"9691b150",7807:"9ed7d10f",7824:"48ec5133",7829:"bbdb61d4",7859:"acd80658",7902:"b2c19227",7964:"7ef150a6",7968:"8658e795",8090:"af4cfb50",8240:"d4f52412",8267:"dbfe5354",8268:"7ed10065",8269:"2921c476",8294:"e344768e",8336:"0e5f0157",8392:"0768ab3a",8401:"9b189e06",8508:"d977358d",8571:"c0329697",8593:"42a61cdd",8607:"b96fee6d",8611:"870b467b",8625:"8df7c8bf",8649:"540f0784",8702:"c8d4fac3",8750:"56e811df",8765:"e2c3e49a",8822:"77921987",8862:"2272a76a",8913:"fd271a57",8963:"fca39a90",8990:"1753fc06",9033:"e3a15f6c",9048:"fbe061ed",9213:"7074cfcc",9227:"b79ed718",9264:"a73bd813",9315:"c9a9899a",9331:"fb999fe4",9363:"66313398",9459:"bcd99a3a",9482:"32df5989",9522:"cc51d0fb",9610:"f3b4d314",9640:"8da65214",9647:"a3e58221",9674:"dec60a8d",9712:"f5eaa1ca",9758:"bf4164d1",9763:"05004e42",9781:"fb5ede14",9897:"8be94bd0",9976:"68f5d90c",9986:"87289072"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),f={},b="langflow-docs:",r.l=(e,a,d,c)=>{if(f[e])f[e].push(a);else{var t,o;if(void 0!==d)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var b=f[e];if(delete f[e],t.parentNode&&t.parentNode.removeChild(t),b&&b.forEach(e=>e(d)),a)return a(d)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=u.bind(null,t.onerror),t.onload=u.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),r.p="/",r.gca=function(e){return e={17856424:"7586",17896441:"8401",20177945:"8392",44691977:"4876",56350599:"8593",69079906:"5739",70909872:"5333",80866714:"6839",86116998:"4907",d803fa53:"15",db8c087e:"30",a99a45c9:"38",e3f369d5:"44",b768a3a5:"78",a3702f61:"93",ae70dfbf:"126",dfa3dc90:"129",bb45d4f9:"253",b9acb8d9:"351","3d81f1cf":"375",a4232cf8:"446","76e36fb0":"534",c2e0ed62:"596",db4f3bbd:"598",ee87c775:"600",ffa0f8b1:"681","33b5ee95":"750","8bee5443":"879","1dfb8d43":"883","08b309e9":"889","03735ec1":"956",c141421f:"957","47e58a89":"1006","890279ba":"1151",f7e6b9d6:"1162","444a6da6":"1193","41d45d82":"1303",ec030ab7:"1308",fe6d5b4f:"1345","2fc7e024":"1408",c78349fc:"1446","0f761898":"1490","22dd74f7":"1567",ff8bad6c:"1703","8ad67c3b":"1861","5c3b537a":"1876",d375ca1d:"1895",b1582da4:"1966",common:"2076","755d162a":"2102","0f1bef30":"2116","1a4e3797":"2138",ca5faf5d:"2272",c4280da9:"2278",f2da9399:"2348","017d425f":"2360",c2ea283c:"2394","19bcb67f":"2423","46abd5bb":"2457","954b19af":"2460",cd086441:"2469","62f97fbe":"2472","1ab69cbd":"2475","622fd833":"2565","8cd0650d":"2651","43ad9ba4":"2741",e14655eb:"2752","32270e71":"2888","144a43f5":"2909",f0ad3fbb:"2969","1d50b418":"2990","87b7bbd6":"3035","6df123cd":"3038","1a29c454":"3140",c83c70df:"3147","67f2dc6c":"3164",b079b393:"3240",f0b67137:"3247","730da84e":"3263","6398c398":"3284","040305fb":"3345","2b4d41d7":"3353","8f633f11":"3361",efa0f9ee:"3368","3d67876e":"3387",c76bd485:"3468",c3c63498:"3500","2eb731bc":"3536","5a0b74d9":"3683",fbcfc90d:"4036",cb17b4e0:"4085",a8ca941b:"4090",d51059db:"4173","9a5e6f6b":"4263",f6a246db:"4314",e1a0f423:"4341","7b864b08":"4356","622bdc6f":"4384","3db73d6f":"4474",baacc2a1:"4573","6a9eca1a":"4612",e55b8e98:"4614",d3e886ab:"4644",ce43de4b:"4919","62266e9d":"4995","3c440e04":"5048",e9fe1d10:"5110","944c5f91":"5144",ff7f32ba:"5200",fb0a7a3f:"5217","99931d31":"5270","1b10d5ba":"5343",eba86ea4:"5397",a6d50436:"5412","1b208f60":"5660",b1379b2b:"5663",aba21aa0:"5742",ad42ff54:"5757",bbb8ec1d:"5838","69d616f2":"5903",e3536031:"5985","2fed9fb3":"6108",ef9aa223:"6224","6888b60e":"6256","45e5859c":"6289",cce672fb:"6311",a7b545c5:"6329","290c78e6":"6459",f13693f0:"6513","719cba95":"6538","7431813e":"6559","81bb6a5c":"6601",acefda8b:"6801",d5ec984b:"6999",a7bd4aaa:"7098","7996108c":"7118","5d9d4350":"7243","2ea623f2":"7356",ad01e028:"7484",e4400415:"7498","1a547ad8":"7502","4c09a7b3":"7512","4545d55b":"7567","2b91b6ca":"7705","3bfbe7c9":"7720","1a8a0a64":"7807","2b56b65e":"7824","7c27dc91":"7829","593d9d00":"7859","619c7267":"7902",ff35961a:"7964","9b0af131":"7968","6e85978c":"8090","0102a83b":"8240","02f8077b":"8267",a4b6c971:"8268",c7f91cbe:"8269",f2bedfce:"8294",e7fd9095:"8336","10dd1586":"8508",da1ad91e:"8571","681e5335":"8607","0c23d011":"8611","3a9e0e6c":"8625","7de42fc9":"8649","42962acd":"8702","8a484c94":"8750","1a2eaade":"8765","555ae514":"8822",e87b52ac:"8862","56c23a02":"8963","5f1a63c6":"8990","9f55b2fc":"9033",a94703ab:"9048","62d1268c":"9213","7e40e6b3":"9227",c7f32161:"9264","16faf8bf":"9315",ffcd190c:"9331",f3312674:"9363","97254d1d":"9459",a9c1003f:"9482","85dc2a2b":"9522","453ae64a":"9610","3b25a2ae":"9640","5e95c892":"9647",feac1fba:"9674",d8c8efb9:"9712","439d880a":"9758",aece522a:"9763",b796be74:"9781",f0eeb72e:"9897","230d5fdc":"9976",d1f3cfe5:"9986"}[e]||e,r.p+r.u(e)},(()=>{var e={5354:0,1869:0};r.f.j=(a,d)=>{var f=r.o(e,a)?e[a]:void 0;if(0!==f)if(f)d.push(f[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var b=new Promise((d,b)=>f=e[a]=[d,b]);d.push(f[2]=b);var c=r.p+r.u(a),t=new Error;r.l(c,d=>{if(r.o(e,a)&&(0!==(f=e[a])&&(e[a]=void 0),f)){var b=d&&("load"===d.type?"missing":d.type),c=d&&d.target&&d.target.src;t.message="Loading chunk "+a+" failed.\n("+b+": "+c+")",t.name="ChunkLoadError",t.type=b,t.request=c,f[1](t)}},"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,d)=>{var f,b,[c,t,o]=d,n=0;if(c.some(a=>0!==e[a])){for(f in t)r.o(t,f)&&(r.m[f]=t[f]);if(o)var i=o(r)}for(a&&a(d);n{"use strict";var e,a,d,f,b,c={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var d=t[e]={id:e,loaded:!1,exports:{}};return c[e].call(d.exports,d,d.exports,r),d.loaded=!0,d.exports}r.m=c,r.c=t,e=[],r.O=(a,d,f,b)=>{if(!d){var c=1/0;for(i=0;i=b)&&Object.keys(r.O).every(e=>r.O[e](d[o]))?d.splice(o--,1):(t=!1,b0&&e[i-1][2]>b;i--)e[i]=e[i-1];e[i]=[d,f,b]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},d=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var b=Object.create(null);r.r(b);var c={};a=a||[null,d({}),d([]),d(d)];for(var t=2&f&&e;"object"==typeof t&&!~a.indexOf(t);t=d(t))Object.getOwnPropertyNames(t).forEach(a=>c[a]=()=>e[a]);return c.default=()=>e,r.d(b,c),b},r.d=(e,a)=>{for(var d in a)r.o(a,d)&&!r.o(e,d)&&Object.defineProperty(e,d,{enumerable:!0,get:a[d]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((a,d)=>(r.f[d](e,a),a),[])),r.u=e=>"assets/js/"+({15:"d803fa53",30:"db8c087e",38:"a99a45c9",44:"e3f369d5",78:"b768a3a5",93:"a3702f61",126:"ae70dfbf",129:"dfa3dc90",253:"bb45d4f9",351:"b9acb8d9",375:"3d81f1cf",446:"a4232cf8",534:"76e36fb0",596:"c2e0ed62",598:"db4f3bbd",600:"ee87c775",681:"ffa0f8b1",750:"33b5ee95",879:"8bee5443",883:"1dfb8d43",889:"08b309e9",956:"03735ec1",957:"c141421f",1006:"47e58a89",1151:"890279ba",1162:"f7e6b9d6",1193:"444a6da6",1303:"41d45d82",1308:"ec030ab7",1345:"fe6d5b4f",1408:"2fc7e024",1446:"c78349fc",1490:"0f761898",1567:"22dd74f7",1703:"ff8bad6c",1861:"8ad67c3b",1876:"5c3b537a",1895:"d375ca1d",1966:"b1582da4",2076:"common",2102:"755d162a",2116:"0f1bef30",2138:"1a4e3797",2272:"ca5faf5d",2278:"c4280da9",2348:"f2da9399",2360:"017d425f",2394:"c2ea283c",2423:"19bcb67f",2457:"46abd5bb",2460:"954b19af",2469:"cd086441",2472:"62f97fbe",2475:"1ab69cbd",2565:"622fd833",2651:"8cd0650d",2741:"43ad9ba4",2752:"e14655eb",2888:"32270e71",2909:"144a43f5",2969:"f0ad3fbb",2990:"1d50b418",3035:"87b7bbd6",3038:"6df123cd",3140:"1a29c454",3147:"c83c70df",3164:"67f2dc6c",3240:"b079b393",3247:"f0b67137",3263:"730da84e",3284:"6398c398",3345:"040305fb",3353:"2b4d41d7",3361:"8f633f11",3368:"efa0f9ee",3387:"3d67876e",3468:"c76bd485",3500:"c3c63498",3536:"2eb731bc",3683:"5a0b74d9",4036:"fbcfc90d",4085:"cb17b4e0",4090:"a8ca941b",4173:"d51059db",4263:"9a5e6f6b",4314:"f6a246db",4341:"e1a0f423",4356:"7b864b08",4384:"622bdc6f",4474:"3db73d6f",4573:"baacc2a1",4612:"6a9eca1a",4614:"e55b8e98",4644:"d3e886ab",4876:"44691977",4907:"86116998",4919:"ce43de4b",4995:"62266e9d",5048:"3c440e04",5110:"e9fe1d10",5144:"944c5f91",5200:"ff7f32ba",5217:"fb0a7a3f",5270:"99931d31",5333:"70909872",5343:"1b10d5ba",5397:"eba86ea4",5412:"a6d50436",5660:"1b208f60",5663:"b1379b2b",5739:"69079906",5742:"aba21aa0",5757:"ad42ff54",5838:"bbb8ec1d",5903:"69d616f2",5985:"e3536031",6108:"2fed9fb3",6224:"ef9aa223",6256:"6888b60e",6289:"45e5859c",6311:"cce672fb",6329:"a7b545c5",6459:"290c78e6",6513:"f13693f0",6538:"719cba95",6559:"7431813e",6601:"81bb6a5c",6801:"acefda8b",6839:"80866714",6999:"d5ec984b",7098:"a7bd4aaa",7118:"7996108c",7243:"5d9d4350",7356:"2ea623f2",7484:"ad01e028",7498:"e4400415",7502:"1a547ad8",7512:"4c09a7b3",7567:"4545d55b",7586:"17856424",7705:"2b91b6ca",7720:"3bfbe7c9",7807:"1a8a0a64",7824:"2b56b65e",7829:"7c27dc91",7859:"593d9d00",7902:"619c7267",7964:"ff35961a",7968:"9b0af131",8090:"6e85978c",8240:"0102a83b",8267:"02f8077b",8268:"a4b6c971",8269:"c7f91cbe",8294:"f2bedfce",8336:"e7fd9095",8392:"20177945",8401:"17896441",8508:"10dd1586",8571:"da1ad91e",8593:"56350599",8607:"681e5335",8611:"0c23d011",8625:"3a9e0e6c",8649:"7de42fc9",8702:"42962acd",8750:"8a484c94",8765:"1a2eaade",8822:"555ae514",8862:"e87b52ac",8963:"56c23a02",8990:"5f1a63c6",9033:"9f55b2fc",9048:"a94703ab",9213:"62d1268c",9227:"7e40e6b3",9264:"c7f32161",9315:"16faf8bf",9331:"ffcd190c",9363:"f3312674",9459:"97254d1d",9482:"a9c1003f",9522:"85dc2a2b",9610:"453ae64a",9640:"3b25a2ae",9647:"5e95c892",9674:"feac1fba",9712:"d8c8efb9",9758:"439d880a",9763:"aece522a",9781:"b796be74",9897:"f0eeb72e",9976:"230d5fdc",9986:"d1f3cfe5"}[e]||e)+"."+{15:"d4103b44",30:"5e412f6d",38:"5c74e1d6",44:"6310a01a",78:"670c02e8",93:"622a1f88",126:"d3c21ad3",129:"a3d7c438",253:"35cb6896",351:"2a1a8be1",375:"44466a25",416:"bba44855",446:"720c59c5",534:"f4a56aad",596:"471fd207",598:"5b1053df",600:"bc28b1d0",681:"26c49a71",750:"4068db8f",879:"655e0843",883:"d44a18cb",889:"df4f3b30",956:"9d5f0507",957:"9350e3d5",1006:"61347995",1151:"4db235b1",1162:"12f31dbe",1193:"d08634fc",1303:"cb77a67a",1308:"19ab43fe",1345:"dd2b7bcf",1408:"5cdd44e5",1446:"bc1d8376",1490:"e5aee754",1567:"aa1955a9",1703:"bb99be98",1861:"f210ffea",1876:"198d048f",1895:"47c5ca9a",1966:"26cfa313",2076:"a147e1aa",2102:"e04c4c2c",2116:"66ba19b7",2138:"b9e35d57",2237:"6bbae924",2272:"0cf63219",2278:"4b2cb97f",2348:"4cb98c8a",2360:"5e727bab",2394:"2541a8c1",2423:"9a704566",2457:"a5d2327d",2460:"b5427fc6",2469:"c18f6bcb",2472:"9b44eed4",2475:"95e18472",2565:"26731c74",2651:"92578320",2693:"380feae7",2741:"1c73b360",2752:"05601a76",2888:"603c895a",2909:"66db384e",2969:"51e6616d",2990:"244599e4",3035:"930378b5",3038:"746b5104",3140:"80d4a164",3147:"b2a4407c",3164:"afb9b764",3240:"759d13b9",3247:"d5683b4f",3263:"da23b2bf",3284:"46083cba",3345:"cd817a66",3353:"f158ad34",3361:"e6042c27",3368:"8c3ea529",3387:"1e3dfa97",3468:"3ae40933",3500:"9efdd30b",3536:"36c717d9",3683:"b0f81b78",4036:"3ba6e711",4085:"e845c52f",4090:"dfdad261",4115:"d645fc23",4173:"bacef605",4263:"bd0de960",4314:"2202791a",4341:"44bf2a73",4356:"450422c1",4384:"1ef5e03e",4474:"2967ccdf",4573:"04372438",4612:"20606c9d",4614:"b129eb58",4644:"a86e3992",4754:"78f469df",4876:"78d44a41",4907:"5ddf17c6",4919:"7a5f58d3",4995:"ece12ff2",5048:"b43aa9f1",5110:"1cd06410",5144:"d825c9b4",5200:"5de1608d",5217:"f332d0d1",5270:"3123c8e7",5333:"40e07bb0",5343:"5fd32b67",5397:"ba97f892",5412:"c8c48fd3",5660:"57b46a92",5663:"8088b191",5739:"2a563c92",5742:"8cdbe811",5757:"9de749fd",5838:"83e91f02",5903:"821f3999",5985:"aafe6790",6108:"365e2569",6224:"fba9a342",6256:"d9ae4c13",6289:"f6e7c945",6311:"af719805",6329:"40158bd3",6459:"2463c0f5",6513:"13baf1e4",6538:"d571e06d",6559:"c4af7bf3",6601:"66f73f50",6801:"6897bd64",6839:"207cc86d",6999:"64627d58",7098:"e566890f",7118:"13f2c6a7",7243:"930b5bd6",7356:"0b394330",7484:"002bb639",7498:"97257edb",7502:"f4acd00b",7512:"27e1103c",7567:"0a1c17c1",7586:"05bd2bee",7705:"1dc17cbb",7720:"24a92496",7807:"9ed7d10f",7824:"48ec5133",7829:"bbdb61d4",7859:"acd80658",7902:"b2c19227",7964:"7ef150a6",7968:"8658e795",8090:"af4cfb50",8240:"d4f52412",8267:"dbfe5354",8268:"7ed10065",8269:"2921c476",8294:"e344768e",8336:"0e5f0157",8392:"32fde553",8401:"9b189e06",8508:"d977358d",8571:"c0329697",8593:"42a61cdd",8607:"b96fee6d",8611:"870b467b",8625:"8df7c8bf",8649:"540f0784",8702:"c8d4fac3",8750:"56e811df",8765:"e2c3e49a",8822:"77921987",8862:"2272a76a",8913:"fd271a57",8963:"fca39a90",8990:"1753fc06",9033:"e3a15f6c",9048:"fbe061ed",9213:"7074cfcc",9227:"b79ed718",9264:"a73bd813",9315:"c9a9899a",9331:"fb999fe4",9363:"66313398",9459:"bcd99a3a",9482:"32df5989",9522:"cc51d0fb",9610:"f3b4d314",9640:"8da65214",9647:"a3e58221",9674:"dec60a8d",9712:"f5eaa1ca",9758:"bf4164d1",9763:"05004e42",9781:"fb5ede14",9897:"8be94bd0",9976:"68f5d90c",9986:"87289072"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),f={},b="langflow-docs:",r.l=(e,a,d,c)=>{if(f[e])f[e].push(a);else{var t,o;if(void 0!==d)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var b=f[e];if(delete f[e],t.parentNode&&t.parentNode.removeChild(t),b&&b.forEach(e=>e(d)),a)return a(d)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=u.bind(null,t.onerror),t.onload=u.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),r.p="/",r.gca=function(e){return e={17856424:"7586",17896441:"8401",20177945:"8392",44691977:"4876",56350599:"8593",69079906:"5739",70909872:"5333",80866714:"6839",86116998:"4907",d803fa53:"15",db8c087e:"30",a99a45c9:"38",e3f369d5:"44",b768a3a5:"78",a3702f61:"93",ae70dfbf:"126",dfa3dc90:"129",bb45d4f9:"253",b9acb8d9:"351","3d81f1cf":"375",a4232cf8:"446","76e36fb0":"534",c2e0ed62:"596",db4f3bbd:"598",ee87c775:"600",ffa0f8b1:"681","33b5ee95":"750","8bee5443":"879","1dfb8d43":"883","08b309e9":"889","03735ec1":"956",c141421f:"957","47e58a89":"1006","890279ba":"1151",f7e6b9d6:"1162","444a6da6":"1193","41d45d82":"1303",ec030ab7:"1308",fe6d5b4f:"1345","2fc7e024":"1408",c78349fc:"1446","0f761898":"1490","22dd74f7":"1567",ff8bad6c:"1703","8ad67c3b":"1861","5c3b537a":"1876",d375ca1d:"1895",b1582da4:"1966",common:"2076","755d162a":"2102","0f1bef30":"2116","1a4e3797":"2138",ca5faf5d:"2272",c4280da9:"2278",f2da9399:"2348","017d425f":"2360",c2ea283c:"2394","19bcb67f":"2423","46abd5bb":"2457","954b19af":"2460",cd086441:"2469","62f97fbe":"2472","1ab69cbd":"2475","622fd833":"2565","8cd0650d":"2651","43ad9ba4":"2741",e14655eb:"2752","32270e71":"2888","144a43f5":"2909",f0ad3fbb:"2969","1d50b418":"2990","87b7bbd6":"3035","6df123cd":"3038","1a29c454":"3140",c83c70df:"3147","67f2dc6c":"3164",b079b393:"3240",f0b67137:"3247","730da84e":"3263","6398c398":"3284","040305fb":"3345","2b4d41d7":"3353","8f633f11":"3361",efa0f9ee:"3368","3d67876e":"3387",c76bd485:"3468",c3c63498:"3500","2eb731bc":"3536","5a0b74d9":"3683",fbcfc90d:"4036",cb17b4e0:"4085",a8ca941b:"4090",d51059db:"4173","9a5e6f6b":"4263",f6a246db:"4314",e1a0f423:"4341","7b864b08":"4356","622bdc6f":"4384","3db73d6f":"4474",baacc2a1:"4573","6a9eca1a":"4612",e55b8e98:"4614",d3e886ab:"4644",ce43de4b:"4919","62266e9d":"4995","3c440e04":"5048",e9fe1d10:"5110","944c5f91":"5144",ff7f32ba:"5200",fb0a7a3f:"5217","99931d31":"5270","1b10d5ba":"5343",eba86ea4:"5397",a6d50436:"5412","1b208f60":"5660",b1379b2b:"5663",aba21aa0:"5742",ad42ff54:"5757",bbb8ec1d:"5838","69d616f2":"5903",e3536031:"5985","2fed9fb3":"6108",ef9aa223:"6224","6888b60e":"6256","45e5859c":"6289",cce672fb:"6311",a7b545c5:"6329","290c78e6":"6459",f13693f0:"6513","719cba95":"6538","7431813e":"6559","81bb6a5c":"6601",acefda8b:"6801",d5ec984b:"6999",a7bd4aaa:"7098","7996108c":"7118","5d9d4350":"7243","2ea623f2":"7356",ad01e028:"7484",e4400415:"7498","1a547ad8":"7502","4c09a7b3":"7512","4545d55b":"7567","2b91b6ca":"7705","3bfbe7c9":"7720","1a8a0a64":"7807","2b56b65e":"7824","7c27dc91":"7829","593d9d00":"7859","619c7267":"7902",ff35961a:"7964","9b0af131":"7968","6e85978c":"8090","0102a83b":"8240","02f8077b":"8267",a4b6c971:"8268",c7f91cbe:"8269",f2bedfce:"8294",e7fd9095:"8336","10dd1586":"8508",da1ad91e:"8571","681e5335":"8607","0c23d011":"8611","3a9e0e6c":"8625","7de42fc9":"8649","42962acd":"8702","8a484c94":"8750","1a2eaade":"8765","555ae514":"8822",e87b52ac:"8862","56c23a02":"8963","5f1a63c6":"8990","9f55b2fc":"9033",a94703ab:"9048","62d1268c":"9213","7e40e6b3":"9227",c7f32161:"9264","16faf8bf":"9315",ffcd190c:"9331",f3312674:"9363","97254d1d":"9459",a9c1003f:"9482","85dc2a2b":"9522","453ae64a":"9610","3b25a2ae":"9640","5e95c892":"9647",feac1fba:"9674",d8c8efb9:"9712","439d880a":"9758",aece522a:"9763",b796be74:"9781",f0eeb72e:"9897","230d5fdc":"9976",d1f3cfe5:"9986"}[e]||e,r.p+r.u(e)},(()=>{var e={5354:0,1869:0};r.f.j=(a,d)=>{var f=r.o(e,a)?e[a]:void 0;if(0!==f)if(f)d.push(f[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var b=new Promise((d,b)=>f=e[a]=[d,b]);d.push(f[2]=b);var c=r.p+r.u(a),t=new Error;r.l(c,d=>{if(r.o(e,a)&&(0!==(f=e[a])&&(e[a]=void 0),f)){var b=d&&("load"===d.type?"missing":d.type),c=d&&d.target&&d.target.src;t.message="Loading chunk "+a+" failed.\n("+b+": "+c+")",t.name="ChunkLoadError",t.type=b,t.request=c,f[1](t)}},"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,d)=>{var f,b,[c,t,o]=d,n=0;if(c.some(a=>0!==e[a])){for(f in t)r.o(t,f)&&(r.m[f]=t[f]);if(o)var i=o(r)}for(a&&a(d);n - + diff --git a/bundles-aiml.html b/bundles-aiml.html index 2f2ba92430..f537c1c203 100644 --- a/bundles-aiml.html +++ b/bundles-aiml.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-altk.html b/bundles-altk.html index 6963ee2b6e..85bbdf9472 100644 --- a/bundles-altk.html +++ b/bundles-altk.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-amazon.html b/bundles-amazon.html index 4e3927b342..4a74495e1f 100644 --- a/bundles-amazon.html +++ b/bundles-amazon.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-anthropic.html b/bundles-anthropic.html index 0a3be0fada..8682fdda8a 100644 --- a/bundles-anthropic.html +++ b/bundles-anthropic.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-apify.html b/bundles-apify.html index 7f84532926..fbb692b5ca 100644 --- a/bundles-apify.html +++ b/bundles-apify.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-arxiv.html b/bundles-arxiv.html index 9aa03269b1..f7fca2b5b7 100644 --- a/bundles-arxiv.html +++ b/bundles-arxiv.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-assemblyai.html b/bundles-assemblyai.html index eadea7a653..ce6340d1e6 100644 --- a/bundles-assemblyai.html +++ b/bundles-assemblyai.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-azure.html b/bundles-azure.html index 61d1510c87..f24e102604 100644 --- a/bundles-azure.html +++ b/bundles-azure.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-baidu.html b/bundles-baidu.html index 0a28787567..554d291e1d 100644 --- a/bundles-baidu.html +++ b/bundles-baidu.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-bing.html b/bundles-bing.html index 1ec05209c2..eb7c18dba0 100644 --- a/bundles-bing.html +++ b/bundles-bing.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-cassandra.html b/bundles-cassandra.html index ff344e59d7..6bfb68cf99 100644 --- a/bundles-cassandra.html +++ b/bundles-cassandra.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-chroma.html b/bundles-chroma.html index d495e71836..d426db1099 100644 --- a/bundles-chroma.html +++ b/bundles-chroma.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-cleanlab.html b/bundles-cleanlab.html index 07d4f36bb6..52a9b655b9 100644 --- a/bundles-cleanlab.html +++ b/bundles-cleanlab.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-clickhouse.html b/bundles-clickhouse.html index 08f4249128..1c0a98e234 100644 --- a/bundles-clickhouse.html +++ b/bundles-clickhouse.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-cloudflare.html b/bundles-cloudflare.html index c34a868d74..060d020bbf 100644 --- a/bundles-cloudflare.html +++ b/bundles-cloudflare.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-cohere.html b/bundles-cohere.html index e5b77c24a3..0604a37927 100644 --- a/bundles-cohere.html +++ b/bundles-cohere.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-cometapi.html b/bundles-cometapi.html index 6e438bc9c7..34730a49ae 100644 --- a/bundles-cometapi.html +++ b/bundles-cometapi.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-composio.html b/bundles-composio.html index 92993eccb6..e836dd14da 100644 --- a/bundles-composio.html +++ b/bundles-composio.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-couchbase.html b/bundles-couchbase.html index 0f729663d3..adcf72b8f7 100644 --- a/bundles-couchbase.html +++ b/bundles-couchbase.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-cuga.html b/bundles-cuga.html index 2c1be6370a..118d9fed64 100644 --- a/bundles-cuga.html +++ b/bundles-cuga.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-datastax.html b/bundles-datastax.html index c2820c02f5..06a43128ad 100644 --- a/bundles-datastax.html +++ b/bundles-datastax.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-deepseek.html b/bundles-deepseek.html index 480f8090a4..2ff546e51c 100644 --- a/bundles-deepseek.html +++ b/bundles-deepseek.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-docling.html b/bundles-docling.html index fc19444edc..7d4d04e71b 100644 --- a/bundles-docling.html +++ b/bundles-docling.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-duckduckgo.html b/bundles-duckduckgo.html index 8b87ea56b3..c84b3612f8 100644 --- a/bundles-duckduckgo.html +++ b/bundles-duckduckgo.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-elastic.html b/bundles-elastic.html index 7bee87ef1f..ae9ffb4d25 100644 --- a/bundles-elastic.html +++ b/bundles-elastic.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-exa.html b/bundles-exa.html index 89375a45a3..1a2127a80e 100644 --- a/bundles-exa.html +++ b/bundles-exa.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-faiss.html b/bundles-faiss.html index d59a51c518..22fdb32839 100644 --- a/bundles-faiss.html +++ b/bundles-faiss.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-glean.html b/bundles-glean.html index 0683c85793..79264dc85e 100644 --- a/bundles-glean.html +++ b/bundles-glean.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-google.html b/bundles-google.html index 9edce073cf..c6adb6da10 100644 --- a/bundles-google.html +++ b/bundles-google.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-groq.html b/bundles-groq.html index 2d296de71d..cf4d4124eb 100644 --- a/bundles-groq.html +++ b/bundles-groq.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-huggingface.html b/bundles-huggingface.html index 84c453f4b8..1487129915 100644 --- a/bundles-huggingface.html +++ b/bundles-huggingface.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-ibm.html b/bundles-ibm.html index bf01ca44e1..f04e8c10de 100644 --- a/bundles-ibm.html +++ b/bundles-ibm.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-icosacomputing.html b/bundles-icosacomputing.html index 1c89d8c348..a5fb3e541b 100644 --- a/bundles-icosacomputing.html +++ b/bundles-icosacomputing.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-langchain.html b/bundles-langchain.html index dda4492576..5a8a74c274 100644 --- a/bundles-langchain.html +++ b/bundles-langchain.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-lmstudio.html b/bundles-lmstudio.html index 9108b1ac64..210f5e90ed 100644 --- a/bundles-lmstudio.html +++ b/bundles-lmstudio.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-maritalk.html b/bundles-maritalk.html index 4638ba7804..f7d2bcf776 100644 --- a/bundles-maritalk.html +++ b/bundles-maritalk.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-mem0.html b/bundles-mem0.html index af59c41c08..73baeeb019 100644 --- a/bundles-mem0.html +++ b/bundles-mem0.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-milvus.html b/bundles-milvus.html index c439ad891e..ac5b274384 100644 --- a/bundles-milvus.html +++ b/bundles-milvus.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-mistralai.html b/bundles-mistralai.html index b44d30c676..8089125c09 100644 --- a/bundles-mistralai.html +++ b/bundles-mistralai.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-mongodb.html b/bundles-mongodb.html index 97244982de..06846c3612 100644 --- a/bundles-mongodb.html +++ b/bundles-mongodb.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-notion.html b/bundles-notion.html index e9aaf87163..b44f506c5a 100644 --- a/bundles-notion.html +++ b/bundles-notion.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-novita.html b/bundles-novita.html index f41585cf0c..741e10cce6 100644 --- a/bundles-novita.html +++ b/bundles-novita.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-nvidia.html b/bundles-nvidia.html index 416262a4f5..84e68fb8ea 100644 --- a/bundles-nvidia.html +++ b/bundles-nvidia.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-ollama.html b/bundles-ollama.html index 441cb6332b..fca0f5ceef 100644 --- a/bundles-ollama.html +++ b/bundles-ollama.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-openai.html b/bundles-openai.html index beafb6d20f..92d3d8e1d7 100644 --- a/bundles-openai.html +++ b/bundles-openai.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-openrouter.html b/bundles-openrouter.html index 715d738152..d84a8d1990 100644 --- a/bundles-openrouter.html +++ b/bundles-openrouter.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-perplexity.html b/bundles-perplexity.html index 667be50d10..7efc43c144 100644 --- a/bundles-perplexity.html +++ b/bundles-perplexity.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-pgvector.html b/bundles-pgvector.html index 1ebbc27c2a..3c8a127b93 100644 --- a/bundles-pgvector.html +++ b/bundles-pgvector.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-pinecone.html b/bundles-pinecone.html index 2376c93082..bfb11ddd93 100644 --- a/bundles-pinecone.html +++ b/bundles-pinecone.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-qdrant.html b/bundles-qdrant.html index 9579381b09..30a763ce50 100644 --- a/bundles-qdrant.html +++ b/bundles-qdrant.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-redis.html b/bundles-redis.html index 47eb3bb82c..e6265165e0 100644 --- a/bundles-redis.html +++ b/bundles-redis.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-sambanova.html b/bundles-sambanova.html index 68dcdac344..cd15a9c777 100644 --- a/bundles-sambanova.html +++ b/bundles-sambanova.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-searchapi.html b/bundles-searchapi.html index f3588b7560..19358cc674 100644 --- a/bundles-searchapi.html +++ b/bundles-searchapi.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-serper.html b/bundles-serper.html index b5312bceec..49ef8727ba 100644 --- a/bundles-serper.html +++ b/bundles-serper.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-supabase.html b/bundles-supabase.html index f85ccfec2c..f6a921bb70 100644 --- a/bundles-supabase.html +++ b/bundles-supabase.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-upstash.html b/bundles-upstash.html index bc29453109..c889089e39 100644 --- a/bundles-upstash.html +++ b/bundles-upstash.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-vectara.html b/bundles-vectara.html index a7fdc60ee7..a4873b7272 100644 --- a/bundles-vectara.html +++ b/bundles-vectara.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-vertexai.html b/bundles-vertexai.html index 62cd23eb13..6bed811e79 100644 --- a/bundles-vertexai.html +++ b/bundles-vertexai.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-vllm.html b/bundles-vllm.html index f8ce668b71..f9d905b772 100644 --- a/bundles-vllm.html +++ b/bundles-vllm.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-weaviate.html b/bundles-weaviate.html index b832018ede..281aee1865 100644 --- a/bundles-weaviate.html +++ b/bundles-weaviate.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-wikipedia.html b/bundles-wikipedia.html index c13bfbb492..8bcd9b66de 100644 --- a/bundles-wikipedia.html +++ b/bundles-wikipedia.html @@ -24,7 +24,7 @@ - + diff --git a/bundles-xai.html b/bundles-xai.html index 0971c14579..8d1763408a 100644 --- a/bundles-xai.html +++ b/bundles-xai.html @@ -24,7 +24,7 @@ - + diff --git a/calculator.html b/calculator.html index fdb5c772a8..b5cdbf57b9 100644 --- a/calculator.html +++ b/calculator.html @@ -24,7 +24,7 @@ - + diff --git a/chat-input-and-output.html b/chat-input-and-output.html index 5245ef3abc..41fb21f53e 100644 --- a/chat-input-and-output.html +++ b/chat-input-and-output.html @@ -24,7 +24,7 @@ - + diff --git a/chat-with-files.html b/chat-with-files.html index 904324f16e..09d973de6c 100644 --- a/chat-with-files.html +++ b/chat-with-files.html @@ -24,7 +24,7 @@ - + diff --git a/chat-with-rag.html b/chat-with-rag.html index 44a5564e64..979915a8cb 100644 --- a/chat-with-rag.html +++ b/chat-with-rag.html @@ -24,7 +24,7 @@ - + diff --git a/component-webhook.html b/component-webhook.html index 80f194e87b..e93fa2ab5c 100644 --- a/component-webhook.html +++ b/component-webhook.html @@ -24,7 +24,7 @@ - + diff --git a/components-agents.html b/components-agents.html index 779bac28b9..22b8b40413 100644 --- a/components-agents.html +++ b/components-agents.html @@ -24,7 +24,7 @@ - + diff --git a/components-bundle-components.html b/components-bundle-components.html index 7ea287771c..39699f3040 100644 --- a/components-bundle-components.html +++ b/components-bundle-components.html @@ -24,7 +24,7 @@ - + diff --git a/components-custom-components.html b/components-custom-components.html index 88d51b0c0e..a5ae4bddfc 100644 --- a/components-custom-components.html +++ b/components-custom-components.html @@ -24,7 +24,7 @@ - + @@ -104,8 +104,8 @@ For example, to add the example DataFrameProcessor component to the

_10
src/lfx/src/lfx/components/
_10
└── data/ # Category folder (determines menu location)
_10
├── __init__.py # Required - makes it a Python package
_10
└── dataframe_processor.py # Your custom component file

If you're creating custom components in a different location using the LANGFLOW_COMPONENTS_PATH environment variable, components must be similarly organized in a specific directory structure to be displayed in the visual editor.


_10
/your/custom/components/path/ # Base directory set by LANGFLOW_COMPONENTS_PATH
_10
└── category_name/
_10
├── __init__.py
_10
└── custom_component.py

-

You can have multiple category folders to organize components into different categories:

-

_10
/app/custom_components/
_10
├── data/
_10
│ ├── __init__.py
_10
│ └── dataframe_processor.py
_10
└── tools/
_10
├── __init__.py
_10
└── custom_tool.py

+

You can have multiple category folders to organize components into different categories, with multiple components inside each folder:

+

_10
/app/custom_components/
_10
├── data/
_10
│ ├── __init__.py
_10
│ ├── custom_component.py
_10
│ └── dataframe_processor.py
_10
└── tools/
_10
├── __init__.py
_10
└── custom_tool.py

Create the __init__.py file​

Each category directory must contain an __init__.py file for Langflow to properly recognize and load the components. This is a Python package requirement that ensures the directory is treated as a module.

diff --git a/components-embedding-models.html b/components-embedding-models.html index bed03feb4d..bbc3dc8fcb 100644 --- a/components-embedding-models.html +++ b/components-embedding-models.html @@ -24,7 +24,7 @@ - + diff --git a/components-models.html b/components-models.html index e75688e44f..bbdc27c1d2 100644 --- a/components-models.html +++ b/components-models.html @@ -24,7 +24,7 @@ - + diff --git a/components-prompts.html b/components-prompts.html index cce843043f..32a46ac7ab 100644 --- a/components-prompts.html +++ b/components-prompts.html @@ -24,7 +24,7 @@ - + diff --git a/concepts-components.html b/concepts-components.html index b711352fc6..d1a7940c88 100644 --- a/concepts-components.html +++ b/concepts-components.html @@ -24,7 +24,7 @@ - + diff --git a/concepts-file-management.html b/concepts-file-management.html index 033aeb3da9..0152afc09d 100644 --- a/concepts-file-management.html +++ b/concepts-file-management.html @@ -24,7 +24,7 @@ - + diff --git a/concepts-flows-import.html b/concepts-flows-import.html index bef02a2f31..009c726a5b 100644 --- a/concepts-flows-import.html +++ b/concepts-flows-import.html @@ -24,7 +24,7 @@ - + diff --git a/concepts-flows.html b/concepts-flows.html index 66c52f90cd..da914ad4f4 100644 --- a/concepts-flows.html +++ b/concepts-flows.html @@ -24,7 +24,7 @@ - + diff --git a/concepts-overview.html b/concepts-overview.html index fe880abce2..b72d2766e3 100644 --- a/concepts-overview.html +++ b/concepts-overview.html @@ -24,7 +24,7 @@ - + diff --git a/concepts-playground.html b/concepts-playground.html index 8a29f87f8a..938c885989 100644 --- a/concepts-playground.html +++ b/concepts-playground.html @@ -24,7 +24,7 @@ - + diff --git a/concepts-publish.html b/concepts-publish.html index 3f01b178a4..0f48f7b470 100644 --- a/concepts-publish.html +++ b/concepts-publish.html @@ -24,7 +24,7 @@ - + diff --git a/concepts-voice-mode.html b/concepts-voice-mode.html index 81cc765db1..20178fc79a 100644 --- a/concepts-voice-mode.html +++ b/concepts-voice-mode.html @@ -24,7 +24,7 @@ - + diff --git a/configuration-cli.html b/configuration-cli.html index 30d4dd9344..a720c0bb6c 100644 --- a/configuration-cli.html +++ b/configuration-cli.html @@ -24,7 +24,7 @@ - + diff --git a/configuration-custom-database.html b/configuration-custom-database.html index 229f79f084..57645278d6 100644 --- a/configuration-custom-database.html +++ b/configuration-custom-database.html @@ -24,7 +24,7 @@ - + diff --git a/configuration-global-variables.html b/configuration-global-variables.html index adf34908ed..1f697ff58d 100644 --- a/configuration-global-variables.html +++ b/configuration-global-variables.html @@ -24,7 +24,7 @@ - + diff --git a/contributing-bundles.html b/contributing-bundles.html index a756cb5191..b97de7dbdd 100644 --- a/contributing-bundles.html +++ b/contributing-bundles.html @@ -24,7 +24,7 @@ - + diff --git a/contributing-community.html b/contributing-community.html index 4ff7554b6c..97800ab3c4 100644 --- a/contributing-community.html +++ b/contributing-community.html @@ -24,7 +24,7 @@ - + diff --git a/contributing-component-tests.html b/contributing-component-tests.html index b7dbb7064f..8e605d90a6 100644 --- a/contributing-component-tests.html +++ b/contributing-component-tests.html @@ -24,7 +24,7 @@ - + diff --git a/contributing-components.html b/contributing-components.html index 139ddb2738..ff8ec7a0ce 100644 --- a/contributing-components.html +++ b/contributing-components.html @@ -24,7 +24,7 @@ - + diff --git a/contributing-github-issues.html b/contributing-github-issues.html index 1c66def05d..cdbc848358 100644 --- a/contributing-github-issues.html +++ b/contributing-github-issues.html @@ -24,7 +24,7 @@ - + diff --git a/contributing-how-to-contribute.html b/contributing-how-to-contribute.html index 3c95caf2a0..2890e06eab 100644 --- a/contributing-how-to-contribute.html +++ b/contributing-how-to-contribute.html @@ -24,7 +24,7 @@ - + diff --git a/contributing-telemetry.html b/contributing-telemetry.html index 5e8f0faadf..2cf9546154 100644 --- a/contributing-telemetry.html +++ b/contributing-telemetry.html @@ -24,7 +24,7 @@ - + diff --git a/contributing-templates.html b/contributing-templates.html index 9e99f26cae..b93c8d92ac 100644 --- a/contributing-templates.html +++ b/contributing-templates.html @@ -24,7 +24,7 @@ - + diff --git a/current-date.html b/current-date.html index b36b93cde9..a088c3f0b0 100644 --- a/current-date.html +++ b/current-date.html @@ -24,7 +24,7 @@ - + diff --git a/data-operations.html b/data-operations.html index ecb997cb8e..876bb63900 100644 --- a/data-operations.html +++ b/data-operations.html @@ -24,7 +24,7 @@ - + diff --git a/data-types.html b/data-types.html index 187bfe79cd..c9adef48cf 100644 --- a/data-types.html +++ b/data-types.html @@ -24,7 +24,7 @@ - + diff --git a/dataframe-operations.html b/dataframe-operations.html index 9e45fce8ab..683e8ab967 100644 --- a/dataframe-operations.html +++ b/dataframe-operations.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-architecture.html b/deployment-architecture.html index 54deff40fd..c96f307fd2 100644 --- a/deployment-architecture.html +++ b/deployment-architecture.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-caddyfile.html b/deployment-caddyfile.html index 197ddedcb9..861e133b41 100644 --- a/deployment-caddyfile.html +++ b/deployment-caddyfile.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-docker.html b/deployment-docker.html index addd3362ac..c6065dd9a3 100644 --- a/deployment-docker.html +++ b/deployment-docker.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-gcp.html b/deployment-gcp.html index d5425d4bb6..bcad2e2129 100644 --- a/deployment-gcp.html +++ b/deployment-gcp.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-hugging-face-spaces.html b/deployment-hugging-face-spaces.html index 376560205c..841e4e4827 100644 --- a/deployment-hugging-face-spaces.html +++ b/deployment-hugging-face-spaces.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-kubernetes-dev.html b/deployment-kubernetes-dev.html index f0903fc030..5e354a5728 100644 --- a/deployment-kubernetes-dev.html +++ b/deployment-kubernetes-dev.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-kubernetes-prod.html b/deployment-kubernetes-prod.html index a87769c04d..76a8251410 100644 --- a/deployment-kubernetes-prod.html +++ b/deployment-kubernetes-prod.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-nginx-ssl.html b/deployment-nginx-ssl.html index 459444ec79..654d91236a 100644 --- a/deployment-nginx-ssl.html +++ b/deployment-nginx-ssl.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-overview.html b/deployment-overview.html index 0fb9b325a2..0963671d40 100644 --- a/deployment-overview.html +++ b/deployment-overview.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-prod-best-practices.html b/deployment-prod-best-practices.html index c94ef85a95..2cc4e00e10 100644 --- a/deployment-prod-best-practices.html +++ b/deployment-prod-best-practices.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-public-server.html b/deployment-public-server.html index b3f52305ee..c46f6b6771 100644 --- a/deployment-public-server.html +++ b/deployment-public-server.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-railway.html b/deployment-railway.html index d5e187da96..738e0e724d 100644 --- a/deployment-railway.html +++ b/deployment-railway.html @@ -24,7 +24,7 @@ - + diff --git a/deployment-render.html b/deployment-render.html index 7c89202171..bdd46f66c9 100644 --- a/deployment-render.html +++ b/deployment-render.html @@ -24,7 +24,7 @@ - + diff --git a/develop-application.html b/develop-application.html index f823e79e0f..b9b87a63c6 100644 --- a/develop-application.html +++ b/develop-application.html @@ -24,7 +24,7 @@ - + @@ -105,12 +105,23 @@ When you package Langflow as a dependency of an application, you only want to in

Components​

-

The Core components and [Bundles] that you see in the Langflow visual editor are automatically included in the base Langflow Docker image.

-

If you have any custom components that you created for your application, you must include these components in your application directory:

+

The Core components and Bundles that you see in the Langflow visual editor are automatically included in the base Langflow Docker image.

+

If you have custom components for your application, include them in your application directory. +Custom components must be placed inside category folders, not directly in the base directory:

    -
  1. Create a /components folder in your application directory.
    2. -
  2. Add your custom component files to the /components folder.
    3. -
  3. Specify the path to /components in your docker.env.
    4. +
  4. +

    Create a /components folder in your application directory.

    +
    5. +
  5. +

    Inside /components, create category subfolders (for example, /components/data, /components/tools).

    +
    6. +
  6. +

    Add your custom component files to the appropriate category folders.

    +
    7. +
  7. +

    Copy the /components folder to your Docker image and set the LANGFLOW_COMPONENTS_PATH environment variable:

    +

    _10
    COPY components /app/components
    _10
    ENV LANGFLOW_COMPONENTS_PATH=/app/components

    +

Langflow Dockerfile​

The Dockerfile determines how your Langflow image is built, including the dependencies, flows, components, and configuration files.

diff --git a/directory.html b/directory.html index 63ea251d91..ee76c617fc 100644 --- a/directory.html +++ b/directory.html @@ -24,7 +24,7 @@ - + diff --git a/dynamic-create-data.html b/dynamic-create-data.html index 1f833b539b..337168b000 100644 --- a/dynamic-create-data.html +++ b/dynamic-create-data.html @@ -24,7 +24,7 @@ - + diff --git a/enterprise-database-guide.html b/enterprise-database-guide.html index 7dec1f170c..2e3db5786e 100644 --- a/enterprise-database-guide.html +++ b/enterprise-database-guide.html @@ -24,7 +24,7 @@ - + diff --git a/environment-variables.html b/environment-variables.html index bd7bb9eae5..60da1b287c 100644 --- a/environment-variables.html +++ b/environment-variables.html @@ -24,7 +24,7 @@ - + diff --git a/get-started-installation.html b/get-started-installation.html index 3bc0fe2ba3..909e917f98 100644 --- a/get-started-installation.html +++ b/get-started-installation.html @@ -24,7 +24,7 @@ - + diff --git a/get-started-quickstart.html b/get-started-quickstart.html index 9436dee5cd..a86bb802e2 100644 --- a/get-started-quickstart.html +++ b/get-started-quickstart.html @@ -24,7 +24,7 @@ - + diff --git a/if-else.html b/if-else.html index 400a5c19a7..fb82596287 100644 --- a/if-else.html +++ b/if-else.html @@ -24,7 +24,7 @@ - + diff --git a/index.html b/index.html index db7498d03d..8085dd6a99 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ - + diff --git a/install-custom-dependencies.html b/install-custom-dependencies.html index b0099b3ca8..ec28190867 100644 --- a/install-custom-dependencies.html +++ b/install-custom-dependencies.html @@ -24,7 +24,7 @@ - + diff --git a/integrations-arize.html b/integrations-arize.html index be85322c89..87df4ccb32 100644 --- a/integrations-arize.html +++ b/integrations-arize.html @@ -24,7 +24,7 @@ - + diff --git a/integrations-instana-traceloop.html b/integrations-instana-traceloop.html index f423319312..5803c1fa01 100644 --- a/integrations-instana-traceloop.html +++ b/integrations-instana-traceloop.html @@ -24,7 +24,7 @@ - + diff --git a/integrations-langfuse.html b/integrations-langfuse.html index f33b2b4fc5..12c144bd3a 100644 --- a/integrations-langfuse.html +++ b/integrations-langfuse.html @@ -24,7 +24,7 @@ - + diff --git a/integrations-langsmith.html b/integrations-langsmith.html index b4b2b45536..3afc68f45f 100644 --- a/integrations-langsmith.html +++ b/integrations-langsmith.html @@ -24,7 +24,7 @@ - + diff --git a/integrations-langwatch.html b/integrations-langwatch.html index 305700f35d..3b5bc13ac5 100644 --- a/integrations-langwatch.html +++ b/integrations-langwatch.html @@ -24,7 +24,7 @@ - + diff --git a/integrations-opik.html b/integrations-opik.html index b655b69c2f..9de5cf08e7 100644 --- a/integrations-opik.html +++ b/integrations-opik.html @@ -24,7 +24,7 @@ - + diff --git a/legacy-core-components.html b/legacy-core-components.html index 56db554138..4acc215ed6 100644 --- a/legacy-core-components.html +++ b/legacy-core-components.html @@ -24,7 +24,7 @@ - + diff --git a/llm-selector.html b/llm-selector.html index fcf73593a7..5c2367b41b 100644 --- a/llm-selector.html +++ b/llm-selector.html @@ -24,7 +24,7 @@ - + diff --git a/logging.html b/logging.html index 80dda2b5a0..90d5fd51b0 100644 --- a/logging.html +++ b/logging.html @@ -24,7 +24,7 @@ - + diff --git a/loop.html b/loop.html index 8c3d629314..6c1590baa8 100644 --- a/loop.html +++ b/loop.html @@ -24,7 +24,7 @@ - + diff --git a/luna-for-langflow.html b/luna-for-langflow.html index a604523c30..80dcf12e95 100644 --- a/luna-for-langflow.html +++ b/luna-for-langflow.html @@ -24,7 +24,7 @@ - + diff --git a/mcp-client.html b/mcp-client.html index 0c9642835c..3e175d136c 100644 --- a/mcp-client.html +++ b/mcp-client.html @@ -24,7 +24,7 @@ - + diff --git a/mcp-component-astra.html b/mcp-component-astra.html index 5876b82a28..0b9074a441 100644 --- a/mcp-component-astra.html +++ b/mcp-component-astra.html @@ -24,7 +24,7 @@ - + diff --git a/mcp-server.html b/mcp-server.html index 9034d9ce85..5fda081004 100644 --- a/mcp-server.html +++ b/mcp-server.html @@ -24,7 +24,7 @@ - + diff --git a/mcp-tools.html b/mcp-tools.html index d225c68620..355d20d31f 100644 --- a/mcp-tools.html +++ b/mcp-tools.html @@ -24,7 +24,7 @@ - + diff --git a/mcp-tutorial.html b/mcp-tutorial.html index 8d099ee2c5..003fdcdf89 100644 --- a/mcp-tutorial.html +++ b/mcp-tutorial.html @@ -24,7 +24,7 @@ - + diff --git a/memory.html b/memory.html index 462c6edf75..6f12e4c8b6 100644 --- a/memory.html +++ b/memory.html @@ -24,7 +24,7 @@ - + diff --git a/message-history.html b/message-history.html index 38d4ca9994..464a998577 100644 --- a/message-history.html +++ b/message-history.html @@ -24,7 +24,7 @@ - + diff --git a/mock-data.html b/mock-data.html index f7e46aca1f..103638f3a0 100644 --- a/mock-data.html +++ b/mock-data.html @@ -24,7 +24,7 @@ - + diff --git a/notify-and-listen.html b/notify-and-listen.html index 9e6cc74155..e3cc58093b 100644 --- a/notify-and-listen.html +++ b/notify-and-listen.html @@ -24,7 +24,7 @@ - + diff --git a/parser.html b/parser.html index d3e7bc0040..7cbc123c89 100644 --- a/parser.html +++ b/parser.html @@ -24,7 +24,7 @@ - + diff --git a/python-interpreter.html b/python-interpreter.html index 3aa5fb09c0..53608f2f69 100644 --- a/python-interpreter.html +++ b/python-interpreter.html @@ -24,7 +24,7 @@ - + diff --git a/read-file.html b/read-file.html index 13c58d8ea5..e5f12b0c7f 100644 --- a/read-file.html +++ b/read-file.html @@ -24,7 +24,7 @@ - + diff --git a/release-notes.html b/release-notes.html index 64cfb30d21..d011da1fea 100644 --- a/release-notes.html +++ b/release-notes.html @@ -24,7 +24,7 @@ - + diff --git a/run-flow.html b/run-flow.html index 33e81ef148..db4b126421 100644 --- a/run-flow.html +++ b/run-flow.html @@ -24,7 +24,7 @@ - + diff --git a/search.html b/search.html index e2a40c6018..d922db4316 100644 --- a/search.html +++ b/search.html @@ -24,7 +24,7 @@ - + diff --git a/security.html b/security.html index 84dffc87f7..e5e9f82a7a 100644 --- a/security.html +++ b/security.html @@ -24,7 +24,7 @@ - + diff --git a/session-id.html b/session-id.html index 425d25ede9..83c87c33ad 100644 --- a/session-id.html +++ b/session-id.html @@ -24,7 +24,7 @@ - + diff --git a/sitemap.xml b/sitemap.xml index de806e3649..9372313899 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1 +1 @@ -https://docs.langflow.org/apihttps://docs.langflow.org/api/openapi.jsonhttps://docs.langflow.org/api/openapi.yamlhttps://docs.langflow.org/searchhttps://docs.langflow.org/agent-tutorial2026-01-23T21:51:49.000Zhttps://docs.langflow.org/agents2026-01-23T21:51:49.000Zhttps://docs.langflow.org/agents-tools2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-build2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-files2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-flows2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-flows-run2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-keys-and-authentication2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-logs2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-monitor2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-openai-responses2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-projects2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-reference-api-examples2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-request2026-01-23T21:51:49.000Zhttps://docs.langflow.org/api-users2026-01-23T21:51:49.000Zhttps://docs.langflow.org/batch-run2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-aiml2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-altk2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-amazon2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-anthropic2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-apify2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-arxiv2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-assemblyai2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-azure2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-baidu2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-bing2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-cassandra2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-chroma2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-cleanlab2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-clickhouse2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-cloudflare2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-cohere2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-cometapi2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-composio2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-couchbase2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-cuga2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-datastax2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-deepseek2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-docling2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-duckduckgo2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-elastic2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-exa2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-faiss2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-glean2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-google2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-groq2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-huggingface2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-ibm2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-icosacomputing2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-langchain2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-lmstudio2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-maritalk2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-mem02026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-milvus2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-mistralai2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-mongodb2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-notion2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-novita2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-nvidia2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-ollama2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-openai2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-openrouter2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-perplexity2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-pgvector2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-pinecone2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-qdrant2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-redis2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-sambanova2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-searchapi2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-serper2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-supabase2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-upstash2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-vectara2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-vertexai2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-vllm2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-weaviate2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-wikipedia2026-01-23T21:51:49.000Zhttps://docs.langflow.org/bundles-xai2026-01-23T21:51:49.000Zhttps://docs.langflow.org/calculator2026-01-23T21:51:49.000Zhttps://docs.langflow.org/chat-input-and-output2026-01-23T21:51:49.000Zhttps://docs.langflow.org/chat-with-files2026-01-23T21:51:49.000Zhttps://docs.langflow.org/chat-with-rag2026-01-23T21:51:49.000Zhttps://docs.langflow.org/component-webhook2026-01-23T21:51:49.000Zhttps://docs.langflow.org/components-agents2026-01-23T21:51:49.000Zhttps://docs.langflow.org/components-bundle-components2026-01-23T21:51:49.000Zhttps://docs.langflow.org/components-custom-components2026-01-23T21:51:49.000Zhttps://docs.langflow.org/components-embedding-models2026-01-23T21:51:49.000Zhttps://docs.langflow.org/components-models2026-01-23T21:51:49.000Zhttps://docs.langflow.org/components-prompts2026-01-23T21:51:49.000Zhttps://docs.langflow.org/concepts-components2026-01-23T21:51:49.000Zhttps://docs.langflow.org/concepts-file-management2026-01-23T21:51:49.000Zhttps://docs.langflow.org/concepts-flows2026-01-23T21:51:49.000Zhttps://docs.langflow.org/concepts-flows-import2026-01-23T21:51:49.000Zhttps://docs.langflow.org/concepts-overview2026-01-23T21:51:49.000Zhttps://docs.langflow.org/concepts-playground2026-01-23T21:51:49.000Zhttps://docs.langflow.org/concepts-publish2026-01-23T21:51:49.000Zhttps://docs.langflow.org/concepts-voice-mode2026-01-23T21:51:49.000Zhttps://docs.langflow.org/configuration-cli2026-01-23T21:51:49.000Zhttps://docs.langflow.org/configuration-custom-database2026-01-23T21:51:49.000Zhttps://docs.langflow.org/configuration-global-variables2026-01-23T21:51:49.000Zhttps://docs.langflow.org/contributing-bundles2026-01-23T21:51:49.000Zhttps://docs.langflow.org/contributing-community2026-01-23T21:51:49.000Zhttps://docs.langflow.org/contributing-component-tests2026-01-23T21:51:49.000Zhttps://docs.langflow.org/contributing-components2026-01-23T21:51:49.000Zhttps://docs.langflow.org/contributing-github-issues2026-01-23T21:51:49.000Zhttps://docs.langflow.org/contributing-how-to-contribute2026-01-23T21:51:49.000Zhttps://docs.langflow.org/contributing-telemetry2026-01-23T21:51:49.000Zhttps://docs.langflow.org/contributing-templates2026-01-23T21:51:49.000Zhttps://docs.langflow.org/current-date2026-01-23T21:51:49.000Zhttps://docs.langflow.org/data-operations2026-01-23T21:51:49.000Zhttps://docs.langflow.org/data-types2026-01-23T21:51:49.000Zhttps://docs.langflow.org/dataframe-operations2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-architecture2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-caddyfile2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-docker2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-gcp2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-hugging-face-spaces2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-kubernetes-dev2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-kubernetes-prod2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-nginx-ssl2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-overview2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-prod-best-practices2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-public-server2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-railway2026-01-23T21:51:49.000Zhttps://docs.langflow.org/deployment-render2026-01-23T21:51:49.000Zhttps://docs.langflow.org/develop-application2026-01-23T21:51:49.000Zhttps://docs.langflow.org/directory2026-01-23T21:51:49.000Zhttps://docs.langflow.org/dynamic-create-data2026-01-23T21:51:49.000Zhttps://docs.langflow.org/enterprise-database-guide2026-01-23T21:51:49.000Zhttps://docs.langflow.org/environment-variables2026-01-23T21:51:49.000Zhttps://docs.langflow.org/get-started-installation2026-01-23T21:51:49.000Zhttps://docs.langflow.org/get-started-quickstart2026-01-23T21:51:49.000Zhttps://docs.langflow.org/if-else2026-01-23T21:51:49.000Zhttps://docs.langflow.org/install-custom-dependencies2026-01-23T21:51:49.000Zhttps://docs.langflow.org/integrations-arize2026-01-23T21:51:49.000Zhttps://docs.langflow.org/integrations-instana-traceloop2026-01-23T21:51:49.000Zhttps://docs.langflow.org/integrations-langfuse2026-01-23T21:51:49.000Zhttps://docs.langflow.org/integrations-langsmith2026-01-23T21:51:49.000Zhttps://docs.langflow.org/integrations-langwatch2026-01-23T21:51:49.000Zhttps://docs.langflow.org/integrations-opik2026-01-23T21:51:49.000Zhttps://docs.langflow.org/legacy-core-components2026-01-23T21:51:49.000Zhttps://docs.langflow.org/llm-selector2026-01-23T21:51:49.000Zhttps://docs.langflow.org/logging2026-01-23T21:51:49.000Zhttps://docs.langflow.org/loop2026-01-23T21:51:49.000Zhttps://docs.langflow.org/luna-for-langflow2026-01-23T21:51:49.000Zhttps://docs.langflow.org/mcp-client2026-01-23T21:51:49.000Zhttps://docs.langflow.org/mcp-component-astra2026-01-23T21:51:49.000Zhttps://docs.langflow.org/mcp-server2026-01-23T21:51:49.000Zhttps://docs.langflow.org/mcp-tools2026-01-23T21:51:49.000Zhttps://docs.langflow.org/mcp-tutorial2026-01-23T21:51:49.000Zhttps://docs.langflow.org/memory2026-01-23T21:51:49.000Zhttps://docs.langflow.org/message-history2026-01-23T21:51:49.000Zhttps://docs.langflow.org/mock-data2026-01-23T21:51:49.000Zhttps://docs.langflow.org/notify-and-listen2026-01-23T21:51:49.000Zhttps://docs.langflow.org/parser2026-01-23T21:51:49.000Zhttps://docs.langflow.org/python-interpreter2026-01-23T21:51:49.000Zhttps://docs.langflow.org/read-file2026-01-23T21:51:49.000Zhttps://docs.langflow.org/release-notes2026-01-23T21:51:49.000Zhttps://docs.langflow.org/run-flow2026-01-23T21:51:49.000Zhttps://docs.langflow.org/security2026-01-23T21:51:49.000Zhttps://docs.langflow.org/session-id2026-01-23T21:51:49.000Zhttps://docs.langflow.org/smart-router2026-01-23T21:51:49.000Zhttps://docs.langflow.org/smart-transform2026-01-23T21:51:49.000Zhttps://docs.langflow.org/split-text2026-01-23T21:51:49.000Zhttps://docs.langflow.org/sql-database2026-01-23T21:51:49.000Zhttps://docs.langflow.org/structured-output2026-01-23T21:51:49.000Zhttps://docs.langflow.org/text-input-and-output2026-01-23T21:51:49.000Zhttps://docs.langflow.org/troubleshoot2026-01-23T21:51:49.000Zhttps://docs.langflow.org/type-convert2026-01-23T21:51:49.000Zhttps://docs.langflow.org/typescript-client2026-01-23T21:51:49.000Zhttps://docs.langflow.org/url2026-01-23T21:51:49.000Zhttps://docs.langflow.org/web-search2026-01-23T21:51:49.000Zhttps://docs.langflow.org/webhook2026-01-23T21:51:49.000Zhttps://docs.langflow.org/write-file2026-01-23T21:51:49.000Zhttps://docs.langflow.org/2026-01-23T21:51:49.000Z \ No newline at end of file +https://docs.langflow.org/apihttps://docs.langflow.org/api/openapi.jsonhttps://docs.langflow.org/api/openapi.yamlhttps://docs.langflow.org/searchhttps://docs.langflow.org/agent-tutorial2026-01-28T15:08:36.000Zhttps://docs.langflow.org/agents2026-01-28T15:08:36.000Zhttps://docs.langflow.org/agents-tools2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-build2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-files2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-flows2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-flows-run2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-keys-and-authentication2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-logs2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-monitor2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-openai-responses2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-projects2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-reference-api-examples2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-request2026-01-28T15:08:36.000Zhttps://docs.langflow.org/api-users2026-01-28T15:08:36.000Zhttps://docs.langflow.org/batch-run2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-aiml2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-altk2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-amazon2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-anthropic2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-apify2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-arxiv2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-assemblyai2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-azure2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-baidu2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-bing2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-cassandra2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-chroma2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-cleanlab2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-clickhouse2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-cloudflare2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-cohere2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-cometapi2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-composio2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-couchbase2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-cuga2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-datastax2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-deepseek2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-docling2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-duckduckgo2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-elastic2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-exa2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-faiss2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-glean2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-google2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-groq2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-huggingface2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-ibm2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-icosacomputing2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-langchain2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-lmstudio2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-maritalk2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-mem02026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-milvus2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-mistralai2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-mongodb2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-notion2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-novita2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-nvidia2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-ollama2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-openai2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-openrouter2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-perplexity2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-pgvector2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-pinecone2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-qdrant2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-redis2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-sambanova2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-searchapi2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-serper2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-supabase2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-upstash2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-vectara2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-vertexai2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-vllm2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-weaviate2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-wikipedia2026-01-28T15:08:36.000Zhttps://docs.langflow.org/bundles-xai2026-01-28T15:08:36.000Zhttps://docs.langflow.org/calculator2026-01-28T15:08:36.000Zhttps://docs.langflow.org/chat-input-and-output2026-01-28T15:08:36.000Zhttps://docs.langflow.org/chat-with-files2026-01-28T15:08:36.000Zhttps://docs.langflow.org/chat-with-rag2026-01-28T15:08:36.000Zhttps://docs.langflow.org/component-webhook2026-01-28T15:08:36.000Zhttps://docs.langflow.org/components-agents2026-01-28T15:08:36.000Zhttps://docs.langflow.org/components-bundle-components2026-01-28T15:08:36.000Zhttps://docs.langflow.org/components-custom-components2026-01-28T15:08:36.000Zhttps://docs.langflow.org/components-embedding-models2026-01-28T15:08:36.000Zhttps://docs.langflow.org/components-models2026-01-28T15:08:36.000Zhttps://docs.langflow.org/components-prompts2026-01-28T15:08:36.000Zhttps://docs.langflow.org/concepts-components2026-01-28T15:08:36.000Zhttps://docs.langflow.org/concepts-file-management2026-01-28T15:08:36.000Zhttps://docs.langflow.org/concepts-flows2026-01-28T15:08:36.000Zhttps://docs.langflow.org/concepts-flows-import2026-01-28T15:08:36.000Zhttps://docs.langflow.org/concepts-overview2026-01-28T15:08:36.000Zhttps://docs.langflow.org/concepts-playground2026-01-28T15:08:36.000Zhttps://docs.langflow.org/concepts-publish2026-01-28T15:08:36.000Zhttps://docs.langflow.org/concepts-voice-mode2026-01-28T15:08:36.000Zhttps://docs.langflow.org/configuration-cli2026-01-28T15:08:36.000Zhttps://docs.langflow.org/configuration-custom-database2026-01-28T15:08:36.000Zhttps://docs.langflow.org/configuration-global-variables2026-01-28T15:08:36.000Zhttps://docs.langflow.org/contributing-bundles2026-01-28T15:08:36.000Zhttps://docs.langflow.org/contributing-community2026-01-28T15:08:36.000Zhttps://docs.langflow.org/contributing-component-tests2026-01-28T15:08:36.000Zhttps://docs.langflow.org/contributing-components2026-01-28T15:08:36.000Zhttps://docs.langflow.org/contributing-github-issues2026-01-28T15:08:36.000Zhttps://docs.langflow.org/contributing-how-to-contribute2026-01-28T15:08:36.000Zhttps://docs.langflow.org/contributing-telemetry2026-01-28T15:08:36.000Zhttps://docs.langflow.org/contributing-templates2026-01-28T15:08:36.000Zhttps://docs.langflow.org/current-date2026-01-28T15:08:36.000Zhttps://docs.langflow.org/data-operations2026-01-28T15:08:36.000Zhttps://docs.langflow.org/data-types2026-01-28T15:08:36.000Zhttps://docs.langflow.org/dataframe-operations2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-architecture2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-caddyfile2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-docker2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-gcp2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-hugging-face-spaces2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-kubernetes-dev2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-kubernetes-prod2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-nginx-ssl2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-overview2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-prod-best-practices2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-public-server2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-railway2026-01-28T15:08:36.000Zhttps://docs.langflow.org/deployment-render2026-01-28T15:08:36.000Zhttps://docs.langflow.org/develop-application2026-01-28T15:08:36.000Zhttps://docs.langflow.org/directory2026-01-28T15:08:36.000Zhttps://docs.langflow.org/dynamic-create-data2026-01-28T15:08:36.000Zhttps://docs.langflow.org/enterprise-database-guide2026-01-28T15:08:36.000Zhttps://docs.langflow.org/environment-variables2026-01-28T15:08:36.000Zhttps://docs.langflow.org/get-started-installation2026-01-28T15:08:36.000Zhttps://docs.langflow.org/get-started-quickstart2026-01-28T15:08:36.000Zhttps://docs.langflow.org/if-else2026-01-28T15:08:36.000Zhttps://docs.langflow.org/install-custom-dependencies2026-01-28T15:08:36.000Zhttps://docs.langflow.org/integrations-arize2026-01-28T15:08:36.000Zhttps://docs.langflow.org/integrations-instana-traceloop2026-01-28T15:08:36.000Zhttps://docs.langflow.org/integrations-langfuse2026-01-28T15:08:36.000Zhttps://docs.langflow.org/integrations-langsmith2026-01-28T15:08:36.000Zhttps://docs.langflow.org/integrations-langwatch2026-01-28T15:08:36.000Zhttps://docs.langflow.org/integrations-opik2026-01-28T15:08:36.000Zhttps://docs.langflow.org/legacy-core-components2026-01-28T15:08:36.000Zhttps://docs.langflow.org/llm-selector2026-01-28T15:08:36.000Zhttps://docs.langflow.org/logging2026-01-28T15:08:36.000Zhttps://docs.langflow.org/loop2026-01-28T15:08:36.000Zhttps://docs.langflow.org/luna-for-langflow2026-01-28T15:08:36.000Zhttps://docs.langflow.org/mcp-client2026-01-28T15:08:36.000Zhttps://docs.langflow.org/mcp-component-astra2026-01-28T15:08:36.000Zhttps://docs.langflow.org/mcp-server2026-01-28T15:08:36.000Zhttps://docs.langflow.org/mcp-tools2026-01-28T15:08:36.000Zhttps://docs.langflow.org/mcp-tutorial2026-01-28T15:08:36.000Zhttps://docs.langflow.org/memory2026-01-28T15:08:36.000Zhttps://docs.langflow.org/message-history2026-01-28T15:08:36.000Zhttps://docs.langflow.org/mock-data2026-01-28T15:08:36.000Zhttps://docs.langflow.org/notify-and-listen2026-01-28T15:08:36.000Zhttps://docs.langflow.org/parser2026-01-28T15:08:36.000Zhttps://docs.langflow.org/python-interpreter2026-01-28T15:08:36.000Zhttps://docs.langflow.org/read-file2026-01-28T15:08:36.000Zhttps://docs.langflow.org/release-notes2026-01-28T15:08:36.000Zhttps://docs.langflow.org/run-flow2026-01-28T15:08:36.000Zhttps://docs.langflow.org/security2026-01-28T15:08:36.000Zhttps://docs.langflow.org/session-id2026-01-28T15:08:36.000Zhttps://docs.langflow.org/smart-router2026-01-28T15:08:36.000Zhttps://docs.langflow.org/smart-transform2026-01-28T15:08:36.000Zhttps://docs.langflow.org/split-text2026-01-28T15:08:36.000Zhttps://docs.langflow.org/sql-database2026-01-28T15:08:36.000Zhttps://docs.langflow.org/structured-output2026-01-28T15:08:36.000Zhttps://docs.langflow.org/text-input-and-output2026-01-28T15:08:36.000Zhttps://docs.langflow.org/troubleshoot2026-01-28T15:08:36.000Zhttps://docs.langflow.org/type-convert2026-01-28T15:08:36.000Zhttps://docs.langflow.org/typescript-client2026-01-28T15:08:36.000Zhttps://docs.langflow.org/url2026-01-28T15:08:36.000Zhttps://docs.langflow.org/web-search2026-01-28T15:08:36.000Zhttps://docs.langflow.org/webhook2026-01-28T15:08:36.000Zhttps://docs.langflow.org/write-file2026-01-28T15:08:36.000Zhttps://docs.langflow.org/2026-01-28T15:08:36.000Z \ No newline at end of file diff --git a/smart-router.html b/smart-router.html index b1fff67072..5edecf9a9f 100644 --- a/smart-router.html +++ b/smart-router.html @@ -24,7 +24,7 @@ - + diff --git a/smart-transform.html b/smart-transform.html index 8a9fc08ebb..e96ee209cc 100644 --- a/smart-transform.html +++ b/smart-transform.html @@ -24,7 +24,7 @@ - + diff --git a/split-text.html b/split-text.html index e90a452889..30d4ce3f91 100644 --- a/split-text.html +++ b/split-text.html @@ -24,7 +24,7 @@ - + diff --git a/sql-database.html b/sql-database.html index 127f983f3c..aaa9ad9f88 100644 --- a/sql-database.html +++ b/sql-database.html @@ -24,7 +24,7 @@ - + diff --git a/structured-output.html b/structured-output.html index cb377790c1..8c2149f785 100644 --- a/structured-output.html +++ b/structured-output.html @@ -24,7 +24,7 @@ - + diff --git a/text-input-and-output.html b/text-input-and-output.html index 3538cdefee..8091f263ef 100644 --- a/text-input-and-output.html +++ b/text-input-and-output.html @@ -24,7 +24,7 @@ - + diff --git a/troubleshoot.html b/troubleshoot.html index 24f2ff71a6..92c1bc5203 100644 --- a/troubleshoot.html +++ b/troubleshoot.html @@ -24,7 +24,7 @@ - + diff --git a/type-convert.html b/type-convert.html index c55d138122..1a26400c67 100644 --- a/type-convert.html +++ b/type-convert.html @@ -24,7 +24,7 @@ - + diff --git a/typescript-client.html b/typescript-client.html index 8e0b109cdc..a8510cf29a 100644 --- a/typescript-client.html +++ b/typescript-client.html @@ -24,7 +24,7 @@ - + diff --git a/url.html b/url.html index 029ed85244..b629c0029b 100644 --- a/url.html +++ b/url.html @@ -24,7 +24,7 @@ - + diff --git a/web-search.html b/web-search.html index 4402e0995a..500fe242d1 100644 --- a/web-search.html +++ b/web-search.html @@ -24,7 +24,7 @@ - + diff --git a/webhook.html b/webhook.html index d4bf62d557..1b413e1d78 100644 --- a/webhook.html +++ b/webhook.html @@ -24,7 +24,7 @@ - + diff --git a/write-file.html b/write-file.html index d848e517cc..f4642c7b83 100644 --- a/write-file.html +++ b/write-file.html @@ -24,7 +24,7 @@ - +