Details that make chat interfaces feel better

A chat UI is a state machine wearing a conversation costume. Most chat interfaces feel broken not because of styling but because they render the happy path and improvise everything else. Apply these principles when building or reviewing any UI built on the AI SDK's useChat.

Tool-call and structured-output rendering is covered by the better-generative-ui skill; use that for anything that maps model output to components. General surface polish (radius, shadows, press states) is covered by better-ui, and all text concerns 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. Chat UIs consume it through the framework packages — @ai-sdk/react, @ai-sdk/vue, @ai-sdk/svelte — whose hooks (useChat, useCompletion) stream typed message parts from a server route into your components.

• 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. useChat is among the most frequently changed APIs in the entire SDK — message shape, part types, status values, transport configuration, and hook options have all changed across majors. Your training data almost certainly contains obsolete signatures.

Never write useChat code from memory. Verify every hook option, message part type, and status value against the documentation for the version actually installed in the project.