使用 Langflow API 触发流程

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

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

使用 Langflow API 触发流程
向网站添加嵌入式聊天小部件
通过 Langflow MCP 服务器提供流程服务

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

使用 Langflow API 运行流程

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

试试看

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

生成 API 代码片段

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

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

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

Windows
API 访问面板生成的路径假设是 *nix 环境。如果您使用 Microsoft Windows 或 WSL，可能需要调整代码片段中提供的文件路径。
可选：点击 Input Schema 来修改代码片段中的组件参数，而不更改流程本身。
Replicate您想要使用的语言的代码片段。
按原样运行代码片段，或在更大的脚本上下文中使用该代码片段。

有关 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。

输入架构（调整）

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

提示

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

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

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

对流程 Input Schema 的更改仅保存为该流程 API access 代码片段的调整。这些调整不会更改在工作区中设置的流程参数，也不适用于其他流程。

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

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


_14curl --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}'

使用流程ID别名

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

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

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

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

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

必需组件

聊天小部件仅支持具有聊天输入和聊天输出组件的流程，这些组件是聊天体验所必需的。 文本输入和文本输出组件可以发送和接收消息，但它们不包括持续的LLM聊天上下文。

尝试与没有聊天输入组件的流程聊天将触发流程，但响应仅指示输入为空。

获取langflow-chat代码片段

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

在Langflow中，打开您要嵌入的流程。
点击共享，然后选择嵌入到网站。
Replicate代码片段并在您网站HTML的<body>中使用它。有关更多信息，请参阅使用React、Angular或HTML嵌入聊天小部件。
添加api_key属性以确保小部件有权限运行流程，如配置langflow-chat Web组件中所述。

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

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


_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//Declaration of langflow-chat web component _21declare global { _21namespace JSX { _21 interface IntrinsicElements { _21 "langflow-chat": any; _21 } _21} _21} _21 _21//Definition for langflow-chat React component _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// Component to load the chat widget script _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//Declaration of langflow-chat web component _38declare global { _38namespace JSX { _38 interface IntrinsicElements { _38 "langflow-chat": any; _38 } _38} _38} _38 _38//Definition for langflow-chat React component _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 Chat 测试</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 Chat 测试'; _24}


_12<html lang="en">
_12<head>
_12<script src="https://cdn.jsdelivr.net/gh/langflow-ai/[email protected]/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密钥。建议使用此prop以确保小部件有权限运行流程。

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

您可以使用额外的输入（props）来修改嵌入式聊天小部件。有关所有props、类型和描述的列表，请参阅langflow-embedded-chat README。

示例：Langflow API密钥prop

api_key prop存储一个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>

示例：样式props

您可以使用许多props来自定义嵌入式聊天小部件的样式和位置。许多这些props是JSON类型，它们需要特定的格式，具体取决于您嵌入langflow-chat Web组件的位置。

在React和普通HTML中，JSON props表示为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 props作为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 prop

以下示例添加了一个自定义的会话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>

示例：调整prop

使用tweaks prop在运行时修改流程参数。 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 props 作为 JavaScript 对象传递。例如：


_25import { 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})
_25export class AppComponent {
_25  title = 'Langflow Chat Test';
_25}

通过 Langflow MCP 服务器提供流程

每个 Langflow 项目都有一个 MCP 服务器，它将项目的流程暴露为工具，MCP 客户端可以使用这些工具来生成响应。

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

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

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

使用 Langflow API 触发流程

使用 Langflow API 运行流程

生成 API 代码片段

Langflow API 身份验证

输入架构（调整）

使用流程ID别名

将流程嵌入到网站中

获取langflow-chat代码片段

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

配置 langflow-chat Web 组件

通过 Langflow MCP 服务器提供流程

另请参阅

使用 Langflow API 运行流程​

生成 API 代码片段​

Langflow API 身份验证​

输入架构（调整）​

使用流程ID别名​

将流程嵌入到网站中​

获取langflow-chat代码片段​

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

配置 langflow-chat Web 组件​

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

另请参阅​

使用 Langflow API 运行流程

生成 API 代码片段

Langflow API 身份验证

输入架构（调整）

使用流程ID别名

将流程嵌入到网站中

获取langflow-chat代码片段

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

配置 langflow-chat Web 组件

通过 Langflow MCP 服务器提供流程

另请参阅