Generative UI - Vercel AI SDK

內容

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.

Examples

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.

AI and UI State

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

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

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.

Setup

Recipes

Requesting updates from the server from generated UI

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.

Updating AI State from Client Components

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.

Nested UI Streaming

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

總結
The article discusses the integration of function calling with language models like GPT-3.5+ to create tailored interactive user interfaces. It introduces React Server Components and Server Actions through the AI SDK's `ai/rsc` package, enabling interface rendering capabilities. The AI SDK introduces `AIState` and `UIState` for managing AI operations and client-side UI rendering separately. `AIState` stores context for the language model, while `UIState` manages the client-side UI display. Developers can request updates from the server, update AI state from client components, and stream UI components within other UI components. The article provides examples and setup instructions for implementing these features, emphasizing the ability to create dynamic and interactive user experiences with the AI SDK.