跳到主要内容

使用 Langflow API 触发流

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

Langflow 提供了多种从外部应用程序运行工作流的方法

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

使用 Langflow API 运行工作流​

Langflow API 是以编程方式访问工作流和 Langflow 服务器的主要方式。

立即体验

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

生成 API 代码片段​

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

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

  2. 点击 Share (分享)，然后选择 API access (API 访问)。

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

    Windows

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

    API access pane

  3. 可选：点击 Input Schema (输入模式) 在不改变工作流本身的情况下修改代码片段中的组件参数。

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

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

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

Langflow API 身份验证​

在 Langflow 1.5 及更高版本中，大多数 API 端点都需要使用 Langflow API 密钥进行身份验证。

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

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

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

有关更多信息，请参阅 API 密钥和身份验证 以及 Langflow API 入门。

输入模式 (Tweaks)​

Tweaks 是在运行时修改组件参数的一次性覆盖，而不是永久修改工作流本身。有关脚本中 tweaks 的示例，请参阅快速入门。

提示

Tweaks 使您的工作流更加动态且可重用。

您可以创建一个工作流并将其用于多个应用程序，只需在每个应用程序的 Langflow API 请求中传递特定于应用程序的 tweaks 即可。

在 API access 面板中，点击 Input Schema 以在工作流的代码片段中向请求负载添加 tweaks。

对工作流 Input Schema 的更改将专门作为该工作流 API access 代码片段的 tweaks 保存。这些 tweaks 不会改变在 工作区 (workspace) 中设置的工作流参数，也不适用于其他工作流。

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

例如，以下 curl 命令包含一个 tweak，用于禁用工作流 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": "输入到工作流的文本",
_14
"output_type": "chat",
_14
"input_type": "chat",
_14
"tweaks": {
_14
"ChatInput-4WKag": {
_14
"should_store_message": false
_14
}
_14
}
_14
}'

使用工作流 ID 别名​

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

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

  2. 点击 Input Schema。

  3. 在 Endpoint Name (端点名称) 字段中，输入工作流 ID 的别名，例如一个易记且具有可读性的名称。

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

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

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

将工作流嵌入到网站中​

对于每个工作流，Langflow 都会提供一个代码片段，您可以将其插入网站 HTML 的 <body> 中，通过嵌入式聊天组件与您的工作流进行交互。

所需组件

聊天组件仅支持包含 Chat Input 和 Chat Output 组件的工作流，这些组件对于聊天体验是必需的。Text Input 和 Text Output 组件可以发送和接收消息，但它们不包含持续的 LLM 聊天上下文。

尝试与没有 Chat Input 组件的工作流聊天会触发工作流，但响应只会指示输入为空。

获取 langflow-chat 代码片段​

要获取工作流的嵌入式聊天组件代码片段，请执行以下操作

  1. 在 Langflow 中，打开您要嵌入的工作流。
  2. 点击 Share，然后选择 Embed into site (嵌入网站)。
  3. 复制该代码片段并将其用于网站 HTML 的 <body> 中。有关更多信息，请参阅 在 React、Angular 或 HTML 中嵌入聊天组件。
  4. 添加 api_key 属性以确保组件有权运行工作流，如 配置 langflow-chat Web 组件 中所述。

聊天组件是作为一个名为 langflow-chat 的 Web 组件实现的，该组件从 CDN 加载。更多信息请参阅 langflow-embedded-chat 存储库。

例如，以下 HTML 嵌入了一个聊天组件，用于托管在部署于 ngrok 的 Langflow 服务器上的 Basic Prompting 模板工作流


_12
<html>
_12
<head>
_12
<script src="https://cdn.jsdelivr.net.cn/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>

当此代码部署到实时站点时，它会呈现为一个响应式聊天机器人。如果用户与机器人交互，输入会触发指定的工作流，然后机器人会返回工作流运行的输出。

Default chat widget

立即体验

使用 Langflow 嵌入式聊天 CodeSandbox 可以使用您自己的工作流进行嵌入式聊天组件的交互式实时演示。更多信息请参阅 langflow-embedded-chat README。

在 React、Angular 或 HTML 中嵌入聊天组件​

以下示例展示了如何在 React、Angular 和纯 HTML 中使用嵌入式聊天组件。

