mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-24 00:39:35 +08:00
149 lines
45 KiB
HTML
149 lines
45 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/agent" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.8.1">
|
||
<title data-rh="true">Connect applications to agents | 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/agent-tutorial"><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="Connect applications to agents | Langflow Documentation"><meta data-rh="true" name="description" content="This tutorial shows you how to connect a JavaScript application to a Langflow agent."><meta data-rh="true" property="og:description" content="This tutorial shows you how to connect a JavaScript application to a Langflow agent."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.langflow.org/agent-tutorial"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/agent-tutorial" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.langflow.org/agent-tutorial" 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":"Connect applications to agents","item":"https://docs.langflow.org/agent-tutorial"}]}</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>window._ibmAnalytics={settings:{name:"DataStax",tealiumProfileName:"ibm-subsidiary"},trustarc:{privacyPolicyLink:"https://ibm.com/privacy"},"digitalData.page.services.google.enabled":!0},window.digitalData={page:{pageInfo:{ibm:{siteId:"IBM_"+_ibmAnalytics.settings.name},segment:{enabled:!0,env:"prod",key:"B04fNhD06DqDPuaRfQl5lZ2iQICdxxuh",coremetrics:!1,carbonComponentEvents:!1}},category:{primaryCategory:"PC230"}},commonProperties:{productTitle:"IBM Elite Support for Langflow",productCode:"5900BUB",productCodeType:"WWPC",UT30:"30AS5",instanceId:"docs-site",subscriptionId:"public-access",productPlanName:"Public",productPlanType:"freemium",userId:"IBMid-ANONYMOUS"}}</script>
|
||
<script src="//1.www.s81c.com/common/stats/ibm-common.js" async="true"></script>
|
||
|
||
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@550;600&display=swap">
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("consent","default",{ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied",analytics_storage:"denied"})</script>
|
||
<script>!function(){function e(){if(void 0!==window.truste&&window.truste.cma){var e=window.truste.cma.callApi("getConsent",window.location.href)||{},n=1===e[2],t=1===e[3];gtag("consent","update",{ad_storage:n?"granted":"denied",ad_user_data:n?"granted":"denied",ad_personalization:n?"granted":"denied",analytics_storage:t?"granted":"denied"})}}window.addEventListener&&(window.addEventListener("cm_data_subject_consent_changed",e),window.addEventListener("cm_consent_preferences_set",e)),"complete"===document.readyState?e():window.addEventListener("load",e)}()</script><link rel="stylesheet" href="/assets/css/styles.5b49702d.css">
|
||
<script src="/assets/js/runtime~main.90ec214f.js" defer="defer"></script>
|
||
<script src="/assets/js/main.8e5a97b0.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="UI Interaction" data-action="clicked" data-channel="docs" data-element-id="social-github" data-namespace="header" data-platform-title="Langflow"></a><a href="https://twitter.com/langflow_ai" target="_blank" class="navbar__item navbar__link header-twitter-link" data-event="UI Interaction" data-action="clicked" data-channel="docs" data-element-id="social-twitter" data-namespace="header" data-platform-title="Langflow"></a><a href="https://discord.gg/EqksyE2EX9" target="_blank" class="navbar__item navbar__link header-discord-link" data-event="UI Interaction" data-action="clicked" data-channel="docs" data-element-id="social-discord" data-namespace="header" data-platform-title="Langflow"></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-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="/">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</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" 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 menu__link--active" aria-current="page" 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">Connect applications to agents</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>Connect applications to agents</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 shows you how to connect a JavaScript application to a <a href="/agents">Langflow agent</a>.</p>
|
||
<p>With an agent, your application can use any connected tools to retrieve more contextual and timely data without changing any application code. The tools are selected by the agent's internal LLM to solve problems and answer questions.</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>Install the <a href="/typescript-client">Langflow JavaScript client</a></li>
|
||
<li>Create an <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">OpenAI API key</a></li>
|
||
</ul>
|
||
<p>This tutorial uses an OpenAI LLM. If you want to use a different provider, you need a valid credential for that provider.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="create-an-agent-flow">Create an agent flow<a href="#create-an-agent-flow" class="hash-link" aria-label="Direct link to Create an agent flow" title="Direct link to Create an agent flow"></a></h2>
|
||
<p>The following steps modify the <strong>Simple Agent</strong> template to connect a <a href="/components-data#directory"><strong>Directory</strong> component</a> and a <a href="/components-data#web-search"><strong>Web Search</strong> component</a> as tools for an <strong>Agent</strong> component.
|
||
The <strong>Directory</strong> component loads all files of a given type from a target directory on your local machine, and the <strong>Web Search</strong> component performs a DuckDuckGo search.
|
||
When connected to an <strong>Agent</strong> component as tools, the agent has the option to use these components when handling requests.</p>
|
||
<ol>
|
||
<li>
|
||
<p>In Langflow, click <strong>New Flow</strong>, and then select the <strong>Simple Agent</strong> template.</p>
|
||
</li>
|
||
<li>
|
||
<p>Remove the <strong>URL</strong> and <strong>Calculator</strong> tools, and then add <strong>Directory</strong> and <strong>Web Search</strong> components to your flow.</p>
|
||
</li>
|
||
<li>
|
||
<p>In the <strong>Directory</strong> component's <strong>Path</strong> field, enter the directory path and file types that you want to make available to the <strong>Agent</strong> component.</p>
|
||
<p>In this tutorial, the agent needs access to a record of customer purchases, so the directory name is <code>customer_orders</code> and the file type is <code>.csv</code>. Later in this tutorial, the agent will be prompted to find <code>email</code> values in the customer data.</p>
|
||
<p>You can adapt the tutorial to suit your data, or, to follow along with the tutorial, you can download <a href="/assets/files/customer_orders-0c1c00f9ebd1f6b3c9ede72af1b67ca2.csv" target="_blank"><code>customer-orders.csv</code></a> and save it in a <code>customer_orders</code> folder on your local machine.</p>
|
||
</li>
|
||
<li>
|
||
<p>In the <strong>Directory</strong> and <strong>Web Search</strong> <a href="/concepts-components#component-menus">components' header menus</a>, enable <strong>Tool Mode</strong> so you can use the components with an agent.</p>
|
||
</li>
|
||
<li>
|
||
<p>Connect the <strong>Directory</strong> and <strong>Web Search</strong> components' <strong>Toolset</strong> ports to the <strong>Agent</strong> component's <strong>Tools</strong> port.</p>
|
||
</li>
|
||
<li>
|
||
<p>In the <strong>Agent</strong> component, enter your OpenAI API key.</p>
|
||
<p>If you want to use a different provider or model, edit the <strong>Model Provider</strong>, <strong>Model Name</strong>, and <strong>API Key</strong> fields accordingly.</p>
|
||
</li>
|
||
<li>
|
||
<p>To test the flow, click <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg> <strong>Playground</strong>, and then ask the LLM a question, such as <code>Recommend 3 used items for carol.davis@example.com, based on previous orders.</code></p>
|
||
<p>Given the example prompt, the LLM would respond with recommendations and web links for items based on previous orders in <code>customer_orders.csv</code>.</p>
|
||
<p>The <strong>Playground</strong> prints the agent's chain of thought as it selects tools to use and interacts with functionality provided by those tools.
|
||
For example, the agent can use the <strong>Directory</strong> component's <code>as_dataframe</code> tool to retrieve a <a href="/data-types#dataframe">DataFrame</a>, and the <strong>Web Search</strong> component's <code>perform_search</code> tool to find links to related items.</p>
|
||
</li>
|
||
</ol>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="add-a-prompt-template-component-to-the-flow">Add a Prompt Template component to the flow<a href="#add-a-prompt-template-component-to-the-flow" class="hash-link" aria-label="Direct link to Add a Prompt Template component to the flow" title="Direct link to Add a Prompt Template component to the flow"></a></h2>
|
||
<p>In this example, the application sends a customer's email address to the Langflow agent. The agent compares the customer's previous orders within the <strong>Directory</strong> component, searches the web for used versions of those items, and returns three results.</p>
|
||
<ol>
|
||
<li>
|
||
<p>To include the email address as a value in your flow, add a <a href="/components-prompts"><strong>Prompt Template</strong> component</a> to your flow between the <strong>Chat Input</strong> and <strong>Agent</strong> components.</p>
|
||
</li>
|
||
<li>
|
||
<p>In the <strong>Prompt Template</strong> component's <strong>Template</strong> field, enter <code>Recommend 3 used items for {email}, based on previous orders.</code>
|
||
Adding the <code>{email}</code> value in curly braces creates a new input in the <strong>Prompt Template</strong> component, and the component connected to the <code>{email}</code> port is supplying the value for that variable.
|
||
This creates a point for the user's email to enter the flow from your request.
|
||
If you aren't using the <code>customer_orders.csv</code> example file, modify the input to search for a value in your dataset.</p>
|
||
<p>At this point your flow has six components. The <strong>Chat Input</strong> component is connected to the <strong>Prompt Template</strong> component's <strong>email</strong> input port. Then, the <strong>Prompt Template</strong> component's output is connected to the <strong>Agent</strong> component's <strong>System Message</strong> input port. The <strong>Directory</strong> and <strong>Web Search</strong> components are connected to the <strong>Agent</strong> component's <strong>Tools</strong> port. Finally, the <strong>Agent</strong> component's output is connected to the <strong>Chat Output</strong> component, which returns the final response to the application.</p>
|
||
<p><img decoding="async" loading="lazy" alt="An Agent component connected to Web Search and Directory components as tools" src="/assets/images/tutorial-agent-with-directory-a938bd23cfaf1f0570b58b2635e699e4.png" width="4000" height="2830" class="img_ev3q"></p>
|
||
</li>
|
||
</ol>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="send-requests-to-your-flow-from-a-javascript-application">Send requests to your flow from a JavaScript application<a href="#send-requests-to-your-flow-from-a-javascript-application" class="hash-link" aria-label="Direct link to Send requests to your flow from a JavaScript application" title="Direct link to Send requests to your flow from a JavaScript application"></a></h2>
|
||
<p>With your flow operational, connect it to a JavaScript application to use the agent's responses.</p>
|
||
<ol>
|
||
<li>
|
||
<p>To construct a JavaScript application to connect to your flow, 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.
|
||
If you're using the <code>customer_orders.csv</code> example file, you can run this example as-is with the example email address in the code sample.
|
||
If not, modify the <code>const email = "isabella.rodriguez@example.com"</code> to search for a value in your dataset.</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">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span>import { LangflowClient } from "@datastax/langflow-client";</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span>const LANGFLOW_SERVER_ADDRESS = 'LANGFLOW_SERVER_ADDRESS';</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</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">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span>const LANGFLOW_API_KEY = 'LANGFLOW_API_KEY';</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span>const email = "isabella.rodriguez@example.com";</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span>async function runAgentFlow(): Promise<void> {</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> try {</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> // Initialize the Langflow client</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> const client = new LangflowClient({</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> baseUrl: LANGFLOW_SERVER_ADDRESS,</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> apiKey: LANGFLOW_API_KEY</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> });</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.log(`Connecting to Langflow server at: ${LANGFLOW_SERVER_ADDRESS} `);</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.log(`Flow ID: ${FLOW_ID}`);</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.log(`Email: ${email}`);</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> // Get the flow instance</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> const flow = client.flow(FLOW_ID);</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> // Run the flow with the email as input</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.log('\nSending request to agent...');</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> const response = await flow.run(email, {</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> session_id: email // Use email as session ID for context</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> });</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.log('\n=== Response from Langflow ===');</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.log('Session ID:', response.sessionId);</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> // Extract URLs from the chat message</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> const chatMessage = response.chatOutputText();</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.log('\n=== URLs from Chat Message ===');</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> const messageUrls = chatMessage.match(/https?:\/\/[^\s"')\]]+/g) || [];</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> const cleanMessageUrls = [...new Set(messageUrls)].map(url => url.trim());</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.log('URLs from message:');</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> cleanMessageUrls.slice(0, 3).forEach(url => console.log(url));</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> } catch (error) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.error('Error running flow:', error);</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> // Provide error messages</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> if (error instanceof Error) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> if (error.message.includes('fetch')) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.error('\nMake sure your Langflow server is running and accessible at:', LANGFLOW_SERVER_ADDRESS);</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> if (error.message.includes('401') || error.message.includes('403')) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.error('\nCheck your API key configuration');</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> if (error.message.includes('404')) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> console.error('\nCheck your Flow ID - make sure it exists and is correct');</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span>// Run the function</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span>console.log('Starting Langflow Agent...\n');</span></div></div><div><span class="ch-code-line-number">_<!-- -->60</span><div style="display:inline-block;margin-left:16px"><span>runAgentFlow().catch(console.error);</span></div></div><br></code></div></div>
|
||
</li>
|
||
<li>
|
||
<p>Save and run the script to send the request and test the flow.</p>
|
||
<p>Your application receives three URLs for recommended used items based on a customer's previous orders in your local CSV, all without changing any code.</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">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>Starting Langflow Agent...</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>Connecting to Langflow server at: http://localhost:7860</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>Flow ID: local-db-search</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>Email: isabella.rodriguez@example.com</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>Sending request to agent...</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>=== Response from Langflow ===</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>Session ID: isabella.rodriguez@example.com</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>URLs found:</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>https://www.facebook.com/marketplace/258164108225783/electronics/</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>https://www.facebook.com/marketplace/458332108944152/furniture/</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>https://www.facebook.com/marketplace/613732137493719/kitchen-cabinets/</span></div></div><br></code></div></div></div></div></details>
|
||
</li>
|
||
<li>
|
||
<p>To quickly check traffic to your flow, open the <strong>Playground</strong>.
|
||
New sessions are named after the user's email address.
|
||
Keeping sessions distinct helps the agent maintain context. For more on session IDs, see <a href="/session-id">Session ID</a>.</p>
|
||
</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="/chat-with-files"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Create a chatbot that can ingest files</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/mcp-tutorial"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Connect to MCP servers from your application</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-an-agent-flow" class="table-of-contents__link toc-highlight">Create an agent flow</a></li><li><a href="#add-a-prompt-template-component-to-the-flow" class="table-of-contents__link toc-highlight">Add a Prompt Template component to the flow</a></li><li><a href="#send-requests-to-your-flow-from-a-javascript-application" class="table-of-contents__link toc-highlight">Send requests to 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="#" onclick='return"undefined"!=typeof window&&window.truste&&window.truste.eu&&window.truste.eu.clickListener&&window.truste.eu.clickListener(),!1' style="cursor: pointer;">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> |