AI SDK UI Rendering

Overview

Use this skill to turn AI SDK tool calls into UI components, either by rendering on the client from tool outputs or streaming UI from the server with RSC.

Quick Decision

• Use client-side rendering when you already receive message parts on the client and want a simple mapping from tool outputs to components.
• Use server-side streaming (RSC) when you want the server to render components during tool execution and stream them to the client.

Task: Return JSON from tools for UI

1. Define a tool with a clear input schema and return a JSON object that matches the UI props.
2. Keep outputs serializable (no functions, Dates, or class instances).
3. If multiple tools share a UI pattern, normalize output shape or add a kind field.