Hello StackOverflow Community,

I am currently working on a Next.js application and I’ve encountered an interesting challenge related to consuming API responses of openAI.

Here’s the breakdown of my concern:

In my backend, I am using openAI API to get the content (text) of two elements from my frontend. The structure of the response right now is an object with two keys: each key corresponds to content meant for the two different elements in the frontend, and we’ll name them as ‘Element A’ and ‘Element B’ for simplicity.

I aim to have the content of these elements dynamically shown to the user as soon as it arrives from the API, also known as streaming, instead of waiting for the entire response to be sent.

In other words, I want to stream the innerText of two different html elements or react comps (not in parallel, but one after the other) using only ONE api call.

Given my current understanding and approach, I can easily achieve streaming if either of these were the case:

1. There was only one element.
2. We had two different API responses, one for each element.

However, the challenge arises when I try to stream content for two different elements from the same response.

Ideal functionality that I’m aiming for:

1. Fetch the API response, which appears in an object format having two keys: one for each element.
2. As soon as tokens (content) start arriving for ‘Element A’, immediately show them in the frontend.
3. Once the content of ‘Element A’ is entirely displayed, start showing the arriving tokens for ‘Element B’ in a similar streaming manner.

This sort of functionality appears to be quite common in various web applications, but I’m unable to pinpoint the required approach or technique to achieve this.

Could anyone shed some light on how to stream the content for two different elements from the single API response, keeping in tune with the desired flow of operations described?

Your help and insights would be greatly appreciated!

Thank you.