AI State AI State refers to the state of your application in a serialisable format that will be used on the server and can be shared with the language model.
For a chat app, the AI State is the conversation history (messages) between the user and the assistant. Components generated by the model would be represented in a JSON format as a tool alongside any necessary props. AI State can also be used to store other values and meta information such as createdAt for each message and chatId for each conversation. The LLM reads this history so it can generate the next message. This state serves as the source of truth for the current application state.
UI State UI State refers to the state of your application that is rendered on the client. It is a fully client-side state (similar to useState) that can store anything from Javascript values to React elements. UI state is a list of actual UI elements that are rendered on the client.
The RSC api gives you flexibility to manage these two states separately,while providing a way to keep them in sync between your database,server and client Reference:https://sdk.vercel.ai/docs/ai-sdk-rsc/generative-ui-state#what-is-ai-and-ui-state
It’s like the AI State sends the “recipe” step by step, and the React UI builds the “sandwich” piece by piece as it receives the instructions. Imagine you're making a sandwich and someone is telling you what to do, one step at a time: "First, take the bread, now add the cheese, now add ham." As each instruction comes in, you build the sandwich. Similarly, the AI State sends instructions (the steps) bit by bit, and the React UI listens and updates the screen by adding each new part as it comes in. This way, the UI is "streamed" and updated in real-time as it builds itself from the AI’s instructions.