Skip to main content

AgentBuilder TypeScript 客戶端

AgentBuilder TypeScript 客戶端允許您的 TypeScript 應用程式以程式設計方式與 AgentBuilder API 互動。

有關客戶端程式碼儲存庫，請參閱 langflow-client-ts。

有關 npm 套件，請參閱 @datastax/langflow-client。

安裝 AgentBuilder TypeScript 套件​

要安裝 AgentBuilder TypeScript 客戶端套件，請使用以下命令之一：


_10
npm install @datastax/langflow-client

初始化 AgentBuilder TypeScript 客戶端​

  1. 將客戶端匯入您的程式碼中。


    _10
    import { AgentBuilderClient } from "@datastax/langflow-client";

  2. 初始化 AgentBuilderClient 物件以與您的伺服器互動：


    _10
    const baseUrl = "BASE_URL";
    _10
    const apiKey = "API_KEY";
    _10
    const client = new AgentBuilderClient({ baseUrl, apiKey });

    將 BASE_URL 和 API_KEY 替換為您部署中的值。 預設 AgentBuilder 基礎 URL 是 http://localhost:7860。 要建立 API 金鑰，請參閱 API 金鑰和認證。

連接到您的伺服器並獲取回應​

  1. 初始化 AgentBuilder 客戶端後，通過調用您的 AgentBuilder 伺服器來測試連接。

    以下示例通過發送FLOW ID 和聊天輸入字串來運行FLOW (runFlow)：


    _15
    import { AgentBuilderClient } from "@datastax/langflow-client";
    _15
    _15
    const baseUrl = "http://localhost:7860";
    _15
    const client = new AgentBuilderClient({ baseUrl });
    _15
    _15
    async function runFlow() {
    _15
    const flowId = "aa5a238b-02c0-4f03-bc5c-cc3a83335cdf";
    _15
    const flow = client.flow(flowId);
    _15
    const input = "Is anyone there?";
    _15
    _15
    const response = await flow.run(input);
    _15
    console.log(response);
    _15
    }
    _15
    _15
    runFlow().catch(console.error);

    替換以下內容：

    • baseUrl：您的 AgentBuilder 伺服器的 URL。
    • flowId：您要運行的FLOW的 ID。
    • input：您要發送以觸發FLOW的聊天輸入訊息。 這僅對具有 Chat Input Components的FLOW有效。

  2. 檢查結果以確認客戶端已連接到您的 AgentBuilder 伺服器。

    以下示例顯示了成功到達 AgentBuilder 伺服器並成功啟動FLOW的格式良好的 runFlow 請求的回應：


    _10
    FlowResponse {
    _10
    sessionId: 'aa5a238b-02c0-4f03-bc5c-cc3a83335cdf',
    _10
    outputs: [ { inputs: [Object], outputs: [Array] } ]
    _10
    }

    在這種情況下，回應包括一個 sessionID，這是客戶端-伺服器會話的唯一識別符，以及一個包含FLOW運行資訊的 outputs 陣列。

  3. 可選：如果您想從伺服器獲取完整的回應物件，請將 console.log 更改為將返回的 JSON 物件字串化：


    _10
    console.log(JSON.stringify(response, null, 2));

    返回的 inputs 和 outputs 物件的確切結構取決於FLOW的Components和配置。

  4. 可選：如果您希望回應僅包含來自 Chat Output Components的聊天訊息，請將 console.log 更改為使用 chatOutputText 便利函數：


    _10
    console.log(response.chatOutputText());

使用進階 TypeScript 客戶端功能​

TypeScript 客戶端不僅能連接到您的伺服器並運行FLOW，還能做更多事情。

