pengjunjie/langflow
1
0
Fork 1
mirror of https://github.com/langflow-ai/langflow.git synced 2026-07-24 06:42:21 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
b6b03e4a9b8f44ce5830e47d6e588d00a6a56b1a
langflow/workspace-api.html
lucaseduoli 8a389bdd15 deploy: 3aa2513a86
2024-07-12 21:10:12 +00:00

235 lines
37 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

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

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Workspace/workspace-api" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.4.0">
<title data-rh="true">API | 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://langflow-ai.github.io/workspace-api"><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="API | Langflow Documentation"><meta data-rh="true" name="description" content="The API section presents code templates for integrating your flow into external applications."><meta data-rh="true" property="og:description" content="The API section presents code templates for integrating your flow into external applications."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://langflow-ai.github.io/workspace-api"><link data-rh="true" rel="alternate" href="https://langflow-ai.github.io/workspace-api" hreflang="en"><link data-rh="true" rel="alternate" href="https://langflow-ai.github.io/workspace-api" hreflang="x-default"><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-XHC7G628ZP"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-XHC7G628ZP",{anonymize_ip:!0})</script><link rel="stylesheet" href="/assets/css/styles.0752b4d1.css">
<script src="/assets/js/runtime~main.6f36853e.js" defer="defer"></script>
<script src="/assets/js/main.85ea0f63.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_m1mJ"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/chain.png" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/chain.png" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">Langflow</b></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/langflow-ai/langflow" target="_blank" class="navbar__item navbar__link header-github-link"></a><a href="https://twitter.com/langflow_ai" target="_blank" class="navbar__item navbar__link header-twitter-link"></a><a href="https://discord.gg/EqksyE2EX9" target="_blank" class="navbar__item navbar__link header-discord-link"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd sidebarWithHideableNavbar_wUlq"><a tabindex="-1" class="sidebarLogo_isFc" href="/"><img src="/img/chain.png" alt="Langflow" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/chain.png" alt="Langflow" class="themedComponent_mlkZ themedComponent--dark_xIcU"><b>Langflow</b></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" role="button" aria-expanded="true" href="/whats-new-a-new-chapter-langflow">What’s New?</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/whats-new-a-new-chapter-langflow">1.0 - A new chapter for Langflow</a></li></ul></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" role="button" aria-expanded="true" href="/">Getting Started</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/">👋 Welcome to 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="/getting-started-installation">📦 Installation</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="/getting-started-quickstart">⚡️ Quickstart</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="/getting-started-common-installation-issues">❗️ Common Installation Issues</a></li></ul></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" role="button" aria-expanded="true" href="/starter-projects-basic-prompting">Starter Projects</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/starter-projects-basic-prompting">Basic Prompting</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="/starter-projects-blog-writer">Blog Writer</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="/starter-projects-document-qa">Document QA</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="/starter-projects-memory-chatbot">Memory Chatbot</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="/starter-projects-vector-store-rag">Vector Store RAG</a></li></ul></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" role="button" aria-expanded="true" href="/guides-new-to-llms">Guides</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/guides-new-to-llms">📚 New to LLMs?</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="/guides-chat-memory">Chat Memory</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="/guides-data-message">Data &amp; Message</a></li></ul></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--active" href="/workspace">Workspace</a><button aria-label="Collapse sidebar category &#x27;Workspace&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/workspace-playground">Playground</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/workspace-api">API</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="/workspace-logs">Logs</a></li></ul></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" href="/components">Components</a><button aria-label="Collapse sidebar category &#x27;Components&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-io">Inputs &amp; Outputs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-prompts">Prompts</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-data">Data</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-helpers">Helpers</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-models">Models</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-embedding-models">Embedding Models</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-vector-stores">Vector Stores</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/components-custom-components">Custom Components</a></li></ul></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" role="button" aria-expanded="true" href="/deployment-hugging-face-spaces">Deployment</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/deployment-hugging-face-spaces">🤗 Spaces</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="/deployment-kubernetes">Kubernetes</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="/deployment-docker">Docker</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="/deployment-gcp">GCP</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="/deployment-render">Render</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="/deployment-railway">Railway</a></li></ul></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" role="button" aria-expanded="true" href="/settings-global-variables">Settings</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/settings-global-variables">Global Variables</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="/settings-project-general-settings">Project &amp; General Settings</a></li></ul></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" role="button" aria-expanded="true" href="/configuration-authentication">Configuration</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/configuration-authentication">Authentication</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="/configuration-api-keys">API Keys</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="/configuration-cli">Command Line Interface (CLI)</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="/365085a8-a90a-43f9-a779-f8769ec7eca1">Folders</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="/configuration-backend-only">Backend-Only</a></li></ul></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" role="button" aria-expanded="true" href="/integrations-langsmith">Integrations</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/integrations-langsmith">LangSmith</a></li></ul></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" role="button" aria-expanded="true" href="/contributing-telemetry">Contributing</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/contributing-telemetry">Telemetry</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="/contributing-how-to-contribute">How to contribute?</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="/contributing-github-issues">GitHub Issues</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="/contributing-community">Community</a></li></ul></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_kv0_"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/workspace"><span itemprop="name">Workspace</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">API</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>API</h1></header><p>import ReactPlayer from &quot;react-player&quot;;</p>
<p>The <strong>API</strong> section presents code templates for integrating your flow into external applications.</p>
<p>[API IMAGE HERE]</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="4eb287a8424349c4b0b436a6703de5f3">cURL<a class="hash-link" aria-label="Direct link to cURL" title="Direct link to cURL" href="/workspace-api#4eb287a8424349c4b0b436a6703de5f3">​</a></h3>
<p>The <strong>cURL</strong> tab displays sample code for posting a query to your flow. Modify the <code>input_value</code> to change your input message. Copy the code and run it to post a query to your flow and get the result.</p>
<p>[cURL Image here]</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="fb7db14e6330418389562ef647aa2354">Python API<a class="hash-link" aria-label="Direct link to Python API" title="Direct link to Python API" href="/workspace-api#fb7db14e6330418389562ef647aa2354">​</a></h3>
<p>The <strong>Python API</strong> tab displays code to interact with your flow using the Python HTTP requests library.</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="7af87438549b4972907ac310a4193067">Python Code<a class="hash-link" aria-label="Direct link to Python Code" title="Direct link to Python Code" href="/workspace-api#7af87438549b4972907ac310a4193067">​</a></h3>
<p>The <strong>Python Code</strong> tab displays code to interact with your flow&#x27;s <code>.json</code> file using the Langflow runtime.</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5680600063724590ac2302b4ddeea867">Tweaks<a class="hash-link" aria-label="Direct link to Tweaks" title="Direct link to Tweaks" href="/workspace-api#5680600063724590ac2302b4ddeea867">​</a></h3>
<p>The <strong>Tweaks</strong> tab displays the available parameters for your flow. Modifying the parameters changes the code parameters across all windows. For example, changing the <strong>Chat Input</strong> component&#x27;s <code>input_value</code> will change that value across all API calls.</p>
<reactplayer controls="" url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/d4b5f648-d99f-47cc-9ac6-986e1c32a71d/langflow_api.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&amp;X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20240712T201829Z&amp;X-Amz-Expires=3600&amp;X-Amz-Signature=3c1a9966c3a83caf21469b4076a31105be15595992427999e290f4823262626e&amp;X-Amz-SignedHeaders=host&amp;x-id=GetObject">
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="48f121a6cb3243979a341753da0c2700">Chat Widget HTML<a class="hash-link" aria-label="Direct link to Chat Widget HTML" title="Direct link to Chat Widget HTML" href="/workspace-api#48f121a6cb3243979a341753da0c2700">​</a></h3>
<p>The <strong>Chat Widget HTML</strong> tab displays code that can be inserted in the <code>&lt;body&gt;</code> of your HTML to interact with your flow.</p>
<p>The <strong>Langflow Chat Widget</strong> is a powerful web component that enables communication with a Langflow project. This widget allows for a chat interface embedding, allowing the integration of Langflow into web applications effortlessly.</p>
<p>Easily integrate the Langflow Chat Widget into your website or web application with just a few lines of JavaScript.</p>
<p>Engage your users with a user-friendly conversation, powered by Langflow&#x27;s advanced language understanding capabilities.</p>
<p>Customize the appearance of the chat widget to match your application&#x27;s design and branding.</p>
<p>Communicate with users in multiple languages, opening up your application to a global audience.</p>
<p>You can get the HTML code embedded with the chat by clicking the Code button at the Sidebar after building a flow.</p>
<p>[image]</p>
<p>Clicking the Chat Widget HTML tab, you&#x27;ll get the code to be inserted. Read below to learn how to use it with HTML, React and Angular.</p>
<p><img decoding="async" loading="lazy" src="/assets/images/566212295-5702529319668e68c722e62867c5f337.png" width="2974" height="2006" class="img_ev3q"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="6e84db2f2a0d451db6fa03c57e9bf9a4">Embed your flow into HTML<a class="hash-link" aria-label="Direct link to Embed your flow into HTML" title="Direct link to Embed your flow into HTML" href="/workspace-api#6e84db2f2a0d451db6fa03c57e9bf9a4">​</a></h3>
<p>The Chat Widget can be embedded into any HTML page, inside a <code>&lt;body&gt;</code> tag, as demonstrated in the video below.</p>
<reactplayer controls="" url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/01200476-f343-41e1-8be7-059250e0ce5e/langflow_widget.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&amp;X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20240712T201829Z&amp;X-Amz-Expires=3600&amp;X-Amz-Signature=dfe3befd022a45d4c983e2e968d66fb501289008e77562d1d47e5832b16550c0&amp;X-Amz-SignedHeaders=host&amp;x-id=GetObject">
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="fe5d3b1c42e74e4c84ebc9d1799b7665">Embed your flow with React<a class="hash-link" aria-label="Direct link to Embed your flow with React" title="Direct link to Embed your flow with React" href="/workspace-api#fe5d3b1c42e74e4c84ebc9d1799b7665">​</a></h3>
<ol>
<li>To embed the Chat Widget using React, insert this <code>&lt;script&gt;</code> tag into the React <em>index.html</em> file, inside the <code>&lt;body&gt;</code>tag:</li>
</ol>
<p><code>&lt;script src=&quot;https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js&quot;&gt;&lt;/script&gt;</code></p>
<ol>
<li>Declare your Web Component and encapsulate it in a React component.</li>
</ol>
<p><code>declare global { namespace JSX { interface IntrinsicElements { &quot;langflow-chat&quot;: any; } }}export default function ChatWidget({ className }) { return ( &lt;div className={className}&gt; &lt;langflow-chat chat_inputs=&#x27;{&quot;your_key&quot;:&quot;value&quot;}&#x27; chat_input_field=&quot;your_chat_key&quot; flow_id=&quot;your_flow_id&quot; host_url=&quot;langflow_url&quot; &gt;&lt;/langflow-chat&gt; &lt;/div&gt; );}</code></p>
<ol>
<li>Finally, you can place the component anywhere in your code to display the Chat Widget.</li>
</ol>
<hr>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="4fd87355b9aa409894acfbb9e1497980">Embed your flow with Angular<a class="hash-link" aria-label="Direct link to Embed your flow with Angular" title="Direct link to Embed your flow with Angular" href="/workspace-api#4fd87355b9aa409894acfbb9e1497980">​</a></h3>
<ol>
<li>To use the chat widget in Angular, first add this <code>&lt;script&gt;</code> tag into the Angular <em>index.html</em> file, inside the <code>&lt;body&gt;</code> tag.</li>
</ol>
<p><code>&lt;script src=&quot;https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js&quot;&gt;&lt;/script&gt;</code></p>
<ol>
<li>When you use a custom web component in an Angular template, the Angular compiler might show a warning when it doesn&#x27;t recognize the custom elements by default. To suppress this warning, add <code>CUSTOM_ELEMENTS_SCHEMA</code> to the module&#x27;s <code>@NgModule.schemas</code>.</li>
<li>Open the module file (it typically ends with <em>.module.ts</em>) where you&#x27;d add the <code>langflow-chat</code> web component.</li>
<li>Import <code>CUSTOM_ELEMENTS_SCHEMA</code> at the top of the file:</li>
</ol>
<p><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from &quot;@angular/core&quot;;</code></p>
<ol>
<li>Add <code>CUSTOM_ELEMENTS_SCHEMA</code> to the &#x27;schemas&#x27; array inside the &#x27;@NgModule&#x27; decorator:</li>
</ol>
<p><code>@NgModule({ declarations: [ // ... Other components and directives ... ], imports: [ // ... Other imported modules ... ], schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here})export class YourModule {}</code></p>
<ol>
<li>In your Angular project, find the component belonging to the module where <code>CUSTOM_ELEMENTS_SCHEMA</code> was added. Inside the template, add the <code>langflow-chat</code> tag to include the Chat Widget in your component&#x27;s view:</li>
</ol>
<p><code>&lt;langflow-chat chat_inputs=&#x27;{&quot;your_key&quot;:&quot;value&quot;}&#x27; chat_input_field=&quot;your_chat_key&quot; flow_id=&quot;your_flow_id&quot; host_url=&quot;langflow_url&quot;&gt;&lt;/langflow-chat&gt;</code></p>
<p>INFO</p>
<ul>
<li><code>CUSTOM_ELEMENTS_SCHEMA</code> is a built-in schema that allows Angular to recognize custom elements.</li>
<li>Adding <code>CUSTOM_ELEMENTS_SCHEMA</code> tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like <code>langflow-chat</code>.</li>
<li>Notice that you can only use the Chat Widget in components that are part of the module where you added <code>CUSTOM_ELEMENTS_SCHEMA</code>.</li>
</ul>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5ede4bbbd2ac43e29c90f3edb43cba58">Chat widget configuration<a class="hash-link" aria-label="Direct link to Chat widget configuration" title="Direct link to Chat widget configuration" href="/workspace-api#5ede4bbbd2ac43e29c90f3edb43cba58">​</a></h2>
<p>Use the widget API to customize your Chat Widget:</p>
<div class="theme-admonition theme-admonition-caution admonition_xJq3 alert alert--warning"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</div><div class="admonitionContent_BuS1"><p>Props with the type JSON need to be passed as stringified JSONs, with the format {&quot;key&quot;:&quot;value&quot;}.</p></div></div>
<table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>bot_message_style</td><td>JSON</td><td>No</td><td>Applies custom formatting to bot messages.</td></tr><tr><td>chat_input_field</td><td>String</td><td>Yes</td><td>Defines the type of the input field for chat messages.</td></tr><tr><td>chat_inputs</td><td>JSON</td><td>Yes</td><td>Determines the chat input elements and their respective values.</td></tr><tr><td>chat_output_key</td><td>String</td><td>No</td><td>Specifies which output to display if multiple outputs are available.</td></tr><tr><td>chat_position</td><td>String</td><td>No</td><td>Positions the chat window on the screen (options include: top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left).</td></tr><tr><td>chat_trigger_style</td><td>JSON</td><td>No</td><td>Styles the chat trigger button.</td></tr><tr><td>chat_window_style</td><td>JSON</td><td>No</td><td>Customizes the overall appearance of the chat window.</td></tr><tr><td>error_message_style</td><td>JSON</td><td>No</td><td>Sets the format for error messages within the chat window.</td></tr><tr><td>flow_id</td><td>String</td><td>Yes</td><td>Identifies the flow that the component is associated with.</td></tr><tr><td>height</td><td>Number</td><td>No</td><td>Sets the height of the chat window in pixels.</td></tr><tr><td>host_url</td><td>String</td><td>Yes</td><td>Specifies the URL of the host for chat component communication.</td></tr><tr><td>input_container_style</td><td>JSON</td><td>No</td><td>Applies styling to the container where chat messages are entered.</td></tr><tr><td>input_style</td><td>JSON</td><td>No</td><td>Sets the style for the chat input field.</td></tr><tr><td>online</td><td>Boolean</td><td>No</td><td>Toggles the online status of the chat component.</td></tr><tr><td>online_message</td><td>String</td><td>No</td><td>Sets a custom message to display when the chat component is online.</td></tr><tr><td>placeholder</td><td>String</td><td>No</td><td>Sets the placeholder text for the chat input field.</td></tr><tr><td>placeholder_sending</td><td>String</td><td>No</td><td>Sets the placeholder text to display while a message is being sent.</td></tr><tr><td>send_button_style</td><td>JSON</td><td>No</td><td>Sets the style for the send button in the chat window.</td></tr><tr><td>send_icon_style</td><td>JSON</td><td>No</td><td>Sets the style for the send icon in the chat window.</td></tr><tr><td>tweaks</td><td>JSON</td><td>No</td><td>Applies additional custom adjustments for the associated flow.</td></tr><tr><td>user_message_style</td><td>JSON</td><td>No</td><td>Determines the formatting for user messages in the chat window.</td></tr><tr><td>width</td><td>Number</td><td>No</td><td>Sets the width of the chat window in pixels.</td></tr><tr><td>window_title</td><td>String</td><td>No</td><td>Sets the title displayed in the chat window&#x27;s header or title bar.</td></tr></tbody></table>
</reactplayer></reactplayer></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/workspace-playground"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Playground</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/workspace-logs"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Logs</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 class="table-of-contents__link toc-highlight" href="/workspace-api#4eb287a8424349c4b0b436a6703de5f3">cURL</a></li><li><a class="table-of-contents__link toc-highlight" href="/workspace-api#fb7db14e6330418389562ef647aa2354">Python API</a></li><li><a class="table-of-contents__link toc-highlight" href="/workspace-api#7af87438549b4972907ac310a4193067">Python Code</a></li><li><a class="table-of-contents__link toc-highlight" href="/workspace-api#5680600063724590ac2302b4ddeea867">Tweaks</a></li><li><a class="table-of-contents__link toc-highlight" href="/workspace-api#48f121a6cb3243979a341753da0c2700">Chat Widget HTML</a></li><li><a class="table-of-contents__link toc-highlight" href="/workspace-api#6e84db2f2a0d451db6fa03c57e9bf9a4">Embed your flow into HTML</a></li><li><a class="table-of-contents__link toc-highlight" href="/workspace-api#fe5d3b1c42e74e4c84ebc9d1799b7665">Embed your flow with React</a></li><li><a class="table-of-contents__link toc-highlight" href="/workspace-api#4fd87355b9aa409894acfbb9e1497980">Embed your flow with Angular</a></li><li><a class="table-of-contents__link toc-highlight" href="/workspace-api#5ede4bbbd2ac43e29c90f3edb43cba58">Chat widget configuration</a></li></ul></div></div></div></div></main></div></div></div><div id="ms-floating-button" class="ms-fixed ms-bottom-4 ms-right-8 ms-z-[100] ms-flex ms-flex-col ms-items-end hover:ms-cursor-pointer"><div class="ms-relative ms-mb-4"><div style="background-color:#f6f6f6" class="ms-absolute -ms-bottom-1 ms-right-6 -ms-z-10 ms-h-4 ms-w-4 ms-rotate-45"></div><div style="background-color:#f6f6f6" class="ms-z-10 ms-flex ms-items-center ms-justify-center ms-rounded-lg ms-px-3 ms-py-2"><p style="color:#000000;margin:0" class="ms-text-sm">Hi, how can I help you?</p></div></div><div style="background-color:#f6f6f6" class="ms-flex ms-h-16 ms-w-16 ms-flex-col ms-items-center ms-justify-center ms-self-end ms-rounded-full ms-p-2 ms-transition"><div class="ms-rotate-0 ms-flex ms-h-full ms-w-full ms-transform ms-cursor-pointer ms-items-center ms-justify-center ms-rounded-full ms-transition-all ms-delay-75 ms-duration-100 ms-ease-in-out"><div style="color:#000000;font-size:22px;width:48px;height:48px;margin:0px;padding:0px;display:flex;align-items:center;justify-content:center;text-align:center"><img src="/img/chain.png" style="width:40px"></div></div></div><div></div></div></div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink