Generative UI: render tool results as React components

TL;DR: Render a loading state for the call phase and the real component when output is available. Generative UI means the model does not just write text; it picks components. The mechanism is tools plus tool-part rendering.

Generative UI means the model does not just write text; it picks components. The mechanism is tools plus tool-part rendering.

Server: define a tool per UI element.

import { tool } from 'ai'; import { z } from 'zod';

const tools = { getWeather: tool({ description: 'Get the weather for a city', inputSchema: z.object({ city: z.string() }), execute: async ({ city }) => ({ city, temp: 62, condition: 'sunny' }), }), };

const result = streamText({ model: 'your-model-id', tools, messages: await convertToModelMessages(messages) });

Client: render tool parts as components.

{messages.map(m => ( [div key [your value]] {m.parts.map((part, i) => { if (part.type === 'text') return [span key [your value]] if (part.type === 'tool-getWeather' && part.state === 'output-available') { return [WeatherCard key [your value] data={part.output} /]; } if (part.type === 'tool-getWeather') return [WeatherSkeleton key [your value] /]; return null; })} [/div] ))}

Rules:

1. Tool parts start as calls and become results. Render a loading state for the call phase and the real component when output is available. Check the part state field; do not assume output exists.
2. Keep execute fast or stream-friendly. A 10-second tool blocks its UI region; consider client-side tools with onToolCall for interactive ones.
3. Dynamic tool parts (dynamic tools) let the model call tools not in your static map. Render a generic fallback for unknown tool parts instead of crashing.
4. The tool description drives when the model picks the component. Write descriptions as UI triggers: "Use this when the user asks about weather; renders a weather card."
5. Validate tool output before rendering. A component that crashes on unexpected output takes down the whole message list. Error boundaries per card are cheap insurance.
6. For confirmation-style interactions (book this flight?), use a client tool with addToolOutput instead of auto-executing server-side.

When to use

You hit exactly this: Generative UI: render tool results as React components in Generative UI.

When not to use

A different error, or the same symptom in a different tool. This page only covers the failure above.

Compatibility

Generative UI.

Verified against the live AI SDK docs 2026-09-26. The generative-user-interfaces guide documents the tools-to-components flow: model calls tool, tool executes, data passes to a React component, with the useChat plus tool parts pattern. The chatbot tool-usage guide documents server auto-executed tools, client tools with onToolCall/addToolOutput, and tool parts on message.parts.