跳到主要内容

将应用程序连接到智能体

本教程向您展示如何将 JavaScript 应用程序连接到 Langflow 智能体。

通过智能体，您的应用程序可以使用任何已连接的工具来获取更多上下文相关和及时的数据，而无需更改任何应用程序代码。这些工具由智能体内部的 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 Key 字段。

  7. 要测试流程，点击 Playground，然后向 LLM 提问，例如 Recommend 3 used items for [email protected], based on previous orders.

    给定示例提示，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 字段中，输入 Recommend 3 used items for {email}, based on previous orders. 在花括号中添加 {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 组件，该组件将最终响应返回给应用程序。

连接到 Web Search 和 Directory 组件作为工具的 Agent 组件

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

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

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

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

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


    _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 = "[email protected]";
    _60
    _60
    async function runAgentFlow(): Promise<void> {
    _60
    try {
    _60
    // Initialize the Langflow client
    _60
    const client = new LangflowClient({
    _60
    baseUrl: LANGFLOW_SERVER_ADDRESS,
    _60
    apiKey: LANGFLOW_API_KEY
    _60
    });
    _60
    _60
    console.log(`Connecting to Langflow server at: ${LANGFLOW_SERVER_ADDRESS} `);
    _60
    console.log(`Flow ID: ${FLOW_ID}`);
    _60
    console.log(`Email: ${email}`);
    _60
    _60
    // Get the flow instance
    _60
    const flow = client.flow(FLOW_ID);
    _60
    _60
    // Run the flow with the email as input
    _60
    console.log('\nSending request to agent...');
    _60
    const response = await flow.run(email, {
    _60
    session_id: email // Use email as session ID for context
    _60
    });
    _60
    _60
    console.log('\n=== Response from Langflow ===');
    _60
    console.log('Session ID:', response.sessionId);
    _60
    _60
    // Extract URLs from the chat message
    _60
    const chatMessage = response.chatOutputText();
    _60
    console.log('\n=== URLs from Chat Message ===');
    _60
    const messageUrls = chatMessage.match(/https?:\/\/[^\s"')\]]+/g) || [];
    _60
    const cleanMessageUrls = [...new Set(messageUrls)].map(url => url.trim());
    _60
    console.log('URLs from message:');
    _60
    cleanMessageUrls.slice(0, 3).forEach(url => console.log(url));
    _60
    _60
    } catch (error) {
    _60
    console.error('Error running flow:', error);
    _60
    _60
    // Provide error messages
    _60
    if (error instanceof Error) {
    _60
    if (error.message.includes('fetch')) {
    _60
    console.error('\nMake sure your Langflow server is running and accessible at:', LANGFLOW_SERVER_ADDRESS);
    _60
    }
    _60
    if (error.message.includes('401') || error.message.includes('403')) {
    _60
    console.error('\nCheck your API key configuration');
    _60
    }
    _60
    if (error.message.includes('404')) {
    _60
    console.error('\nCheck your Flow ID - make sure it exists and is correct');
    _60
    }
    _60
    }
    _60
    }
    _60
    }
    _60
    _60
    // Run the function
    _60
    console.log('Starting Langflow Agent...\n');
    _60
    runAgentFlow().catch(console.error);

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

    您的应用程序会收到三个推荐二手商品的 URL，这些商品基于客户在本地 CSV 中的先前订单，而无需更改任何代码。

    结果

    以下是本教程流程的示例响应。由于 LLM 的性质和输入的变化，您的响应可能会有所不同。


    _15
    Starting Langflow Agent...
    _15
    _15
    Connecting to Langflow server at: http://localhost:7860
    _15
    Flow ID: local-db-search
    _15
    _15
    Sending request to agent...
    _15
    _15
    === Response from Langflow ===
    _15
    Session ID: [email protected]
    _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 的更多信息，请参阅 Session ID。

下一步​

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

Search