I am trying to explore what options I have for rendering multiple chats in playground for practice (similarly to [this](https://sdk.vercel.ai/playground) ). Each chat's messages and params are managed in the AI context which is a client-server context. This is all for the purpose of controlling (adding/removing/syncing) the chats from the client UI.

playground/page.tsx
    <AI
      initialAIState={{
        id: chat.id,
        model: chat.model,
        messages: chat.messages
      }}
    >
      <Chat
        id={chat.id}
        session={session}
        missingKeys={missingKeys}
      />
    </AI>