Multiple Streams with Vercel AI SDK while maintaining useChat

[Neddes]

Multiple Streams with Vercel AI SDK while maintaining useChat

The Goal

Implement multiple sequential streams where:

1. First stream sends status updates to the frontend ("Searching...", "Processing...", etc.)
2. Second stream handles the normal AI response using streamText
3. Maintain the existing useChat functionality rather than implementing parallel streams

Current Implementation Attempt

// route.ts
export async function streamAnswer(request: Request) {
  const isGeneratingStream1 = createStreamableValue(false);
  const statusUpdateStream = createStreamableValue<StatusUpdate[]>([]);
  const mainStream = createStreamableValue<string>("");

  // First stream - status updates
  const statusUpdatePromise = (async () => {
    try {
      // Stream status updates
      statusUpdateStream.append({
        type: "status",
        content: "Searching...",
        phase: 1,
      });
    } finally {
      statusUpdateStream.done();
    }
  })();

  // Second stream - AI response
  statusUpdatePromise.then(async () => {
    const stream = await streamText({
      model: openai("gpt-4o-mini"),
      messages: convertToCoreMessages(messages),
    });
    // Process stream...
  });
}

The Challenge

While the parallel streams approach works (as shown in this example), we want to:

1. Keep using useChat for the main AI stream
2. Add a separate stream for status updates
3. Ensure the streams are sequential (status updates first, then AI response)

Question

Is there a way to achieve this while maintaining the useChat implementation, rather than building a custom streaming solution? The goal is to show status updates (like "Searching in XYZ...") before the AI starts responding, while keeping the existing chat functionality intact.

[Neddes]

fixed in https://sdk.vercel.ai/docs/ai-sdk-ui/streaming-data