跳到主要内容

使用 Langflow API 触发 flow

构建 flow 后，您可能希望在应用程序中运行它，比如在移动应用或网站中的聊天机器人。

Langflow 提供多种从外部应用程序运行 flow 的方法：

虽然您可以在独立的本地 Langflow 实例中使用这些选项，但当您部署了 Langflow 服务器或将 Langflow 打包为应用程序的依赖项时，它们通常更有价值。

使用 Langflow API 运行 flow​

Langflow API 是以编程方式访问您的 flow 和 Langflow 服务器的主要方法。

试试看

有关调用 Langflow API 的脚本示例，请参阅快速开始。

生成 API 代码片段​

为了帮助您在脚本中嵌入 Langflow API 请求，Langflow 会自动为您的 flow 生成 Python、JavaScript 和 curl 代码片段。 要获取这些代码片段，请执行以下操作：

  1. 在 Langflow 中，打开您想要嵌入到应用程序中的 flow。

  2. 点击 Share，然后选择 API access。

    这些代码片段调用 /v1/run/$FLOW_ID 端点，并自动填充最小值，如 Langflow 服务器 URL、flow ID、请求头和请求参数。

    Windows

    API 访问面板生成的路径假定为 *nix 环境。 如果您使用 Microsoft Windows 或 WSL，可能需要调整代码片段中给出的文件路径。

    API access pane

  3. 可选：点击 Input Schema 来修改代码片段中的组件参数，而无需更改 flow 本身。

  4. 复制您要使用的语言的片段。

  5. 按原样运行片段，或在更大的脚本上下文中使用片段。

有关其他 Langflow API 端点的更多信息和示例，请参阅Langflow API 入门。

Langflow API 身份验证​

在 Langflow 1.5 及更高版本中，大多数 API 端点都需要使用 Langflow API 密钥进行身份验证，即使 AUTO_LOGIN 设置为 True。 唯一的例外是 MCP 端点 /v1/mcp、/v1/mcp-projects 和 /v2/mcp，它们从不需要身份验证。

在 API access 面板中生成的代码片段包含一个脚本，该脚本检查在本地终端会话中设置的 LANGFLOW_API_KEY 环境变量。 此脚本不会检查在本地终端会话之外的任何地方设置的 Langflow API 密钥。

要使此脚本工作，您必须在打算运行代码片段的终端会话中设置 LANGFLOW_API_KEY 变量，如 export LANGFLOW_API_KEY="sk..."。

或者，您可以编辑代码片段以包含 x-api-key 请求头，并确保请求可以对 Langflow API 进行身份验证。

有关更多信息，请参阅 API 密钥 和 Langflow API 入门

Input Schema (tweaks)​

Tweaks 是一次性覆盖，在运行时修改组件参数，而不是永久修改 flow 本身。 有关在脚本中使用 tweaks 的示例，请参阅快速开始。

提示

Tweaks 使您的 flow 更动态和可重用。

您可以创建一个 flow 并通过在每个应用程序的 Langflow API 请求中传递特定于应用程序的 tweaks 来将其用于多个应用程序。

在 API access 面板中，点击 Input Schema 将 tweaks 添加到 flow 代码片段的请求载荷中。

对 flow 的 Input Schema 的更改仅保存为该 flow 的 API access 代码片段的 tweaks。 这些 tweaks 不会更改在 Workspace 中设置的 flow 参数，也不适用于其他 flow。

通过 Input Schema 添加 tweaks 可以帮助您排除手动添加到 Langflow API 请求中的 tweaks 的格式问题。

例如，以下 curl 命令包含一个 tweak，用于禁用 flow 的 Chat Input 组件中的 Store Messages 设置：


_14
curl --request POST \
_14
--url "http://LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID" \
_14
--header "Content-Type: application/json" \
_14
--header "x-api-key: LANGFLOW_API_KEY" \
_14
--data '{
_14
"input_value": "Text to input to the flow",
_14
"output_type": "chat",
_14
"input_type": "chat",
_14
"tweaks": {
_14
"ChatInput-4WKag": {
_14
"should_store_message": false
_14
}
_14
}
_14
}'

使用 flow ID 别名​

