From e8cbb3bf53d8b1a8479e92e996e2056b3aa6ca31 Mon Sep 17 00:00:00 2001
From: "github-merge-queue[bot]"
Date: Thu, 6 Nov 2025 15:35:17 +0000
Subject: [PATCH] deploy: 49f602637ee82cb48bcdb3f59458f7b1667c0407
---
404.html | 2 +-
agent-tutorial.html | 2 +-
agents-tools.html | 2 +-
agents.html | 2 +-
api-build.html | 2 +-
api-files.html | 2 +-
api-flows-run.html | 2 +-
api-flows.html | 2 +-
api-keys-and-authentication.html | 2 +-
api-logs.html | 2 +-
api-monitor.html | 2 +-
api-openai-responses.html | 2 +-
api-projects.html | 2 +-
api-reference-api-examples.html | 2 +-
api-users.html | 2 +-
api.html | 2 +-
api/openapi.json.html | 2 +-
api/openapi.yaml.html | 2 +-
assets/js/2b56b65e.b8b871bd.js | 1 -
assets/js/2b56b65e.ed1fe730.js | 1 +
assets/js/2fc7e024.5dcb045e.js | 1 -
assets/js/2fc7e024.eefef1c8.js | 1 +
.../js/{runtime~main.a7b4d7ca.js => runtime~main.c31169c6.js} | 2 +-
bundles-aiml.html | 2 +-
bundles-amazon.html | 2 +-
bundles-anthropic.html | 2 +-
bundles-apify.html | 2 +-
bundles-arxiv.html | 2 +-
bundles-assemblyai.html | 2 +-
bundles-azure.html | 2 +-
bundles-baidu.html | 2 +-
bundles-bing.html | 2 +-
bundles-cassandra.html | 2 +-
bundles-chroma.html | 2 +-
bundles-cleanlab.html | 2 +-
bundles-clickhouse.html | 2 +-
bundles-cloudflare.html | 2 +-
bundles-cohere.html | 2 +-
bundles-composio.html | 2 +-
bundles-couchbase.html | 2 +-
bundles-datastax.html | 2 +-
bundles-deepseek.html | 2 +-
bundles-docling.html | 2 +-
bundles-duckduckgo.html | 2 +-
bundles-elastic.html | 2 +-
bundles-exa.html | 2 +-
bundles-faiss.html | 2 +-
bundles-glean.html | 2 +-
bundles-google.html | 2 +-
bundles-groq.html | 2 +-
bundles-huggingface.html | 2 +-
bundles-ibm.html | 2 +-
bundles-icosacomputing.html | 2 +-
bundles-langchain.html | 2 +-
bundles-lmstudio.html | 2 +-
bundles-maritalk.html | 2 +-
bundles-mem0.html | 2 +-
bundles-milvus.html | 2 +-
bundles-mistralai.html | 2 +-
bundles-mongodb.html | 2 +-
bundles-notion.html | 2 +-
bundles-novita.html | 2 +-
bundles-nvidia.html | 2 +-
bundles-ollama.html | 2 +-
bundles-openai.html | 2 +-
bundles-openrouter.html | 2 +-
bundles-perplexity.html | 2 +-
bundles-pgvector.html | 2 +-
bundles-pinecone.html | 2 +-
bundles-qdrant.html | 2 +-
bundles-redis.html | 2 +-
bundles-sambanova.html | 2 +-
bundles-searchapi.html | 2 +-
bundles-serper.html | 2 +-
bundles-supabase.html | 2 +-
bundles-upstash.html | 2 +-
bundles-vectara.html | 2 +-
bundles-vertexai.html | 2 +-
bundles-weaviate.html | 2 +-
bundles-wikipedia.html | 2 +-
bundles-xai.html | 2 +-
chat-with-files.html | 4 ++--
chat-with-rag.html | 4 ++--
components-agents.html | 2 +-
components-bundle-components.html | 2 +-
components-custom-components.html | 2 +-
components-data.html | 2 +-
components-embedding-models.html | 2 +-
components-helpers.html | 2 +-
components-io.html | 2 +-
components-logic.html | 2 +-
components-models.html | 2 +-
components-processing.html | 2 +-
components-prompts.html | 2 +-
components-tools.html | 2 +-
concepts-components.html | 2 +-
concepts-file-management.html | 2 +-
concepts-flows-import.html | 2 +-
concepts-flows.html | 2 +-
concepts-overview.html | 2 +-
concepts-playground.html | 2 +-
concepts-publish.html | 2 +-
concepts-voice-mode.html | 2 +-
configuration-cli.html | 2 +-
configuration-custom-database.html | 2 +-
configuration-global-variables.html | 2 +-
contributing-bundles.html | 2 +-
contributing-community.html | 2 +-
contributing-component-tests.html | 2 +-
contributing-components.html | 2 +-
contributing-github-issues.html | 2 +-
contributing-how-to-contribute.html | 2 +-
contributing-telemetry.html | 2 +-
contributing-templates.html | 2 +-
data-types.html | 2 +-
deployment-architecture.html | 2 +-
deployment-caddyfile.html | 2 +-
deployment-docker.html | 2 +-
deployment-gcp.html | 2 +-
deployment-hugging-face-spaces.html | 2 +-
deployment-kubernetes-dev.html | 2 +-
deployment-kubernetes-prod.html | 2 +-
deployment-nginx-ssl.html | 2 +-
deployment-overview.html | 2 +-
deployment-prod-best-practices.html | 2 +-
deployment-public-server.html | 2 +-
deployment-railway.html | 2 +-
deployment-render.html | 2 +-
develop-application.html | 2 +-
enterprise-database-guide.html | 2 +-
environment-variables.html | 2 +-
get-started-installation.html | 2 +-
get-started-quickstart.html | 2 +-
index.html | 2 +-
install-custom-dependencies.html | 2 +-
integrations-arize.html | 2 +-
integrations-instana-traceloop.html | 2 +-
integrations-langfuse.html | 2 +-
integrations-langsmith.html | 2 +-
integrations-langwatch.html | 2 +-
integrations-opik.html | 2 +-
logging.html | 2 +-
luna-for-langflow.html | 2 +-
mcp-client.html | 2 +-
mcp-component-astra.html | 2 +-
mcp-server.html | 2 +-
mcp-tutorial.html | 2 +-
memory.html | 2 +-
release-notes.html | 2 +-
search.html | 2 +-
session-id.html | 2 +-
sitemap.xml | 2 +-
troubleshoot.html | 2 +-
typescript-client.html | 2 +-
webhook.html | 2 +-
155 files changed, 155 insertions(+), 155 deletions(-)
delete mode 100644 assets/js/2b56b65e.b8b871bd.js
create mode 100644 assets/js/2b56b65e.ed1fe730.js
delete mode 100644 assets/js/2fc7e024.5dcb045e.js
create mode 100644 assets/js/2fc7e024.eefef1c8.js
rename assets/js/{runtime~main.a7b4d7ca.js => runtime~main.c31169c6.js} (98%)
diff --git a/404.html b/404.html
index 2c7dec16ea..00c03e48ef 100644
--- a/404.html
+++ b/404.html
@@ -24,7 +24,7 @@
-
+
diff --git a/agent-tutorial.html b/agent-tutorial.html
index eceaaf99af..6f0873578a 100644
--- a/agent-tutorial.html
+++ b/agent-tutorial.html
@@ -24,7 +24,7 @@
-
+
diff --git a/agents-tools.html b/agents-tools.html
index cafe755945..ab6265a9f2 100644
--- a/agents-tools.html
+++ b/agents-tools.html
@@ -24,7 +24,7 @@
-
+
diff --git a/agents.html b/agents.html
index 0dead48b7b..a1625a2930 100644
--- a/agents.html
+++ b/agents.html
@@ -24,7 +24,7 @@
-
+
diff --git a/api-build.html b/api-build.html
index 193e004316..f3459fd0db 100644
--- a/api-build.html
+++ b/api-build.html
@@ -24,7 +24,7 @@
-
+
diff --git a/api-files.html b/api-files.html
index d0a5db2682..cd4ada8694 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 1d2d54019e..9ad1bcfd8c 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 84169baa0f..7bb7d0b7c5 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 3881fc2f97..606d3a8a79 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 08a5aa70a0..eabba4b0f5 100644
--- a/api-logs.html
+++ b/api-logs.html
@@ -24,7 +24,7 @@
-
+
diff --git a/api-monitor.html b/api-monitor.html
index 62a18776f1..dc8fa055c7 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 2e71b5505c..1cb84a8e16 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 f74f889d14..7dc11b0118 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 a1b3aa1d39..a640040821 100644
--- a/api-reference-api-examples.html
+++ b/api-reference-api-examples.html
@@ -24,7 +24,7 @@
-
+
diff --git a/api-users.html b/api-users.html
index 17f47d9ceb..34cdfce3ae 100644
--- a/api-users.html
+++ b/api-users.html
@@ -24,7 +24,7 @@
-
+
diff --git a/api.html b/api.html
index 8b8cdd6d4b..7c2680adf6 100644
--- a/api.html
+++ b/api.html
@@ -24,7 +24,7 @@
-
+
diff --git a/api/openapi.json.html b/api/openapi.json.html
index 16f537f1f5..32969947e4 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 362fb23b0a..43a5860830 100644
--- a/api/openapi.yaml.html
+++ b/api/openapi.yaml.html
@@ -24,7 +24,7 @@
-
+
diff --git a/assets/js/2b56b65e.b8b871bd.js b/assets/js/2b56b65e.b8b871bd.js
deleted file mode 100644
index d9657b88b3..0000000000
--- a/assets/js/2b56b65e.b8b871bd.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunklangflow_docs=self.webpackChunklangflow_docs||[]).push([[7824],{11470:(o,t,e)=>{e.d(t,{A:()=>b});var n=e(96540),s=e(18215),r=e(23104),l=e(56347),c=e(205),a=e(57485),p=e(31682),i=e(70679);function d(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 h(o){const{values:t,children:e}=o;return(0,n.useMemo)(()=>{const o=t??function(o){return d(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,p.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 u({value:o,tabValues:t}){return t.some(t=>t.value===o)}function y({queryString:o=!1,groupId:t}){const e=(0,l.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=h(o),[l,a]=(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(!u({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})),[p,d]=y({queryString:e,groupId:s}),[D,F]=function({groupId:o}){const t=function(o){return o?`docusaurus.tab.${o}`:null}(o),[e,s]=(0,i.Dv)(t);return[e,(0,n.useCallback)(o=>{t&&s.set(o)},[t,s])]}({groupId:s}),f=(()=>{const o=p??D;return u({value:o,tabValues:r})?o:null})();(0,c.A)(()=>{f&&a(f)},[f]);return{selectedValue:l,selectValue:(0,n.useCallback)(o=>{if(!u({value:o,tabValues:r}))throw new Error(`Can't select invalid tab value=${o}`);a(o),d(o),F(o)},[d,F,r]),tabValues:r}}var F=e(92303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=e(74848);function C({className:o,block:t,selectedValue:e,selectValue:n,tabValues:l}){const c=[],{blockElementScrollPositionUntilNextRender:a}=(0,r.a_)(),p=o=>{const t=o.currentTarget,s=c.indexOf(t),r=l[s].value;r!==e&&(a(t),n(r))},i=o=>{let t=null;switch(o.key){case"Enter":p(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,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":t},o),children:l.map(({value:o,label:t,attributes:n})=>(0,g.jsx)("li",{role:"tab",tabIndex:e===o?0:-1,"aria-selected":e===o,ref:o=>{c.push(o)},onKeyDown:i,onClick:p,...n,className:(0,s.A)("tabs__item",f.tabItem,n?.className,{"tabs__item--active":e===o}),children:t??o},o))})}function m({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,g.jsx)("div",{className:"margin-top--md",children:r.map((o,t)=>(0,n.cloneElement)(o,{key:t,hidden:o.props.value!==e}))})}function x(o){const t=D(o);return(0,g.jsxs)("div",{className:(0,s.A)("tabs-container",f.tabList),children:[(0,g.jsx)(C,{...t,...o}),(0,g.jsx)(m,{...t,...o})]})}function b(o){const t=(0,F.A)();return(0,g.jsx)(x,{...o,children:d(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})}},59403:(o,t,e)=>{e.d(t,{A:()=>n});const n=e.p+"assets/images/tutorial-chatbot-embed-files-6157311fb4d16e7f944d55254f0cc0e2.png"},87636:(o,t,e)=>{e.r(t),e.d(t,{CH:()=>u,assets:()=>h,chCodeConfig:()=>y,contentTitle:()=>d,default:()=>f,frontMatter:()=>i,metadata:()=>n,toc:()=>D});const n=JSON.parse('{"id":"Tutorials/chat-with-rag","title":"Create a vector RAG chatbot","description":"This tutorial demonstrates how you can use Langflow to create a chatbot application that uses Retrieval Augmented Generation (RAG) to embed your data as vectors in a vector database, and then chat with the data.","source":"@site/docs/Tutorials/chat-with-rag.mdx","sourceDirName":"Tutorials","slug":"/chat-with-rag","permalink":"/chat-with-rag","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Create a vector RAG chatbot","slug":"/chat-with-rag"},"sidebar":"docs","previous":{"title":"Quickstart","permalink":"/get-started-quickstart"},"next":{"title":"Create a chatbot that can ingest files","permalink":"/chat-with-files"}}');var s=e(74848),r=e(28453),l=e(24754),c=e(40619),a=e(11470),p=e(19365);const i={title:"Create a vector RAG chatbot",slug:"/chat-with-rag"},d=void 0,h={},u={annotations:l.hk,Code:l.Cy},y={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},D=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Create a vector RAG flow",id:"create-a-vector-rag-flow",level:2},{value:"Load data and generate embeddings",id:"load-data-and-generate-embeddings",level:2},{value:"Chat with your flow from a JavaScript application",id:"chat-with-your-flow-from-a-javascript-application",level:2},{value:"Next steps",id:"next-steps",level:2}];function F(o){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...o.components},{Details:n}=t;return u||g("CH",!1),u.Code||g("CH.Code",!0),n||g("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:"This tutorial demonstrates how you can use Langflow to create a chatbot application that uses Retrieval Augmented Generation (RAG) to embed your data as vectors in a vector database, and then chat with the data."}),"\n",(0,s.jsx)(t.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/get-started-installation",children:"Install and start Langflow"})}),"\n",(0,s.jsxs)(t.li,{children:["Create a ",(0,s.jsx)(t.a,{href:"/api-keys-and-authentication",children:"Langflow API key"})]}),"\n",(0,s.jsxs)(t.li,{children:["Create an ",(0,s.jsx)(t.a,{href:"https://platform.openai.com/api-keys",children:"OpenAI API key"})]}),"\n",(0,s.jsxs)(t.li,{children:["Install the ",(0,s.jsx)(t.a,{href:"/typescript-client",children:"Langflow JavaScript client"})]}),"\n",(0,s.jsx)(t.li,{children:"Be familiar with vector search concepts and applications, such as vector databases and RAG"}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"create-a-vector-rag-flow",children:"Create a vector RAG flow"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["In Langflow, click ",(0,s.jsx)(t.strong,{children:"New Flow"}),", and then select the ",(0,s.jsx)(t.strong,{children:"Vector Store RAG"})," template."]}),"\n",(0,s.jsxs)(n,{children:[(0,s.jsx)("summary",{children:"About the Vector Store RAG template"}),(0,s.jsx)(t.p,{children:"This template has two flows."}),(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Load Data Flow"})," populates a vector store with data from a file.\nThis data is used to respond to queries submitted to the ",(0,s.jsx)(t.strong,{children:"Retriever Flow"}),"."]}),(0,s.jsxs)(t.p,{children:["Specifically, the ",(0,s.jsx)(t.strong,{children:"Load Data Flow"})," ingests data from a local file, splits the data into chunks, loads and indexes the data in your vector database, and then computes embeddings for the chunks. The embeddings are also stored with the loaded data. This flow only needs to run when you need to load data into your vector database."]}),(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Retriever Flow"})," receives chat input, generates an embedding for the input, and then uses several components to reconstruct chunks into text and generate a response by comparing the new embedding to the stored embeddings to find similar data."]})]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Add your ",(0,s.jsx)(t.strong,{children:"OpenAI"})," API key to both ",(0,s.jsx)(t.strong,{children:"OpenAI Embeddings"})," components."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Optional: Replace both ",(0,s.jsx)(t.strong,{children:"Astra DB"})," vector store components with a ",(0,s.jsx)(t.strong,{children:"Chroma DB"})," or another vector store component of your choice.\nThis tutorial uses Chroma DB."]}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Load Data Flow"})," should have ",(0,s.jsx)(t.strong,{children:"File"}),", ",(0,s.jsx)(t.strong,{children:"Split Text"}),", ",(0,s.jsx)(t.strong,{children:"Embedding Model"}),", vector store (such as ",(0,s.jsx)(t.strong,{children:"Chroma DB"}),"), and ",(0,s.jsx)(t.strong,{children:"Chat Output"})," components:"]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"File loader chat flow",src:e(59403).A+"",width:"4000",height:"2512"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Retriever Flow"})," should have ",(0,s.jsx)(t.strong,{children:"Chat Input"}),", ",(0,s.jsx)(t.strong,{children:"Embedding Model"}),", vector store, ",(0,s.jsx)(t.strong,{children:"Parser"}),", ",(0,s.jsx)(t.strong,{children:"Prompt"}),", ",(0,s.jsx)(t.strong,{children:"Language Model"}),", and ",(0,s.jsx)(t.strong,{children:"Chat Output"})," components:"]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"Chat with RAG flow",src:e(96973).A+"",width:"4000",height:"1324"})}),"\n",(0,s.jsx)(t.p,{children:"The flows are ready to use.\nContinue the tutorial to learn how to use the loading flow to load data into your vector store, and then call the chat flow in a chatbot application."}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"load-data-and-generate-embeddings",children:"Load data and generate embeddings"}),"\n",(0,s.jsxs)(t.p,{children:["To load data and generate embeddings, you can use the visual editor or the ",(0,s.jsx)(t.code,{children:"/v2/files"})," endpoint."]}),"\n",(0,s.jsx)(t.p,{children:"The visual editor option is simpler, but it is only recommended for scenarios where the user who created the flow is the same user who loads data into the database."}),"\n",(0,s.jsx)(t.p,{children:"In situations where many users load data or you need to load data programmatically, use the Langflow API option."}),"\n",(0,s.jsxs)(a.A,{children:[(0,s.jsx)(p.A,{value:"visual",label:"Visual editor",default:!0,children:(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["In your RAG chatbot flow, click the ",(0,s.jsx)(t.strong,{children:"File"})," component, and then click ",(0,s.jsx)(t.strong,{children:"File"}),"."]}),"\n",(0,s.jsxs)(t.li,{children:["Select the local file you want to upload, and then click ",(0,s.jsx)(t.strong,{children:"Open"}),".\nThe file is loaded to your Langflow server."]}),"\n",(0,s.jsxs)(t.li,{children:["To load the data into your vector database, click the vector store component, and then click ",(0,s.jsx)(c.A,{name:"Play","aria-hidden":"true"})," ",(0,s.jsx)(t.strong,{children:"Run component"})," to run the selected component and all prior dependent components."]}),"\n"]})}),(0,s.jsxs)(p.A,{value:"API",label:"Langflow API",children:[(0,s.jsxs)(t.p,{children:["To load data programmatically, use the ",(0,s.jsx)(t.code,{children:"/v2/files/"})," and ",(0,s.jsx)(t.code,{children:"/v1/run/$FLOW_ID"})," endpoints. The first endpoint loads a file to your Langflow server, and then returns an uploaded file path. The second endpoint runs the ",(0,s.jsx)(t.strong,{children:"Load Data Flow"}),", referencing the uploaded file path, to chunk, embed, and load the data into the vector store."]}),(0,s.jsxs)(t.p,{children:["The following script demonstrates this process.\nFor help with creating this script, use the ",(0,s.jsx)(t.a,{href:"https://langflow-file-upload-examples.onrender.com/",children:"Langflow File Upload Utility"}),"."]}),(0,s.jsx)(u.Code,{codeConfig:y,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// Node 18+ example using global fetch, FormData, and Blob",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" fs ",props:{style:{color:"#C9D1D9"}}},{content:"from ",props:{style:{color:"#FF7B72"}}},{content:"'fs/promises'",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"// 1. Prepare the form data with the file to upload",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"fileBuffer ",props:{style:{color:"#79C0FF"}}},{content:"= await",props:{style:{color:"#FF7B72"}}},{content:" fs.",props:{style:{color:"#C9D1D9"}}},{content:"readFile",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'FILE_NAME'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"data ",props:{style:{color:"#79C0FF"}}},{content:"= new ",props:{style:{color:"#FF7B72"}}},{content:"FormData",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"data.",props:{style:{color:"#C9D1D9"}}},{content:"append",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'file'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"new ",props:{style:{color:"#FF7B72"}}},{content:"Blob",props:{style:{color:"#D2A8FF"}}},{content:"([fileBuffer]), ",props:{style:{color:"#C9D1D9"}}},{content:"'FILE_NAME'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"headers ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" { ",props:{style:{color:"#C9D1D9"}}},{content:"'x-api-key'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_API_KEY'",props:{style:{color:"#A5D6FF"}}},{content:" };",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"// 2. Upload the file to Langflow",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"uploadRes ",props:{style:{color:"#79C0FF"}}},{content:"= await ",props:{style:{color:"#FF7B72"}}},{content:"fetch",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_SERVER_ADDRESS/api/v2/files/'",props:{style:{color:"#A5D6FF"}}},{content:", {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method: ",props:{style:{color:"#C9D1D9"}}},{content:"'POST'",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" headers,",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" body: data",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"});",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"uploadData ",props:{style:{color:"#79C0FF"}}},{content:"= await",props:{style:{color:"#FF7B72"}}},{content:" uploadRes.",props:{style:{color:"#C9D1D9"}}},{content:"json",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"uploadedPath ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" uploadData.path;",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"// 3. Call the Langflow run endpoint with the uploaded file path",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"payload ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" input_value: ",props:{style:{color:"#C9D1D9"}}},{content:'"Analyze this file"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" output_type: ",props:{style:{color:"#C9D1D9"}}},{content:'"chat"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" input_type: ",props:{style:{color:"#C9D1D9"}}},{content:'"text"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" tweaks: {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'FILE_COMPONENT_NAME'",props:{style:{color:"#A5D6FF"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" path: uploadedPath",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"};",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"runRes ",props:{style:{color:"#79C0FF"}}},{content:"= await ",props:{style:{color:"#FF7B72"}}},{content:"fetch",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID'",props:{style:{color:"#A5D6FF"}}},{content:", {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method: ",props:{style:{color:"#C9D1D9"}}},{content:"'POST'",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" headers: { ",props:{style:{color:"#C9D1D9"}}},{content:"'Content-Type'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'application/json'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"'x-api-key'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_API_KEY'",props:{style:{color:"#A5D6FF"}}},{content:" },",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" body: ",props:{style:{color:"#C9D1D9"}}},{content:"JSON",props:{style:{color:"#79C0FF"}}},{content:".",props:{style:{color:"#C9D1D9"}}},{content:"stringify",props:{style:{color:"#D2A8FF"}}},{content:"(payload)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"});",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"langflowData ",props:{style:{color:"#79C0FF"}}},{content:"= await",props:{style:{color:"#FF7B72"}}},{content:" runRes.",props:{style:{color:"#C9D1D9"}}},{content:"json",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"// Output only the message",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"console.",props:{style:{color:"#C9D1D9"}}},{content:"log",props:{style:{color:"#D2A8FF"}}},{content:"(langflowData.outputs?.[",props:{style:{color:"#C9D1D9"}}},{content:"0",props:{style:{color:"#79C0FF"}}},{content:"]?.outputs?.[",props:{style:{color:"#C9D1D9"}}},{content:"0",props:{style:{color:"#79C0FF"}}},{content:"]?.results?.message?.data?.text);",props:{style:{color:"#C9D1D9"}}}]}],lang:"js"},annotations:[]}]})]})]}),"\n",(0,s.jsx)(t.p,{children:"When the flow runs, the flow ingests the selected file, chunks the data, loads the data into the vector store database, and then generates embeddings for the chunks, which are also stored in the vector store."}),"\n",(0,s.jsx)(t.p,{children:"Your database now contains data with vector embeddings that an LLM can use as context to respond to queries, as demonstrated in the next section of the tutorial."}),"\n",(0,s.jsx)(t.h2,{id:"chat-with-your-flow-from-a-javascript-application",children:"Chat with your flow from a JavaScript application"}),"\n",(0,s.jsxs)(t.p,{children:["To chat with the data in your vector database, create a chatbot application that runs the ",(0,s.jsx)(t.strong,{children:"Retriever Flow"})," programmatically."]}),"\n",(0,s.jsx)(t.p,{children:"This tutorial uses JavaScript for demonstration purposes."}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:"To construct the chatbot, gather the following information:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"LANGFLOW_SERVER_ADDRESS"}),": Your Langflow server's domain. The default value is ",(0,s.jsx)(t.code,{children:"127.0.0.1:7860"}),". You can get this value from the code snippets on your flow's ",(0,s.jsxs)(t.a,{href:"/concepts-publish#api-access",children:[(0,s.jsx)(t.strong,{children:"API access"})," pane"]}),"."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"FLOW_ID"}),": Your flow's UUID or custom endpoint name. You can get this value from the code snippets on your flow's ",(0,s.jsxs)(t.a,{href:"/concepts-publish#api-access",children:[(0,s.jsx)(t.strong,{children:"API access"})," pane"]}),"."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"LANGFLOW_API_KEY"}),": A valid ",(0,s.jsx)(t.a,{href:"/api-keys-and-authentication",children:"Langflow API key"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:"Copy the following script into a JavaScript file, and then replace the placeholders with the information you gathered in the previous step:"}),"\n",(0,s.jsx)(u.Code,{codeConfig:y,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"readline ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"require",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'readline'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const",props:{style:{color:"#FF7B72"}}},{content:" { ",props:{style:{color:"#C9D1D9"}}},{content:"LangflowClient",props:{style:{color:"#79C0FF"}}},{content:" } ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"require",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'@datastax/langflow-client'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"API_KEY ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"'LANGFLOW_API_KEY'",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"SERVER ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"'LANGFLOW_SERVER_ADDRESS'",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"FLOW_ID ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"'FLOW_ID'",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"rl ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" readline.",props:{style:{color:"#C9D1D9"}}},{content:"createInterface",props:{style:{color:"#D2A8FF"}}},{content:"({ input: process.stdin, output: process.stdout });",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"// Initialize the Langflow client",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"client ",props:{style:{color:"#79C0FF"}}},{content:"= new ",props:{style:{color:"#FF7B72"}}},{content:"LangflowClient",props:{style:{color:"#D2A8FF"}}},{content:"({",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" baseUrl: ",props:{style:{color:"#C9D1D9"}}},{content:"SERVER",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" apiKey: ",props:{style:{color:"#C9D1D9"}}},{content:"API_KEY",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"});",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"async function ",props:{style:{color:"#FF7B72"}}},{content:"sendMessage",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"message",props:{style:{color:"#FFA657"}}},{content:") {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" try",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" const ",props:{style:{color:"#FF7B72"}}},{content:"response ",props:{style:{color:"#79C0FF"}}},{content:"= await",props:{style:{color:"#FF7B72"}}},{content:" client.",props:{style:{color:"#C9D1D9"}}},{content:"flow",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"FLOW_ID",props:{style:{color:"#79C0FF"}}},{content:").",props:{style:{color:"#C9D1D9"}}},{content:"run",props:{style:{color:"#D2A8FF"}}},{content:"(message, {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" session_id: ",props:{style:{color:"#C9D1D9"}}},{content:"'user_1'",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" });",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" // Use the convenience method to get the chat output text",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" response.",props:{style:{color:"#C9D1D9"}}},{content:"chatOutputText",props:{style:{color:"#D2A8FF"}}},{content:"() ",props:{style:{color:"#C9D1D9"}}},{content:"|| ",props:{style:{color:"#FF7B72"}}},{content:"'No response'",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" } ",props:{style:{color:"#C9D1D9"}}},{content:"catch",props:{style:{color:"#FF7B72"}}},{content:" (error) {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return ",props:{style:{color:"#FF7B72"}}},{content:"`Error: ${",props:{style:{color:"#A5D6FF"}}},{content:"error",props:{style:{color:"#C9D1D9"}}},{content:".",props:{style:{color:"#A5D6FF"}}},{content:"message",props:{style:{color:"#C9D1D9"}}},{content:"}`",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"function ",props:{style:{color:"#FF7B72"}}},{content:"chat",props:{style:{color:"#D2A8FF"}}},{content:"() {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" console.",props:{style:{color:"#C9D1D9"}}},{content:"log",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:'\'\ud83e\udd16 Langflow RAG Chatbot (type "quit" to exit)',props:{style:{color:"#A5D6FF"}}},{content:"\\n",props:{style:{color:"#79C0FF"}}},{content:"'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" const ",props:{style:{color:"#FF7B72"}}},{content:"ask ",props:{style:{color:"#D2A8FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" () ",props:{style:{color:"#C9D1D9"}}},{content:"=>",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" rl.",props:{style:{color:"#C9D1D9"}}},{content:"question",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'\ud83d\udc64 You: '",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"async",props:{style:{color:"#FF7B72"}}},{content:" (",props:{style:{color:"#C9D1D9"}}},{content:"input",props:{style:{color:"#FFA657"}}},{content:") ",props:{style:{color:"#C9D1D9"}}},{content:"=>",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" if",props:{style:{color:"#FF7B72"}}},{content:" ([",props:{style:{color:"#C9D1D9"}}},{content:"'quit'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"'exit'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"'bye'",props:{style:{color:"#A5D6FF"}}},{content:"].",props:{style:{color:"#C9D1D9"}}},{content:"includes",props:{style:{color:"#D2A8FF"}}},{content:"(input.",props:{style:{color:"#C9D1D9"}}},{content:"trim",props:{style:{color:"#D2A8FF"}}},{content:"().",props:{style:{color:"#C9D1D9"}}},{content:"toLowerCase",props:{style:{color:"#D2A8FF"}}},{content:"())) {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" console.",props:{style:{color:"#C9D1D9"}}},{content:"log",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'\ud83d\udc4b Goodbye!'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" rl.",props:{style:{color:"#C9D1D9"}}},{content:"close",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" const ",props:{style:{color:"#FF7B72"}}},{content:"response ",props:{style:{color:"#79C0FF"}}},{content:"= await ",props:{style:{color:"#FF7B72"}}},{content:"sendMessage",props:{style:{color:"#D2A8FF"}}},{content:"(input.",props:{style:{color:"#C9D1D9"}}},{content:"trim",props:{style:{color:"#D2A8FF"}}},{content:"());",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" console.",props:{style:{color:"#C9D1D9"}}},{content:"log",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"`\ud83e\udd16 Assistant: ${",props:{style:{color:"#A5D6FF"}}},{content:"response",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#A5D6FF"}}},{content:"\\n",props:{style:{color:"#79C0FF"}}},{content:"`",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ask",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" });",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" };",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ask",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"chat",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["The script creates a Node application that chats with the content in your vector database, using the ",(0,s.jsx)(t.code,{children:"chat"})," input and output types to communicate with your flow.\nChat maintains ongoing conversation context across multiple messages. If you used ",(0,s.jsx)(t.code,{children:"text"})," type inputs and outputs, each request is a standalone text string."]}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.a,{href:"/typescript-client",children:"Langflow TypeScript client"})," has a ",(0,s.jsx)(t.code,{children:"chatOutputText()"})," convenience method that simplifies working with Langflow's complex JSON response structure.\nInstead of manually navigating through multiple levels of nested objects with ",(0,s.jsx)(t.code,{children:"data.outputs[0].outputs[0].results.message.data.text"}),", the client automatically extracts the message text and handles potentially undefined values gracefully."]})}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:"Save and run the script to send the requests and test the flow."}),"\n",(0,s.jsxs)(n,{children:[(0,s.jsx)("summary",{children:"Result"}),(0,s.jsx)(t.p,{children:"The following is an example response from this tutorial's flow. Due to the nature of LLMs and variations in your inputs, your response might be different."}),(0,s.jsx)(u.Code,{codeConfig:y,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"\ud83d\udc64 You: Do you have any documents about engines?",props:{}}]},{tokens:[{content:"\ud83e\udd16 Assistant: Yes, the provided text contains several warnings and guidelines related to engine installation, maintenance, and selection. It emphasizes the importance of using the correct engine for specific applications, ensuring all components are in good condition, and following safety precautions to prevent fire or explosion. If you need more specific information or details, please let me know!",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"\ud83d\udc64 You: It should be about a Briggs and Stratton engine.",props:{}}]},{tokens:[{content:"\ud83e\udd16 Assistant: The text provides important safety and installation guidelines for Briggs & Stratton engines. It emphasizes that these engines should not be used on 3-wheel All-Terrain Vehicles (ATVs), motor bikes, aircraft products, or vehicles intended for competitive events, as such uses are not approved by Briggs & Stratton.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"If you have any specific questions about Briggs & Stratton engines or need further information, feel free to ask!",props:{}}]}],lang:"text"},annotations:[]}]})]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"next-steps",children:"Next steps"}),"\n",(0,s.jsx)(t.p,{children:"For more information on building or extending this tutorial, see the following:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/mcp-server",children:"Model Context Protocol (MCP) servers"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/deployment-overview",children:"Langflow deployment overview"})}),"\n"]})]})}function f(o={}){const{wrapper:t}={...(0,r.R)(),...o.components};return t?(0,s.jsx)(t,{...o,children:(0,s.jsx)(F,{...o})}):F(o)}function g(o,t){throw new Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}},96973:(o,t,e)=>{e.d(t,{A:()=>n});const n=e.p+"assets/images/tutorial-chatbot-chat-flow-af7257d77ff0259ab1a0980641d464ce.png"}}]);
\ No newline at end of file
diff --git a/assets/js/2b56b65e.ed1fe730.js b/assets/js/2b56b65e.ed1fe730.js
new file mode 100644
index 0000000000..f0e3388af2
--- /dev/null
+++ b/assets/js/2b56b65e.ed1fe730.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunklangflow_docs=self.webpackChunklangflow_docs||[]).push([[7824],{11470:(o,t,e)=>{e.d(t,{A:()=>b});var n=e(96540),s=e(18215),r=e(23104),l=e(56347),c=e(205),a=e(57485),p=e(31682),i=e(70679);function d(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 h(o){const{values:t,children:e}=o;return(0,n.useMemo)(()=>{const o=t??function(o){return d(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,p.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 u({value:o,tabValues:t}){return t.some(t=>t.value===o)}function y({queryString:o=!1,groupId:t}){const e=(0,l.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=h(o),[l,a]=(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(!u({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})),[p,d]=y({queryString:e,groupId:s}),[D,F]=function({groupId:o}){const t=function(o){return o?`docusaurus.tab.${o}`:null}(o),[e,s]=(0,i.Dv)(t);return[e,(0,n.useCallback)(o=>{t&&s.set(o)},[t,s])]}({groupId:s}),f=(()=>{const o=p??D;return u({value:o,tabValues:r})?o:null})();(0,c.A)(()=>{f&&a(f)},[f]);return{selectedValue:l,selectValue:(0,n.useCallback)(o=>{if(!u({value:o,tabValues:r}))throw new Error(`Can't select invalid tab value=${o}`);a(o),d(o),F(o)},[d,F,r]),tabValues:r}}var F=e(92303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=e(74848);function C({className:o,block:t,selectedValue:e,selectValue:n,tabValues:l}){const c=[],{blockElementScrollPositionUntilNextRender:a}=(0,r.a_)(),p=o=>{const t=o.currentTarget,s=c.indexOf(t),r=l[s].value;r!==e&&(a(t),n(r))},i=o=>{let t=null;switch(o.key){case"Enter":p(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,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":t},o),children:l.map(({value:o,label:t,attributes:n})=>(0,g.jsx)("li",{role:"tab",tabIndex:e===o?0:-1,"aria-selected":e===o,ref:o=>{c.push(o)},onKeyDown:i,onClick:p,...n,className:(0,s.A)("tabs__item",f.tabItem,n?.className,{"tabs__item--active":e===o}),children:t??o},o))})}function m({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,g.jsx)("div",{className:"margin-top--md",children:r.map((o,t)=>(0,n.cloneElement)(o,{key:t,hidden:o.props.value!==e}))})}function x(o){const t=D(o);return(0,g.jsxs)("div",{className:(0,s.A)("tabs-container",f.tabList),children:[(0,g.jsx)(C,{...t,...o}),(0,g.jsx)(m,{...t,...o})]})}function b(o){const t=(0,F.A)();return(0,g.jsx)(x,{...o,children:d(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})}},59403:(o,t,e)=>{e.d(t,{A:()=>n});const n=e.p+"assets/images/tutorial-chatbot-embed-files-6157311fb4d16e7f944d55254f0cc0e2.png"},87636:(o,t,e)=>{e.r(t),e.d(t,{CH:()=>u,assets:()=>h,chCodeConfig:()=>y,contentTitle:()=>d,default:()=>f,frontMatter:()=>i,metadata:()=>n,toc:()=>D});const n=JSON.parse('{"id":"Tutorials/chat-with-rag","title":"Create a vector RAG chatbot","description":"This tutorial demonstrates how you can use Langflow to create a chatbot application that uses Retrieval Augmented Generation (RAG) to embed your data as vectors in a vector database, and then chat with the data.","source":"@site/docs/Tutorials/chat-with-rag.mdx","sourceDirName":"Tutorials","slug":"/chat-with-rag","permalink":"/chat-with-rag","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Create a vector RAG chatbot","slug":"/chat-with-rag"},"sidebar":"docs","previous":{"title":"Quickstart","permalink":"/get-started-quickstart"},"next":{"title":"Create a chatbot that can ingest files","permalink":"/chat-with-files"}}');var s=e(74848),r=e(28453),l=e(24754),c=e(40619),a=e(11470),p=e(19365);const i={title:"Create a vector RAG chatbot",slug:"/chat-with-rag"},d=void 0,h={},u={annotations:l.hk,Code:l.Cy},y={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},D=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Create a vector RAG flow",id:"create-a-vector-rag-flow",level:2},{value:"Load data and generate embeddings",id:"load-data-and-generate-embeddings",level:2},{value:"Chat with your flow from a JavaScript application",id:"chat-with-your-flow-from-a-javascript-application",level:2},{value:"Next steps",id:"next-steps",level:2}];function F(o){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...o.components},{Details:n}=t;return u||g("CH",!1),u.Code||g("CH.Code",!0),n||g("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:"This tutorial demonstrates how you can use Langflow to create a chatbot application that uses Retrieval Augmented Generation (RAG) to embed your data as vectors in a vector database, and then chat with the data."}),"\n",(0,s.jsx)(t.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/get-started-installation",children:"Install and start Langflow"})}),"\n",(0,s.jsxs)(t.li,{children:["Create a ",(0,s.jsx)(t.a,{href:"/api-keys-and-authentication",children:"Langflow API key"})]}),"\n",(0,s.jsxs)(t.li,{children:["Create an ",(0,s.jsx)(t.a,{href:"https://platform.openai.com/api-keys",children:"OpenAI API key"})]}),"\n",(0,s.jsxs)(t.li,{children:["Install the ",(0,s.jsx)(t.a,{href:"/typescript-client",children:"Langflow JavaScript client"})]}),"\n",(0,s.jsx)(t.li,{children:"Be familiar with vector search concepts and applications, such as vector databases and RAG"}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"create-a-vector-rag-flow",children:"Create a vector RAG flow"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["In Langflow, click ",(0,s.jsx)(t.strong,{children:"New Flow"}),", and then select the ",(0,s.jsx)(t.strong,{children:"Vector Store RAG"})," template."]}),"\n",(0,s.jsxs)(n,{children:[(0,s.jsx)("summary",{children:"About the Vector Store RAG template"}),(0,s.jsx)(t.p,{children:"This template has two flows."}),(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Load Data Flow"})," populates a vector store with data from a file.\nThis data is used to respond to queries submitted to the ",(0,s.jsx)(t.strong,{children:"Retriever Flow"}),"."]}),(0,s.jsxs)(t.p,{children:["Specifically, the ",(0,s.jsx)(t.strong,{children:"Load Data Flow"})," ingests data from a local file, splits the data into chunks, loads and indexes the data in your vector database, and then computes embeddings for the chunks. The embeddings are also stored with the loaded data. This flow only needs to run when you need to load data into your vector database."]}),(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Retriever Flow"})," receives chat input, generates an embedding for the input, and then uses several components to reconstruct chunks into text and generate a response by comparing the new embedding to the stored embeddings to find similar data."]})]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Add your ",(0,s.jsx)(t.strong,{children:"OpenAI"})," API key to both ",(0,s.jsx)(t.strong,{children:"OpenAI Embeddings"})," components."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Optional: Replace both ",(0,s.jsx)(t.strong,{children:"Astra DB"})," vector store components with a ",(0,s.jsx)(t.strong,{children:"Chroma DB"})," or another vector store component of your choice.\nThis tutorial uses Chroma DB."]}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Load Data Flow"})," should have ",(0,s.jsx)(t.strong,{children:"File"}),", ",(0,s.jsx)(t.strong,{children:"Split Text"}),", ",(0,s.jsx)(t.strong,{children:"Embedding Model"}),", vector store (such as ",(0,s.jsx)(t.strong,{children:"Chroma DB"}),"), and ",(0,s.jsx)(t.strong,{children:"Chat Output"})," components:"]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"File loader chat flow",src:e(59403).A+"",width:"4000",height:"2512"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.strong,{children:"Retriever Flow"})," should have ",(0,s.jsx)(t.strong,{children:"Chat Input"}),", ",(0,s.jsx)(t.strong,{children:"Embedding Model"}),", vector store, ",(0,s.jsx)(t.strong,{children:"Parser"}),", ",(0,s.jsx)(t.strong,{children:"Prompt"}),", ",(0,s.jsx)(t.strong,{children:"Language Model"}),", and ",(0,s.jsx)(t.strong,{children:"Chat Output"})," components:"]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"Chat with RAG flow",src:e(96973).A+"",width:"4000",height:"1324"})}),"\n",(0,s.jsx)(t.p,{children:"The flows are ready to use.\nContinue the tutorial to learn how to use the loading flow to load data into your vector store, and then call the chat flow in a chatbot application."}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"load-data-and-generate-embeddings",children:"Load data and generate embeddings"}),"\n",(0,s.jsxs)(t.p,{children:["To load data and generate embeddings, you can use the visual editor or the ",(0,s.jsx)(t.code,{children:"/v2/files"})," endpoint."]}),"\n",(0,s.jsx)(t.p,{children:"The visual editor option is simpler, but it is only recommended for scenarios where the user who created the flow is the same user who loads data into the database."}),"\n",(0,s.jsx)(t.p,{children:"In situations where many users load data or you need to load data programmatically, use the Langflow API option."}),"\n",(0,s.jsxs)(a.A,{children:[(0,s.jsx)(p.A,{value:"visual",label:"Visual editor",default:!0,children:(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["In your RAG chatbot flow, click the ",(0,s.jsx)(t.strong,{children:"File"})," component, and then click ",(0,s.jsx)(t.strong,{children:"File"}),"."]}),"\n",(0,s.jsxs)(t.li,{children:["Select the local file you want to upload, and then click ",(0,s.jsx)(t.strong,{children:"Open"}),".\nThe file is loaded to your Langflow server."]}),"\n",(0,s.jsxs)(t.li,{children:["To load the data into your vector database, click the vector store component, and then click ",(0,s.jsx)(c.A,{name:"Play","aria-hidden":"true"})," ",(0,s.jsx)(t.strong,{children:"Run component"})," to run the selected component and all prior dependent components."]}),"\n"]})}),(0,s.jsxs)(p.A,{value:"API",label:"Langflow API",children:[(0,s.jsxs)(t.p,{children:["To load data programmatically, use the ",(0,s.jsx)(t.code,{children:"/v2/files/"})," and ",(0,s.jsx)(t.code,{children:"/v1/run/$FLOW_ID"})," endpoints. The first endpoint loads a file to your Langflow server, and then returns an uploaded file path. The second endpoint runs the ",(0,s.jsx)(t.strong,{children:"Load Data Flow"}),", referencing the uploaded file path, to chunk, embed, and load the data into the vector store."]}),(0,s.jsxs)(t.p,{children:["The following script demonstrates this process.\nFor help with creating this script, use the ",(0,s.jsx)(t.a,{href:"https://langflow-file-upload-examples.21cgwws14kdz.us-east.codeengine.appdomain.cloud/",children:"Langflow File Upload Utility"}),"."]}),(0,s.jsx)(u.Code,{codeConfig:y,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// Node 18+ example using global fetch, FormData, and Blob",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" fs ",props:{style:{color:"#C9D1D9"}}},{content:"from ",props:{style:{color:"#FF7B72"}}},{content:"'fs/promises'",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"// 1. Prepare the form data with the file to upload",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"fileBuffer ",props:{style:{color:"#79C0FF"}}},{content:"= await",props:{style:{color:"#FF7B72"}}},{content:" fs.",props:{style:{color:"#C9D1D9"}}},{content:"readFile",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'FILE_NAME'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"data ",props:{style:{color:"#79C0FF"}}},{content:"= new ",props:{style:{color:"#FF7B72"}}},{content:"FormData",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"data.",props:{style:{color:"#C9D1D9"}}},{content:"append",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'file'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"new ",props:{style:{color:"#FF7B72"}}},{content:"Blob",props:{style:{color:"#D2A8FF"}}},{content:"([fileBuffer]), ",props:{style:{color:"#C9D1D9"}}},{content:"'FILE_NAME'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"headers ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" { ",props:{style:{color:"#C9D1D9"}}},{content:"'x-api-key'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_API_KEY'",props:{style:{color:"#A5D6FF"}}},{content:" };",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"// 2. Upload the file to Langflow",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"uploadRes ",props:{style:{color:"#79C0FF"}}},{content:"= await ",props:{style:{color:"#FF7B72"}}},{content:"fetch",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_SERVER_ADDRESS/api/v2/files/'",props:{style:{color:"#A5D6FF"}}},{content:", {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method: ",props:{style:{color:"#C9D1D9"}}},{content:"'POST'",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" headers,",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" body: data",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"});",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"uploadData ",props:{style:{color:"#79C0FF"}}},{content:"= await",props:{style:{color:"#FF7B72"}}},{content:" uploadRes.",props:{style:{color:"#C9D1D9"}}},{content:"json",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"uploadedPath ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" uploadData.path;",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"// 3. Call the Langflow run endpoint with the uploaded file path",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"payload ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" input_value: ",props:{style:{color:"#C9D1D9"}}},{content:'"Analyze this file"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" output_type: ",props:{style:{color:"#C9D1D9"}}},{content:'"chat"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" input_type: ",props:{style:{color:"#C9D1D9"}}},{content:'"text"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" tweaks: {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'FILE_COMPONENT_NAME'",props:{style:{color:"#A5D6FF"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" path: uploadedPath",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"};",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"runRes ",props:{style:{color:"#79C0FF"}}},{content:"= await ",props:{style:{color:"#FF7B72"}}},{content:"fetch",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID'",props:{style:{color:"#A5D6FF"}}},{content:", {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" method: ",props:{style:{color:"#C9D1D9"}}},{content:"'POST'",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" headers: { ",props:{style:{color:"#C9D1D9"}}},{content:"'Content-Type'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'application/json'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"'x-api-key'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_API_KEY'",props:{style:{color:"#A5D6FF"}}},{content:" },",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" body: ",props:{style:{color:"#C9D1D9"}}},{content:"JSON",props:{style:{color:"#79C0FF"}}},{content:".",props:{style:{color:"#C9D1D9"}}},{content:"stringify",props:{style:{color:"#D2A8FF"}}},{content:"(payload)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"});",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"langflowData ",props:{style:{color:"#79C0FF"}}},{content:"= await",props:{style:{color:"#FF7B72"}}},{content:" runRes.",props:{style:{color:"#C9D1D9"}}},{content:"json",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"// Output only the message",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"console.",props:{style:{color:"#C9D1D9"}}},{content:"log",props:{style:{color:"#D2A8FF"}}},{content:"(langflowData.outputs?.[",props:{style:{color:"#C9D1D9"}}},{content:"0",props:{style:{color:"#79C0FF"}}},{content:"]?.outputs?.[",props:{style:{color:"#C9D1D9"}}},{content:"0",props:{style:{color:"#79C0FF"}}},{content:"]?.results?.message?.data?.text);",props:{style:{color:"#C9D1D9"}}}]}],lang:"js"},annotations:[]}]})]})]}),"\n",(0,s.jsx)(t.p,{children:"When the flow runs, the flow ingests the selected file, chunks the data, loads the data into the vector store database, and then generates embeddings for the chunks, which are also stored in the vector store."}),"\n",(0,s.jsx)(t.p,{children:"Your database now contains data with vector embeddings that an LLM can use as context to respond to queries, as demonstrated in the next section of the tutorial."}),"\n",(0,s.jsx)(t.h2,{id:"chat-with-your-flow-from-a-javascript-application",children:"Chat with your flow from a JavaScript application"}),"\n",(0,s.jsxs)(t.p,{children:["To chat with the data in your vector database, create a chatbot application that runs the ",(0,s.jsx)(t.strong,{children:"Retriever Flow"})," programmatically."]}),"\n",(0,s.jsx)(t.p,{children:"This tutorial uses JavaScript for demonstration purposes."}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:"To construct the chatbot, gather the following information:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"LANGFLOW_SERVER_ADDRESS"}),": Your Langflow server's domain. The default value is ",(0,s.jsx)(t.code,{children:"127.0.0.1:7860"}),". You can get this value from the code snippets on your flow's ",(0,s.jsxs)(t.a,{href:"/concepts-publish#api-access",children:[(0,s.jsx)(t.strong,{children:"API access"})," pane"]}),"."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"FLOW_ID"}),": Your flow's UUID or custom endpoint name. You can get this value from the code snippets on your flow's ",(0,s.jsxs)(t.a,{href:"/concepts-publish#api-access",children:[(0,s.jsx)(t.strong,{children:"API access"})," pane"]}),"."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"LANGFLOW_API_KEY"}),": A valid ",(0,s.jsx)(t.a,{href:"/api-keys-and-authentication",children:"Langflow API key"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:"Copy the following script into a JavaScript file, and then replace the placeholders with the information you gathered in the previous step:"}),"\n",(0,s.jsx)(u.Code,{codeConfig:y,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"readline ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"require",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'readline'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const",props:{style:{color:"#FF7B72"}}},{content:" { ",props:{style:{color:"#C9D1D9"}}},{content:"LangflowClient",props:{style:{color:"#79C0FF"}}},{content:" } ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"require",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'@datastax/langflow-client'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"API_KEY ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"'LANGFLOW_API_KEY'",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"SERVER ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"'LANGFLOW_SERVER_ADDRESS'",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"FLOW_ID ",props:{style:{color:"#79C0FF"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"'FLOW_ID'",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"rl ",props:{style:{color:"#79C0FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" readline.",props:{style:{color:"#C9D1D9"}}},{content:"createInterface",props:{style:{color:"#D2A8FF"}}},{content:"({ input: process.stdin, output: process.stdout });",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"// Initialize the Langflow client",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"const ",props:{style:{color:"#FF7B72"}}},{content:"client ",props:{style:{color:"#79C0FF"}}},{content:"= new ",props:{style:{color:"#FF7B72"}}},{content:"LangflowClient",props:{style:{color:"#D2A8FF"}}},{content:"({",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" baseUrl: ",props:{style:{color:"#C9D1D9"}}},{content:"SERVER",props:{style:{color:"#79C0FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" apiKey: ",props:{style:{color:"#C9D1D9"}}},{content:"API_KEY",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"});",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"async function ",props:{style:{color:"#FF7B72"}}},{content:"sendMessage",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"message",props:{style:{color:"#FFA657"}}},{content:") {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" try",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" const ",props:{style:{color:"#FF7B72"}}},{content:"response ",props:{style:{color:"#79C0FF"}}},{content:"= await",props:{style:{color:"#FF7B72"}}},{content:" client.",props:{style:{color:"#C9D1D9"}}},{content:"flow",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"FLOW_ID",props:{style:{color:"#79C0FF"}}},{content:").",props:{style:{color:"#C9D1D9"}}},{content:"run",props:{style:{color:"#D2A8FF"}}},{content:"(message, {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" session_id: ",props:{style:{color:"#C9D1D9"}}},{content:"'user_1'",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" });",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" // Use the convenience method to get the chat output text",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:" response.",props:{style:{color:"#C9D1D9"}}},{content:"chatOutputText",props:{style:{color:"#D2A8FF"}}},{content:"() ",props:{style:{color:"#C9D1D9"}}},{content:"|| ",props:{style:{color:"#FF7B72"}}},{content:"'No response'",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" } ",props:{style:{color:"#C9D1D9"}}},{content:"catch",props:{style:{color:"#FF7B72"}}},{content:" (error) {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return ",props:{style:{color:"#FF7B72"}}},{content:"`Error: ${",props:{style:{color:"#A5D6FF"}}},{content:"error",props:{style:{color:"#C9D1D9"}}},{content:".",props:{style:{color:"#A5D6FF"}}},{content:"message",props:{style:{color:"#C9D1D9"}}},{content:"}`",props:{style:{color:"#A5D6FF"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"function ",props:{style:{color:"#FF7B72"}}},{content:"chat",props:{style:{color:"#D2A8FF"}}},{content:"() {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" console.",props:{style:{color:"#C9D1D9"}}},{content:"log",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:'\'\ud83e\udd16 Langflow RAG Chatbot (type "quit" to exit)',props:{style:{color:"#A5D6FF"}}},{content:"\\n",props:{style:{color:"#79C0FF"}}},{content:"'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" const ",props:{style:{color:"#FF7B72"}}},{content:"ask ",props:{style:{color:"#D2A8FF"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" () ",props:{style:{color:"#C9D1D9"}}},{content:"=>",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" rl.",props:{style:{color:"#C9D1D9"}}},{content:"question",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'\ud83d\udc64 You: '",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"async",props:{style:{color:"#FF7B72"}}},{content:" (",props:{style:{color:"#C9D1D9"}}},{content:"input",props:{style:{color:"#FFA657"}}},{content:") ",props:{style:{color:"#C9D1D9"}}},{content:"=>",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" if",props:{style:{color:"#FF7B72"}}},{content:" ([",props:{style:{color:"#C9D1D9"}}},{content:"'quit'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"'exit'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"'bye'",props:{style:{color:"#A5D6FF"}}},{content:"].",props:{style:{color:"#C9D1D9"}}},{content:"includes",props:{style:{color:"#D2A8FF"}}},{content:"(input.",props:{style:{color:"#C9D1D9"}}},{content:"trim",props:{style:{color:"#D2A8FF"}}},{content:"().",props:{style:{color:"#C9D1D9"}}},{content:"toLowerCase",props:{style:{color:"#D2A8FF"}}},{content:"())) {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" console.",props:{style:{color:"#C9D1D9"}}},{content:"log",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'\ud83d\udc4b Goodbye!'",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" rl.",props:{style:{color:"#C9D1D9"}}},{content:"close",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" return",props:{style:{color:"#FF7B72"}}},{content:";",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" const ",props:{style:{color:"#FF7B72"}}},{content:"response ",props:{style:{color:"#79C0FF"}}},{content:"= await ",props:{style:{color:"#FF7B72"}}},{content:"sendMessage",props:{style:{color:"#D2A8FF"}}},{content:"(input.",props:{style:{color:"#C9D1D9"}}},{content:"trim",props:{style:{color:"#D2A8FF"}}},{content:"());",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" console.",props:{style:{color:"#C9D1D9"}}},{content:"log",props:{style:{color:"#D2A8FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"`\ud83e\udd16 Assistant: ${",props:{style:{color:"#A5D6FF"}}},{content:"response",props:{style:{color:"#C9D1D9"}}},{content:"}",props:{style:{color:"#A5D6FF"}}},{content:"\\n",props:{style:{color:"#79C0FF"}}},{content:"`",props:{style:{color:"#A5D6FF"}}},{content:");",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ask",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" });",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" };",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ask",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"chat",props:{style:{color:"#D2A8FF"}}},{content:"();",props:{style:{color:"#C9D1D9"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(t.p,{children:["The script creates a Node application that chats with the content in your vector database, using the ",(0,s.jsx)(t.code,{children:"chat"})," input and output types to communicate with your flow.\nChat maintains ongoing conversation context across multiple messages. If you used ",(0,s.jsx)(t.code,{children:"text"})," type inputs and outputs, each request is a standalone text string."]}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.a,{href:"/typescript-client",children:"Langflow TypeScript client"})," has a ",(0,s.jsx)(t.code,{children:"chatOutputText()"})," convenience method that simplifies working with Langflow's complex JSON response structure.\nInstead of manually navigating through multiple levels of nested objects with ",(0,s.jsx)(t.code,{children:"data.outputs[0].outputs[0].results.message.data.text"}),", the client automatically extracts the message text and handles potentially undefined values gracefully."]})}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:"Save and run the script to send the requests and test the flow."}),"\n",(0,s.jsxs)(n,{children:[(0,s.jsx)("summary",{children:"Result"}),(0,s.jsx)(t.p,{children:"The following is an example response from this tutorial's flow. Due to the nature of LLMs and variations in your inputs, your response might be different."}),(0,s.jsx)(u.Code,{codeConfig:y,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"\ud83d\udc64 You: Do you have any documents about engines?",props:{}}]},{tokens:[{content:"\ud83e\udd16 Assistant: Yes, the provided text contains several warnings and guidelines related to engine installation, maintenance, and selection. It emphasizes the importance of using the correct engine for specific applications, ensuring all components are in good condition, and following safety precautions to prevent fire or explosion. If you need more specific information or details, please let me know!",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"\ud83d\udc64 You: It should be about a Briggs and Stratton engine.",props:{}}]},{tokens:[{content:"\ud83e\udd16 Assistant: The text provides important safety and installation guidelines for Briggs & Stratton engines. It emphasizes that these engines should not be used on 3-wheel All-Terrain Vehicles (ATVs), motor bikes, aircraft products, or vehicles intended for competitive events, as such uses are not approved by Briggs & Stratton.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"If you have any specific questions about Briggs & Stratton engines or need further information, feel free to ask!",props:{}}]}],lang:"text"},annotations:[]}]})]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"next-steps",children:"Next steps"}),"\n",(0,s.jsx)(t.p,{children:"For more information on building or extending this tutorial, see the following:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/mcp-server",children:"Model Context Protocol (MCP) servers"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/deployment-overview",children:"Langflow deployment overview"})}),"\n"]})]})}function f(o={}){const{wrapper:t}={...(0,r.R)(),...o.components};return t?(0,s.jsx)(t,{...o,children:(0,s.jsx)(F,{...o})}):F(o)}function g(o,t){throw new Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}},96973:(o,t,e)=>{e.d(t,{A:()=>n});const n=e.p+"assets/images/tutorial-chatbot-chat-flow-af7257d77ff0259ab1a0980641d464ce.png"}}]);
\ No newline at end of file
diff --git a/assets/js/2fc7e024.5dcb045e.js b/assets/js/2fc7e024.5dcb045e.js
deleted file mode 100644
index 7f0b46d817..0000000000
--- a/assets/js/2fc7e024.5dcb045e.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunklangflow_docs=self.webpackChunklangflow_docs||[]).push([[1408],{47617:(e,o,t)=>{t.d(o,{A:()=>n});const n=t.p+"assets/images/tutorial-chat-file-loader-099f2f4c5e4343412557b1a78c4b9209.png"},57844:(e,o,t)=>{t.r(o),t.d(o,{CH:()=>d,assets:()=>a,chCodeConfig:()=>h,contentTitle:()=>p,default:()=>f,frontMatter:()=>i,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"Tutorials/chat-with-files","title":"Create a chatbot that can ingest files","description":"This tutorial shows you how to build a chatbot that can read and answer questions about files you upload, such as meeting notes or job applications.","source":"@site/docs/Tutorials/chat-with-files.mdx","sourceDirName":"Tutorials","slug":"/chat-with-files","permalink":"/chat-with-files","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Create a chatbot that can ingest files","slug":"/chat-with-files"},"sidebar":"docs","previous":{"title":"Create a vector RAG chatbot","permalink":"/chat-with-rag"},"next":{"title":"Connect applications to agents","permalink":"/agent-tutorial"}}');var s=t(74848),r=t(28453),l=t(24754),c=t(40619);const i={title:"Create a chatbot that can ingest files",slug:"/chat-with-files"},p=void 0,a={},d={annotations:l.hk,Code:l.Cy},h={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},u=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Create a flow that accepts file input",id:"create-a-flow-that-accepts-file-input",level:2},{value:"Send requests to your flow from a Python application",id:"send-requests-to-your-flow-from-a-python-application",level:2},{value:"Next steps",id:"next-steps",level:2},{value:"Process multiple files loaded at runtime",id:"process-multiple-files-loaded-at-runtime",level:3},{value:"Upload external files at runtime",id:"upload-external-files-at-runtime",level:3},{value:"Preload files outside the chat session",id:"preload-files-outside-the-chat-session",level:3}];function y(e){const o={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components},{Details:n}=o;return d||D("CH",!1),d.Code||D("CH.Code",!0),n||D("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)(o.p,{children:"This tutorial shows you how to build a chatbot that can read and answer questions about files you upload, such as meeting notes or job applications."}),"\n",(0,s.jsx)(o.p,{children:"For example, you could upload a contract and ask, \u201cWhat are the termination clauses in this agreement?\u201d Or upload a resume and ask, \u201cDoes this candidate have experience with marketing analytics?\u201d"}),"\n",(0,s.jsx)(o.p,{children:"The main focus of this tutorial is to show you how to provide files as input to a Langflow flow, so your chatbot can use the content of those files in its responses."}),"\n",(0,s.jsx)(o.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,s.jsxs)(o.ul,{children:["\n",(0,s.jsx)(o.li,{children:(0,s.jsx)(o.a,{href:"/get-started-installation",children:"Install and start Langflow"})}),"\n",(0,s.jsxs)(o.li,{children:["Create a ",(0,s.jsx)(o.a,{href:"/api-keys-and-authentication",children:"Langflow API key"})]}),"\n",(0,s.jsxs)(o.li,{children:["Create an ",(0,s.jsx)(o.a,{href:"https://platform.openai.com/api-keys",children:"OpenAI API key"})]}),"\n"]}),"\n",(0,s.jsx)(o.p,{children:"This tutorial uses an OpenAI LLM. If you want to use a different provider, you need a valid credential for that provider."}),"\n",(0,s.jsx)(o.h2,{id:"create-a-flow-that-accepts-file-input",children:"Create a flow that accepts file input"}),"\n",(0,s.jsxs)(o.p,{children:["To ingest files, your flow must have a ",(0,s.jsx)(o.strong,{children:"File"})," component attached to a component that receives input, such as a ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," or ",(0,s.jsx)(o.strong,{children:"Agent"})," component."]}),"\n",(0,s.jsxs)(o.p,{children:["The following steps modify the ",(0,s.jsx)(o.strong,{children:"Basic Prompting"})," template to accept file input:"]}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["In Langflow, click ",(0,s.jsx)(o.strong,{children:"New Flow"}),", and then select the ",(0,s.jsx)(o.strong,{children:"Basic Prompting"})," template."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["In the ",(0,s.jsx)(o.strong,{children:"Language Model"})," component, enter your OpenAI API key."]}),"\n",(0,s.jsxs)(o.p,{children:["If you want to use a different provider or model, edit the ",(0,s.jsx)(o.strong,{children:"Model Provider"}),", ",(0,s.jsx)(o.strong,{children:"Model Name"}),", and ",(0,s.jsx)(o.strong,{children:"API Key"})," fields accordingly."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["To verify that your API key is valid, click ",(0,s.jsx)(c.A,{name:"Play","aria-hidden":"true"})," ",(0,s.jsx)(o.strong,{children:"Playground"}),", and then ask the LLM a question.\nThe LLM should respond according to the specifications in the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component's ",(0,s.jsx)(o.strong,{children:"Template"})," field."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Exit the ",(0,s.jsx)(o.strong,{children:"Playground"}),", and then modify the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component to accept file input in addition to chat input.\nTo do this, edit the ",(0,s.jsx)(o.strong,{children:"Template"})," field, and then replace the default prompt with the following text:"]}),"\n",(0,s.jsx)(d.Code,{codeConfig:h,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"ChatInput:",props:{}}]},{tokens:[{content:"{chat-input}",props:{}}]},{tokens:[{content:"File:",props:{}}]},{tokens:[{content:"{file}",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsxs)(o.admonition,{type:"tip",children:[(0,s.jsxs)(o.p,{children:["You can use any string to name your template variables.\nThese strings become the names of the fields (input ports) on the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component."]}),(0,s.jsxs)(o.p,{children:["For this tutorial, the variables are named after the components that connect to them: ",(0,s.jsx)(o.strong,{children:"chat-input"})," for the ",(0,s.jsx)(o.strong,{children:"Chat Input"})," component and ",(0,s.jsx)(o.strong,{children:"file"})," for the ",(0,s.jsx)(o.strong,{children:"File"})," component."]})]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Add a ",(0,s.jsxs)(o.a,{href:"/components-data#file",children:[(0,s.jsx)(o.strong,{children:"File"})," component"]})," to the flow, and then connect the ",(0,s.jsx)(o.strong,{children:"Raw Content"})," output port to the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component's ",(0,s.jsx)(o.strong,{children:"file"})," input port.\nTo connect ports, click and drag from one port to the other."]}),"\n",(0,s.jsxs)(o.p,{children:["You can add files directly to the ",(0,s.jsx)(o.strong,{children:"File"})," component to pre-load input before running the flow, or you can load files at runtime. The next section of this tutorial covers runtime file uploads."]}),"\n",(0,s.jsxs)(o.p,{children:["At this point your flow has five components. The ",(0,s.jsx)(o.strong,{children:"Chat Input"})," and ",(0,s.jsx)(o.strong,{children:"File"})," components are connected to the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component's input ports. Then, the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component's output port is connected to the ",(0,s.jsx)(o.strong,{children:"Language Model"})," component's input port. Finally, the ",(0,s.jsx)(o.strong,{children:"Language Model"})," component's output port is connected to the ",(0,s.jsx)(o.strong,{children:"Chat Output"})," component, which returns the final response to the user."]}),"\n",(0,s.jsx)(o.p,{children:(0,s.jsx)(o.img,{alt:"File loader chat flow",src:t(47617).A+"",width:"4000",height:"1564"})}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(o.h2,{id:"send-requests-to-your-flow-from-a-python-application",children:"Send requests to your flow from a Python application"}),"\n",(0,s.jsx)(o.p,{children:"This section of the tutorial demonstrates how you can send file input to a flow from an application."}),"\n",(0,s.jsxs)(o.p,{children:["To do this, your application must send a ",(0,s.jsx)(o.code,{children:"POST /run"})," request to your Langflow server with the file you want to upload and a text prompt.\nThe result includes the outcome of the flow run and the LLM's response."]}),"\n",(0,s.jsxs)(o.p,{children:["This example uses a local Langflow instance, and it asks the LLM to evaluate a sample resume.\nIf you don't have a resume on hand, you can download ",(0,s.jsx)(o.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:t(87481).A+"",children:"fake-resume.txt"}),"."]}),"\n",(0,s.jsx)(o.admonition,{type:"tip",children:(0,s.jsxs)(o.p,{children:["For help with constructing file upload requests in Python, JavaScript, and curl, see the ",(0,s.jsx)(o.a,{href:"https://langflow-file-upload-examples.onrender.com",children:"Langflow File Upload Utility"}),"."]})}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"To construct the request, gather the following information:"}),"\n",(0,s.jsxs)(o.ul,{children:["\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"LANGFLOW_SERVER_ADDRESS"}),": Your Langflow server's domain. The default value is ",(0,s.jsx)(o.code,{children:"127.0.0.1:7860"}),". You can get this value from the code snippets on your flow's ",(0,s.jsxs)(o.a,{href:"/concepts-publish#api-access",children:[(0,s.jsx)(o.strong,{children:"API access"})," pane"]}),"."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"FLOW_ID"}),": Your flow's UUID or custom endpoint name. You can get this value from the code snippets on your flow's ",(0,s.jsxs)(o.a,{href:"/concepts-publish#api-access",children:[(0,s.jsx)(o.strong,{children:"API access"})," pane"]}),"."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"FILE_COMPONENT_ID"}),": The UUID of the ",(0,s.jsx)(o.strong,{children:"File"})," component in your flow, such as ",(0,s.jsx)(o.code,{children:"File-KZP68"}),". To find the component ID, open your flow in Langflow, click the ",(0,s.jsx)(o.strong,{children:"File"})," component, and then click ",(0,s.jsx)(o.strong,{children:"Controls"}),". The component ID is at the top of the ",(0,s.jsx)(o.strong,{children:"Controls"})," pane."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"CHAT_INPUT"}),": The message you want to send to the Chat Input of your flow, such as ",(0,s.jsx)(o.code,{children:"Evaluate this resume for a job opening in my Marketing department."})]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"FILE_NAME"})," and ",(0,s.jsx)(o.code,{children:"FILE_PATH"}),": The name and path to the local file that you want to send to your flow."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"LANGFLOW_API_KEY"}),": A valid ",(0,s.jsx)(o.a,{href:"/api-keys-and-authentication",children:"Langflow API key"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"Copy the following script into a Python file, and then replace the placeholders with the information you gathered in the previous step:"}),"\n",(0,s.jsx)(d.Code,{codeConfig:h,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"# Python example using requests",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" requests",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" json",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# 1. Set the upload URL",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"url ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"http://LANGFLOW_SERVER_ADDRESS/api/v2/files/"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# 2. Prepare the file and payload",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"payload ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"files ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" (",props:{style:{color:"#C9D1D9"}}},{content:"'file'",props:{style:{color:"#A5D6FF"}}},{content:", (",props:{style:{color:"#C9D1D9"}}},{content:"'FILE_PATH'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"open",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'FILE_NAME'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"'rb'",props:{style:{color:"#A5D6FF"}}},{content:"), ",props:{style:{color:"#C9D1D9"}}},{content:"'application/octet-stream'",props:{style:{color:"#A5D6FF"}}},{content:"))",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"headers ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'Accept'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'application/json'",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'x-api-key'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_API_KEY'",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# 3. Upload the file to Langflow",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"response ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" requests.request(",props:{style:{color:"#C9D1D9"}}},{content:'"POST"',props:{style:{color:"#A5D6FF"}}},{content:", url, ",props:{style:{color:"#C9D1D9"}}},{content:"headers",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"headers, ",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"payload, ",props:{style:{color:"#C9D1D9"}}},{content:"files",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"files)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"print",props:{style:{color:"#79C0FF"}}},{content:"(response.text)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# 4. Get the uploaded file path from the response",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"uploaded_data ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" response.json()",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"uploaded_path ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" uploaded_data.get(",props:{style:{color:"#C9D1D9"}}},{content:"'path'",props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# 5. Call the Langflow run endpoint with the uploaded file path",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"run_url ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"http://LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"run_payload ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "input_value"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"CHAT_INPUT"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "output_type"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"chat"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "input_type"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"chat"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "tweaks"',props:{style:{color:"#A5D6FF"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "FILE_COMPONENT_ID"',props:{style:{color:"#A5D6FF"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "path"',props:{style:{color:"#A5D6FF"}}},{content:": uploaded_path",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"run_headers ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'Content-Type'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'application/json'",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'Accept'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'application/json'",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'x-api-key'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_API_KEY'",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"run_response ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" requests.post(run_url, ",props:{style:{color:"#C9D1D9"}}},{content:"headers",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"run_headers, ",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"json.dumps(run_payload))",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"langflow_data ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" run_response.json()",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Output only the message",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"message ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"None",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"try",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" message ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" langflow_data[",props:{style:{color:"#C9D1D9"}}},{content:"'outputs'",props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"0",props:{style:{color:"#79C0FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"'outputs'",props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"0",props:{style:{color:"#79C0FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"'results'",props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"'message'",props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"'data'",props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"'text'",props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"except",props:{style:{color:"#FF7B72"}}},{content:" (",props:{style:{color:"#C9D1D9"}}},{content:"KeyError",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"IndexError",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"TypeError",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" pass",props:{style:{color:"#FF7B72"}}}]},{tokens:[{content:"print",props:{style:{color:"#79C0FF"}}},{content:"(message)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(o.p,{children:"This script contains two requests."}),"\n",(0,s.jsxs)(o.p,{children:["The first request uploads a file, such as ",(0,s.jsx)(o.code,{children:"fake-resume.txt"}),", to your Langflow server at the ",(0,s.jsx)(o.code,{children:"/v2/files"})," endpoint. This request returns a file path that can be referenced in subsequent Langflow requests, such as ",(0,s.jsx)(o.code,{children:"02791d46-812f-4988-ab1c-7c430214f8d5/fake-resume.txt"})]}),"\n",(0,s.jsxs)(o.p,{children:["The second request sends a chat message to the Langflow flow at the ",(0,s.jsx)(o.code,{children:"/v1/run/"})," endpoint.\nThe ",(0,s.jsx)(o.code,{children:"tweaks"})," parameter includes the path to the uploaded file as the variable ",(0,s.jsx)(o.code,{children:"uploaded_path"}),", and sends this file directly to the ",(0,s.jsx)(o.strong,{children:"File"})," component."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"Save and run the script to send the requests and test the flow."}),"\n",(0,s.jsx)(o.p,{children:"The initial output contains the JSON response object from the file upload endpoint, including the internal path where Langflow stores the file.\nThen, the LLM retrieves the file and evaluates its content, in this case the suitability of the resume for a job position."}),"\n",(0,s.jsxs)(n,{children:[(0,s.jsx)("summary",{children:"Result"}),(0,s.jsx)(o.p,{children:"The following is an example response from this tutorial's flow. Due to the nature of LLMs and variations in your inputs, your response might be different."}),(0,s.jsx)(d.Code,{codeConfig:h,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:'{"id":"793ba3d8-5e7a-4499-8b89-d9a7b6325fee","name":"fake-resume (1)","path":"02791d46-812f-4988-ab1c-7c430214f8d5/fake-resume.txt","size":1779,"provider":null}',props:{}}]},{tokens:[{content:"The resume for Emily J. Wilson presents a strong candidate for a position in your Marketing department. Here are some key points to consider:",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"### Strengths:",props:{}}]},{tokens:[{content:"1. **Experience**: With over 8 years in marketing, Emily has held progressively responsible positions, culminating in her current role as Marketing Director. This indicates a solid foundation in the field.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"2. **Quantifiable Achievements**: The resume highlights specific accomplishments, such as a 25% increase in brand recognition and a 30% sales increase after launching new product lines. These metrics demonstrate her ability to drive results.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"3. **Diverse Skill Set**: Emily's skills encompass various aspects of marketing, including strategy development, team management, social media marketing, event planning, and data analysis. This versatility can be beneficial in a dynamic marketing environment.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"4. **Educational Background**: Her MBA and a Bachelor's degree in Marketing provide a strong academic foundation, which is often valued in marketing roles.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"5. **Certifications**: The Certified Marketing Professional (CMP) and Google Analytics Certification indicate a commitment to professional development and staying current with industry standards.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"### Areas for Improvement:",props:{}}]},{tokens:[{content:"1. **Specificity in Skills**: While the skills listed are relevant, providing examples of how she has applied these skills in her previous roles could strengthen her resume further.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"2. **References**: While stating that references are available upon request is standard, including a couple of testimonials or notable endorsements could enhance credibility.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"3. **Formatting**: Ensure that the resume is visually appealing and easy to read. Clear headings and bullet points help in quickly identifying key information.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"### Conclusion:",props:{}}]},{tokens:[{content:"Overall, Emily J. Wilson's resume reflects a well-rounded marketing professional with a proven track record of success. If her experience aligns with the specific needs of your Marketing department, she could be a valuable addition to your team. Consider inviting her for an interview to further assess her fit for the role.",props:{}}]}],lang:"text"},annotations:[]}]})]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(o.h2,{id:"next-steps",children:"Next steps"}),"\n",(0,s.jsx)(o.p,{children:"To continue building on this tutorial, try these next steps."}),"\n",(0,s.jsx)(o.h3,{id:"process-multiple-files-loaded-at-runtime",children:"Process multiple files loaded at runtime"}),"\n",(0,s.jsxs)(o.p,{children:["To process multiple files in a single flow run, add a separate ",(0,s.jsx)(o.strong,{children:"File"})," component for each file you want to ingest. Then, modify your script to upload each file, retrieve each returned file path, and then pass a unique file path to each ",(0,s.jsx)(o.strong,{children:"File"})," component ID."]}),"\n",(0,s.jsxs)(o.p,{children:["For example, you can modify ",(0,s.jsx)(o.code,{children:"tweaks"})," to accept multiple ",(0,s.jsx)(o.strong,{children:"File"})," components.\nThe following code is just an example; it isn't working code:"]}),"\n",(0,s.jsx)(d.Code,{codeConfig:h,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"## set multiple file paths",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"file_paths ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" FILE_COMPONENT_1",props:{style:{color:"#79C0FF"}}},{content:": uploaded_path_1,",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" FILE_COMPONENT_2",props:{style:{color:"#79C0FF"}}},{content:": uploaded_path_2",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"chat_with_flow",props:{style:{color:"#D2A8FF"}}},{content:"(input_message, file_paths):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' """Compare the contents of these two files."""',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" run_url ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:'"',props:{style:{color:"#A5D6FF"}}},{content:"{LANGFLOW_SERVER_ADDRESS}",props:{style:{color:"#79C0FF"}}},{content:"/api/v1/run/",props:{style:{color:"#A5D6FF"}}},{content:"{FLOW_ID}",props:{style:{color:"#79C0FF"}}},{content:'"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" # Prepare tweaks with both file paths",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" tweaks ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" for",props:{style:{color:"#FF7B72"}}},{content:" component_id, file_path ",props:{style:{color:"#C9D1D9"}}},{content:"in",props:{style:{color:"#FF7B72"}}},{content:" file_paths.items():",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" tweaks[component_id] ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}},{content:'"path"',props:{style:{color:"#A5D6FF"}}},{content:": file_path}",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(o.p,{children:["You can also use a ",(0,s.jsxs)(o.a,{href:"/components-data#directory",children:[(0,s.jsx)(o.strong,{children:"Directory"})," component"]})," to load all files in a directory or pass an archive file to the ",(0,s.jsx)(o.strong,{children:"File"})," component."]}),"\n",(0,s.jsx)(o.h3,{id:"upload-external-files-at-runtime",children:"Upload external files at runtime"}),"\n",(0,s.jsxs)(o.p,{children:["To upload files from another machine that isn't your local environment, your Langflow server must first be accessible over the internet. Then, authenticated users can upload files to your public Langflow server's ",(0,s.jsx)(o.code,{children:"/v2/files/"})," endpoint, as shown in the tutorial. For more information, see ",(0,s.jsx)(o.a,{href:"/deployment-overview",children:"Langflow deployment overview"}),"."]}),"\n",(0,s.jsx)(o.h3,{id:"preload-files-outside-the-chat-session",children:"Preload files outside the chat session"}),"\n",(0,s.jsxs)(o.p,{children:["You can use the ",(0,s.jsx)(o.strong,{children:"File"})," component to load files anywhere in a flow, not just in a chat session."]}),"\n",(0,s.jsxs)(o.p,{children:["In the visual editor, you can preload files to the ",(0,s.jsx)(o.strong,{children:"File"})," component by selecting them from your local machine or ",(0,s.jsx)(o.a,{href:"/concepts-file-management",children:"Langflow file management"}),"."]}),"\n",(0,s.jsx)(o.p,{children:"For example, you can preload an instructions file for a prompt template, or you can preload a vector store with documents that you want to query in a Retrieval Augmented Generation (RAG) flow."}),"\n",(0,s.jsxs)(o.p,{children:["For more information about the ",(0,s.jsx)(o.strong,{children:"File"})," component and other data loading components, see ",(0,s.jsx)(o.a,{href:"/components-data",children:"Data components"}),"."]})]})}function f(e={}){const{wrapper:o}={...(0,r.R)(),...e.components};return o?(0,s.jsx)(o,{...e,children:(0,s.jsx)(y,{...e})}):y(e)}function D(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},87481:(e,o,t)=>{t.d(o,{A:()=>n});const n=t.p+"assets/files/fake-resume-fa337cbdb18306bd29e3168f73409745.txt"}}]);
\ No newline at end of file
diff --git a/assets/js/2fc7e024.eefef1c8.js b/assets/js/2fc7e024.eefef1c8.js
new file mode 100644
index 0000000000..dd9718345b
--- /dev/null
+++ b/assets/js/2fc7e024.eefef1c8.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunklangflow_docs=self.webpackChunklangflow_docs||[]).push([[1408],{47617:(e,o,t)=>{t.d(o,{A:()=>n});const n=t.p+"assets/images/tutorial-chat-file-loader-099f2f4c5e4343412557b1a78c4b9209.png"},57844:(e,o,t)=>{t.r(o),t.d(o,{CH:()=>d,assets:()=>a,chCodeConfig:()=>h,contentTitle:()=>p,default:()=>f,frontMatter:()=>i,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"Tutorials/chat-with-files","title":"Create a chatbot that can ingest files","description":"This tutorial shows you how to build a chatbot that can read and answer questions about files you upload, such as meeting notes or job applications.","source":"@site/docs/Tutorials/chat-with-files.mdx","sourceDirName":"Tutorials","slug":"/chat-with-files","permalink":"/chat-with-files","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Create a chatbot that can ingest files","slug":"/chat-with-files"},"sidebar":"docs","previous":{"title":"Create a vector RAG chatbot","permalink":"/chat-with-rag"},"next":{"title":"Connect applications to agents","permalink":"/agent-tutorial"}}');var s=t(74848),r=t(28453),l=t(24754),c=t(40619);const i={title:"Create a chatbot that can ingest files",slug:"/chat-with-files"},p=void 0,a={},d={annotations:l.hk,Code:l.Cy},h={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},u=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Create a flow that accepts file input",id:"create-a-flow-that-accepts-file-input",level:2},{value:"Send requests to your flow from a Python application",id:"send-requests-to-your-flow-from-a-python-application",level:2},{value:"Next steps",id:"next-steps",level:2},{value:"Process multiple files loaded at runtime",id:"process-multiple-files-loaded-at-runtime",level:3},{value:"Upload external files at runtime",id:"upload-external-files-at-runtime",level:3},{value:"Preload files outside the chat session",id:"preload-files-outside-the-chat-session",level:3}];function y(e){const o={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components},{Details:n}=o;return d||D("CH",!1),d.Code||D("CH.Code",!0),n||D("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)(o.p,{children:"This tutorial shows you how to build a chatbot that can read and answer questions about files you upload, such as meeting notes or job applications."}),"\n",(0,s.jsx)(o.p,{children:"For example, you could upload a contract and ask, \u201cWhat are the termination clauses in this agreement?\u201d Or upload a resume and ask, \u201cDoes this candidate have experience with marketing analytics?\u201d"}),"\n",(0,s.jsx)(o.p,{children:"The main focus of this tutorial is to show you how to provide files as input to a Langflow flow, so your chatbot can use the content of those files in its responses."}),"\n",(0,s.jsx)(o.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,s.jsxs)(o.ul,{children:["\n",(0,s.jsx)(o.li,{children:(0,s.jsx)(o.a,{href:"/get-started-installation",children:"Install and start Langflow"})}),"\n",(0,s.jsxs)(o.li,{children:["Create a ",(0,s.jsx)(o.a,{href:"/api-keys-and-authentication",children:"Langflow API key"})]}),"\n",(0,s.jsxs)(o.li,{children:["Create an ",(0,s.jsx)(o.a,{href:"https://platform.openai.com/api-keys",children:"OpenAI API key"})]}),"\n"]}),"\n",(0,s.jsx)(o.p,{children:"This tutorial uses an OpenAI LLM. If you want to use a different provider, you need a valid credential for that provider."}),"\n",(0,s.jsx)(o.h2,{id:"create-a-flow-that-accepts-file-input",children:"Create a flow that accepts file input"}),"\n",(0,s.jsxs)(o.p,{children:["To ingest files, your flow must have a ",(0,s.jsx)(o.strong,{children:"File"})," component attached to a component that receives input, such as a ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," or ",(0,s.jsx)(o.strong,{children:"Agent"})," component."]}),"\n",(0,s.jsxs)(o.p,{children:["The following steps modify the ",(0,s.jsx)(o.strong,{children:"Basic Prompting"})," template to accept file input:"]}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["In Langflow, click ",(0,s.jsx)(o.strong,{children:"New Flow"}),", and then select the ",(0,s.jsx)(o.strong,{children:"Basic Prompting"})," template."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["In the ",(0,s.jsx)(o.strong,{children:"Language Model"})," component, enter your OpenAI API key."]}),"\n",(0,s.jsxs)(o.p,{children:["If you want to use a different provider or model, edit the ",(0,s.jsx)(o.strong,{children:"Model Provider"}),", ",(0,s.jsx)(o.strong,{children:"Model Name"}),", and ",(0,s.jsx)(o.strong,{children:"API Key"})," fields accordingly."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["To verify that your API key is valid, click ",(0,s.jsx)(c.A,{name:"Play","aria-hidden":"true"})," ",(0,s.jsx)(o.strong,{children:"Playground"}),", and then ask the LLM a question.\nThe LLM should respond according to the specifications in the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component's ",(0,s.jsx)(o.strong,{children:"Template"})," field."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Exit the ",(0,s.jsx)(o.strong,{children:"Playground"}),", and then modify the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component to accept file input in addition to chat input.\nTo do this, edit the ",(0,s.jsx)(o.strong,{children:"Template"})," field, and then replace the default prompt with the following text:"]}),"\n",(0,s.jsx)(d.Code,{codeConfig:h,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"ChatInput:",props:{}}]},{tokens:[{content:"{chat-input}",props:{}}]},{tokens:[{content:"File:",props:{}}]},{tokens:[{content:"{file}",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsxs)(o.admonition,{type:"tip",children:[(0,s.jsxs)(o.p,{children:["You can use any string to name your template variables.\nThese strings become the names of the fields (input ports) on the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component."]}),(0,s.jsxs)(o.p,{children:["For this tutorial, the variables are named after the components that connect to them: ",(0,s.jsx)(o.strong,{children:"chat-input"})," for the ",(0,s.jsx)(o.strong,{children:"Chat Input"})," component and ",(0,s.jsx)(o.strong,{children:"file"})," for the ",(0,s.jsx)(o.strong,{children:"File"})," component."]})]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsxs)(o.p,{children:["Add a ",(0,s.jsxs)(o.a,{href:"/components-data#file",children:[(0,s.jsx)(o.strong,{children:"File"})," component"]})," to the flow, and then connect the ",(0,s.jsx)(o.strong,{children:"Raw Content"})," output port to the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component's ",(0,s.jsx)(o.strong,{children:"file"})," input port.\nTo connect ports, click and drag from one port to the other."]}),"\n",(0,s.jsxs)(o.p,{children:["You can add files directly to the ",(0,s.jsx)(o.strong,{children:"File"})," component to pre-load input before running the flow, or you can load files at runtime. The next section of this tutorial covers runtime file uploads."]}),"\n",(0,s.jsxs)(o.p,{children:["At this point your flow has five components. The ",(0,s.jsx)(o.strong,{children:"Chat Input"})," and ",(0,s.jsx)(o.strong,{children:"File"})," components are connected to the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component's input ports. Then, the ",(0,s.jsx)(o.strong,{children:"Prompt Template"})," component's output port is connected to the ",(0,s.jsx)(o.strong,{children:"Language Model"})," component's input port. Finally, the ",(0,s.jsx)(o.strong,{children:"Language Model"})," component's output port is connected to the ",(0,s.jsx)(o.strong,{children:"Chat Output"})," component, which returns the final response to the user."]}),"\n",(0,s.jsx)(o.p,{children:(0,s.jsx)(o.img,{alt:"File loader chat flow",src:t(47617).A+"",width:"4000",height:"1564"})}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(o.h2,{id:"send-requests-to-your-flow-from-a-python-application",children:"Send requests to your flow from a Python application"}),"\n",(0,s.jsx)(o.p,{children:"This section of the tutorial demonstrates how you can send file input to a flow from an application."}),"\n",(0,s.jsxs)(o.p,{children:["To do this, your application must send a ",(0,s.jsx)(o.code,{children:"POST /run"})," request to your Langflow server with the file you want to upload and a text prompt.\nThe result includes the outcome of the flow run and the LLM's response."]}),"\n",(0,s.jsxs)(o.p,{children:["This example uses a local Langflow instance, and it asks the LLM to evaluate a sample resume.\nIf you don't have a resume on hand, you can download ",(0,s.jsx)(o.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:t(87481).A+"",children:"fake-resume.txt"}),"."]}),"\n",(0,s.jsx)(o.admonition,{type:"tip",children:(0,s.jsxs)(o.p,{children:["For help with constructing file upload requests in Python, JavaScript, and curl, see the ",(0,s.jsx)(o.a,{href:"https://langflow-file-upload-examples.21cgwws14kdz.us-east.codeengine.appdomain.cloud/",children:"Langflow File Upload Utility"}),"."]})}),"\n",(0,s.jsxs)(o.ol,{children:["\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"To construct the request, gather the following information:"}),"\n",(0,s.jsxs)(o.ul,{children:["\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"LANGFLOW_SERVER_ADDRESS"}),": Your Langflow server's domain. The default value is ",(0,s.jsx)(o.code,{children:"127.0.0.1:7860"}),". You can get this value from the code snippets on your flow's ",(0,s.jsxs)(o.a,{href:"/concepts-publish#api-access",children:[(0,s.jsx)(o.strong,{children:"API access"})," pane"]}),"."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"FLOW_ID"}),": Your flow's UUID or custom endpoint name. You can get this value from the code snippets on your flow's ",(0,s.jsxs)(o.a,{href:"/concepts-publish#api-access",children:[(0,s.jsx)(o.strong,{children:"API access"})," pane"]}),"."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"FILE_COMPONENT_ID"}),": The UUID of the ",(0,s.jsx)(o.strong,{children:"File"})," component in your flow, such as ",(0,s.jsx)(o.code,{children:"File-KZP68"}),". To find the component ID, open your flow in Langflow, click the ",(0,s.jsx)(o.strong,{children:"File"})," component, and then click ",(0,s.jsx)(o.strong,{children:"Controls"}),". The component ID is at the top of the ",(0,s.jsx)(o.strong,{children:"Controls"})," pane."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"CHAT_INPUT"}),": The message you want to send to the Chat Input of your flow, such as ",(0,s.jsx)(o.code,{children:"Evaluate this resume for a job opening in my Marketing department."})]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"FILE_NAME"})," and ",(0,s.jsx)(o.code,{children:"FILE_PATH"}),": The name and path to the local file that you want to send to your flow."]}),"\n",(0,s.jsxs)(o.li,{children:[(0,s.jsx)(o.code,{children:"LANGFLOW_API_KEY"}),": A valid ",(0,s.jsx)(o.a,{href:"/api-keys-and-authentication",children:"Langflow API key"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"Copy the following script into a Python file, and then replace the placeholders with the information you gathered in the previous step:"}),"\n",(0,s.jsx)(d.Code,{codeConfig:h,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"# Python example using requests",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" requests",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"import",props:{style:{color:"#FF7B72"}}},{content:" json",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# 1. Set the upload URL",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"url ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"http://LANGFLOW_SERVER_ADDRESS/api/v2/files/"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# 2. Prepare the file and payload",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"payload ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"files ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" (",props:{style:{color:"#C9D1D9"}}},{content:"'file'",props:{style:{color:"#A5D6FF"}}},{content:", (",props:{style:{color:"#C9D1D9"}}},{content:"'FILE_PATH'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"open",props:{style:{color:"#79C0FF"}}},{content:"(",props:{style:{color:"#C9D1D9"}}},{content:"'FILE_NAME'",props:{style:{color:"#A5D6FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"'rb'",props:{style:{color:"#A5D6FF"}}},{content:"), ",props:{style:{color:"#C9D1D9"}}},{content:"'application/octet-stream'",props:{style:{color:"#A5D6FF"}}},{content:"))",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"headers ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'Accept'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'application/json'",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'x-api-key'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_API_KEY'",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# 3. Upload the file to Langflow",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"response ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" requests.request(",props:{style:{color:"#C9D1D9"}}},{content:'"POST"',props:{style:{color:"#A5D6FF"}}},{content:", url, ",props:{style:{color:"#C9D1D9"}}},{content:"headers",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"headers, ",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"payload, ",props:{style:{color:"#C9D1D9"}}},{content:"files",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"files)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"print",props:{style:{color:"#79C0FF"}}},{content:"(response.text)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# 4. Get the uploaded file path from the response",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"uploaded_data ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" response.json()",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"uploaded_path ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" uploaded_data.get(",props:{style:{color:"#C9D1D9"}}},{content:"'path'",props:{style:{color:"#A5D6FF"}}},{content:")",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# 5. Call the Langflow run endpoint with the uploaded file path",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"run_url ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:'"http://LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"run_payload ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "input_value"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"CHAT_INPUT"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "output_type"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"chat"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "input_type"',props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"chat"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "tweaks"',props:{style:{color:"#A5D6FF"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "FILE_COMPONENT_ID"',props:{style:{color:"#A5D6FF"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "path"',props:{style:{color:"#A5D6FF"}}},{content:": uploaded_path",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"run_headers ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'Content-Type'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'application/json'",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'Accept'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'application/json'",props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" 'x-api-key'",props:{style:{color:"#A5D6FF"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:"'LANGFLOW_API_KEY'",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"run_response ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" requests.post(run_url, ",props:{style:{color:"#C9D1D9"}}},{content:"headers",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"run_headers, ",props:{style:{color:"#C9D1D9"}}},{content:"data",props:{style:{color:"#FFA657"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:"json.dumps(run_payload))",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"langflow_data ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" run_response.json()",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"# Output only the message",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"message ",props:{style:{color:"#C9D1D9"}}},{content:"= ",props:{style:{color:"#FF7B72"}}},{content:"None",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"try",props:{style:{color:"#FF7B72"}}},{content:":",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" message ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" langflow_data[",props:{style:{color:"#C9D1D9"}}},{content:"'outputs'",props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"0",props:{style:{color:"#79C0FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"'outputs'",props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"0",props:{style:{color:"#79C0FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"'results'",props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"'message'",props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"'data'",props:{style:{color:"#A5D6FF"}}},{content:"][",props:{style:{color:"#C9D1D9"}}},{content:"'text'",props:{style:{color:"#A5D6FF"}}},{content:"]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"except",props:{style:{color:"#FF7B72"}}},{content:" (",props:{style:{color:"#C9D1D9"}}},{content:"KeyError",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"IndexError",props:{style:{color:"#79C0FF"}}},{content:", ",props:{style:{color:"#C9D1D9"}}},{content:"TypeError",props:{style:{color:"#79C0FF"}}},{content:"):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" pass",props:{style:{color:"#FF7B72"}}}]},{tokens:[{content:"print",props:{style:{color:"#79C0FF"}}},{content:"(message)",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsx)(o.p,{children:"This script contains two requests."}),"\n",(0,s.jsxs)(o.p,{children:["The first request uploads a file, such as ",(0,s.jsx)(o.code,{children:"fake-resume.txt"}),", to your Langflow server at the ",(0,s.jsx)(o.code,{children:"/v2/files"})," endpoint. This request returns a file path that can be referenced in subsequent Langflow requests, such as ",(0,s.jsx)(o.code,{children:"02791d46-812f-4988-ab1c-7c430214f8d5/fake-resume.txt"})]}),"\n",(0,s.jsxs)(o.p,{children:["The second request sends a chat message to the Langflow flow at the ",(0,s.jsx)(o.code,{children:"/v1/run/"})," endpoint.\nThe ",(0,s.jsx)(o.code,{children:"tweaks"})," parameter includes the path to the uploaded file as the variable ",(0,s.jsx)(o.code,{children:"uploaded_path"}),", and sends this file directly to the ",(0,s.jsx)(o.strong,{children:"File"})," component."]}),"\n"]}),"\n",(0,s.jsxs)(o.li,{children:["\n",(0,s.jsx)(o.p,{children:"Save and run the script to send the requests and test the flow."}),"\n",(0,s.jsx)(o.p,{children:"The initial output contains the JSON response object from the file upload endpoint, including the internal path where Langflow stores the file.\nThen, the LLM retrieves the file and evaluates its content, in this case the suitability of the resume for a job position."}),"\n",(0,s.jsxs)(n,{children:[(0,s.jsx)("summary",{children:"Result"}),(0,s.jsx)(o.p,{children:"The following is an example response from this tutorial's flow. Due to the nature of LLMs and variations in your inputs, your response might be different."}),(0,s.jsx)(d.Code,{codeConfig:h,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:'{"id":"793ba3d8-5e7a-4499-8b89-d9a7b6325fee","name":"fake-resume (1)","path":"02791d46-812f-4988-ab1c-7c430214f8d5/fake-resume.txt","size":1779,"provider":null}',props:{}}]},{tokens:[{content:"The resume for Emily J. Wilson presents a strong candidate for a position in your Marketing department. Here are some key points to consider:",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"### Strengths:",props:{}}]},{tokens:[{content:"1. **Experience**: With over 8 years in marketing, Emily has held progressively responsible positions, culminating in her current role as Marketing Director. This indicates a solid foundation in the field.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"2. **Quantifiable Achievements**: The resume highlights specific accomplishments, such as a 25% increase in brand recognition and a 30% sales increase after launching new product lines. These metrics demonstrate her ability to drive results.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"3. **Diverse Skill Set**: Emily's skills encompass various aspects of marketing, including strategy development, team management, social media marketing, event planning, and data analysis. This versatility can be beneficial in a dynamic marketing environment.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"4. **Educational Background**: Her MBA and a Bachelor's degree in Marketing provide a strong academic foundation, which is often valued in marketing roles.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"5. **Certifications**: The Certified Marketing Professional (CMP) and Google Analytics Certification indicate a commitment to professional development and staying current with industry standards.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"### Areas for Improvement:",props:{}}]},{tokens:[{content:"1. **Specificity in Skills**: While the skills listed are relevant, providing examples of how she has applied these skills in her previous roles could strengthen her resume further.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"2. **References**: While stating that references are available upon request is standard, including a couple of testimonials or notable endorsements could enhance credibility.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"3. **Formatting**: Ensure that the resume is visually appealing and easy to read. Clear headings and bullet points help in quickly identifying key information.",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"### Conclusion:",props:{}}]},{tokens:[{content:"Overall, Emily J. Wilson's resume reflects a well-rounded marketing professional with a proven track record of success. If her experience aligns with the specific needs of your Marketing department, she could be a valuable addition to your team. Consider inviting her for an interview to further assess her fit for the role.",props:{}}]}],lang:"text"},annotations:[]}]})]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(o.h2,{id:"next-steps",children:"Next steps"}),"\n",(0,s.jsx)(o.p,{children:"To continue building on this tutorial, try these next steps."}),"\n",(0,s.jsx)(o.h3,{id:"process-multiple-files-loaded-at-runtime",children:"Process multiple files loaded at runtime"}),"\n",(0,s.jsxs)(o.p,{children:["To process multiple files in a single flow run, add a separate ",(0,s.jsx)(o.strong,{children:"File"})," component for each file you want to ingest. Then, modify your script to upload each file, retrieve each returned file path, and then pass a unique file path to each ",(0,s.jsx)(o.strong,{children:"File"})," component ID."]}),"\n",(0,s.jsxs)(o.p,{children:["For example, you can modify ",(0,s.jsx)(o.code,{children:"tweaks"})," to accept multiple ",(0,s.jsx)(o.strong,{children:"File"})," components.\nThe following code is just an example; it isn't working code:"]}),"\n",(0,s.jsx)(d.Code,{codeConfig:h,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"## set multiple file paths",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:"file_paths ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" FILE_COMPONENT_1",props:{style:{color:"#79C0FF"}}},{content:": uploaded_path_1,",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" FILE_COMPONENT_2",props:{style:{color:"#79C0FF"}}},{content:": uploaded_path_2",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"def ",props:{style:{color:"#FF7B72"}}},{content:"chat_with_flow",props:{style:{color:"#D2A8FF"}}},{content:"(input_message, file_paths):",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' """Compare the contents of these two files."""',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" run_url ",props:{style:{color:"#C9D1D9"}}},{content:"= f",props:{style:{color:"#FF7B72"}}},{content:'"',props:{style:{color:"#A5D6FF"}}},{content:"{LANGFLOW_SERVER_ADDRESS}",props:{style:{color:"#79C0FF"}}},{content:"/api/v1/run/",props:{style:{color:"#A5D6FF"}}},{content:"{FLOW_ID}",props:{style:{color:"#79C0FF"}}},{content:'"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" # Prepare tweaks with both file paths",props:{style:{color:"#8B949E"}}}]},{tokens:[{content:" tweaks ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {}",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" for",props:{style:{color:"#FF7B72"}}},{content:" component_id, file_path ",props:{style:{color:"#C9D1D9"}}},{content:"in",props:{style:{color:"#FF7B72"}}},{content:" file_paths.items():",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" tweaks[component_id] ",props:{style:{color:"#C9D1D9"}}},{content:"=",props:{style:{color:"#FF7B72"}}},{content:" {",props:{style:{color:"#C9D1D9"}}},{content:'"path"',props:{style:{color:"#A5D6FF"}}},{content:": file_path}",props:{style:{color:"#C9D1D9"}}}]}],lang:"python"},annotations:[]}]}),"\n",(0,s.jsxs)(o.p,{children:["You can also use a ",(0,s.jsxs)(o.a,{href:"/components-data#directory",children:[(0,s.jsx)(o.strong,{children:"Directory"})," component"]})," to load all files in a directory or pass an archive file to the ",(0,s.jsx)(o.strong,{children:"File"})," component."]}),"\n",(0,s.jsx)(o.h3,{id:"upload-external-files-at-runtime",children:"Upload external files at runtime"}),"\n",(0,s.jsxs)(o.p,{children:["To upload files from another machine that isn't your local environment, your Langflow server must first be accessible over the internet. Then, authenticated users can upload files to your public Langflow server's ",(0,s.jsx)(o.code,{children:"/v2/files/"})," endpoint, as shown in the tutorial. For more information, see ",(0,s.jsx)(o.a,{href:"/deployment-overview",children:"Langflow deployment overview"}),"."]}),"\n",(0,s.jsx)(o.h3,{id:"preload-files-outside-the-chat-session",children:"Preload files outside the chat session"}),"\n",(0,s.jsxs)(o.p,{children:["You can use the ",(0,s.jsx)(o.strong,{children:"File"})," component to load files anywhere in a flow, not just in a chat session."]}),"\n",(0,s.jsxs)(o.p,{children:["In the visual editor, you can preload files to the ",(0,s.jsx)(o.strong,{children:"File"})," component by selecting them from your local machine or ",(0,s.jsx)(o.a,{href:"/concepts-file-management",children:"Langflow file management"}),"."]}),"\n",(0,s.jsx)(o.p,{children:"For example, you can preload an instructions file for a prompt template, or you can preload a vector store with documents that you want to query in a Retrieval Augmented Generation (RAG) flow."}),"\n",(0,s.jsxs)(o.p,{children:["For more information about the ",(0,s.jsx)(o.strong,{children:"File"})," component and other data loading components, see ",(0,s.jsx)(o.a,{href:"/components-data",children:"Data components"}),"."]})]})}function f(e={}){const{wrapper:o}={...(0,r.R)(),...e.components};return o?(0,s.jsx)(o,{...e,children:(0,s.jsx)(y,{...e})}):y(e)}function D(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},87481:(e,o,t)=>{t.d(o,{A:()=>n});const n=t.p+"assets/files/fake-resume-fa337cbdb18306bd29e3168f73409745.txt"}}]);
\ No newline at end of file
diff --git a/assets/js/runtime~main.a7b4d7ca.js b/assets/js/runtime~main.c31169c6.js
similarity index 98%
rename from assets/js/runtime~main.a7b4d7ca.js
rename to assets/js/runtime~main.c31169c6.js
index e619ba142f..5b7f32fbbb 100644
--- a/assets/js/runtime~main.a7b4d7ca.js
+++ b/assets/js/runtime~main.c31169c6.js
@@ -1 +1 @@
-(()=>{"use strict";var e,a,f,d,b,c={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={id:e,loaded:!1,exports:{}};return c[e].call(f.exports,f,f.exports,r),f.loaded=!0,f.exports}r.m=c,r.c=t,e=[],r.O=(a,f,d,b)=>{if(!f){var c=1/0;for(i=0;i=b)&&Object.keys(r.O).every(e=>r.O[e](f[o]))?f.splice(o--,1):(t=!1,b0&&e[i-1][2]>b;i--)e[i]=e[i-1];e[i]=[f,d,b]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,d){if(1&d&&(e=this(e)),8&d)return e;if("object"==typeof e&&e){if(4&d&&e.__esModule)return e;if(16&d&&"function"==typeof e.then)return e}var b=Object.create(null);r.r(b);var c={};a=a||[null,f({}),f([]),f(f)];for(var t=2&d&&e;"object"==typeof t&&!~a.indexOf(t);t=f(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 f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((a,f)=>(r.f[f](e,a),a),[])),r.u=e=>"assets/js/"+({15:"d803fa53",30:"db8c087e",38:"a99a45c9",44:"e3f369d5",78:"b768a3a5",93:"a3702f61",126:"ae70dfbf",129:"dfa3dc90",188:"7f7a8893",253:"bb45d4f9",351:"b9acb8d9",375:"3d81f1cf",446:"a4232cf8",598:"db4f3bbd",600:"ee87c775",681:"ffa0f8b1",750:"33b5ee95",824:"5015646b",879:"8bee5443",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",1861:"8ad67c3b",1876:"5c3b537a",1895:"d375ca1d",2076:"common",2102:"755d162a",2138:"1a4e3797",2272:"ca5faf5d",2278:"c4280da9",2348:"f2da9399",2360:"017d425f",2394:"c2ea283c",2423:"19bcb67f",2457:"46abd5bb",2460:"954b19af",2469:"cd086441",2475:"1ab69cbd",2565:"622fd833",2651:"8cd0650d",2741:"43ad9ba4",2752:"e14655eb",2888:"32270e71",2969:"f0ad3fbb",2990:"1d50b418",3164:"67f2dc6c",3240:"b079b393",3247:"f0b67137",3263:"730da84e",3345:"040305fb",3353:"2b4d41d7",3361:"8f633f11",3368:"efa0f9ee",3387:"3d67876e",3468:"c76bd485",3500:"c3c63498",3536:"2eb731bc",4036:"fbcfc90d",4085:"cb17b4e0",4218:"d5bb0e16",4314:"f6a246db",4341:"e1a0f423",4384:"622bdc6f",4573:"baacc2a1",4612:"6a9eca1a",4614:"e55b8e98",4644:"d3e886ab",4876:"44691977",4907:"86116998",4995:"62266e9d",5048:"3c440e04",5110:"e9fe1d10",5144:"944c5f91",5200:"ff7f32ba",5333:"70909872",5397:"eba86ea4",5412:"a6d50436",5660:"1b208f60",5663:"b1379b2b",5739:"69079906",5742:"aba21aa0",5757:"ad42ff54",5761:"7f193c41",5838:"bbb8ec1d",5903:"69d616f2",6006:"7819cc1c",6108:"2fed9fb3",6224:"ef9aa223",6256:"6888b60e",6289:"45e5859c",6311:"cce672fb",6459:"290c78e6",6513:"f13693f0",6538:"719cba95",6601:"81bb6a5c",6801:"acefda8b",6999:"d5ec984b",7098:"a7bd4aaa",7118:"7996108c",7243:"5d9d4350",7356:"2ea623f2",7484:"ad01e028",7502:"1a547ad8",7512:"4c09a7b3",7586:"17856424",7720:"3bfbe7c9",7807:"1a8a0a64",7824:"2b56b65e",7829:"7c27dc91",7841:"0132780e",7859:"593d9d00",7902:"619c7267",7964:"ff35961a",7968:"9b0af131",8090:"6e85978c",8267:"02f8077b",8268:"a4b6c971",8269:"c7f91cbe",8294:"f2bedfce",8336:"e7fd9095",8392:"20177945",8401:"17896441",8571:"da1ad91e",8593:"56350599",8607:"681e5335",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",9610:"453ae64a",9640:"3b25a2ae",9647:"5e95c892",9674:"feac1fba",9712:"d8c8efb9",9763:"aece522a",9781:"b796be74",9897:"f0eeb72e",9976:"230d5fdc",9986:"d1f3cfe5"}[e]||e)+"."+{15:"9c473cc0",30:"588897ea",38:"b8ed027f",44:"3af5a9c7",78:"7ad009cf",93:"9ea9cffa",126:"a7a5f9a6",129:"3ba52b1c",188:"4e4792ff",253:"602a1444",351:"51b77e3f",375:"acd073ae",416:"3c613765",446:"6fa3dbda",598:"b3822b4a",600:"0b7c16ab",681:"c0f429a0",750:"2685b869",824:"f6020b6d",879:"ab0d5951",956:"c0e5141d",957:"da9e1d2b",1006:"6ce8a2b3",1151:"714dbdbf",1162:"b63a4c1a",1193:"242eecf4",1303:"e992c50d",1308:"cae4889c",1345:"107bf5c4",1408:"5dcb045e",1446:"983947c6",1490:"fe4345ff",1567:"03827990",1861:"ad6f13d6",1876:"6bdd7026",1895:"e4c10299",2076:"cb526175",2102:"bd1ad4bd",2138:"ba6348e7",2237:"8bc4ac99",2272:"7051a23a",2278:"1ddd08e1",2348:"b86340f7",2360:"b5c0fc56",2394:"121a1bfa",2423:"5c01df73",2457:"acf2700c",2460:"9974300d",2469:"e484157e",2475:"750b5600",2565:"c0855ab5",2651:"7e09ae01",2741:"d019d0b4",2752:"c3faf5cc",2888:"60c72989",2969:"01715cea",2990:"5d4c787b",3164:"29b40649",3240:"45c91752",3247:"57df4572",3263:"eed80395",3345:"21c3547d",3353:"103e3390",3361:"b088dd3a",3368:"c96c639e",3387:"90f48fa7",3468:"adfc951f",3500:"18393c47",3536:"c0823170",4036:"bce8d46d",4085:"63c3ce67",4115:"24161c0a",4218:"71769542",4314:"b71b2f50",4341:"3378ef63",4384:"1a41038a",4573:"f98dc6da",4612:"b3b7c321",4614:"0976692d",4644:"78148375",4754:"5b9f9c4a",4876:"5ecf010a",4907:"dac44b60",4995:"5a913426",5048:"0ff3b516",5110:"33b03681",5144:"a356ed87",5200:"d646b528",5333:"4826cc3c",5397:"d8120b97",5412:"9f3949c5",5660:"4f9d6a2a",5663:"9ab44bc6",5739:"45ed451e",5742:"60b1d5b2",5757:"303d31a7",5761:"c1b1a11e",5838:"f4c986e1",5903:"7bfe45dc",6006:"3782eff4",6108:"739b3f08",6224:"ba0a329e",6256:"2d642783",6289:"71aa9f57",6311:"51b089df",6459:"c563dca9",6513:"5855f531",6538:"13f4f1bb",6601:"2c7b9168",6801:"7a082c1b",6999:"f53cf682",7098:"fc1f6434",7118:"99cbb21e",7243:"b03b36c5",7356:"9e767a97",7484:"7e1f923c",7502:"e9ba960c",7512:"1b93466d",7586:"addc410c",7720:"ee160c19",7807:"488d1d4c",7824:"b8b871bd",7829:"e275577d",7841:"1294a085",7859:"fe6d9284",7902:"141ef15f",7964:"bd456230",7968:"7e2db735",8090:"4dfa2cd0",8158:"20de8b80",8267:"01bbf89b",8268:"b958c68a",8269:"1c2a69de",8294:"a8414e18",8336:"753075cb",8392:"af9b5e46",8401:"56391867",8571:"28795f86",8593:"9d81778d",8607:"0a35e402",8649:"71663b3e",8702:"cbda211f",8750:"e022c31a",8765:"01d94d6b",8822:"66b38a8d",8862:"282df59f",8913:"47209f3b",8963:"18acdb77",8990:"0a8bb11a",9033:"4598527a",9048:"8548a600",9213:"fbd36b40",9227:"e123f26e",9264:"04d2186d",9315:"38238c02",9331:"db87598b",9363:"6229918d",9459:"36722d67",9482:"2068dcd9",9610:"d9faf170",9640:"58b339b5",9647:"5cb928a1",9674:"7677c370",9712:"517bdf0f",9763:"4c61d226",9781:"500582d3",9897:"e22bb448",9976:"ecd52ce3",9986:"5f537262"}[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),d={},b="langflow-docs:",r.l=(e,a,f,c)=>{if(d[e])d[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var b=d[e];if(delete d[e],t.parentNode&&t.parentNode.removeChild(t),b&&b.forEach(e=>e(f)),a)return a(f)},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",86116998:"4907",d803fa53:"15",db8c087e:"30",a99a45c9:"38",e3f369d5:"44",b768a3a5:"78",a3702f61:"93",ae70dfbf:"126",dfa3dc90:"129","7f7a8893":"188",bb45d4f9:"253",b9acb8d9:"351","3d81f1cf":"375",a4232cf8:"446",db4f3bbd:"598",ee87c775:"600",ffa0f8b1:"681","33b5ee95":"750","5015646b":"824","8bee5443":"879","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","8ad67c3b":"1861","5c3b537a":"1876",d375ca1d:"1895",common:"2076","755d162a":"2102","1a4e3797":"2138",ca5faf5d:"2272",c4280da9:"2278",f2da9399:"2348","017d425f":"2360",c2ea283c:"2394","19bcb67f":"2423","46abd5bb":"2457","954b19af":"2460",cd086441:"2469","1ab69cbd":"2475","622fd833":"2565","8cd0650d":"2651","43ad9ba4":"2741",e14655eb:"2752","32270e71":"2888",f0ad3fbb:"2969","1d50b418":"2990","67f2dc6c":"3164",b079b393:"3240",f0b67137:"3247","730da84e":"3263","040305fb":"3345","2b4d41d7":"3353","8f633f11":"3361",efa0f9ee:"3368","3d67876e":"3387",c76bd485:"3468",c3c63498:"3500","2eb731bc":"3536",fbcfc90d:"4036",cb17b4e0:"4085",d5bb0e16:"4218",f6a246db:"4314",e1a0f423:"4341","622bdc6f":"4384",baacc2a1:"4573","6a9eca1a":"4612",e55b8e98:"4614",d3e886ab:"4644","62266e9d":"4995","3c440e04":"5048",e9fe1d10:"5110","944c5f91":"5144",ff7f32ba:"5200",eba86ea4:"5397",a6d50436:"5412","1b208f60":"5660",b1379b2b:"5663",aba21aa0:"5742",ad42ff54:"5757","7f193c41":"5761",bbb8ec1d:"5838","69d616f2":"5903","7819cc1c":"6006","2fed9fb3":"6108",ef9aa223:"6224","6888b60e":"6256","45e5859c":"6289",cce672fb:"6311","290c78e6":"6459",f13693f0:"6513","719cba95":"6538","81bb6a5c":"6601",acefda8b:"6801",d5ec984b:"6999",a7bd4aaa:"7098","7996108c":"7118","5d9d4350":"7243","2ea623f2":"7356",ad01e028:"7484","1a547ad8":"7502","4c09a7b3":"7512","3bfbe7c9":"7720","1a8a0a64":"7807","2b56b65e":"7824","7c27dc91":"7829","0132780e":"7841","593d9d00":"7859","619c7267":"7902",ff35961a:"7964","9b0af131":"7968","6e85978c":"8090","02f8077b":"8267",a4b6c971:"8268",c7f91cbe:"8269",f2bedfce:"8294",e7fd9095:"8336",da1ad91e:"8571","681e5335":"8607","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","453ae64a":"9610","3b25a2ae":"9640","5e95c892":"9647",feac1fba:"9674",d8c8efb9:"9712",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,f)=>{var d=r.o(e,a)?e[a]:void 0;if(0!==d)if(d)f.push(d[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var b=new Promise((f,b)=>d=e[a]=[f,b]);f.push(d[2]=b);var c=r.p+r.u(a),t=new Error;r.l(c,f=>{if(r.o(e,a)&&(0!==(d=e[a])&&(e[a]=void 0),d)){var b=f&&("load"===f.type?"missing":f.type),c=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+b+": "+c+")",t.name="ChunkLoadError",t.type=b,t.request=c,d[1](t)}},"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var d,b,c=f[0],t=f[1],o=f[2],n=0;if(c.some(a=>0!==e[a])){for(d in t)r.o(t,d)&&(r.m[d]=t[d]);if(o)var i=o(r)}for(a&&a(f);n{"use strict";var e,a,f,d,b,c={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={id:e,loaded:!1,exports:{}};return c[e].call(f.exports,f,f.exports,r),f.loaded=!0,f.exports}r.m=c,r.c=t,e=[],r.O=(a,f,d,b)=>{if(!f){var c=1/0;for(i=0;i=b)&&Object.keys(r.O).every(e=>r.O[e](f[o]))?f.splice(o--,1):(t=!1,b0&&e[i-1][2]>b;i--)e[i]=e[i-1];e[i]=[f,d,b]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,d){if(1&d&&(e=this(e)),8&d)return e;if("object"==typeof e&&e){if(4&d&&e.__esModule)return e;if(16&d&&"function"==typeof e.then)return e}var b=Object.create(null);r.r(b);var c={};a=a||[null,f({}),f([]),f(f)];for(var t=2&d&&e;"object"==typeof t&&!~a.indexOf(t);t=f(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 f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((a,f)=>(r.f[f](e,a),a),[])),r.u=e=>"assets/js/"+({15:"d803fa53",30:"db8c087e",38:"a99a45c9",44:"e3f369d5",78:"b768a3a5",93:"a3702f61",126:"ae70dfbf",129:"dfa3dc90",188:"7f7a8893",253:"bb45d4f9",351:"b9acb8d9",375:"3d81f1cf",446:"a4232cf8",598:"db4f3bbd",600:"ee87c775",681:"ffa0f8b1",750:"33b5ee95",824:"5015646b",879:"8bee5443",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",1861:"8ad67c3b",1876:"5c3b537a",1895:"d375ca1d",2076:"common",2102:"755d162a",2138:"1a4e3797",2272:"ca5faf5d",2278:"c4280da9",2348:"f2da9399",2360:"017d425f",2394:"c2ea283c",2423:"19bcb67f",2457:"46abd5bb",2460:"954b19af",2469:"cd086441",2475:"1ab69cbd",2565:"622fd833",2651:"8cd0650d",2741:"43ad9ba4",2752:"e14655eb",2888:"32270e71",2969:"f0ad3fbb",2990:"1d50b418",3164:"67f2dc6c",3240:"b079b393",3247:"f0b67137",3263:"730da84e",3345:"040305fb",3353:"2b4d41d7",3361:"8f633f11",3368:"efa0f9ee",3387:"3d67876e",3468:"c76bd485",3500:"c3c63498",3536:"2eb731bc",4036:"fbcfc90d",4085:"cb17b4e0",4218:"d5bb0e16",4314:"f6a246db",4341:"e1a0f423",4384:"622bdc6f",4573:"baacc2a1",4612:"6a9eca1a",4614:"e55b8e98",4644:"d3e886ab",4876:"44691977",4907:"86116998",4995:"62266e9d",5048:"3c440e04",5110:"e9fe1d10",5144:"944c5f91",5200:"ff7f32ba",5333:"70909872",5397:"eba86ea4",5412:"a6d50436",5660:"1b208f60",5663:"b1379b2b",5739:"69079906",5742:"aba21aa0",5757:"ad42ff54",5761:"7f193c41",5838:"bbb8ec1d",5903:"69d616f2",6006:"7819cc1c",6108:"2fed9fb3",6224:"ef9aa223",6256:"6888b60e",6289:"45e5859c",6311:"cce672fb",6459:"290c78e6",6513:"f13693f0",6538:"719cba95",6601:"81bb6a5c",6801:"acefda8b",6999:"d5ec984b",7098:"a7bd4aaa",7118:"7996108c",7243:"5d9d4350",7356:"2ea623f2",7484:"ad01e028",7502:"1a547ad8",7512:"4c09a7b3",7586:"17856424",7720:"3bfbe7c9",7807:"1a8a0a64",7824:"2b56b65e",7829:"7c27dc91",7841:"0132780e",7859:"593d9d00",7902:"619c7267",7964:"ff35961a",7968:"9b0af131",8090:"6e85978c",8267:"02f8077b",8268:"a4b6c971",8269:"c7f91cbe",8294:"f2bedfce",8336:"e7fd9095",8392:"20177945",8401:"17896441",8571:"da1ad91e",8593:"56350599",8607:"681e5335",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",9610:"453ae64a",9640:"3b25a2ae",9647:"5e95c892",9674:"feac1fba",9712:"d8c8efb9",9763:"aece522a",9781:"b796be74",9897:"f0eeb72e",9976:"230d5fdc",9986:"d1f3cfe5"}[e]||e)+"."+{15:"9c473cc0",30:"588897ea",38:"b8ed027f",44:"3af5a9c7",78:"7ad009cf",93:"9ea9cffa",126:"a7a5f9a6",129:"3ba52b1c",188:"4e4792ff",253:"602a1444",351:"51b77e3f",375:"acd073ae",416:"3c613765",446:"6fa3dbda",598:"b3822b4a",600:"0b7c16ab",681:"c0f429a0",750:"2685b869",824:"f6020b6d",879:"ab0d5951",956:"c0e5141d",957:"da9e1d2b",1006:"6ce8a2b3",1151:"714dbdbf",1162:"b63a4c1a",1193:"242eecf4",1303:"e992c50d",1308:"cae4889c",1345:"107bf5c4",1408:"eefef1c8",1446:"983947c6",1490:"fe4345ff",1567:"03827990",1861:"ad6f13d6",1876:"6bdd7026",1895:"e4c10299",2076:"cb526175",2102:"bd1ad4bd",2138:"ba6348e7",2237:"8bc4ac99",2272:"7051a23a",2278:"1ddd08e1",2348:"b86340f7",2360:"b5c0fc56",2394:"121a1bfa",2423:"5c01df73",2457:"acf2700c",2460:"9974300d",2469:"e484157e",2475:"750b5600",2565:"c0855ab5",2651:"7e09ae01",2741:"d019d0b4",2752:"c3faf5cc",2888:"60c72989",2969:"01715cea",2990:"5d4c787b",3164:"29b40649",3240:"45c91752",3247:"57df4572",3263:"eed80395",3345:"21c3547d",3353:"103e3390",3361:"b088dd3a",3368:"c96c639e",3387:"90f48fa7",3468:"adfc951f",3500:"18393c47",3536:"c0823170",4036:"bce8d46d",4085:"63c3ce67",4115:"24161c0a",4218:"71769542",4314:"b71b2f50",4341:"3378ef63",4384:"1a41038a",4573:"f98dc6da",4612:"b3b7c321",4614:"0976692d",4644:"78148375",4754:"5b9f9c4a",4876:"5ecf010a",4907:"dac44b60",4995:"5a913426",5048:"0ff3b516",5110:"33b03681",5144:"a356ed87",5200:"d646b528",5333:"4826cc3c",5397:"d8120b97",5412:"9f3949c5",5660:"4f9d6a2a",5663:"9ab44bc6",5739:"45ed451e",5742:"60b1d5b2",5757:"303d31a7",5761:"c1b1a11e",5838:"f4c986e1",5903:"7bfe45dc",6006:"3782eff4",6108:"739b3f08",6224:"ba0a329e",6256:"2d642783",6289:"71aa9f57",6311:"51b089df",6459:"c563dca9",6513:"5855f531",6538:"13f4f1bb",6601:"2c7b9168",6801:"7a082c1b",6999:"f53cf682",7098:"fc1f6434",7118:"99cbb21e",7243:"b03b36c5",7356:"9e767a97",7484:"7e1f923c",7502:"e9ba960c",7512:"1b93466d",7586:"addc410c",7720:"ee160c19",7807:"488d1d4c",7824:"ed1fe730",7829:"e275577d",7841:"1294a085",7859:"fe6d9284",7902:"141ef15f",7964:"bd456230",7968:"7e2db735",8090:"4dfa2cd0",8158:"20de8b80",8267:"01bbf89b",8268:"b958c68a",8269:"1c2a69de",8294:"a8414e18",8336:"753075cb",8392:"af9b5e46",8401:"56391867",8571:"28795f86",8593:"9d81778d",8607:"0a35e402",8649:"71663b3e",8702:"cbda211f",8750:"e022c31a",8765:"01d94d6b",8822:"66b38a8d",8862:"282df59f",8913:"47209f3b",8963:"18acdb77",8990:"0a8bb11a",9033:"4598527a",9048:"8548a600",9213:"fbd36b40",9227:"e123f26e",9264:"04d2186d",9315:"38238c02",9331:"db87598b",9363:"6229918d",9459:"36722d67",9482:"2068dcd9",9610:"d9faf170",9640:"58b339b5",9647:"5cb928a1",9674:"7677c370",9712:"517bdf0f",9763:"4c61d226",9781:"500582d3",9897:"e22bb448",9976:"ecd52ce3",9986:"5f537262"}[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),d={},b="langflow-docs:",r.l=(e,a,f,c)=>{if(d[e])d[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var b=d[e];if(delete d[e],t.parentNode&&t.parentNode.removeChild(t),b&&b.forEach(e=>e(f)),a)return a(f)},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",86116998:"4907",d803fa53:"15",db8c087e:"30",a99a45c9:"38",e3f369d5:"44",b768a3a5:"78",a3702f61:"93",ae70dfbf:"126",dfa3dc90:"129","7f7a8893":"188",bb45d4f9:"253",b9acb8d9:"351","3d81f1cf":"375",a4232cf8:"446",db4f3bbd:"598",ee87c775:"600",ffa0f8b1:"681","33b5ee95":"750","5015646b":"824","8bee5443":"879","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","8ad67c3b":"1861","5c3b537a":"1876",d375ca1d:"1895",common:"2076","755d162a":"2102","1a4e3797":"2138",ca5faf5d:"2272",c4280da9:"2278",f2da9399:"2348","017d425f":"2360",c2ea283c:"2394","19bcb67f":"2423","46abd5bb":"2457","954b19af":"2460",cd086441:"2469","1ab69cbd":"2475","622fd833":"2565","8cd0650d":"2651","43ad9ba4":"2741",e14655eb:"2752","32270e71":"2888",f0ad3fbb:"2969","1d50b418":"2990","67f2dc6c":"3164",b079b393:"3240",f0b67137:"3247","730da84e":"3263","040305fb":"3345","2b4d41d7":"3353","8f633f11":"3361",efa0f9ee:"3368","3d67876e":"3387",c76bd485:"3468",c3c63498:"3500","2eb731bc":"3536",fbcfc90d:"4036",cb17b4e0:"4085",d5bb0e16:"4218",f6a246db:"4314",e1a0f423:"4341","622bdc6f":"4384",baacc2a1:"4573","6a9eca1a":"4612",e55b8e98:"4614",d3e886ab:"4644","62266e9d":"4995","3c440e04":"5048",e9fe1d10:"5110","944c5f91":"5144",ff7f32ba:"5200",eba86ea4:"5397",a6d50436:"5412","1b208f60":"5660",b1379b2b:"5663",aba21aa0:"5742",ad42ff54:"5757","7f193c41":"5761",bbb8ec1d:"5838","69d616f2":"5903","7819cc1c":"6006","2fed9fb3":"6108",ef9aa223:"6224","6888b60e":"6256","45e5859c":"6289",cce672fb:"6311","290c78e6":"6459",f13693f0:"6513","719cba95":"6538","81bb6a5c":"6601",acefda8b:"6801",d5ec984b:"6999",a7bd4aaa:"7098","7996108c":"7118","5d9d4350":"7243","2ea623f2":"7356",ad01e028:"7484","1a547ad8":"7502","4c09a7b3":"7512","3bfbe7c9":"7720","1a8a0a64":"7807","2b56b65e":"7824","7c27dc91":"7829","0132780e":"7841","593d9d00":"7859","619c7267":"7902",ff35961a:"7964","9b0af131":"7968","6e85978c":"8090","02f8077b":"8267",a4b6c971:"8268",c7f91cbe:"8269",f2bedfce:"8294",e7fd9095:"8336",da1ad91e:"8571","681e5335":"8607","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","453ae64a":"9610","3b25a2ae":"9640","5e95c892":"9647",feac1fba:"9674",d8c8efb9:"9712",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,f)=>{var d=r.o(e,a)?e[a]:void 0;if(0!==d)if(d)f.push(d[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var b=new Promise((f,b)=>d=e[a]=[f,b]);f.push(d[2]=b);var c=r.p+r.u(a),t=new Error;r.l(c,f=>{if(r.o(e,a)&&(0!==(d=e[a])&&(e[a]=void 0),d)){var b=f&&("load"===f.type?"missing":f.type),c=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+b+": "+c+")",t.name="ChunkLoadError",t.type=b,t.request=c,d[1](t)}},"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var d,b,c=f[0],t=f[1],o=f[2],n=0;if(c.some(a=>0!==e[a])){for(d in t)r.o(t,d)&&(r.m[d]=t[d]);if(o)var i=o(r)}for(a&&a(f);n
-
+
diff --git a/bundles-amazon.html b/bundles-amazon.html
index d41507e11e..b0b573c46a 100644
--- a/bundles-amazon.html
+++ b/bundles-amazon.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-anthropic.html b/bundles-anthropic.html
index 446e58603c..9d6aac77b2 100644
--- a/bundles-anthropic.html
+++ b/bundles-anthropic.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-apify.html b/bundles-apify.html
index 00c5aeefc5..e120b0b013 100644
--- a/bundles-apify.html
+++ b/bundles-apify.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-arxiv.html b/bundles-arxiv.html
index 9246e513fb..b386412e3f 100644
--- a/bundles-arxiv.html
+++ b/bundles-arxiv.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-assemblyai.html b/bundles-assemblyai.html
index 4aec5de664..c9dad5dac8 100644
--- a/bundles-assemblyai.html
+++ b/bundles-assemblyai.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-azure.html b/bundles-azure.html
index d7b5f3a65b..adb1d3616d 100644
--- a/bundles-azure.html
+++ b/bundles-azure.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-baidu.html b/bundles-baidu.html
index e64a12a83e..1a0b95c5a1 100644
--- a/bundles-baidu.html
+++ b/bundles-baidu.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-bing.html b/bundles-bing.html
index fecaeb8004..4542b8c15d 100644
--- a/bundles-bing.html
+++ b/bundles-bing.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-cassandra.html b/bundles-cassandra.html
index 4e0d5bd6be..29ed140d1d 100644
--- a/bundles-cassandra.html
+++ b/bundles-cassandra.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-chroma.html b/bundles-chroma.html
index 70b8af9624..d90d34efb5 100644
--- a/bundles-chroma.html
+++ b/bundles-chroma.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-cleanlab.html b/bundles-cleanlab.html
index 73f1dd43a2..bdfa0bb8c0 100644
--- a/bundles-cleanlab.html
+++ b/bundles-cleanlab.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-clickhouse.html b/bundles-clickhouse.html
index dd4217df1d..4bc87455f3 100644
--- a/bundles-clickhouse.html
+++ b/bundles-clickhouse.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-cloudflare.html b/bundles-cloudflare.html
index 36f25f36f1..fb9fea66e8 100644
--- a/bundles-cloudflare.html
+++ b/bundles-cloudflare.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-cohere.html b/bundles-cohere.html
index 59c16794bc..c3692d9004 100644
--- a/bundles-cohere.html
+++ b/bundles-cohere.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-composio.html b/bundles-composio.html
index 1d6ad439a6..67667bf547 100644
--- a/bundles-composio.html
+++ b/bundles-composio.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-couchbase.html b/bundles-couchbase.html
index 71c4485df4..09a7e4a7ea 100644
--- a/bundles-couchbase.html
+++ b/bundles-couchbase.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-datastax.html b/bundles-datastax.html
index 097ba6b1ee..104dd2d696 100644
--- a/bundles-datastax.html
+++ b/bundles-datastax.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-deepseek.html b/bundles-deepseek.html
index e7a06a85eb..89dc488ce3 100644
--- a/bundles-deepseek.html
+++ b/bundles-deepseek.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-docling.html b/bundles-docling.html
index 80fed88ead..94568c42bd 100644
--- a/bundles-docling.html
+++ b/bundles-docling.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-duckduckgo.html b/bundles-duckduckgo.html
index 22f3263119..cbb92dbba2 100644
--- a/bundles-duckduckgo.html
+++ b/bundles-duckduckgo.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-elastic.html b/bundles-elastic.html
index 48b5b6c516..0c1e02876e 100644
--- a/bundles-elastic.html
+++ b/bundles-elastic.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-exa.html b/bundles-exa.html
index c8fcbdffbe..e42fc6c064 100644
--- a/bundles-exa.html
+++ b/bundles-exa.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-faiss.html b/bundles-faiss.html
index 6c8d50d46e..c107c14dc4 100644
--- a/bundles-faiss.html
+++ b/bundles-faiss.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-glean.html b/bundles-glean.html
index d99f49f43c..e7b56fba53 100644
--- a/bundles-glean.html
+++ b/bundles-glean.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-google.html b/bundles-google.html
index 837169f8e0..8d39ed31c3 100644
--- a/bundles-google.html
+++ b/bundles-google.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-groq.html b/bundles-groq.html
index cab5db8791..4071877ee7 100644
--- a/bundles-groq.html
+++ b/bundles-groq.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-huggingface.html b/bundles-huggingface.html
index 39a01a4289..62e9a67b99 100644
--- a/bundles-huggingface.html
+++ b/bundles-huggingface.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-ibm.html b/bundles-ibm.html
index 33802b2129..7d0695355a 100644
--- a/bundles-ibm.html
+++ b/bundles-ibm.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-icosacomputing.html b/bundles-icosacomputing.html
index 523093fb63..4bbdf6abda 100644
--- a/bundles-icosacomputing.html
+++ b/bundles-icosacomputing.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-langchain.html b/bundles-langchain.html
index c53ff6fb17..66bc9003c9 100644
--- a/bundles-langchain.html
+++ b/bundles-langchain.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-lmstudio.html b/bundles-lmstudio.html
index 67e3d77be8..7252a308b5 100644
--- a/bundles-lmstudio.html
+++ b/bundles-lmstudio.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-maritalk.html b/bundles-maritalk.html
index 768b2e5a98..24cc4f951b 100644
--- a/bundles-maritalk.html
+++ b/bundles-maritalk.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-mem0.html b/bundles-mem0.html
index b46056fdcd..deebd47f11 100644
--- a/bundles-mem0.html
+++ b/bundles-mem0.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-milvus.html b/bundles-milvus.html
index 32acb9c98c..5b9bc0947f 100644
--- a/bundles-milvus.html
+++ b/bundles-milvus.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-mistralai.html b/bundles-mistralai.html
index 76ac6f041a..2d31744cd2 100644
--- a/bundles-mistralai.html
+++ b/bundles-mistralai.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-mongodb.html b/bundles-mongodb.html
index 5d424b8087..9090e375ff 100644
--- a/bundles-mongodb.html
+++ b/bundles-mongodb.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-notion.html b/bundles-notion.html
index 44d59bb3ea..151466d025 100644
--- a/bundles-notion.html
+++ b/bundles-notion.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-novita.html b/bundles-novita.html
index 938854980e..478927e6f5 100644
--- a/bundles-novita.html
+++ b/bundles-novita.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-nvidia.html b/bundles-nvidia.html
index d4f608092b..9fc98ead1a 100644
--- a/bundles-nvidia.html
+++ b/bundles-nvidia.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-ollama.html b/bundles-ollama.html
index 156fec8108..87124d3313 100644
--- a/bundles-ollama.html
+++ b/bundles-ollama.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-openai.html b/bundles-openai.html
index 6d9c47cd26..c44ddcad27 100644
--- a/bundles-openai.html
+++ b/bundles-openai.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-openrouter.html b/bundles-openrouter.html
index 25a22c5ff7..bf7ccbda1c 100644
--- a/bundles-openrouter.html
+++ b/bundles-openrouter.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-perplexity.html b/bundles-perplexity.html
index b1033a7911..bcc499520e 100644
--- a/bundles-perplexity.html
+++ b/bundles-perplexity.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-pgvector.html b/bundles-pgvector.html
index 6b737d4b7a..5f777d4236 100644
--- a/bundles-pgvector.html
+++ b/bundles-pgvector.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-pinecone.html b/bundles-pinecone.html
index 4840d4fa55..725c33f015 100644
--- a/bundles-pinecone.html
+++ b/bundles-pinecone.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-qdrant.html b/bundles-qdrant.html
index 1023cbfec9..2f45e51cfc 100644
--- a/bundles-qdrant.html
+++ b/bundles-qdrant.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-redis.html b/bundles-redis.html
index a8d6384690..b07c88f8e5 100644
--- a/bundles-redis.html
+++ b/bundles-redis.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-sambanova.html b/bundles-sambanova.html
index f60584c1fb..b5a5d60631 100644
--- a/bundles-sambanova.html
+++ b/bundles-sambanova.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-searchapi.html b/bundles-searchapi.html
index 0a79e3208c..f17cc59614 100644
--- a/bundles-searchapi.html
+++ b/bundles-searchapi.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-serper.html b/bundles-serper.html
index 5e26b0bce9..d43bbc2049 100644
--- a/bundles-serper.html
+++ b/bundles-serper.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-supabase.html b/bundles-supabase.html
index 82e6d00b70..690f333fe1 100644
--- a/bundles-supabase.html
+++ b/bundles-supabase.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-upstash.html b/bundles-upstash.html
index 398d0b2596..fb95c9e6d9 100644
--- a/bundles-upstash.html
+++ b/bundles-upstash.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-vectara.html b/bundles-vectara.html
index e25a4fbf68..b4f68c06ca 100644
--- a/bundles-vectara.html
+++ b/bundles-vectara.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-vertexai.html b/bundles-vertexai.html
index fb2da55748..f1a6f28c4b 100644
--- a/bundles-vertexai.html
+++ b/bundles-vertexai.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-weaviate.html b/bundles-weaviate.html
index 63e31642d7..f95c8b12b0 100644
--- a/bundles-weaviate.html
+++ b/bundles-weaviate.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-wikipedia.html b/bundles-wikipedia.html
index 1507270110..67720b50dc 100644
--- a/bundles-wikipedia.html
+++ b/bundles-wikipedia.html
@@ -24,7 +24,7 @@
-
+
diff --git a/bundles-xai.html b/bundles-xai.html
index 35e9d46934..2acdf2d3d7 100644
--- a/bundles-xai.html
+++ b/bundles-xai.html
@@ -24,7 +24,7 @@
-
+
diff --git a/chat-with-files.html b/chat-with-files.html
index 453fe0af65..6688780f97 100644
--- a/chat-with-files.html
+++ b/chat-with-files.html
@@ -24,7 +24,7 @@
-
+
@@ -96,7 +96,7 @@ To connect ports, click and drag from one port to the other.
The result includes the outcome of the flow run and the LLM's response.
This example uses a local Langflow instance, and it asks the LLM to evaluate a sample resume.
If you don't have a resume on hand, you can download fake-resume.txt.
-
tip
For help with constructing file upload requests in Python, JavaScript, and curl, see the Langflow File Upload Utility.
+
tip
For help with constructing file upload requests in Python, JavaScript, and curl, see the Langflow File Upload Utility.
To construct the request, gather the following information:
diff --git a/chat-with-rag.html b/chat-with-rag.html
index 2149945714..8efcad4b7d 100644
--- a/chat-with-rag.html
+++ b/chat-with-rag.html
@@ -24,7 +24,7 @@
-
+
@@ -90,7 +90,7 @@ Continue the tutorial to learn how to use the loading flow to load data into you
The file is loaded to your Langflow server.
To load the data into your vector database, click the vector store component, and then click Run component to run the selected component and all prior dependent components.
To load data programmatically, use the /v2/files/ and /v1/run/$FLOW_ID endpoints. The first endpoint loads a file to your Langflow server, and then returns an uploaded file path. The second endpoint runs the Load Data Flow, referencing the uploaded file path, to chunk, embed, and load the data into the vector store.
The following script demonstrates this process.
-For help with creating this script, use the Langflow File Upload Utility.
_37
// Node 18+ example using global fetch, FormData, and Blob
_37
import fs from 'fs/promises';
_37
_37
// 1. Prepare the form data with the file to upload
When the flow runs, the flow ingests the selected file, chunks the data, loads the data into the vector store database, and then generates embeddings for the chunks, which are also stored in the vector store.
Your database now contains data with vector embeddings that an LLM can use as context to respond to queries, as demonstrated in the next section of the tutorial.
Chat with your flow from a JavaScript application​