Parse Structured Streaming Responses with Metadata in useChat

[devevignesh]

Hello, I am using useChat in my React app to create a conversational UI for a chatbot application. The backend is built with Python Django REST API and does not use vercel/ai SDK. Until now, the streaming response from the server was a plain text string like: the 1500s, when an unknown printer took a galley of type and scrambled it to make a type

However, we are updating the response to include additional metadata. The new streaming response now looks like this:

{
   "event":"QUESTION",
   "data":{
      "chatUpdate":{
         "userUuid":"",
         "sessionUuid":"",
         "chatMessages":[
            {
               "messageId":1,
               "role":"ASSISTANT",
               "text":"more recently with:\n\n1. dney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage.\n and",
               "type":"QUESTION",
               }
            }
         ]
      }
   }
}

This response can be accessed via message.content. However, I can't directly access properties like text or messageId from {message.content} because useChat returns a structured response with role and content.

Here is an example of the messages object structure:

// messages
0:
  content: "hello"
  createdAt: Tue Jan 21 2025 18:44:23 GMT+0100
  id: "jkaGnql"
  role: "user"
1: 
  content: "{"event":"QUESTION","data":{"chatUpdate":{"userUuid":"","sessionUuid":"","chatMessages":[{"messageId":1,"role":"ASSISTANT","text":"more","type":"QUESTION"}]}}}"
  createdAt: Tue Jan 21 2025 18:44:23 GMT+0100
  id: "fW3udaE"
  role: "assistant"

Could someone guide me on where I should parse the response? Should I handle this parsing inside the onResponse function?

[brennanmceachran]

Will the python server be streaming invalid json until complete? If so, you'll have a hard time displaying a real-time ui streaming the content to the user as parsing the json will fail until the end the json is valid. In that scenario onFinish would be the right method to hook into (onResponse triggers on the first response from the server not when the stream ends)

You could also memo-ize and map the messages array and call JSON.parse on prior to rendering the message list. Assuming the content streams in, the JSON.parse will fail until it's valid json, so you'll want to try/catch and display a loading