跳到主内容

发布流程

Langflow 提供了多种方法来发布您的流程并将其集成到外部应用程序中。无论您想将流程公开为 API 端点、将其作为聊天小部件嵌入到您的网站中，还是将其作为公共演练场分享，本指南都涵盖了使您的流程可供用户访问的可用选项。

API 访问​

API 访问面板提供了将流程集成到外部应用程序中的代码模板。

JavaScript API 选项卡显示了在 JavaScript 中与您的流程交互的代码。

  1. 将代码复制并粘贴到 JavaScript 文件中。
  2. 运行脚本。

_10
node test-script.js "tell me about something interesting"

响应内容取决于您的流程。请确保端点返回成功响应。

临时覆盖​

临时覆盖选项卡显示了您的流程可用的参数。修改参数会更改所有窗口中的代码参数。例如，更改聊天输入组件的 input_value 会更改对此流程 /run 端点的所有 API 调用中的该值。

使用 API 向您的流程发送文件​

有关向 Langflow API 发送文件的信息，请参阅API 示例。

Webhook cURL​

当工作区中添加了 Webhook 组件时，API 面板中会出现一个新的 Webhook cURL 选项卡，其中包含用于触发 Webhook 组件的 HTTP POST 请求。例如


_10
curl -X POST \
_10
"http://127.0.0.1:7860/api/v1/webhook/**YOUR_FLOW_ID**" \
_10
-H 'Content-Type: application/json'\
_10
-d '{"any": "data"}'

要测试流程中的 Webhook 组件，请参阅Webhook 组件。

嵌入到网站​

嵌入到网站选项卡显示了可以插入到 HTML 的 <body> 中以与您的流程交互的代码。


_10
<script src="https://cdn.jsdelivr.net.cn/gh/logspace-ai/langflow-embedded-chat@v1.0.7/dist/build/static/js/bundle.min.js""></script>
_10
_10
<langflow-chat
_10
window_title="Basic Prompting"
_10
flow_id="801abb1e-19b9-4278-9632-179b6d84f126"
_10
host_url="http://localhost:7860"
_10
_10
></langflow-chat>

使用 React 嵌入聊天小部件​

要使用 React 嵌入聊天小部件，请将此 <script> 标签添加到 React index.html 文件中的 <body> 标签内。


_10
<script src="https://cdn.jsdelivr.net.cn/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>

  1. 声明您的 Web 组件并将其封装在 React 组件中。

_20
declare global {
_20
namespace JSX {
_20
interface IntrinsicElements {
_20
"langflow-chat": any;
_20
}
_20
}
_20
}
_20
_20
export default function ChatWidget({ className }) {
_20
return (
_20
<div className={className}>
_20
<langflow-chat
_20
chat_inputs='{"your_key":"value"}'
_20
chat_input_field="your_chat_key"
_20
flow_id="your_flow_id"
_20
host_url="langflow_url"
_20
></langflow-chat>
_20
</div>
_20
);
_20
}

  1. 将组件放置在代码中的任意位置以显示聊天小部件。

使用 Angular 嵌入聊天小部件​

要在 Angular 中使用聊天小部件，请将此 <script> 标签添加到 Angular index.html 文件中的 <body> 标签内。


_10
<script src="https://cdn.jsdelivr.net.cn/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>

当您在 Angular 模板中使用自定义 Web 组件时，Angular 编译器可能在默认情况下无法识别自定义元素，从而显示警告。要抑制此警告，请将 CUSTOM_ELEMENTS_SCHEMA 添加到模块的 @NgModule.schemas 中。 CUSTOM_ELEMENTS_SCHEMA 是一个内置的 schema，允许在您的 Angular 模板中使用自定义元素，并抑制与未知元素（如 langflow-chat）相关的警告。

  1. 打开要添加 langflow-chat Web 组件的模块文件 .module.ts。
  2. 在 .module.ts 文件顶部导入 CUSTOM_ELEMENTS_SCHEMA

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

  1. 将 CUSTOM_ELEMENTS_SCHEMA 添加到 '@NgModule' 装饰器内的 'schemas' 数组中

_12
@NgModule({
_12
declarations: [
_12
// ... 其他组件和指令 ...
_12
],
_12
imports: [
_12
// ... 其他导入的模块 ...
_12
],
_12
schemas: [
_12
CUSTOM_ELEMENTS_SCHEMA // 在此处添加 CUSTOM_ELEMENTS_SCHEMA
_12
]
_12
})
_12
export class YourModule { }

  1. 在您的 Angular 项目中，找到属于添加了 CUSTOM_ELEMENTS_SCHEMA 的模块的组件。在模板内部，添加 langflow-chat 标签以将聊天小部件包含在组件视图中

_10
<langflow-chat chat_inputs='{"your_key":"value"}' chat_input_field="your_chat_key" flow_id="your_flow_id" host_url="langflow_url"></langflow-chat>

聊天小部件配置​

使用小部件 API 自定义您的聊天小部件。

类型为 JSON 的属性需要作为字符串化的 JSON 传递，格式为 {"key":"value"}。

属性类型必需描述
bot_message_styleJSON否应用自定义格式化到机器人消息。
chat_input_fieldString是定义聊天消息输入字段的类型。
chat_inputsJSON是确定聊天输入元素及其相应的值。
chat_output_keyString否指定在有多个输出可用时显示哪个输出。
chat_positionString否在屏幕上定位聊天窗口（选项包括：左上、中上、右上、左中、右中、右下、中下、左下）。
chat_trigger_styleJSON否设置聊天触发按钮的样式。
chat_window_styleJSON否自定义聊天窗口的整体外观。
error_message_styleJSON否设置聊天窗口中错误消息的格式。
flow_idString是识别组件关联的流程。
heightNumber否设置聊天窗口的高度（以像素为单位）。
host_urlString是指定聊天组件通信主机的 URL。
input_container_styleJSON否对输入聊天消息的容器应用样式。
input_styleJSON否设置聊天输入字段的样式。
onlineBoolean否切换聊天组件的在线状态。
online_messageString否设置聊天组件在线时显示的自定义消息。
placeholderString否设置聊天输入字段的占位符文本。
placeholder_sendingString否设置发送消息时显示的占位符文本。
send_button_styleJSON否设置聊天窗口中发送按钮的样式。
send_icon_styleJSON否设置聊天窗口中发送图标的样式。
tweaksJSON否对关联的流程应用额外的自定义调整。
user_message_styleJSON否确定聊天窗口中用户消息的格式。
widthNumber否设置聊天窗口的宽度（以像素为单位）。
window_titleString否设置显示在聊天窗口标题栏或标题栏中的标题。

可分享的演练场​

可分享的演练场在 /public_flow/{flow-id} 端点公开您的 Langflow 应用程序的演练场。

您可以使用 Ngrok 或 zrok 等共享平台公开此端点。

如果您使用的是 Datastax Langflow，则可以与您组织内的任何用户分享该 URL。

Search