如果您希望请求使用别名而不是实际的 flow ID，您可以重命名 flow 的 /v1/run/$FLOW_ID 端点：

  1. 在 Langflow 中，打开 flow，点击 Share，然后选择 API access。

  2. 点击 Input Schema。

  3. 在 Endpoint Name 字段中，为您的 flow ID 输入一个别名，如一个易记、人类可读的名称。

    名称只能包含字母、数字、连字符和下划线，如 flow-customer-database-agent。

  4. 要保存更改，请关闭 Input Schema 面板。

自动生成的代码片段现在使用您的新端点名称而不是原始 flow ID，如 url = "http://localhost:7868/api/v1/run/flow-customer-database-agent"。

将 flow 嵌入到网站中​

对于每个 flow，Langflow 提供了一个代码片段，您可以将其插入到网站 HTML 的 <body> 中，通过嵌入式聊天小部件与您的 flow 交互。

所需组件

聊天小部件仅支持具有 Chat Input 和 Chat Output 组件的 flow，这些组件是聊天体验所必需的。 Text Input 和 Text Output 组件可以发送和接收消息，但它们不包含持续的 LLM 聊天上下文。

尝试与没有 Chat Input 组件 的 flow 聊天将触发 flow，但响应只是表示输入为空。

获取 langflow-chat 片段​

要获取 flow 的嵌入式聊天小部件代码片段，请执行以下操作：

  1. 在 Langflow 中，打开您要嵌入的 flow。
  2. 点击 Share，然后选择 Embed into site。
  3. 复制代码片段并在您网站 HTML 的 <body> 中使用它。 有关更多信息，请参阅使用 React、Angular 或 HTML 嵌入聊天小部件。
  4. 添加 api_key 属性以确保小部件有权限运行 flow，如配置 langflow-chat web 组件中所解释。

聊天小部件实现为一个名为 langflow-chat 的 web 组件，从 CDN 加载。有关更多信息，请参阅 langflow-embedded-chat 仓库。

例如，以下 HTML 为部署在 ngrok 上的 Langflow 服务器上托管的基本提示 flow 嵌入了一个聊天小部件：


_12
<html>
_12
<head>
_12
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
_12
</head>
_12
<body>
_12
<langflow-chat
_12
host_url="https://c822-73-64-93-151.ngrok-free.app"
_12
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_12
api_key="$LANGFLOW_API_KEY"
_12
></langflow-chat>
_12
</body>
_12
</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.

Default chat widget

Try it

Use the Langflow embedded chat CodeSandbox for an interactive live demo of the embedded chat widget that uses your own flow. For more information, see the langflow-embedded-chat README.

Embed the chat widget with React, Angular, or HTML​

The following examples show how to use embedded chat widget in React, Angular, and plain HTML.

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:


    _21
    //Declaration of langflow-chat web component
    _21
    declare global {
    _21
    namespace JSX {
    _21
    interface IntrinsicElements {
    _21
    "langflow-chat": any;
    _21
    }
    _21
    }
    _21
    }
    _21
    _21
    //Definition for langflow-chat React component
    _21
    export default function ChatWidget({ className }) {
    _21
    return (
    _21
    <div className={className}>
    _21
    <langflow-chat
    _21
    host_url="https://c822-73-64-93-151.ngrok-free.app"
    _21
    flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
    _21
    api_key="$LANGFLOW_API_KEY"
    _21
    ></langflow-chat>
    _21
    </div>
    _21
    );
    _21
    }

  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:


    _38
    import React, { useEffect } from 'react';
    _38
    _38
    // Component to load the chat widget script
    _38
    const ChatScriptLoader = () => {
    _38
    useEffect(() => {
    _38
    if (!document.querySelector('script[src*="langflow-embedded-chat"]')) {
    _38
    const script = document.createElement('script');
    _38
    script.src = 'https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js';
    _38
    script.async = true;
    _38
    document.body.appendChild(script);
    _38
    }
    _38
    }, []);
    _38
    _38
    return null;
    _38
    };
    _38
    _38
    //Declaration of langflow-chat web component
    _38
    declare global {
    _38
    namespace JSX {
    _38
    interface IntrinsicElements {
    _38
    "langflow-chat": any;
    _38
    }
    _38
    }
    _38
    }
    _38
    _38
    //Definition for langflow-chat React component
    _38
    export default function ChatWidget({ className }) {
    _38
    return (
    _38
    <div className={className}>
    _38
    <ChatScriptLoader />
    _38
    <langflow-chat
    _38
    host_url="https://c822-73-64-93-151.ngrok-free.app"
    _38
    flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
    _38
    api_key="$LANGFLOW_API_KEY"
    _38
    ></langflow-chat>
    _38
    </div>
    _38
    );
    _38
    }

  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:


    _10
    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:


    _10
    <ChatWidget className="my-chat-widget" />

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. 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 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.

