Nextjs strategies for managing N chats on the server from the UI

[Alexandru177]

Hey guys. I was having problems implementing this feature where I would render N chats (it's a playground), each functioning individually. Since I was working with Vercel's ai SDK, I was using this client-server context that manages the chat and should be initialized on the server. In consequence, I cannot figure out how I should go about managing (add, remove, sync etc.) the N chats on the server from the UI.

Some code for this chat component:
const ChatServer = async ({ id }: { id: string }) => {
const chat = await getChat(id, userId)
if (!chat) redirect('/')

return (
  <AI
    key={chat.id}
    initialAIState={{
      id: chat.id,
      model: chat.model,
      messages: chat.messages
    }}
  >
    <div
      id={`chat-${chat.id}`}
      className="flex-shrink-0 md:flex-shrink min-h-[250px] border border-border rounded-md"
    >
      <Chat id={chat.id} session={session} />
    </div>
  </AI>
)

}

From what I could see, AI context is necessary initialized on server. So I want to create N instances of this

If you think you can help me, please send me a dm in order for me to quickly walk you through the codebase and explore strategies for this problem.

[Alexandru177]

A good question is how is https://sdk.vercel.ai/playground doing this? I am trying to replicate it