使用 Vercel AI SDK 实现多个并行 AI 流

Vercel AI SDK 可以轻松与 OpenAI、Anthropic 等 LLM API 进行交互，并传输数据，以便在加载时快速显示在您的 Web 应用程序中。在本文中，我们将学习如何同时运行多个提示并并行查看它们的结果。

TL;DR：GitHub 存储库在这里。

我为什么要这样做？

在 Web 应用程序中同时运行多个数据获取请求的情况并不罕见。例如，在假设的博客系统中，当仪表板界面加载时，我们可能希望同时获取用户的个人资料数据、他们创建的帖子以及他们收藏的其他用户的帖子。

如果同一个仪表板同时向 OpenAI 发出请求，我们可能希望同时向 OpenAI 询问有关改善用户个人资料的提示，并同时分析他们的最新帖子。理论上，如果我们愿意的话，我们可以并行使用数十个人工智能请求（即使来自完全不同的平台和模型），并分析信息、生成内容并同时执行所有类型的其他任务。

安装与设置

您可以在此处克隆包含最终结果的 GitHub 存储库。

从头开始设置：

1. 遵循Next.js App Router 快速入门。 只是基础知识；生成应用程序、安装依赖项并添加您的 OpenAI API 密钥。
2. 安装并设置 shadcn/ui。

设置基本 UI

完成所有工作的主要组件将包含一个表单和一些用于输出的容器。使用一些基本的 shadcn-ui 组件，表单将如下所示：

export function GenerationForm() {
    // State and other info will be defined here...

        return (
        <form onSubmit={onSubmit} className="flex flex-col gap-3 w-full">
          <div className="inline-block mb-4 w-full flex flex-row gap-1">
            <Button type="submit">Generate News & Weather</Button>
          </div>

          {isGenerating ? (
            <div className="flex flex-row w-full justify-center items-center p-4 transition-all">
              <Spinner className="h-6 w-6 text-slate-900" />
            </div>
          ) : null}

          <h3 className="font-bold">Historical Weather</h3>
          <div className="mt-4 mb-8 p-4 rounded-md shadow-md bg-blue-100">
            {weather ? weather : null}
          </div>

          <h4 className="font-bold">Historical News</h4>
          <div className="mt-4 p-4 rounded-md shadow-md bg-green-100">{news ? news : null}</div>
        </form>
      )
}

你可以看到我们这里有一些东西：

• 表格
• 加载动画（以及用于显示/隐藏它的 isGenerate 标志）
• 用于渲染天气内容的容器
• 用于渲染新闻内容的容器

现在您可以对这些值进行硬编码；它们都会从我们的信息流中删除。

设置 React 服务器组件 (RSC)

streamAnswer 服务器操作将完成创建和更新我们的流的工作。

动作的结构是这样的：

export async function streamAnswer(question: string) {
    // Booleans for indicating whether each stream is currently streaming
  const isGeneratingStream1 = createStreamableValue(true);
  const isGeneratingStream2 = createStreamableValue(true);

  // The current stream values
  const weatherStream = createStreamableValue("");
  const newsStream = createStreamableValue("");

    // Create the first stream. Notice that we don't use await here, so that we
    //  don't block the rest of this function from running.
    streamText({
        // ... params, including the LLM prompt
  }).then(async (result) => {
          // Read from the async iterator. Set the stream value to each new word
          //  received.
      for await (const value of result.textStream) {
        weatherStream.update(value || "");
      }
    } finally {
        // Set isGenerating to false, and close that stream.
      isGeneratingStream1.update(false);
      isGeneratingStream1.done();

      // Close the given stream so the request doesn't hang.
      weatherStream.done();
    }
  });

  // Same thing for the second stream.
    streamText({
        // ... params
  }).then(async (result) => {
      // ...
  })

  // Return any streams we want to read on the client.
  return {
    isGeneratingStream1: isGeneratingStream1.value,
    isGeneratingStream2: isGeneratingStream2.value,
    weatherStream: weatherStream.value,
    newsStream: newsStream.value,
  };
}

编写客户端代码

表单的 onSubmit 处理程序将完成这里的所有工作。以下是其工作原理的详细说明：

"use client";

import { SyntheticEvent, useState } from "react";
import { Button } from "./ui/button";
import { readStreamableValue, useUIState } from "ai/rsc";
import { streamAnswer } from "@/app/actions";
import { Spinner } from "./svgs/Spinner";

export function GenerationForm() {
    // State for loading flags
  const [isGeneratingStream1, setIsGeneratingStream1] = useState<boolean>(false);
  const [isGeneratingStream2, setIsGeneratingStream2] = useState<boolean>(false);

  // State for the LLM output streams
  const [weather, setWeather] = useState<string>("");
  const [news, setNews] = useState<string>("");

  // We'll hide the loader when both streams are done.
  const isGenerating = isGeneratingStream1 || isGeneratingStream2;

  async function onSubmit(e: SyntheticEvent) {
    e.preventDefault();

    // Clear previous results.
    setNews("");
    setWeather("");

        // Call the server action. The returned object will have all the streams in it.
    const result = await streamAnswer(question);

    // Translate each stream into an async iterator so we can loop through
    //  the values as they are generated.
    const isGeneratingStream1 = readStreamableValue(result.isGeneratingStream1);
    const isGeneratingStream2 = readStreamableValue(result.isGeneratingStream2);
    const weatherStream = readStreamableValue(result.weatherStream);
    const newsStream = readStreamableValue(result.newsStream);

        // Iterate through each stream, putting its values into state one by one.
        //  Notice the IIFEs again! As on the server, these allow us to prevent blocking
        //   the function, so that we can run these iterators in parallel.
    (async () => {
      for await (const value of isGeneratingStream1) {
        if (value != null) {
          setIsGeneratingStream1(value);
        }
      }
    })();

    (async () => {
      for await (const value of isGeneratingStream2) {
        if (value != null) {
          setIsGeneratingStream2(value);
        }
      }
    })();

    (async () => {
      for await (const value of weatherStream) {
        setWeather((existing) => (existing + value) as string);
      }
    })();

    (async () => {
      for await (const value of newsStream) {
        setNews((existing) => (existing + value) as string);
      }
    })();
  }

  return (
    // ... The form code from before.
  );
}

其他有趣的事情可以尝试

• 使用streamObject()流式传输结构化JSON数据而不是文本
• 并行传输更多内容
• 同时从不同的 API 进行流式传输
• 使用相同的提示流式传输不同模型进行比较（例如，Cohere、Anthropic、Gemini 等）
• 从服务器流式传输 UI（使用 createStreamableUI() ）

进一步阅读和链接

• 服务器操作和突变
• Vercel AI SDK
• StreamText() API 文档
• Next.js 应用路由器快速入门

以上是使用 Vercel AI SDK 实现多个并行 AI 流的详细内容。更多信息请关注PHP中文网其他相关文章！