此示例在快速入門的基礎上增加了與 AgentBuilder 互動的其他功能：

  1. 將 tweaks 作為物件與請求一起傳遞。 Tweaks 是Components設定的程式設計運行時覆蓋。

    此示例更改FLOW中語言模型Components使用的 LLM：


    _10
    const tweaks = { model_name: "gpt-4o-mini" };

  2. 使用請求傳遞 session ID，以將對話與其他FLOW運行分離，並能夠通過在未來調用相同的 session ID 來繼續此對話：


    _10
    const session_id = "aa5a238b-02c0-4f03-bc5c-cc3a83335cdf";

  3. 不是在 Flow 物件上調用 run，而是用相同的參數調用 stream 以獲取串流回應：


    _10
    const response = await client.flow(flowId).stream(input);
    _10
    _10
    for await (const event of response) {
    _10
    console.log(event);
    _10
    }

    回應是物件的 ReadableStream。 有關串流 AgentBuilder 回應的更多資訊，請參閱 /run 端點。

  4. 運行修改後的 TypeScript 應用程式，以使用 tweaks、session_id 和串流運行FLOW：


    _22
    import { AgentBuilderClient } from "@datastax/langflow-client";
    _22
    _22
    const baseUrl = "http://localhost:7860";
    _22
    const client = new AgentBuilderClient({ baseUrl });
    _22
    _22
    async function runFlow() {
    _22
    const flowId = "aa5a238b-02c0-4f03-bc5c-cc3a83335cdf";
    _22
    const input = "Is anyone there?";
    _22
    const tweaks = { model_name: "gpt-4o-mini" };
    _22
    const session_id = "test-session";
    _22
    _22
    const response = await client.flow(flowId).stream(input, {
    _22
    session_id,
    _22
    tweaks,
    _22
    });
    _22
    _22
    for await (const event of response) {
    _22
    console.log(event);
    _22
    }
    _22
    _22
    }
    _22
    runFlow().catch(console.error);

    替換以下內容：

    • baseUrl：您的 AgentBuilder 伺服器的 URL。
    • flowId：您要運行的FLOW的 ID。
    • input：您要發送以觸發FLOW的聊天輸入訊息，假設FLOW具有 Chat Input Components。
    • tweaks：要應用於FLOW運行的任何 tweak 修改器。 此示例更改FLOW中Components使用的 LLM。
    • session_id：傳遞自訂 session ID。 如果省略或為空，則FLOW ID 是預設 session ID。
    結果

    啟用串流後，回應包括FLOW元資料和FLOW活動的時間戳事件。 例如：


    _68
    {
    _68
    event: 'add_message',
    _68
    data: {
    _68
    timestamp: '2025-05-23 15:52:48 UTC',
    _68
    sender: 'User',
    _68
    sender_name: 'User',
    _68
    session_id: 'test-session',
    _68
    text: 'Is anyone there?',
    _68
    files: [],
    _68
    error: false,
    _68
    edit: false,
    _68
    properties: {
    _68
    text_color: '',
    _68
    background_color: '',
    _68
    edited: false,
    _68
    source: [Object],
    _68
    icon: '',
    _68
    allow_markdown: false,
    _68
    positive_feedback: null,
    _68
    state: 'complete',
    _68
    targets: []
    _68
    },
    _68
    category: 'message',
    _68
    content_blocks: [],
    _68
    id: '7f096715-3f2d-4d84-88d6-5e2f76bf3fbe',
    _68
    flow_id: 'aa5a238b-02c0-4f03-bc5c-cc3a83335cdf',
    _68
    duration: null
    _68
    }
    _68
    }
    _68
    {
    _68
    event: 'token',
    _68
    data: {
    _68
    chunk: 'Absolutely',
    _68
    id: 'c5a99314-6b23-488b-84e2-038aa3e87fb5',
    _68
    timestamp: '2025-05-23 15:52:48 UTC'
    _68
    }
    _68
    }
    _68
    {
    _68
    event: 'token',
    _68
    data: {
    _68
    chunk: ',',
    _68
    id: 'c5a99314-6b23-488b-84e2-038aa3e87fb5',
    _68
    timestamp: '2025-05-23 15:52:48 UTC'
    _68
    }
    _68
    }
    _68
    {
    _68
    event: 'token',
    _68
    data: {
    _68
    chunk: " I'm",
    _68
    id: 'c5a99314-6b23-488b-84e2-038aa3e87fb5',
    _68
    timestamp: '2025-05-23 15:52:48 UTC'
    _68
    }
    _68
    }
    _68
    {
    _68
    event: 'token',
    _68
    data: {
    _68
    chunk: ' here',
    _68
    id: 'c5a99314-6b23-488b-84e2-038aa3e87fb5',
    _68
    timestamp: '2025-05-23 15:52:48 UTC'
    _68
    }
    _68
    }
    _68
    _68
    // 此回應已縮寫
    _68
    _68
    {
    _68
    event: 'end',
    _68
    data: { result: { session_id: 'test-session', outputs: [Array] } }
    _68
    }

使用 TypeScript 客戶端擷取 AgentBuilder 日誌​

要擷取 AgentBuilder 日誌，您必須通過在 AgentBuilder .env 檔案中包含以下值來啟用伺服器上的日誌擷取：


