跳到主要内容

将应用程序连接到代理 (Connect applications to agents)

本教程向您展示如何将 JavaScript 应用程序连接到 Langflow 代理 (Langflow agent)。

通过代理，您的应用程序可以使用任何连接的工具来检索更具上下文且及时的数据，而无需更改任何应用程序代码。工具由代理内部的 LLM 选择，以解决问题并回答疑问。

前提条件​

本教程使用 OpenAI LLM。如果您想使用其他提供商，则需要该提供商的有效凭据。

创建代理流​

以下步骤修改 简单代理 (Simple Agent) 模板，将 目录 (Directory) 组件 和 网络搜索 (Web Search) 组件 连接为 代理 (Agent) 组件 的工具。 目录 (Directory) 组件从本地计算机的目标目录加载指定类型的所有文件，而 网络搜索 (Web Search) 组件执行 DuckDuckGo 搜索。 当作为工具连接到 代理 (Agent) 组件时，代理在处理请求时可以选择使用这些组件。

  1. 在 Langflow 中，点击 新建流 (New Flow)，然后选择 简单代理 (Simple Agent) 模板。

  2. 移除 URL 和 计算器 (Calculator) 工具，然后将 目录 (Directory) 和 网络搜索 (Web Search) 组件添加到您的流中。

  3. 在 目录 (Directory) 组件的 路径 (Path) 字段中，输入您希望提供给 代理 (Agent) 组件的目录路径和文件类型。

    在本教程中，代理需要访问客户购买记录，因此目录名称为 customer_orders，文件类型为 .csv。在本教程稍后部分，代理将被提示在客户数据中查找 email 值。

    您可以调整本教程以适应您的数据，或者，为了跟随本教程，您可以下载 customer-orders.csv 并将其保存在本地计算机的 customer_orders 文件夹中。

  4. 在 目录 (Directory) 和 网络搜索 (Web Search) 组件的页眉菜单 中，启用 工具模式 (Tool Mode)，以便您可以将这些组件与代理一起使用。

  5. 将 目录 (Directory) 和 网络搜索 (Web Search) 组件的 工具集 (Toolset) 端口连接到 代理 (Agent) 组件的 工具 (Tools) 端口。

  6. 在 代理 (Agent) 组件中，输入您的 OpenAI API 密钥。

    如果您想使用不同的提供商或模型，请相应地编辑 模型提供商 (Model Provider)、模型名称 (Model Name) 和 API 密钥 (API Key) 字段。

  7. 要测试流，点击 游乐场 (Playground)，然后向 LLM 提问，例如 根据之前的订单，为 carol.davis@example.com 推荐 3 件二手物品。

    根据示例提示，LLM 将根据 customer_orders.csv 中之前的订单返回物品推荐和网页链接。

    游乐场 (Playground) 会在代理选择要使用的工具并与这些工具提供的功能交互时打印其思维链。 例如，代理可以使用 目录 (Directory) 组件的 as_dataframe 工具检索 DataFrame，并使用 网络搜索 (Web Search) 组件的 perform_search 工具查找相关物品的链接。

向流中添加提示模板组件​

在此示例中，应用程序将客户的电子邮件地址发送给 Langflow 代理。代理在 目录 (Directory) 组件中比较客户之前的订单，在网上搜索这些物品的二手版本，并返回三个结果。

  1. 要在流中包含电子邮件地址作为值，请在流中的 聊天输入 (Chat Input) 和 代理 (Agent) 组件之间添加一个 提示模板 (Prompt Template) 组件。

  2. 在 提示模板 (Prompt Template) 组件的 模板 (Template) 字段中，输入 根据之前的订单，为 {email} 推荐 3 件二手物品。 在花括号中添加 {email} 值会在 提示模板 (Prompt Template) 组件中创建一个新的输入，连接到 {email} 端口的组件正在为该变量提供值。 这为用户的电子邮件从您的请求进入流创建了一个切入点。 如果您没有使用 customer_orders.csv 示例文件，请修改输入以在您的数据集中搜索值。

    此时，您的流有六个组件。聊天输入 (Chat Input) 组件连接到 提示模板 (Prompt Template) 组件的 email 输入端口。然后，提示模板 (Prompt Template) 组件的输出连接到 代理 (Agent) 组件的 系统消息 (System Message) 输入端口。目录 (Directory) 和 网络搜索 (Web Search) 组件连接到 代理 (Agent) 组件的 工具 (Tools) 端口。最后，代理 (Agent) 组件的输出连接到 聊天输出 (Chat Output) 组件，该组件将最终响应返回给应用程序。

    连接到网络搜索和目录组件作为工具的代理组件

从 JavaScript 应用程序向您的流发送请求​

