mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-25 11:58:22 +08:00
b36444f5d9
* fix: nightly now properly gets 1.9.0 branch (#12215) before it was attempting to pull release-notes as letters are alphanumerically after numbers when we sort -V then grab tail now we only look at branch names that follow the pattern '^release-[0-9]+\.[0-9]+\.[0-9]+$' * docs: add search icon (#12216) add-back-svg * initial-content * cut-1.8-release-and-include-next-version * stage-1.8.0-and-next --------- Co-authored-by: Adam-Aghili <149833988+Adam-Aghili@users.noreply.github.com>
541 lines
20 KiB
Plaintext
541 lines
20 KiB
Plaintext
---
|
|
title: Trigger flows with the Langflow API
|
|
slug: /concepts-publish
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
|
|
After you build a flow, you probably want to run it within an application, such as a chatbot within a mobile app or website.
|
|
|
|
Langflow provides several ways to run flows from external applications:
|
|
|
|
* [Trigger flows with the Langflow API](#api-access)
|
|
* [Add an embedded chat widget to a website](#embedded-chat-widget)
|
|
* [Serve flows through a Langflow MCP server](#serve-flows-through-a-langflow-mcp-server)
|
|
* [Run flows with the OpenAI Responses compatible endpoint](#openai-responses-api)
|
|
|
|
Although you can use these options with an isolated, local Langflow instance, they are typically more valuable when you have [deployed a Langflow server](/deployment-overview) or [packaged Langflow as a dependency of an application](/develop-application).
|
|
|
|
## Use the Langflow API to run flows {#api-access}
|
|
|
|
The Langflow API is the primary way to access your flows and Langflow servers programmatically.
|
|
|
|
:::tip Try it
|
|
For an example of a script that calls the Langflow API, see the [Quickstart](/get-started-quickstart).
|
|
:::
|
|
|
|
### Generate API code snippets
|
|
|
|
To help you embed Langflow API requests in your scripts, Langflow automatically generates Python, JavaScript, and curl code snippets for your flows.
|
|
To get these code snippets, do the following:
|
|
|
|
1. In Langflow, open the flow that you want to embed in your application.
|
|
2. Click **Share**, and then select **API access**.
|
|
|
|
These code snippets call the `/v1/run/$FLOW_ID` endpoint, and they automatically populate minimum values, like the Langflow server URL, flow ID, headers, and request parameters.
|
|
|
|
:::tip Windows
|
|
The paths generated by the API access pane assume a *nix environment.
|
|
If you use Microsoft Windows or WSL, you might need to adjust the filepaths given in the code snippets.
|
|
:::
|
|
|
|
|
|
|
|
3. Optional: Click [**Input Schema**](#input-schema) to modify component parameters in the code snippets without changing the flow itself.
|
|
|
|
4. Copy the snippet for the language that you want to use.
|
|
|
|
5. Run the snippet as is, or use the snippet in the context of a larger script.
|
|
|
|
For more information and examples of other Langflow API endpoints, see [Get started with the Langflow API](/api-reference-api-examples).
|
|
|
|
### Langflow API authentication
|
|
|
|
In Langflow versions 1.5 and later, most API endpoints require authentication with a Langflow API key.
|
|
|
|
Code snippets generated in the **API access** pane include a script that checks for a `LANGFLOW_API_KEY` environment variable set in the local terminal session.
|
|
This script doesn't check for Langflow API keys set anywhere besides the local terminal session.
|
|
|
|
For this script to work, you must set a `LANGFLOW_API_KEY` variable in the terminal session where you intend to run the code snippet, such as `export LANGFLOW_API_KEY="sk..."`.
|
|
|
|
Alternatively, you can edit the code snippet to include an `x-api-key` header and ensure that the request can authenticate to the Langflow API.
|
|
|
|
For more information, see [API keys and authentication](/api-keys-and-authentication) and [Get started with the Langflow API](/api-reference-api-examples).
|
|
|
|
### Input Schema (tweaks) {#input-schema}
|
|
|
|
Tweaks are one-time overrides that modify component parameters at runtime, rather than permanently modifying the flow itself.
|
|
For an example of tweaks in a script, see the [Quickstart](/get-started-quickstart).
|
|
|
|
:::tip
|
|
Tweaks make your flows more dynamic and reusable.
|
|
|
|
You can create one flow and use it for multiple applications by passing application-specific tweaks in each application's Langflow API requests.
|
|
:::
|
|
|
|
In the **API access** pane, click **Input Schema** to add `tweaks` to the request payload in a flow's code snippets.
|
|
|
|
Changes to a flow's **Input Schema** are saved exclusively as tweaks for that flow's **API access** code snippets.
|
|
These tweaks don't change the flow parameters set in the [workspace](/concepts-overview#workspace), and they don't apply to other flows.
|
|
|
|
Adding tweaks through the **Input Schema** can help you troubleshoot formatting issues with tweaks that you manually added to Langflow API requests.
|
|
|
|
For example, the following curl command includes a tweak that disables the **Store Messages** setting in a flow's **Chat Input** component:
|
|
|
|
```bash
|
|
curl --request POST \
|
|
--url "http://LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID" \
|
|
--header "Content-Type: application/json" \
|
|
--header "x-api-key: LANGFLOW_API_KEY" \
|
|
--data '{
|
|
"input_value": "Text to input to the flow",
|
|
"output_type": "chat",
|
|
"input_type": "chat",
|
|
"tweaks": {
|
|
"ChatInput-4WKag": {
|
|
"should_store_message": false
|
|
}
|
|
}
|
|
}'
|
|
```
|
|
|
|
### Use a flow ID alias
|
|
|
|
If you want your requests to use an alias instead of the actual flow ID, you can rename the flow's `/v1/run/$FLOW_ID` endpoint:
|
|
|
|
1. In Langflow, open the flow, click **Share**, and then select **API access**.
|
|
2. Click **Input Schema**.
|
|
3. In the **Endpoint Name** field, enter an alias for your flow's ID, such as a memorable, human-readable name.
|
|
|
|
The name can contain only letters, numbers, hyphens, and underscores, such as `flow-customer-database-agent`.
|
|
|
|
4. To save the change, close the **Input Schema** pane.
|
|
|
|
The automatically generated code snippets now use your new endpoint name instead of the original flow ID, such as `url = "http://localhost:7868/api/v1/run/flow-customer-database-agent"`.
|
|
|
|
## Embed a flow into a website {#embedded-chat-widget}
|
|
|
|
For each flow, Langflow provides a code snippet that you can insert into the `<body>` of your website's HTML to interact with your flow through an embedded chat widget.
|
|
|
|
:::warning Required components
|
|
The chat widget only supports flows that have **Chat Input** and **Chat Output** components, which are required for the chat experience.
|
|
**Text Input** and **Text Output** components can send and receive messages, but they don't include ongoing LLM chat context.
|
|
|
|
Attempting to chat with a flow that doesn't have a [**Chat Input** component](/chat-input-and-output) will trigger the flow, but the response only indicates that the input was empty.
|
|
:::
|
|
|
|
### Get a langflow-chat snippet
|
|
|
|
To get a flow's embedded chat widget code snippet, do the following:
|
|
|
|
1. In Langflow, open the flow you want to embed.
|
|
2. Click **Share**, and then select **Embed into site**.
|
|
3. Copy the code snippet and use it in the `<body>` of your website's HTML.
|
|
For more information, see [Embed the chat widget with React, Angular, or HTML](#embed-the-chat-widget).
|
|
4. Add the `api_key` prop to ensure the widget has permission to run the flow, as explained in [Configure the langflow-chat web component](#configure-the-langflow-chat-web-component).
|
|
|
|
The chat widget is implemented as a web component called `langflow-chat` that is loaded from a CDN. For more information, see the [langflow-embedded-chat repository](https://github.com/langflow-ai/langflow-embedded-chat).
|
|
|
|
For example, the following HTML embeds a chat widget for a **Basic Prompting** template flow hosted on a Langflow server deployed on ngrok:
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<langflow-chat
|
|
host_url="https://c822-73-64-93-151.ngrok-free.app"
|
|
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
|
|
api_key="$LANGFLOW_API_KEY"
|
|
></langflow-chat>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
When this code is deployed to a live site, it renders as a responsive chatbot.
|
|
If a user interacts with the chatbot, the input triggers the specified flow, and then the chatbot returns the output from the flow run.
|
|
|
|
|
|
|
|
:::tip Try it
|
|
Use the [Langflow embedded chat CodeSandbox](https://codesandbox.io/p/sandbox/langflow-embedded-chat-example-dv9zpx) for an interactive live demo of the embedded chat widget that uses your own flow.
|
|
For more information, see the [langflow-embedded-chat README](https://github.com/langflow-ai/langflow-embedded-chat?tab=readme-ov-file#live-example).
|
|
:::
|
|
|
|
### Embed the chat widget with React, Angular, or HTML {#embed-the-chat-widget}
|
|
|
|
The following examples show how to use embedded chat widget in React, Angular, and plain HTML.
|
|
|
|
<Tabs>
|
|
<TabItem value="react" label="React" default>
|
|
|
|
To use the chat widget in your React application, create a component that loads the widget script and renders the chat interface:
|
|
|
|
1. Declare your web component, and then encapsulate it in a React component:
|
|
|
|
```javascript
|
|
//Declaration of langflow-chat web component
|
|
declare global {
|
|
namespace JSX {
|
|
interface IntrinsicElements {
|
|
"langflow-chat": any;
|
|
}
|
|
}
|
|
}
|
|
|
|
//Definition for langflow-chat React component
|
|
export default function ChatWidget({ className }) {
|
|
return (
|
|
<div className={className}>
|
|
<langflow-chat
|
|
host_url="https://c822-73-64-93-151.ngrok-free.app"
|
|
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
|
|
api_key="$LANGFLOW_API_KEY"
|
|
></langflow-chat>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
2. Place the component anywhere in your code to render the chat widget.
|
|
|
|
In the following example, the React widget component is located at `docs/src/components/ChatWidget/index.tsx`, and `index.tsx` includes a script to load the chat widget code from CDN, along with the declaration and definition from the previous step:
|
|
|
|
```javascript
|
|
import React, { useEffect } from 'react';
|
|
|
|
// Component to load the chat widget script
|
|
const ChatScriptLoader = () => {
|
|
useEffect(() => {
|
|
if (!document.querySelector('script[src*="langflow-embedded-chat"]')) {
|
|
const script = document.createElement('script');
|
|
script.src = 'https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js';
|
|
script.async = true;
|
|
document.body.appendChild(script);
|
|
}
|
|
}, []);
|
|
|
|
return null;
|
|
};
|
|
|
|
//Declaration of langflow-chat web component
|
|
declare global {
|
|
namespace JSX {
|
|
interface IntrinsicElements {
|
|
"langflow-chat": any;
|
|
}
|
|
}
|
|
}
|
|
|
|
//Definition for langflow-chat React component
|
|
export default function ChatWidget({ className }) {
|
|
return (
|
|
<div className={className}>
|
|
<ChatScriptLoader />
|
|
<langflow-chat
|
|
host_url="https://c822-73-64-93-151.ngrok-free.app"
|
|
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
|
|
api_key="$LANGFLOW_API_KEY"
|
|
></langflow-chat>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
3. Import the `langflow-chat` React component to make it available for use on a page.
|
|
Modify the following import statement with your React component's name and path:
|
|
|
|
```jsx
|
|
import ChatWidget from '@site/src/components/ChatWidget';
|
|
```
|
|
|
|
4. To display the widget, call your `langflow-chat` component in the desired location on the page.
|
|
Modify the following reference for your React component's name and the desired `className`:
|
|
|
|
```
|
|
<ChatWidget className="my-chat-widget" />
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="angular" label="Angular">
|
|
|
|
To use the chat widget in your Angular application, create a component that loads the widget script and renders the chat interface.
|
|
|
|
In an Angular application, `langflow-chat` is a custom web component that you must explicitly allow in your site's `.components.ts`.
|
|
Therefore, to use the embedded chat widget, you must add `CUSTOM_ELEMENTS_SCHEMA` to your module's configuration, and then integrate the `<langflow-chat>` element.
|
|
|
|
Angular requires you to explicitly allow custom web components, like `langflow-chat`, in your site's `components`.
|
|
Therefore, you must add the `<langflow-chat>` element to your Angular template and configure Angular to recognize it.
|
|
You must add `CUSTOM_ELEMENTS_SCHEMA` to your module's configuration to enable this.
|
|
|
|
1. In your Angular application, edit the `.module.ts` file where you want to add the `langflow-chat` web component.
|
|
|
|
2. At the top of `.module.ts`, import `CUSTOM_ELEMENTS_SCHEMA`:
|
|
|
|
```
|
|
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
```
|
|
|
|
3. In the `@NgModule` decorator, add `CUSTOM_ELEMENTS_SCHEMA` to the `schemas` array:
|
|
|
|
```javascript
|
|
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
import { BrowserModule } from '@angular/platform-browser';
|
|
import { AppComponent } from './app.component';
|
|
|
|
@NgModule({
|
|
declarations: [
|
|
AppComponent
|
|
],
|
|
imports: [
|
|
BrowserModule
|
|
],
|
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
providers: [],
|
|
bootstrap: [AppComponent]
|
|
})
|
|
export class AppModule { }
|
|
```
|
|
|
|
4. Edit the `.component.ts` file where you want to use the embedded chat widget.
|
|
|
|
5. In the `@Component` decorator, add the `<langflow-chat>` element to the `template` key:
|
|
|
|
```javascript
|
|
import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
template: `
|
|
<div class="container">
|
|
<h1>Langflow Chat Test</h1>
|
|
<langflow-chat
|
|
host_url="https://c822-73-64-93-151.ngrok-free.app"
|
|
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
|
|
api_key="$LANGFLOW_API_KEY"
|
|
></langflow-chat>
|
|
</div>
|
|
`,
|
|
styles: [`
|
|
.container {
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
`]
|
|
})
|
|
export class AppComponent {
|
|
title = 'Langflow Chat Test';
|
|
}
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="html" label="HTML">
|
|
|
|
```html
|
|
<html lang="en">
|
|
<head>
|
|
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@v1.0.7/dist/build/static/js/bundle.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<langflow-chat
|
|
host_url="https://c822-73-64-93-151.ngrok-free.app"
|
|
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
|
|
api_key="$LANGFLOW_API_KEY"
|
|
></langflow-chat>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
### Configure the langflow-chat web component {#configure-the-langflow-chat-web-component}
|
|
|
|
To use the embedded chat widget in your HTML, the `langflow-chat` web component must include the following minimum inputs (also known as _props_ in React):
|
|
|
|
* `host_url`: Your Langflow server URL. Must be `HTTPS`. Don't include a trailing slash (`/`).
|
|
* `flow_id`: The ID of the flow you want to embed.
|
|
* `api_key`: A [Langflow API key](/api-keys-and-authentication).
|
|
This prop is recommended to ensure the widget has permission to run the flow.
|
|
|
|
The minimum inputs are automatically populated in the [**Embed into site** code snippet](#get-a-langflow-chat-snippet) that is generated by Langflow.
|
|
|
|
You can use additional inputs (props) to modify the embedded chat widget.
|
|
For a list of all props, types, and descriptions, see the [langflow-embedded-chat README](https://github.com/langflow-ai/langflow-embedded-chat?tab=readme-ov-file#configuration).
|
|
|
|
<details>
|
|
<summary>Example: Langflow API key prop</summary>
|
|
|
|
The `api_key` prop stores a Langflow API key that the chat widget can use to authenticate the underlying Langflow API request.
|
|
|
|
The Langflow team recommends following industry best practices for handling sensitive credentials.
|
|
For example, securely store your API key, and then retrieve with an environment variable:
|
|
|
|
```html
|
|
<langflow-chat
|
|
host_url="https://c822-73-64-93-151.ngrok-free.app"
|
|
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
|
|
api_key="$LANGFLOW_API_KEY"
|
|
></langflow-chat>
|
|
```
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>Example: Style props</summary>
|
|
|
|
There are many props you can use to customize the style and positioning of the embedded chat widget.
|
|
Many of these props are of type JSON, and they require specific formatting, depending on where you embed the `langflow-chat` web component.
|
|
|
|
In React and plain HTML, JSON props are expressed as JSON objects or stringified JSON, such as `\{"key":"value"\}`:
|
|
|
|
```html
|
|
<langflow-chat
|
|
host_url="https://c822-73-64-93-151.ngrok-free.app"
|
|
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
|
|
api_key="$LANGFLOW_API_KEY"
|
|
chat_window_style='{
|
|
"backgroundColor": "#1a0d0d",
|
|
"border": "4px solid #b30000",
|
|
"borderRadius": "16px",
|
|
"boxShadow": "0 8px 32px #b30000",
|
|
"color": "#fff",
|
|
"fontFamily": "Georgia, serif",
|
|
"padding": "16px"
|
|
}'
|
|
window_title="Custom Styled Chat"
|
|
height="600"
|
|
width="400"
|
|
></langflow-chat>
|
|
```
|
|
|
|
For Angular applications, use [property binding syntax](https://angular.dev/guide/templates/binding#binding-dynamic-properties-and-attributes) to pass JSON props as JavaScript objects.
|
|
For example:
|
|
|
|
```javascript
|
|
import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
template: `
|
|
<div class="container">
|
|
<h1>Langflow Chat Test</h1>
|
|
<langflow-chat
|
|
host_url="https://c822-73-64-93-151.ngrok-free.app"
|
|
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
|
|
api_key="$LANGFLOW_API_KEY"
|
|
[chat_window_style]='{"backgroundColor": "#ffffff"}'
|
|
[bot_message_style]='{"color": "#000000"}'
|
|
[user_message_style]='{"color": "#000000"}'
|
|
height="600"
|
|
width="400"
|
|
chat_position="bottom-right"
|
|
></langflow-chat>
|
|
</div>
|
|
`,
|
|
styles: [`
|
|
.container {
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
`]
|
|
})
|
|
export class AppComponent {
|
|
title = 'Langflow Chat Test';
|
|
}
|
|
```
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>Example: Session ID prop</summary>
|
|
|
|
The following example adds a custom [session ID](/session-id) to help identify flow runs started by the embedded chat widget:
|
|
|
|
```html
|
|
<langflow-chat
|
|
host_url="https://c822-73-64-93-151.ngrok-free.app"
|
|
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
|
|
api_key="$LANGFLOW_API_KEY"
|
|
session_id="$SESSION_ID"
|
|
></langflow-chat>
|
|
```
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>Example: Tweaks prop</summary>
|
|
|
|
Use the `tweaks` prop to modify flow parameters at runtime.
|
|
The available keys for the `tweaks` object depend on the flow you are serving through the embedded chat widget.
|
|
|
|
In React and plain HTML, `tweaks` are declared as a JSON object, similar to how you would pass them to a Langflow API endpoint like [`/v1/run/$FLOW_ID`](/api-flows-run#run-flow).
|
|
For example:
|
|
|
|
```html
|
|
<langflow-chat
|
|
host_url="https://c822-73-64-93-151.ngrok-free.app"
|
|
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
|
|
api_key="$LANGFLOW_API_KEY"
|
|
tweaks='{
|
|
"model_name": "llama-3.1-8b-instant"
|
|
}'
|
|
></langflow-chat>
|
|
```
|
|
|
|
For Angular applications, use [property binding syntax](https://angular.dev/guide/templates/binding#binding-dynamic-properties-and-attributes) to pass JSON props as JavaScript objects.
|
|
For example:
|
|
|
|
```javascript
|
|
import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
template: `
|
|
<div class="container">
|
|
<h1>Langflow Chat Test</h1>
|
|
<langflow-chat
|
|
host_url="https://c822-73-64-93-151.ngrok-free.app"
|
|
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
|
|
api_key="$LANGFLOW_API_KEY"
|
|
[tweaks]='{"model_name": "llama-3.1-8b-instant"}'
|
|
></langflow-chat>
|
|
</div>
|
|
`,
|
|
styles: [`
|
|
.container {
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
`]
|
|
})
|
|
export class AppComponent {
|
|
title = 'Langflow Chat Test';
|
|
}
|
|
```
|
|
|
|
</details>
|
|
|
|
## Serve flows through a Langflow MCP server
|
|
|
|
Each [Langflow project](/concepts-flows#projects) has an MCP server that exposes the project's flows as [tools](https://modelcontextprotocol.io/docs/concepts/tools) that [MCP clients](https://modelcontextprotocol.io/clients) can use to generate responses.
|
|
|
|
In addition to serving flows through Langflow MCP servers, you can use Langflow as an MCP client to access any MCP server, including your Langflow MCP servers.
|
|
|
|
Interactions with Langflow MCP servers happen through the Langflow API's `/mcp` endpoints.
|
|
|
|
For more information, see [Use Langflow as an MCP server](/mcp-server) and [Use Langflow as an MCP client](/mcp-client).
|
|
|
|
## Run flows with the OpenAI Responses compatible endpoint {#openai-responses-api}
|
|
|
|
Langflow includes an OpenAI Responses API-compatible endpoint at `/api/v1/responses` that allows you to use existing OpenAI client libraries and code with minimal modifications.
|
|
|
|
For more information, see [OpenAI Responses API](/api-openai-responses).
|
|
|
|
## See also
|
|
|
|
* [Import and export flows](/concepts-flows-import)
|
|
* [Files endpoints](/api-files)
|
|
* [Test flows in the Playground](/concepts-playground) |