# 把 Langflow 接入网页聊天挂件

Source: https://langbot.app/docs/zh/recipes/langflow/web-page

使用 LangBot 把 Langflow 应用接入网页聊天挂件：Langflow 配置、机器人凭据、网络要求、测试与常见问题。

本文把你的 Langflow 应用接到网页聊天挂件机器人上。LangBot 接收网页聊天挂件消息，交给流水线处理后把答案发回去，你不需要写任何平台对接代码。

Langflow 用拖拽方式搭建 Agent 和流程。LangBot 在每条消息到来时通过 Langflow API 运行你的流程。

## 准备工作

- 一个运行中的 LangBot：[LangBot Cloud](https://space.langbot.app/cloud)（无需服务器），或用 Docker、`uvx langbot` [自行部署](https://langbot.app/docs/zh/deploy/langbot/docker.md)。
- LangBot 能通过网络访问到的 Langflow 账号或实例。
- 不需要第三方凭据。可选：用于防刷的 Cloudflare Turnstile Site Key 和 Secret Key。

## 网络要求

访客的浏览器会直接连接 LangBot，因此 LangBot 需要可公网访问的 HTTPS 地址；LangBot Cloud 自带。

## 1. 准备 Langflow

1. 在 Langflow 中搭建流程（可以从 Simple Agent 模板开始）。
2. 在 **Settings** 中创建 API Key。
3. 在 **Share → API access** 的示例代码中找到 **Flow ID**。

## 2. 创建流水线

在 LangBot WebUI 打开 **流水线**，新建流水线（或编辑默认流水线），按下表配置 **AI** 能力。如果列表里没有对应运行器，请先在 **插件** 或 [LangBot Space 插件市场](https://space.langbot.app/market) 安装官方运行器插件。

| 配置项      | 填写                                    |
| -------- | ------------------------------------- |
| 运行器      | **Langflow**（官方 Langflow Agent 运行器插件） |
| Base URL | LangBot 能访问到的 Langflow 地址             |
| API Key  | Langflow API Key                      |
| Flow ID  | 要运行的流程 ID                             |

## 3. 创建网页聊天挂件机器人

1. 新建机器人，选择 **网页机器人** 适配器并绑定流水线。
2. 把嵌入代码放进你的网站，并把其中的 `localhost:5300` 换成 LangBot 的公网地址。

## 4. 绑定并测试

打开机器人，选择刚才创建的流水线，保存并确认机器人已启用。

打开嵌入了挂件的网页，发起对话。

## 常见问题排查

- 连接被拒绝：只有 Langflow 与 LangBot 在同一主机、同一网络命名空间时，`http://localhost:7860` 才可用。
- 挂件加载不出来：嵌入代码仍指向 `localhost`，或 LangBot 地址没有使用 HTTPS。
- 在 WebUI 的 **监控** 页面可以看到每条消息、每次流水线运行和错误详情。

## 常见问题

### 接入网页聊天挂件需要有公网 IP 的服务器吗？

需要，或者直接使用 LangBot Cloud。访客的浏览器会直接连接 LangBot，因此 LangBot 需要可公网访问的 HTTPS 地址；LangBot Cloud 自带。

### 网页聊天挂件机器人支持流式回复吗？

请查看[平台功能对照表](https://langbot.app/docs/zh/insight/platform-features.md)了解该平台支持的能力；AI 后端生成完成后会一次性发送回复。

### 同一套 Langflow 配置能同时用在其他平台吗？

可以。一条流水线可以绑定多个机器人，同一套配置能同时在多个平台上回复。

## 相关文档

- [网页聊天挂件完整接入文档](https://langbot.app/docs/zh/usage/platforms/webpage.md)
- [Langflow 运行器完整文档](https://langbot.app/docs/zh/usage/pipelines/langflow.md)
- 网页聊天挂件上的其他 AI 后端：[Dify](https://langbot.app/docs/zh/recipes/dify/web-page.md) · [n8n](https://langbot.app/docs/zh/recipes/n8n/web-page.md) · [Coze](https://langbot.app/docs/zh/recipes/coze/web-page.md) · [DeepSeek](https://langbot.app/docs/zh/recipes/deepseek/web-page.md) · [OpenAI (ChatGPT models)](https://langbot.app/docs/zh/recipes/openai/web-page.md)
- Langflow 接入其他平台：[Telegram](https://langbot.app/docs/zh/recipes/langflow/telegram.md) · [Discord](https://langbot.app/docs/zh/recipes/langflow/discord.md) · [Slack](https://langbot.app/docs/zh/recipes/langflow/slack.md) · [飞书](https://langbot.app/docs/zh/recipes/langflow/lark.md) · [钉钉](https://langbot.app/docs/zh/recipes/langflow/dingtalk.md) · [企业微信应用](https://langbot.app/docs/zh/recipes/langflow/wecom.md)