在您的流运行后，将其连接到 JavaScript 应用程序以使用代理的响应。

  1. 要构建连接到您的流的 JavaScript 应用程序，请收集以下信息：

    • LANGFLOW_SERVER_ADDRESS：您的 Langflow 服务器域名。默认值为 127.0.0.1:7860。您可以从流的 API 访问 面板 上的代码片段中获取此值。
    • FLOW_ID：您的流的 UUID 或自定义端点名称。您可以从流的 API 访问 面板 上的代码片段中获取此值。
    • LANGFLOW_API_KEY：有效的 Langflow API 密钥。

  2. 将以下脚本复制到 JavaScript 文件中，然后将占位符替换为您在上一步中收集的信息。 如果您使用的是 customer_orders.csv 示例文件，则可以使用代码示例中的示例电子邮件地址原样运行此示例。 如果不是，请修改 const email = "isabella.rodriguez@example.com" 以在您的数据集中搜索值。


    _60
    import { LangflowClient } from "@datastax/langflow-client";
    _60
    _60
    const LANGFLOW_SERVER_ADDRESS = 'LANGFLOW_SERVER_ADDRESS';
    _60
    const FLOW_ID = 'FLOW_ID';
    _60
    const LANGFLOW_API_KEY = 'LANGFLOW_API_KEY';
    _60
    const email = "isabella.rodriguez@example.com";
    _60
    _60
    async function runAgentFlow(): Promise<void> {
    _60
    try {
    _60
    // 初始化 Langflow 客户端
    _60
    const client = new LangflowClient({
    _60
    baseUrl: LANGFLOW_SERVER_ADDRESS,
    _60
    apiKey: LANGFLOW_API_KEY
    _60
    });
    _60
    _60
    console.log(`正在连接到 Langflow 服务器: ${LANGFLOW_SERVER_ADDRESS} `);
    _60
    console.log(`流 ID: ${FLOW_ID}`);
    _60
    console.log(`电子邮件: ${email}`);
    _60
    _60
    // 获取流实例
    _60
    const flow = client.flow(FLOW_ID);
    _60
    _60
    // 使用电子邮件作为输入运行流
    _60
    console.log('\n正在向代理发送请求...');
    _60
    const response = await flow.run(email, {
    _60
    session_id: email // 使用电子邮件作为会话 ID 以保持上下文
    _60
    });
    _60
    _60
    console.log('\n=== 来自 Langflow 的响应 ===');
    _60
    console.log('会话 ID:', response.sessionId);
    _60
    _60
    // 从聊天消息中提取 URL
    _60
    const chatMessage = response.chatOutputText();
    _60
    console.log('\n=== 来自聊天消息的 URL ===');
    _60
    const messageUrls = chatMessage.match(/https?:\/\/[^\s"')\]]+/g) || [];
    _60
    const cleanMessageUrls = [...new Set(messageUrls)].map(url => url.trim());
    _60
    console.log('来自消息的 URL:');
    _60
    cleanMessageUrls.slice(0, 3).forEach(url => console.log(url));
    _60
    _60
    } catch (error) {
    _60
    console.error('运行流时出错:', error);
    _60
    _60
    // 提供错误信息
    _60
    if (error instanceof Error) {
    _60
    if (error.message.includes('fetch')) {
    _60
    console.error('\n请确保您的 Langflow 服务器正在运行且可通过以下地址访问:', LANGFLOW_SERVER_ADDRESS);
    _60
    }
    _60
    if (error.message.includes('401') || error.message.includes('403')) {
    _60
    console.error('\n请检查您的 API 密钥配置');
    _60
    }
    _60
    if (error.message.includes('404')) {
    _60
    console.error('\n请检查您的流 ID - 确保它存在且正确');
    _60
    }
    _60
    }
    _60
    }
    _60
    }
    _60
    _60
    // 运行函数
    _60
    console.log('正在启动 Langflow 代理...\n');
    _60
    runAgentFlow().catch(console.error);

  3. 保存并运行脚本以发送请求并测试流。

    您的应用程序会根据本地 CSV 中客户之前的订单收到三个推荐二手物品的 URL，而无需更改任何代码。

    结果

    以下是本教程流的一个示例响应。由于 LLM 的特性以及输入的不同，您的响应可能会有所不同。


    _15
    Starting Langflow Agent...
    _15
    _15
    Connecting to Langflow server at: http://localhost:7860
    _15
    Flow ID: local-db-search
    _15
    Email: isabella.rodriguez@example.com
    _15
    _15
    Sending request to agent...
    _15
    _15
    === Response from Langflow ===
    _15
    Session ID: isabella.rodriguez@example.com
    _15
    _15
    URLs found:
    _15
    https://www.facebook.com/marketplace/258164108225783/electronics/
    _15
    https://www.facebook.com/marketplace/458332108944152/furniture/
    _15
    https://www.facebook.com/marketplace/613732137493719/kitchen-cabinets/

  4. 要快速检查流的流量，请打开 游乐场 (Playground)。 新会话以用户的电子邮件地址命名。 保持会话独立有助于代理维持上下文。有关会话 ID 的更多信息，请参阅 会话 ID (Session ID)。

下一步​

有关构建或扩展本教程的更多信息，请参阅以下内容：

Search