Example: Langflow API key prop

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:


_10
<langflow-chat
_10
host_url="https://c822-73-64-93-151.ngrok-free.app"
_10
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_10
api_key="$LANGFLOW_API_KEY"
_10
></langflow-chat>

Example: Style props

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"\}:


_17
<langflow-chat
_17
host_url="https://c822-73-64-93-151.ngrok-free.app"
_17
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_17
api_key="$LANGFLOW_API_KEY"
_17
chat_window_style='{
_17
"backgroundColor": "#1a0d0d",
_17
"border": "4px solid #b30000",
_17
"borderRadius": "16px",
_17
"boxShadow": "0 8px 32px #b30000",
_17
"color": "#fff",
_17
"fontFamily": "Georgia, serif",
_17
"padding": "16px"
_17
}'
_17
window_title="Custom Styled Chat"
_17
height="600"
_17
width="400"
_17
></langflow-chat>

For Angular applications, use property binding syntax to pass JSON props as JavaScript objects. For example:


_30
import { Component } from '@angular/core';
_30
_30
@Component({
_30
selector: 'app-root',
_30
template: `
_30
<div class="container">
_30
<h1>Langflow Chat Test</h1>
_30
<langflow-chat
_30
host_url="https://c822-73-64-93-151.ngrok-free.app"
_30
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_30
api_key="$LANGFLOW_API_KEY"
_30
[chat_window_style]='{"backgroundColor": "#ffffff"}'
_30
[bot_message_style]='{"color": "#000000"}'
_30
[user_message_style]='{"color": "#000000"}'
_30
height="600"
_30
width="400"
_30
chat_position="bottom-right"
_30
></langflow-chat>
_30
</div>
_30
`,
_30
styles: [`
_30
.container {
_30
padding: 20px;
_30
text-align: center;
_30
}
_30
`]
_30
})
_30
export class AppComponent {
_30
title = 'Langflow Chat Test';
_30
}

Example: Session ID prop

The following example adds a custom session ID to help identify flow runs started by the embeded chat widget:


_10
<langflow-chat
_10
host_url="https://c822-73-64-93-151.ngrok-free.app"
_10
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_10
api_key="$LANGFLOW_API_KEY"
_10
session_id="$SESSION_ID"
_10
></langflow-chat>

Example: Tweaks prop

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. For example:


_10
<langflow-chat
_10
host_url="https://c822-73-64-93-151.ngrok-free.app"
_10
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_10
api_key="$LANGFLOW_API_KEY"
_10
tweaks='{
_10
"model_name": "llama-3.1-8b-instant"
_10
}'
_10
></langflow-chat>

For Angular applications, use property binding syntax to pass JSON props as JavaScript objects. For example:


_25
import { Component } from '@angular/core';
_25
_25
@Component({
_25
selector: 'app-root',
_25
template: `
_25
<div class="container">
_25
<h1>Langflow Chat Test</h1>
_25
<langflow-chat
_25
host_url="https://c822-73-64-93-151.ngrok-free.app"
_25
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
_25
api_key="$LANGFLOW_API_KEY"
_25
[tweaks]='{"model_name": "llama-3.1-8b-instant"}'
_25
></langflow-chat>
_25
</div>
_25
`,
_25
styles: [`
_25
.container {
_25
padding: 20px;
_25
text-align: center;
_25
}
_25
`]
_25
})
_25
export class AppComponent {
_25
title = 'Langflow Chat Test';
_25
}

Serve flows through a Langflow MCP server​

Each Langflow project has an MCP server that exposes the project's flows as tools that MCP 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 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 and Use Langflow as an MCP client.

See also​

Search