The introduction of function calling with language models like GPT-3.5+ has paved the way for tailored interactive user interfaces that the language model decides to render.
Leveraging React Server Components and Server Actions, the AI SDK seamlessly integrates interface rendering capabilities through the ai/rsc package. You can use models that do not support function calling with ai/rsc by emulating structured outputs like JSON or directly streaming their outputs.
Let your users see more than words can say by rendering components directly within your search experience.
Make it easier for your users to interpret agent execution so they can stay in the loop with the magic behind the scenes.
The AI SDK introduces two new concepts: AIState and UIState. These states introduce a clear separation of concerns between the server-side AI operations and client-side UI rendered in the application. This separation allows developers to securely maintain the AI state, which may include something like your system prompt or other metadata. Meanwhile, the UI state is designed to allow React Server Components to be efficiently streamed to the client.
AIState is a JSON representation of all the context the LLM needs to read. For a chat app, AIState generally stores the textual conversation history between the user and the assistant. In practice, it can also be used to store other values and meta information such as createdAt of each message. AIState by default, can be accessed/modified on both Server and Client.
UIState is what the application uses to display the UI. It is a fully client-side state (very similar to useState) and can keep data and UI elements returned by the LLM. This state can be anything, but can't be accessed on the server.
In many cases, the interface you render will need to request updates from the server. For example, a weather app might need to request the latest weather data every 5 minutes, or a button press should execute a search. To accomplish this, you can pass Server Actions to your UI components and call them as needed.
For example, if you have an handleUserMessage action registered in createAI, you can define nested Server Actions like this:
And then your WeatherCard component can call the refreshAction function in an onClick event handler, an effect or something like polling to load the latest weather data and update the client UI.
The AI state represents the context of the conversation provided to the language model and is often an array of chat messages. Sometimes, like if the user is filling out a form or interacting with a UI element like a slider, you need to update the language models context with the new information. You can mutate the AI state on the client using the useAIStatehook.
In the example below, we have a slider that allows the user to purchase a number of shares of a stock. When the user changes the slider, we update the AI state with the new information.
One powerful feature provided by the AI SDK is the ability to stream UI components within other UI components. This allows you to create complex UIs that are built up from smaller, reusable components. In the example below, we pass a historyChart streamable as a prop to a StockCard component. The StockCard can render the historyChart streamable, and it will automatically update as the server responds with new data.
Last updated on March 2, 2024