_10
LANGFLOW_ENABLE_LOG_RETRIEVAL=True
_10
LANGFLOW_LOG_RETRIEVER_BUFFER_SIZE=10000
_10
LANGFLOW_LOG_LEVEL=DEBUG

以下示例腳本在背景開始串流日誌，然後運行FLOW，以便您可以監視FLOW運行：


_26
import { AgentBuilderClient } from "@datastax/langflow-client";
_26
_26
const baseUrl = "http://localhost:7863";
_26
const flowId = "86f0bf45-0544-4e88-b0b1-8e622da7a7f0";
_26
_26
async function runFlow(client: AgentBuilderClient) {
_26
const input = "Is anyone there?";
_26
const response = await client.flow(flowId).run(input);
_26
console.log('Flow response:', response);
_26
}
_26
_26
async function main() {
_26
const client = new AgentBuilderClient({ baseUrl: baseUrl });
_26
_26
// Start streaming logs
_26
console.log('Starting log stream...');
_26
for await (const log of await client.logs.stream()) {
_26
console.log('Log:', log);
_26
}
_26
_26
// Run the flow
_26
await runFlow(client);
_26
_26
}
_26
_26
main().catch(console.error);

替換以下內容：

  • baseUrl：您的 AgentBuilder 伺服器的 URL。
  • flowId：您要運行的FLOW的 ID。
  • input：您要發送以觸發FLOW的聊天輸入訊息，假設FLOW具有 Chat Input Components。

日誌開始無限期串流，FLOW運行一次。

結果

以下示例結果為可讀性而縮寫，但您可以按照訊息查看FLOW如何實例化其Components、配置其模型以及處理輸出。

FlowResponse 物件在串流結束時返回給客戶端，FLOW結果在 outputs 陣列中。


_57
Starting log stream...
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.006Z,
_57
message: '2025-05-30T07:49:16.006127-0400 DEBUG Instantiating ChatInput of type component\n'
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.029Z,
_57
message: '2025-05-30T07:49:16.029957-0400 DEBUG Instantiating Prompt of type component\n'
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.049Z,
_57
message: '2025-05-30T07:49:16.049520-0400 DEBUG Instantiating ChatOutput of type component\n'
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.069Z,
_57
message: '2025-05-30T07:49:16.069359-0400 DEBUG Instantiating OpenAIModel of type component\n'
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.086Z,
_57
message: "2025-05-30T07:49:16.086426-0400 DEBUG Running layer 0 with 2 tasks, ['ChatInput-xjucM', 'Prompt-I3pxU']\n"
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.101Z,
_57
message: '2025-05-30T07:49:16.101766-0400 DEBUG Building Chat Input\n'
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.113Z,
_57
message: '2025-05-30T07:49:16.113343-0400 DEBUG Building Prompt\n'
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.131Z,
_57
message: '2025-05-30T07:49:16.131423-0400 DEBUG Logged vertex build: 6bd9fe9c-5eea-4f05-a96d-f6de9dc77e3c\n'
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.143Z,
_57
message: '2025-05-30T07:49:16.143295-0400 DEBUG Logged vertex build: 39c68ec9-3859-4fff-9b14-80b3271f8fbf\n'
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.188Z,
_57
message: "2025-05-30T07:49:16.188730-0400 DEBUG Running layer 1 with 1 tasks, ['OpenAIModel-RtlZm']\n"
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.201Z,
_57
message: '2025-05-30T07:49:16.201946-0400 DEBUG Building OpenAI\n'
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:16.216Z,
_57
message: '2025-05-30T07:49:16.216622-0400 INFO Model name: gpt-4.1-mini\n'
_57
}
_57
Flow response: FlowResponse {
_57
sessionId: '86f0bf45-0544-4e88-b0b1-8e622da7a7f0',
_57
outputs: [ { inputs: [Object], outputs: [Array] } ]
_57
}
_57
Log: Log {
_57
timestamp: 2025-05-30T11:49:18.094Z,
_57
message: `2025-05-30T07:49:18.094364-0400 DEBUG Vertex OpenAIModel-RtlZm, result: <langflow.graph.utils.UnbuiltResult object at 0x364d24dd0>, object: {'text_output': "Hey there! I'm here and ready to help you build something awesome with AI. What are you thinking about creating today?"}\n`
_57
}

有關更多資訊，請參閱 日誌端點。

Search