useChat/useCompletion stream output contains 0:... instead of text

Issue

I am using custom client code to process a server response that is sent using StreamingTextResponse. I am using version 3.0.20 or newer of the AI SDK. When I send a query, the UI streams text such as 0: "Je", 0: " suis", 0: "des"... instead of the text that I’m looking for.

Background

The AI SDK has switched to the stream data protocol in version 3.0.20. It sends different stream parts to support data, tool calls, etc. What you see is the raw stream data protocol response.

Solution

You have several options:

1. Use the AI Core streamText function to send a raw text stream:

   export async function POST(req: Request) {
     const { prompt } = await req.json();
   
     const result = await streamText({
       model: openai.completion('gpt-3.5-turbo-instruct'),
       maxTokens: 2000,
       prompt,
     });
   
     return result.toTextStreamResponse();
   }

2. Pin the AI SDK version to 3.0.19 . This will keep the raw text stream.

3. Process the stream data stream using readDataStream.

   for await (const { type, value } of readDataStream(reader, {
     isAborted: () => abortControllerRef?.current === null,
   })) {
     if (type === 'text') {
       doSomething(value);
     }
   }