跳到主要内容

将应用程序连接到 Agent

本教程展示如何将 JavaScript 应用程序连接到 Langflow Agent。

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

先决条件​

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

创建 Agent flow​

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

  1. 在 Langflow 中，点击 New Flow，然后选择 Simple agent 模板。

  2. 移除 URL 和 Calculator 工具，然后将 Directory 和 Web search 组件拖入您的工作区。

  3. 在 Directory 组件的 Path 字段中，输入您想要供 Agent 组件使用的目录路径和文件类型。

    在本教程中，Agent 需要访问客户购买记录，因此目录名是 customer_orders，文件类型是 .csv。在本教程的后面，Agent 将被提示在客户数据中查找 email 值。

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

  4. 在 Directory 和 Web search 组件的组件标题菜单中，启用 Tool Mode，以便您可以将组件与 Agent 一起使用。

  5. 对于两个工具组件，将 Toolset 端口连接到 Agent 组件的 Tools 端口。

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

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

  7. 要测试流程，请点击 Playground，然后向 LLM 提问，例如 为 carol.davis@example.com 推荐 3 个二手商品，基于以前的订单。

    给定示例提示，LLM 将根据 customer_orders.csv 中的以前订单响应推荐和相关商品的网页链接。

    Playground 会打印代理的思考链，当它选择要使用的工具并与这些工具提供的功能交互时。 例如，代理可以使用 Directory 组件的 as_dataframe 工具来检索 DataFrame，以及 Web search 组件的 perform_search 工具来查找相关商品的链接。

向流程添加 Prompt Template 组件​

在此示例中，应用程序将客户的电子邮件地址发送到 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 access 面板上的代码片段中获取此值。
    • FLOW_ID：您的流程的 UUID 或自定义端点名称。您可以从流程的 API access 面板上的代码片段中获取此值。
    • LANGFLOW_API_KEY：有效的 Langflow API 密钥。要创建 API 密钥，请参阅 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
    启动 Langflow 代理...
    _15
    _15
    连接到 Langflow 服务器：http://localhost:7860
    _15
    流程 ID：local-db-search
    _15
    邮箱：isabella.rodriguez@example.com
    _15
    _15
    向代理发送请求...
    _15
    _15
    === 来自 Langflow 的响应 ===
    _15
    会话 ID：isabella.rodriguez@example.com
    _15
    _15
    找到的 URL：
    _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。

下一步​

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

Search