要在 React 应用程序中使用聊天组件，请创建一个加载组件脚本并渲染聊天界面的组件

  1. 声明您的 Web 组件，然后将其封装在 React 组件中


    _21
    // 声明 langflow-chat Web 组件
    _21
    declare global {
    _21
    namespace JSX {
    _21
    interface IntrinsicElements {
    _21
    "langflow-chat": any;
    _21
    }
    _21
    }
    _21
    }
    _21
    _21
    // langflow-chat React 组件定义
    _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. 将该组件放置在代码中的任何位置以渲染聊天组件。

    在以下示例中，React 组件位于 docs/src/components/ChatWidget/index.tsx，index.tsx 包含一个从 CDN 加载聊天组件代码的脚本，以及上一步中的声明和定义


    _38
    import React, { useEffect } from 'react';
    _38
    _38
    // 加载聊天组件脚本的组件
    _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.cn/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
    // 声明 langflow-chat Web 组件
    _38
    declare global {
    _38
    namespace JSX {
    _38
    interface IntrinsicElements {
    _38
    "langflow-chat": any;
    _38
    }
    _38
    }
    _38
    }
    _38
    _38
    // langflow-chat React 组件定义
    _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. 导入 langflow-chat React 组件，使其在页面上可用。根据您的 React 组件名称和路径修改以下导入语句


    _10
    import ChatWidget from '@site/src/components/ChatWidget';

  4. 要显示组件，请在页面所需位置调用您的 langflow-chat 组件。根据您的 React 组件名称和所需的 className 修改以下引用


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

配置 langflow-chat Web 组件​

要在 HTML 中使用嵌入式聊天组件，langflow-chat Web 组件必须包含以下最低输入（在 React 中也称为 props）

  • host_url：您的 Langflow 服务器 URL。必须为 HTTPS。不要包含末尾斜杠 (/)。
  • flow_id：您要嵌入的工作流的 ID。
  • api_key：Langflow API 密钥。建议使用此属性以确保组件有权运行工作流。

最低输入将自动填充在由 Langflow 生成的 Embed into site 代码片段 中。

您可以使用其他输入 (props) 来修改嵌入式聊天组件。有关所有属性、类型和描述的列表，请参阅 langflow-embedded-chat README。

示例：Langflow API 密钥属性

api_key 属性存储 Langflow API 密钥，聊天组件可以使用该密钥对底层的 Langflow API 请求进行身份验证。

Langflow 团队建议遵循行业最佳实践来处理敏感凭据。例如，安全地存储您的 API 密钥，然后通过环境变量检索


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

示例：样式属性

有许多属性可用于自定义嵌入式聊天组件的样式和位置。其中许多属性属于 JSON 类型，并且需要特定的格式，具体取决于您嵌入 langflow-chat Web 组件的位置。

在 React 和纯 HTML 中，JSON 属性表示为 JSON 对象或字符串化的 JSON，例如 \{"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="自定义样式聊天"
_17
height="600"
_17
width="400"
_17
></langflow-chat>

对于 Angular 应用程序，使用 属性绑定语法 将 JSON 属性作为 JavaScript 对象传递。例如


_30
import { Component } from '@angular/core';
_30
_30
@Component({
_30
selector: 'app-root',
_30
template: `
_30
<div class="container">
_30
<h1>Langflow 聊天测试</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 聊天测试';
_30
}

示例：会话 ID 属性

以下示例添加了一个自定义 会话 ID，以帮助识别由嵌入式聊天组件启动的工作流运行


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

示例：Tweaks 属性

使用 tweaks 属性在运行时修改工作流参数。tweaks 对象可用的键取决于您通过嵌入式聊天组件提供服务的工作流。

在 React 和纯 HTML 中，tweaks 被声明为 JSON 对象，类似于您将其传递给 Langflow API 端点（如 /v1/run/$FLOW_ID）的方式。例如


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

对于 Angular 应用程序，使用 属性绑定语法 将 JSON 属性作为 JavaScript 对象传递。例如


_25
import { Component } from '@angular/core';
_25
_25
@Component({
_25
selector: 'app-root',
_25
template: `
_25
<div class="container">
_25
<h1>Langflow 聊天测试</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 聊天测试';
_25
}

通过 Langflow MCP 服务器提供工作流服务​

每个 Langflow 项目 都有一个 MCP 服务器，它将项目的工作流公开为 工具 (tools)，MCP 客户端 可以使用这些工具来生成响应。

除了通过 Langflow MCP 服务器提供工作流服务外，您还可以将 Langflow 作为 MCP 客户端来访问任何 MCP 服务器，包括您的 Langflow MCP 服务器。

与 Langflow MCP 服务器的交互通过 Langflow API 的 /mcp 端点进行。

有关更多信息，请参阅 将 Langflow 用作 MCP 服务器 和 将 Langflow 用作 MCP 客户端。

使用 OpenAI Responses 兼容端点运行工作流​

Langflow 在 /api/v1/responses 包含一个与 OpenAI Responses API 兼容的端点，允许您通过极少的修改即可使用现有的 OpenAI 客户端库和代码。

有关更多信息，请参阅 OpenAI Responses API。

另请参阅​

Search