使用 Langflow API 触发流

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

Langflow 提供了几种从外部应用程序运行流的方法：

使用 Langflow API 触发流
在网站中添加嵌入式聊天组件
通过 Langflow MCP 服务器提供流服务
使用 OpenAI 响应兼容端点运行流

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

使用 Langflow API 运行流

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

尝试一下

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

生成 API 代码片段

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

在 Langflow 中，打开您想要嵌入到应用程序中的流。
点击 分享 (Share)，然后选择 API 访问 (API access)。

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

Windows
API 访问面板生成的路径假设是 *nix 环境。如果您使用 Microsoft Windows 或 WSL，您可能需要调整代码片段中给出的文件路径。
可选：点击 输入架构 (Input Schema) 以在不更改流本身的情况下修改代码片段中的组件参数。
复制您想要使用的语言的代码片段。
直接运行该片段，或者在更大的脚本上下文中使用该片段。

有关其他 Langflow API 端点的更多信息和示例，请参阅开始使用 Langflow API。

Langflow API 身份验证

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

API 访问 面板中生成的代码片段包含一个脚本，该脚本会检查本地终端会话中设置的 LANGFLOW_API_KEY 环境变量。该脚本不会检查除了本地终端会话之外其他地方设置的 Langflow API 密钥。

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

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

更多信息请参阅 API 密钥与身份验证和开始使用 Langflow API。

输入架构 (微调/Tweaks)

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

提示

微调使您的流更加动态和可重用。

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

在 API 访问 面板中，点击 输入架构 (Input Schema) 以在流的代码片段请求负载中添加 tweaks。

对流的 输入架构 的更改将专门作为该流的 API 访问 代码片段的微调保存。这些微调不会更改在工作区中设置的流参数，也不会应用于其他流。

通过 输入架构 添加微调可以帮助您排查手动添加到 Langflow API 请求中的微调格式问题。

例如，以下 curl 命令包含一个微调，该微调禁用了流的 聊天输入 (Chat Input) 组件中的 存储消息 (Store Messages) 设置：


_15curl --request POST \
_15  --url "http://LANGFLOW_SERVER_ADDRESS/api/v1/run/FLOW_ID" \
_15  --header "Content-Type: application/json" \
_15  --header "x-api-key: LANGFLOW_API_KEY" \
_15  --header "Content-Type: application/json" \
_15  --data '{
_15  "input_value": "输入到流的文本",
_15  "output_type": "chat",
_15  "input_type": "chat",
_15  "tweaks": {
_15    "ChatInput-4WKag": {
_15      "should_store_message": false
_15    }
_15  }
_15}'

使用流 ID 别名

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

在 Langflow 中，打开流，点击 分享 (Share)，然后选择 API 访问 (API access)。
点击 输入架构 (Input Schema)。
在 端点名称 (Endpoint Name) 字段中，为您的流 ID 输入一个别名，例如一个易于记忆、人类可读的名称。

名称只能包含字母、数字、连字符和下划线，例如 flow-customer-database-agent。
要保存更改，请关闭 输入架构 面板。

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

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

所需组件

聊天组件仅支持包含 聊天输入 (Chat Input) 和 聊天输出 (Chat Output) 组件的流，这些组件是聊天体验所必需的。 文本输入 (Text Input) 和 文本输出 (Text Output) 组件可以发送和接收消息，但它们不包含持续的 LLM 聊天上下文。

尝试与不包含 聊天输入 (Chat Input) 组件的流聊天将触发该流，但响应仅表示输入为空。

获取 langflow-chat 代码片段

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

在 Langflow 中，打开您想要嵌入的流。
点击 分享 (Share)，然后选择 嵌入到网站 (Embed into site)。
复制代码片段并将其用于网站 HTML 的 <body> 中。更多信息请参阅使用 React、Angular 或 HTML 嵌入聊天组件。
添加 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/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>

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

尝试一下

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

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

React
Angular
HTML

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

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

_21// 声明 langflow-chat web 组件 _21declare global { _21namespace JSX { _21 interface IntrinsicElements { _21 "langflow-chat": any; _21 } _21} _21} _21 _21// langflow-chat React 组件定义 _21export default function ChatWidget({ className }) { _21return ( _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}
将该组件放置在代码中的任何位置以渲染聊天组件。

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

_38import React, { useEffect } from 'react'; _38 _38// 加载聊天组件脚本的组件 _38const ChatScriptLoader = () => { _38useEffect(() => { _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 _38return null; _38}; _38 _38// 声明 langflow-chat web 组件 _38declare global { _38namespace JSX { _38 interface IntrinsicElements { _38 "langflow-chat": any; _38 } _38} _38} _38 _38// langflow-chat React 组件定义 _38export default function ChatWidget({ className }) { _38return ( _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}
导入 langflow-chat React 组件，使其在页面上可用。使用您的 React 组件的名称和路径修改以下导入语句：

