Details that make generative UI feel better

Generative UI is the discipline of mapping typed model output — tool calls, structured objects, data parts — onto rendered components. Done well, the model feels like it is operating your product. Done badly, it is JSON in a code block. Apply these principles when building or reviewing any UI that renders AI SDK tool results or streamed objects.

The conversation surface (messages, scroll, composer, statuses) is covered by the better-chat-ui skill. General surface polish is covered by better-ui; text by better-typography.

What the AI SDK Is

The AI SDK by Vercel (the ai package on npm) is a TypeScript toolkit for building AI applications: a unified API across providers for text generation, structured output, tool calling, and agents. Generative UI sits at its client boundary — typed tool parts, streamed partial objects (useObject), and custom data parts arriving through the framework packages (@ai-sdk/react and siblings).

• Repository: https://github.com/vercel/ai
• Documentation: https://ai-sdk.dev/docs

Critical: Do Not Trust Your Own Memory

Whatever you remember about the AI SDK is likely outdated. Tool part naming, state values, the tool-result mechanism, and the type-inference helpers have all changed across majors, and generative UI touches every one of them. Your training data almost certainly contains obsolete signatures.

Never write tool-rendering or useObject code from memory. Verify every part type, state value, and type helper against the documentation for the version actually installed in the project.