Decoding issues with experimental_StreamData about ai

[antoniocasero]

I'm having the same problem. The data stream appears as an appendix to the message content, as indicated below

2:[{"text":"{\"metadata\":[],\"regularQuery\":{\"error\":null,\"data\":[],\"count\":null,\"status\":200,\"statusText\":\"OK\"}}"}] 
0:"L" 0:"ament" 0:"able" 0:"mente" 0:"," 0:" no" 0:" tengo" 0:" acceso" 0:" a" 0:" documentos" 0:" específ" 0:"icos" 0:" del" 0:" BO" 0:"E" 0:"." 0:" Sin" 0:" embargo" 0:"," 0:" puedo" 0:" ayud" 0:"arte" 0:" a" 0:" encontrar" 0:" la" 0:" información" 0:" que" 0:" neces" 0:"itas" 0:"." 0:" ¿" 0:"En" 0:" qué" 0:" puedo" 0:" as" 0:"ist" 0:"ir" 0:"te" 0:"?"

I'm not sure how to parse this correctly or why the structure is this way. I'm using NextJS and a edge function for calling the OpenAI API. It seems it is related to how OpenAI is giving the response is that right? @MaxLeiter

[aaron5670]

After some debugging, I found that this is not just a problem with Gatsby. The same problem also occurs when I deploy the Next.js application to Vercel and then connect to the production API via local development.

Then I also get the same encoding/decoding problem.

So I run Next.js locally via npm run dev and the useChat() api goes to a production endpoint.

For example, this Next.js front-end page that I run locally:

"use client";

import {useChat} from "ai/react";

const Page = () => {
  const { data, handleInputChange, handleSubmit, messages } = useChat({
    api: 'https://example-ai-api.vercel.app/api/chat', //  <---- this is the production endpoint
  });

  console.log('data', data);
  console.log('messages', messages);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="input"
          onChange={handleInputChange}
        />
        <button type="submit">Send</button>
      </form>
    </div>
  )
}

export default Page

[aaron5670]

Looks like more people has the same issue:
#425 (comment)