mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-24 07:34:10 +08:00
130 lines
50 KiB
HTML
130 lines
50 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Tutorials/chat-with-rag" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.8.1">
|
||
<title data-rh="true">Create a vector RAG chatbot | Langflow Documentation</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://docs.langflow.org/chat-with-rag"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Create a vector RAG chatbot | Langflow Documentation"><meta data-rh="true" name="description" content="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."><meta data-rh="true" property="og:description" content="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."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.langflow.org/chat-with-rag"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/chat-with-rag" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/chat-with-rag" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://UZK6BDPCVY-dsn.algolia.net" crossorigin="anonymous"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Create a vector RAG chatbot","item":"https://docs.langflow.org/chat-with-rag"}]}</script><link rel="preconnect" href="https://www.google-analytics.com">
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SLQFLQ3KPT"></script>
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-SLQFLQ3KPT",{})</script>
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="search" type="application/opensearchdescription+xml" title="Langflow Documentation" href="/opensearch.xml">
|
||
|
||
|
||
|
||
<script>!function(){var e="analytics",t=window[e]=window[e]||[];if(!t.initialize)if(t.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{t.invoked=!0,t.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"],t.factory=function(n){return function(){if(window[e].initialized)return window[e][n].apply(window[e],arguments);var r=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(n)>-1){var i=document.querySelector("link[rel='canonical']");r.push({__t:"bpc",c:i&&i.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}return r.unshift(n),t.push(r),t}};for(var n=0;n<t.methods.length;n++){var r=t.methods[n];t[r]=t.factory(r)}t.load=function(n,r){var i=document.createElement("script");i.type="text/javascript",i.async=!0,i.setAttribute("data-global-segment-analytics-key",e),i.src="https://cdn.segment.com/analytics.js/v1/"+n+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(i,a),t._loadOptions=r},t._writeKey="60AfGDrVxy8nAGJngo3fCYWG4LvhMAlG",t.SNIPPET_VERSION="5.2.0",t.load("60AfGDrVxy8nAGJngo3fCYWG4LvhMAlG"),t.page()}}()</script>
|
||
<script>window.__SCROLL_TRACKING_CONFIG__={selectors:[{selector:"h1, h2, h3, h4, h5, h6",eventName:"Docs.langflow.org - Heading Viewed",properties:{element_type:"heading"}},{selector:".ch-codeblock",eventName:"Docs.langflow.org - Codeblock Viewed",properties:{element_type:"code",language:"helper:codeLanguage"}}]}</script>
|
||
|
||
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@550;600&display=swap">
|
||
<script>!function(){window.semaphore=window.semaphore||[],window.ketch=function(){window.semaphore.push(arguments)};var e=document.createElement("script");e.type="text/javascript",e.src="https://global.ketchcdn.com/web/v3/config/datastax/langflow_org_web/boot.js",e.defer=e.async=!0,document.getElementsByTagName("head")[0].appendChild(e)}()</script>
|
||
<script defer="true">!function(){const e=e=>{if(window.gtag&&e.purposes&&"analytics"in e.purposes&&"targeted_advertising"in e.purposes){const n=!0===e.purposes.analytics?"granted":"denied",t=!0===e.purposes.targeted_advertising?"granted":"denied",a={analytics_storage:n,ad_personalization:t,ad_storage:t,ad_user_data:t};window.gtag("consent","update",a)}};window.ketch&&window.ketch("on","consent",e)}()</script><link rel="stylesheet" href="/assets/css/styles.40667d1b.css">
|
||
<script src="/assets/js/runtime~main.77c6ff16.js" defer="defer"></script>
|
||
<script src="/assets/js/main.6b3faa68.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
|
||
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
|
||
</defs></svg>
|
||
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top navbarHideable_m1mJ"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/lf-docs-light.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/lf-docs-dark.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/langflow-ai/langflow" target="_blank" class="navbar__item navbar__link header-github-link" data-event="Docs.langflow.org - Social Clicked" data-platform="github"></a><a href="https://twitter.com/langflow_ai" target="_blank" class="navbar__item navbar__link header-twitter-link" data-event="Docs.langflow.org - Social Clicked" data-platform="x"></a><a href="https://discord.gg/EqksyE2EX9" target="_blank" class="navbar__item navbar__link header-discord-link" data-event="Docs.langflow.org - Social Clicked" data-platform="discord"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd sidebarWithHideableNavbar_wUlq"><a tabindex="-1" class="sidebarLogo_isFc" href="/"><img src="/img/lf-docs-light.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/lf-docs-dark.svg" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"></a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/">Welcome to Langflow</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/about-langflow">Get started</a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/about-langflow">About Langflow</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/get-started-installation">Install Langflow</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/get-started-quickstart">Quickstart</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" tabindex="0" href="/chat-with-rag">Tutorials</a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/chat-with-rag">Create a vector RAG chatbot</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/chat-with-files">Create a chatbot that can ingest files</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/agent-tutorial">Connect applications to agents</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/mcp-tutorial">Connect to MCP servers from your application</a></li></ul></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/concepts-overview">Flows</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/agents">Agents</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/mcp-client">Model Context Protocol (MCP)</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/api-keys-and-authentication">Develop</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/deployment-overview">Deploy</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/concepts-components">Components reference</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/api-reference-api-examples">API reference</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/contributing-community">Contribute</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/release-notes">Release notes</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/troubleshoot">Support</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 sidebar-ad">
|
||
<a href="https://www.langflow.org/desktop" target="_blank" class="menu__link">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g clip-path="url(#clip0_1645_37)">
|
||
<path d="M12 17H20C21.1046 17 22 16.1046 22 15V13M12 17H4C2.89543 17 2 16.1046 2 15V5C2 3.89543 2.89543 3 4 3H10M12 17V21M8 21H12M12 21H16M11.75 10.2917H13.2083L16.125 7.375H17.5833L20.5 4.45833H21.9583M16.125 11.75H17.5833L20.5 8.83333H21.9583M11.75 5.91667H13.2083L16.125 3H17.5833" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_1645_37">
|
||
<rect width="24" height="24" fill="white"/>
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
<div class="sidebar-ad-text-container">
|
||
<span class="sidebar-ad-text">Get started in minutes</span>
|
||
<span class="sidebar-ad-text sidebar-ad-text-gradient">Download Langflow Desktop</span>
|
||
</div>
|
||
</a>
|
||
</li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Get started</span></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Tutorials</span></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Create a vector RAG chatbot</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Create a vector RAG chatbot</h1></header><style>[data-ch-theme="github-dark"] { --ch-t-colorScheme: dark;--ch-t-foreground: #c9d1d9;--ch-t-background: #0d1117;--ch-t-lighter-inlineBackground: #0d1117e6;--ch-t-editor-background: #0d1117;--ch-t-editor-foreground: #c9d1d9;--ch-t-editor-lineHighlightBackground: #6e76811a;--ch-t-editor-rangeHighlightBackground: #ffffff0b;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #264F78;--ch-t-focusBorder: #1f6feb;--ch-t-tab-activeBackground: #0d1117;--ch-t-tab-activeForeground: #c9d1d9;--ch-t-tab-inactiveBackground: #010409;--ch-t-tab-inactiveForeground: #8b949e;--ch-t-tab-border: #30363d;--ch-t-tab-activeBorder: #0d1117;--ch-t-editorGroup-border: #30363d;--ch-t-editorGroupHeader-tabsBackground: #010409;--ch-t-editorLineNumber-foreground: #6e7681;--ch-t-input-background: #0d1117;--ch-t-input-foreground: #c9d1d9;--ch-t-input-border: #30363d;--ch-t-icon-foreground: #8b949e;--ch-t-sideBar-background: #010409;--ch-t-sideBar-foreground: #c9d1d9;--ch-t-sideBar-border: #30363d;--ch-t-list-activeSelectionBackground: #6e768166;--ch-t-list-activeSelectionForeground: #c9d1d9;--ch-t-list-hoverBackground: #6e76811a;--ch-t-list-hoverForeground: #c9d1d9; }</style>
|
||
<!-- -->
|
||
<p>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.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="prerequisites">Prerequisites<a href="#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites"></a></h2>
|
||
<ul>
|
||
<li><a href="/get-started-installation">Install and start Langflow</a></li>
|
||
<li>Create a <a href="/api-keys-and-authentication">Langflow API key</a></li>
|
||
<li>Create an <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">OpenAI API key</a></li>
|
||
<li>Install the <a href="/typescript-client">Langflow JavaScript client</a></li>
|
||
<li>Be familiar with vector search concepts and applications, such as <a href="https://www.datastax.com/guides/what-is-a-vector-database" target="_blank" rel="noopener noreferrer">vector databases</a> and <a href="https://www.datastax.com/guides/what-is-retrieval-augmented-generation" target="_blank" rel="noopener noreferrer">RAG</a></li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="create-a-vector-rag-flow">Create a vector RAG flow<a href="#create-a-vector-rag-flow" class="hash-link" aria-label="Direct link to Create a vector RAG flow" title="Direct link to Create a vector RAG flow"></a></h2>
|
||
<ol>
|
||
<li>
|
||
<p>In Langflow, click <strong>New Flow</strong>, and then select the <strong>Vector Store RAG</strong> template.</p>
|
||
<details class="details_lb9f alert alert--info details_b_Ee" data-collapsed="true"><summary>About the Vector Store RAG template</summary><div><div class="collapsibleContent_i85q"><p>This template has two flows.</p><p>The <strong>Load Data Flow</strong> populates a vector store with data from a file.
|
||
This data is used to respond to queries submitted to the <strong>Retriever Flow</strong>.</p><p>Specifically, the <strong>Load Data Flow</strong> 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.</p><p>The <strong>Retriever Flow</strong> 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.</p></div></div></details>
|
||
</li>
|
||
<li>
|
||
<p>Add your <strong>OpenAI</strong> API key to both <strong>OpenAI Embeddings</strong> components.</p>
|
||
</li>
|
||
<li>
|
||
<p>Optional: Replace both <strong>Astra DB</strong> vector store components with a <strong>Chroma DB</strong> or another <a href="/components-vector-stores"><strong>Vector Store</strong> component</a> of your choice.
|
||
This tutorial uses Chroma DB.</p>
|
||
<p>The <strong>Load Data Flow</strong> should have <strong>File</strong>, <strong>Split Text</strong>, <strong>Embedding Model</strong>, vector store (such as <strong>Chroma DB</strong>), and <strong>Chat Output</strong> components:</p>
|
||
<p><img decoding="async" loading="lazy" alt="File loader chat flow" src="/assets/images/tutorial-chatbot-embed-files-6157311fb4d16e7f944d55254f0cc0e2.png" width="4000" height="2512" class="img_ev3q"></p>
|
||
<p>The <strong>Retriever Flow</strong> should have <strong>Chat Input</strong>, <strong>Embedding Model</strong>, vector store, <strong>Parser</strong>, <strong>Prompt</strong>, <strong>Language Model</strong>, and <strong>Chat Output</strong> components:</p>
|
||
<p><img decoding="async" loading="lazy" alt="Chat with RAG flow" src="/assets/images/tutorial-chatbot-chat-flow-af7257d77ff0259ab1a0980641d464ce.png" width="4000" height="1324" class="img_ev3q"></p>
|
||
<p>The flows are ready to use.
|
||
Continue 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.</p>
|
||
</li>
|
||
</ol>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="load-data-and-generate-embeddings">Load data and generate embeddings<a href="#load-data-and-generate-embeddings" class="hash-link" aria-label="Direct link to Load data and generate embeddings" title="Direct link to Load data and generate embeddings"></a></h2>
|
||
<p>To load data and generate embeddings, you can use the visual editor or the <code>/v2/files</code> endpoint.</p>
|
||
<p>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.</p>
|
||
<p>In situations where many users load data or you need to load data programmatically, use the Langflow API option.</p>
|
||
<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">Visual editor</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Langflow API</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><ol>
|
||
<li>In your RAG chatbot flow, click the <strong>File</strong> component, and then click <strong>File</strong>.</li>
|
||
<li>Select the local file you want to upload, and then click <strong>Open</strong>.
|
||
The file is loaded to your Langflow server.</li>
|
||
<li>To load the data into your vector store, click the <strong>Vector Store</strong> component, and then click <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg> <strong>Run component</strong> to run the selected component and all prior dependent components.</li>
|
||
</ol></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><p>To load data programmatically, use the <code>/v2/files/</code> and <code>/v1/run/$FLOW_ID</code> endpoints. The first endpoint loads a file to your Langflow server, and then returns an uploaded file path. The second endpoint runs the <strong>Load Data Flow</strong>, referencing the uploaded file path, to chunk, embed, and load the data into the vector store.</p><p>The following script demonstrates this process.
|
||
For help with creating this script, use the <a href="https://langflow-file-upload-examples.onrender.com/" target="_blank" rel="noopener noreferrer">Langflow File Upload Utility</a>.</p><div class="ch-codeblock not-prose" data-ch-theme="github-dark"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>// Node 18+ example using global fetch, FormData, and Blob</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>import fs from 'fs/promises';</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>// 1. Prepare the form data with the file to upload</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>const fileBuffer = await fs.readFile('FILE_NAME');</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>const data = new FormData();</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>data.append('file', new Blob([fileBuffer]), 'FILE_NAME');</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>const headers = { 'x-api-key': 'LANGFLOW_API_KEY' };</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>// 2. Upload the file to Langflow</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>const uploadRes = await fetch('LANGFLOW_SERVER_ADDRESS/api/v2/files/', {</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> method: 'POST',</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> headers,</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> body: data</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>const uploadData = await uploadRes.json();</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>const uploadedPath = uploadData.path;</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>// 3. Call the Langflow run endpoint with the uploaded file path</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>const payload = {</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> input_value: "Analyze this file",</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> output_type: "chat",</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> input_type: "text",</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> tweaks: {</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> 'FILE_COMPONENT_NAME': {</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> path: uploadedPath</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>const runRes = await fetch('LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID', {</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> method: 'POST',</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> headers: { 'Content-Type': 'application/json', 'x-api-key': 'LANGFLOW_API_KEY' },</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span> body: JSON.stringify(payload)</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>const langflowData = await runRes.json();</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>// Output only the message</span></div></div><div><span class="ch-code-line-number">_<!-- -->37</span><div style="display:inline-block;margin-left:16px"><span>console.log(langflowData.outputs?.[0]?.outputs?.[0]?.results?.message?.data?.text);</span></div></div><br></code></div></div></div></div></div>
|
||
<p>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.</p>
|
||
<p>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.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="chat-with-your-flow-from-a-javascript-application">Chat with your flow from a JavaScript application<a href="#chat-with-your-flow-from-a-javascript-application" class="hash-link" aria-label="Direct link to Chat with your flow from a JavaScript application" title="Direct link to Chat with your flow from a JavaScript application"></a></h2>
|
||
<p>To chat with the data in your vector database, create a chatbot application that runs the <strong>Retriever Flow</strong> programmatically.</p>
|
||
<p>This tutorial uses JavaScript for demonstration purposes.</p>
|
||
<ol>
|
||
<li>
|
||
<p>To construct the chatbot, gather the following information:</p>
|
||
<ul>
|
||
<li><code>LANGFLOW_SERVER_ADDRESS</code>: Your Langflow server's domain. The default value is <code>127.0.0.1:7860</code>. You can get this value from the code snippets on your flow's <a href="/concepts-publish#api-access"><strong>API access</strong> pane</a>.</li>
|
||
<li><code>FLOW_ID</code>: Your flow's UUID or custom endpoint name. You can get this value from the code snippets on your flow's <a href="/concepts-publish#api-access"><strong>API access</strong> pane</a>.</li>
|
||
<li><code>LANGFLOW_API_KEY</code>: A valid <a href="/api-keys-and-authentication">Langflow API key</a>.</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<p>Copy the following script into a JavaScript file, and then replace the placeholders with the information you gathered in the previous step:</p>
|
||
<div class="ch-codeblock not-prose" data-ch-theme="github-dark"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>const readline = require('readline');</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>const { LangflowClient } = require('@datastax/langflow-client');</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>const API_KEY = 'LANGFLOW_API_KEY';</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>const SERVER = 'LANGFLOW_SERVER_ADDRESS';</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>const FLOW_ID = 'FLOW_ID';</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>const rl = readline.createInterface({ input: process.stdin, output: process.stdout });</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>// Initialize the Langflow client</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>const client = new LangflowClient({</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> baseUrl: SERVER,</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> apiKey: API_KEY</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>async function sendMessage(message) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> try {</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> const response = await client.flow(FLOW_ID).run(message, {</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> session_id: 'user_1'</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> });</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> // Use the convenience method to get the chat output text</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> return response.chatOutputText() || 'No response';</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> } catch (error) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> return `Error: ${error.message}`;</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>function chat() {</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> console.log('🤖 Langflow RAG Chatbot (type "quit" to exit)\n');</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> const ask = () => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> rl.question('👤 You: ', async (input) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> if (['quit', 'exit', 'bye'].includes(input.trim().toLowerCase())) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> console.log('👋 Goodbye!');</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> rl.close();</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> return;</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> const response = await sendMessage(input.trim());</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> console.log(`🤖 Assistant: ${response}\n`);</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> ask();</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> });</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> };</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span> ask();</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->49</span><div style="display:inline-block;margin-left:16px"><span>chat();</span></div></div><br></code></div></div>
|
||
<p>The script creates a Node application that chats with the content in your vector database, using the <code>chat</code> input and output types to communicate with your flow.
|
||
Chat maintains ongoing conversation context across multiple messages. If you used <code>text</code> type inputs and outputs, each request is a standalone text string.</p>
|
||
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><p>The <a href="/typescript-client">Langflow TypeScript client</a> has a <code>chatOutputText()</code> convenience method that simplifies working with Langflow's complex JSON response structure.
|
||
Instead of manually navigating through multiple levels of nested objects with <code>data.outputs[0].outputs[0].results.message.data.text</code>, the client automatically extracts the message text and handles potentially undefined values gracefully.</p></div></div>
|
||
</li>
|
||
<li>
|
||
<p>Save and run the script to send the requests and test the flow.</p>
|
||
<details class="details_lb9f alert alert--info details_b_Ee" data-collapsed="true"><summary>Result</summary><div><div class="collapsibleContent_i85q"><p>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.</p><div class="ch-codeblock not-prose" data-ch-theme="github-dark"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>👤 You: Do you have any documents about engines?</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>🤖 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!</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>👤 You: It should be about a Briggs and Stratton engine.</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>🤖 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.</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>If you have any specific questions about Briggs & Stratton engines or need further information, feel free to ask!</span></div></div><br></code></div></div></div></div></details>
|
||
</li>
|
||
</ol>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="next-steps">Next steps<a href="#next-steps" class="hash-link" aria-label="Direct link to Next steps" title="Direct link to Next steps"></a></h2>
|
||
<p>For more information on building or extending this tutorial, see the following:</p>
|
||
<ul>
|
||
<li><a href="/mcp-server">Model Context Protocol (MCP) servers</a></li>
|
||
<li><a href="/deployment-overview">Langflow deployment overview</a></li>
|
||
</ul></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/get-started-quickstart"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Quickstart</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/chat-with-files"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Create a chatbot that can ingest files</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#prerequisites" class="table-of-contents__link toc-highlight">Prerequisites</a></li><li><a href="#create-a-vector-rag-flow" class="table-of-contents__link toc-highlight">Create a vector RAG flow</a></li><li><a href="#load-data-and-generate-embeddings" class="table-of-contents__link toc-highlight">Load data and generate embeddings</a></li><li><a href="#chat-with-your-flow-from-a-javascript-application" class="table-of-contents__link toc-highlight">Chat with your flow from a JavaScript application</a></li><li><a href="#next-steps" class="table-of-contents__link toc-highlight">Next steps</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title"></div><ul class="footer__items clean-list"><li class="footer__item"><div class="footer-links">
|
||
<span>© 2025 Langflow</span>
|
||
<span id="preferenceCenterContainer"> · <a href="https://langflow.org/preferences">Manage Privacy Choices</a></span>
|
||
</div></li></ul></div></div></div></footer><div style="position:fixed;right:21px;bottom:21px;z-index:100;display:flex;align-items:center;gap:10px;cursor:pointer"><div style="background-color:#f6f6f6;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.1)"><img src="/img/langflow-icon-black-transparent.svg" style="width:40px" alt="Search"></div></div></div>
|
||
</body>
|
||
</html> |