Render Visual Interface

UI Components Interactive Tools

Render rich UI components based on tool results. Create weather cards, confirmation dialogs, charts, or any custom interface elements - not just text.

Beyond Text Responses

When the AI calls a weather tool, instead of showing raw JSON, render a beautiful weather card. For confirmations, show interactive buttons. Each tool can have its own custom UI.

Demo

Ask about weather to see the visual card!

Define Tools

Create tools using tool() from AI SDK. Server-side tools have an execute function, while client-side tools only define schemas - the client handles the execution.

tools.ts

Server Endpoint

Import tools and pass them to streamText. Export types for client-side type safety using InferUITools.

src/routes/api/chat/+server.ts

Client Component

Use onToolCall to handle client-side tools, and render different UI for each tool type based on part.type and part.state.

+page.svelte