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

export function generationform() {
    // state and other info will be defined here...

        return (
        

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,
  };
}

"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.
  );
}
</string></string></boolean></boolean>