Generative UI: render tool results as React components

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.