streamUI generates React UI from a language-model response and streams updates to the client. It can render generated text as a component or let the model call a tool that produces a more specialized component. Instead of waiting for a complete answer, a user can see the interface change as the response develops. section 4.1.5 section 4.1.4
A basic server-action flow has four parts:
- Pass a model and conversation messages to streamUI. section 4.1.5
- Provide a text callback that renders the current content in a React component, such as ChatBubble. section 4.1.5
- Return result.value as the display value of the assistant response. section 4.1.5
- Call the action from a client form and render its returned display value, which updates as content streams. section 4.1.5
From chat text to a weather card
For chat, a server action can call streamUI with the conversation history and render generated text inside ChatBubble. For weather, add a getWeather tool with a Zod city parameter. Its async generator first yields LoadingSpinner, then returns a WeatherCard after fetching data. The model’s decision to call the tool depends on its performance and reliability. section 4.1.5 section 4.4.2
Listing 4.14 Providing the weather info tool details
const supportedModel = getSupportedModel(provider, model);
const result = await streamUI({
model: supportedModel,
system: `
You are a helpful weather assistant.
You can provide weather information for cities.
If a user asks about the weather in a specific city,
use the 'getWeather' function to fetch the data.
Always interpret temperatures in Celsius.
`,
messages: [
{ role: 'user', content: 'What\'s the weather like in Paris today?' }
],
tools: {. #1
getWeather: {. #2
description: 'Get the current weather for
a specific city', #3
parameters: z.object({. #4
city: z.string().describe('The name of the city'),
}),
generate: async function* ({ city }) {. #5
yield <LoadingSpinner />
// Simulating API call
await sleep(1000)
const weatherData = await fetchWeatherData(city)
return <WeatherCard city={city} temperature={weatherData.temperature} condition={weatherData.condition} />
}
}
}
})
The weather-tool listing shows how model selection, a system instruction, a Zod-validated tool, and an async generator fit into one streamUI call. section 4.4.2
In a stateful chat application, streamUI can replace streamText so responses stream as React components rather than plain text. Pair it with createAI to keep AI state and UI state in a shared application context; conversation history can then be read in the server action before calling streamUI. section 4.2.3
