如何将代理数据流式传输到客户端
本指南将引导您完成如何使用此目录中的React 服务器组件将代理数据流式传输到客户端。本文档中的代码取自此目录中的page.tsx 和 action.ts 文件。要查看完整、不间断的代码，请单击此处获取操作文件 和此处获取客户端文件。
本指南假定您熟悉以下概念
设置
首先，安装必要的 LangChain 和 AI SDK 包
- npm
- Yarn
- pnpm
npm install langchain @langchain/core @langchain/community ai
yarn add langchain @langchain/core @langchain/community ai
pnpm add langchain @langchain/core @langchain/community ai
在本演示中，我们将使用 TavilySearchResults 工具，它需要一个 API 密钥。您可以从这里获取一个，或者您可以将其替换为其他工具，例如WikipediaQueryRun，它不需要 API 密钥。
如果您选择使用 TavilySearchResults，请按照如下方式设置您的 API 密钥
export TAVILY_API_KEY=your_api_key
入门
第一步是创建一个新的 RSC 文件，并添加我们将用于运行代理的导入。在本演示中，我们将将其命名为 action.ts
"use server";
import { ChatOpenAI } from "@langchain/openai";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { TavilySearchResults } from "@langchain/community/tools/tavily_search";
import { AgentExecutor, createToolCallingAgent } from "langchain/agents";
import { pull } from "langchain/hub";
import { createStreamableValue } from "ai/rsc";
接下来，我们将定义一个 runAgent 函数。此函数接受一个 string 类型的输入，并包含我们代理的所有逻辑以及将数据流式传输回客户端。
export async function runAgent(input: string) {
"use server";
}
接下来，在我们的函数内部，我们将定义我们选择的聊天模型
const llm = new ChatOpenAI({
model: "gpt-4o-2024-05-13",
temperature: 0,
});
接下来，我们将使用 ai 包提供的 createStreamableValue 辅助函数来创建一个可流式传输的值
const stream = createStreamableValue();
当我们开始将数据流式传输回客户端时，这将非常重要。
接下来，让我们定义一个包含代理逻辑的异步函数
(async () => {
const tools = [new TavilySearchResults({ maxResults: 1 })];
const prompt = await pull<ChatPromptTemplate>(
"hwchase17/openai-tools-agent",
);
const agent = createToolCallingAgent({
llm,
tools,
prompt,
});
const agentExecutor = new AgentExecutor({
agent,
tools,
});
从 langchain 版本 0.2.8 开始，createToolCallingAgent 函数现在支持OpenAI 格式的工具。
在这里您可以看到我们正在做几件事
首先，我们定义我们的工具列表（在本例中，我们只使用一个工具）并将我们的提示从 LangChain 提示中心拉取。
之后，我们将我们的 LLM、工具和提示传递给 createToolCallingAgent 函数，该函数将构造并返回一个可运行的代理。然后将其传递给 AgentExecutor 类，该类将处理代理的执行和流式传输。
最后，我们将调用 .streamEvents 并将我们的流式传输数据传递回我们上面定义的 stream 变量，
const streamingEvents = agentExecutor.streamEvents(
{ input },
{ version: "v2" },
);
for await (const item of streamingEvents) {
stream.update(JSON.parse(JSON.stringify(item, null, 2)));
}
stream.done();
})();
如您所见，我们正在通过将数据转换为字符串并解析来进行一些非常规操作。这是由于 RSC 流式代码中的一个错误，但是如果您像上面一样进行字符串化和解析，您应该不会遇到此问题。
最后，在函数底部返回流值。
return { streamData: stream.value };
在实现服务器操作后，我们可以在客户端函数中添加几行代码来请求和流式传输此数据。
首先，添加必要的导入。
"use client";
import { useState } from "react";
import { readStreamableValue } from "ai/rsc";
import { runAgent } from "./action";
然后，在我们的Page函数中，调用runAgent函数很简单。
export default function Page() {
const [input, setInput] = useState("");
const [data, setData] = useState<StreamEvent[]>([]);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
const { streamData } = await runAgent(input);
for await (const item of readStreamableValue(streamData)) {
setData((prev) => [...prev, item]);
}
}
}
就这样！您已成功构建了一个将数据流式传输回客户端的代理。现在，您可以运行应用程序并查看实时流式传输的数据。