_10import ChatWidget from '@site/src/components/ChatWidget';
要显示该组件，请在页面上所需位置调用您的 langflow-chat 组件。根据您的 React 组件名称和所需的 className 修改以下引用：

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

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

在 Angular 应用程序中，langflow-chat 是一个自定义 Web 组件，您必须在网站的 .components.ts 中明确允许它。因此，要使用嵌入式聊天组件，您必须将 CUSTOM_ELEMENTS_SCHEMA 添加到模块配置中，然后集成 <langflow-chat> 元素。

Angular 要求您在网站的 components 中明确允许自定义 Web 组件，如 langflow-chat。因此，您必须将 <langflow-chat> 元素添加到 Angular 模板中，并配置 Angular 以识别它。您必须将 CUSTOM_ELEMENTS_SCHEMA 添加到模块配置中以启用此功能。

在您的 Angular 应用程序中，编辑您想要添加 langflow-chat Web 组件的 .module.ts 文件。
在 .module.ts 的顶部，导入 CUSTOM_ELEMENTS_SCHEMA：

_10import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
在 @NgModule 装饰器中，将 CUSTOM_ELEMENTS_SCHEMA 添加到 schemas 数组：

_16import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; _16import { BrowserModule } from '@angular/platform-browser'; _16import { AppComponent } from './app.component'; _16 _16@NgModule({ _16declarations: [ _16 AppComponent _16], _16imports: [ _16 BrowserModule _16], _16schemas: [CUSTOM_ELEMENTS_SCHEMA], _16providers: [], _16bootstrap: [AppComponent] _16}) _16export class AppModule { }
编辑您想要使用嵌入式聊天组件的 .component.ts 文件。
在 @Component 装饰器中，将 <langflow-chat> 元素添加到 template 键：

_24import { Component } from '@angular/core'; _24 _24@Component({ _24selector: 'app-root', _24template: ` _24 <div class="container"> _24 <h1>Langflow 聊天测试</h1> _24 <langflow-chat _24 host_url="https://c822-73-64-93-151.ngrok-free.app" _24 flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f" _24 api_key="$LANGFLOW_API_KEY" _24 ></langflow-chat> _24 </div> _24`, _24styles: [` _24 .container { _24 padding: 20px; _24 text-align: center; _24 } _24`] _24}) _24export class AppComponent { _24title = 'Langflow 聊天测试'; _24}


_12<html lang="zh-CN">
_12<head>
_12<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@v1.0.7/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>

配置 langflow-chat Web 组件

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

host_url：您的 Langflow 服务器 URL。必须是 HTTPS。不要包含结尾斜杠 (/)。
flow_id：您想要嵌入的流的 ID。
api_key：Langflow API 密钥。推荐使用此属性以确保该组件有权运行流。

最低输入会自动填充在 Langflow 生成的 嵌入到网站 代码片段中。

您可以使用其他输入 (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 对象传递。例如：


_30import { 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})
_30export 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 对象传递。例如：


_25import { 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})
_25export class AppComponent {
_25  title = 'Langflow 聊天测试';
_25}

通过 Langflow MCP 服务器提供流服务

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

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

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

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

使用 OpenAI 响应兼容端点运行流

Langflow 在 /api/v1/responses 包含一个与 OpenAI 响应 API 兼容的端点，允许您以极小的修改使用现有的 OpenAI 客户端库和代码。

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

使用 Langflow API 触发流

使用 Langflow API 运行流

生成 API 代码片段

Langflow API 身份验证

输入架构 (微调/Tweaks)

使用流 ID 别名

将流嵌入到网站中

获取 langflow-chat 代码片段

使用 React、Angular 或 HTML 嵌入聊天组件

配置 langflow-chat Web 组件

通过 Langflow MCP 服务器提供流服务

使用 OpenAI 响应兼容端点运行流

另请参阅

使用 Langflow API 运行流​

生成 API 代码片段​

Langflow API 身份验证​

输入架构 (微调/Tweaks)​

使用流 ID 别名​

将流嵌入到网站中​

获取 langflow-chat 代码片段​

使用 React、Angular 或 HTML 嵌入聊天组件​

配置 langflow-chat Web 组件​

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

使用 OpenAI 响应兼容端点运行流​

另请参阅​

使用 Langflow API 运行流

生成 API 代码片段

Langflow API 身份验证

输入架构 (微调/Tweaks)

使用流 ID 别名

将流嵌入到网站中

获取 langflow-chat 代码片段

使用 React、Angular 或 HTML 嵌入聊天组件

配置 langflow-chat Web 组件

通过 Langflow MCP 服务器提供流服务

使用 OpenAI 响应兼容端点运行流

另请参阅