如何将结构化输出流式传输到客户端

本指南将引导您了解我们如何使用此目录中的 React Server Components 将代理数据流式传输到客户端。本文档中的代码取自此目录中的 page.tsx 和 action.ts 文件。要查看完整的、不间断的代码，请单击此处查看 actions 文件 和 此处查看 client 文件。

先决条件

本指南假定您熟悉以下概念

• LangChain 表达式语言
• 聊天模型
• 工具调用

设置

首先，安装必要的 LangChain 和 AI SDK 包

npm

npm install @langchain/openai @langchain/core ai zod zod-to-json-schema

Yarn

yarn add @langchain/openai @langchain/core ai zod zod-to-json-schema

pnpm

pnpm add @langchain/openai @langchain/core ai zod zod-to-json-schema

接下来，我们将创建服务器文件。这将包含用于进行工具调用并将数据发送回客户端的所有逻辑。

首先添加必要的导入和 "use server" 指令

"use server";

import { ChatOpenAI } from "@langchain/openai";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { createStreamableValue } from "ai/rsc";
import { z } from "zod";
import { zodToJsonSchema } from "zod-to-json-schema";
import { JsonOutputKeyToolsParser } from "@langchain/core/output_parsers/openai_tools";

之后，我们将定义我们的工具模式。对于此示例，我们将使用一个简单的演示天气模式

const Weather = z
  .object({
    city: z.string().describe("City to search for weather"),
    state: z.string().describe("State abbreviation to search for weather"),
  })
  .describe("Weather search parameters");

定义我们的模式后，我们可以实现我们的 executeTool 函数。此函数接受单个 string 输入，并包含我们的工具和将数据流式传输回客户端的所有逻辑

export async function executeTool(
  input: string,
) {
  "use server";

  const stream = createStreamableValue();

createStreamableValue 函数非常重要，因为这将是我们实际用于将所有数据流式传输回客户端的函数。

对于主要逻辑，我们将它包装在一个异步函数中。首先定义我们的提示和聊天模型

  (async () => {
    const prompt = ChatPromptTemplate.fromMessages([
      [
        "system",
        `You are a helpful assistant. Use the tools provided to best assist the user.`,
      ],
      ["human", "{input}"],
    ]);

    const llm = new ChatOpenAI({
      model: "gpt-4o-2024-05-13",
      temperature: 0,
    });

定义聊天模型后，我们将使用 LCEL 定义我们的可运行链。

我们开始将我们之前定义的天气工具绑定到模型

const modelWithTools = llm.bind({
  tools: [
    {
      type: "function" as const,
      function: {
        name: "get_weather",
        description: Weather.description,
        parameters: zodToJsonSchema(Weather),
      },
    },
  ],
});

接下来，我们将使用 LCEL 将每个组件管道连接在一起，从提示开始，然后是带有工具的模型，最后是输出解析器

const chain = prompt.pipe(modelWithTools).pipe(
  new JsonOutputKeyToolsParser<z.infer<typeof Weather>>({
    keyName: "get_weather",
    zodSchema: Weather,
  })
);

最后，我们将在我们的链上调用 .stream，并且类似于 流式传输代理 示例，我们将迭代流并字符串化 + 解析数据，然后再更新流值

    const streamResult = await chain.stream({
      input,
    });

    for await (const item of streamResult) {
      stream.update(JSON.parse(JSON.stringify(item, null, 2)));
    }

    stream.done();
  })();

  return { streamData: stream.value };
}