ai-sdk-ui
Build React chat interfaces with Vercel AI SDK v6. Covers useChat/useCompletion/useObject hooks, message parts structure, tool approval workflows, and 18 UI error solutions. Prevents documented issues with React Strict Mode, concurrent requests, stale closures, and tool approval edge cases. Use when: implementing AI chat UIs, migrating v5→v6, troubleshooting "useChat failed to parse stream", "stale body values", "React maximum update depth", "Cannot read properties of undefined (reading 'state')", or tool approval workflow errors.
npx skills add majiayu000/claude-skill-registry --skill ai-sdk-ui-brendadeeznuts1111-tier-1380-omega --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# AI SDK UI - Frontend React Hooks Frontend React hooks for AI-powered user interfaces with Vercel AI SDK v6. **Version**: AI SDK v6.0.42 (Stable) **Framework**: React 18+/19, Next.js 14+/15+ **Last Updated**: 2026-01-20 --- ## AI SDK v6 Stable (January 2026) **Status:** Stable Release **Latest:** ai@6.0.42, @ai-sdk/react@3.0.44, @ai-sdk/openai@3.0.7 **Migration:** Minimal breaking changes from v5 → v6 ### New UI Features in v6 **1. Message Parts Structure (Breaking Change)** In v6, message content is now accessed via `.parts` array instead of `.content`: ```tsx // ❌ v5 (OLD) {messages.map(m => ( <div key={m.id}>{m.content}</div> ))} // ✅ v6 (NEW) {messages.map(m => ( <div key={m.id}> {m.parts.map((part, i) => { if (part.type === 'text') return <span key={i}>{part.text}</span>; if (part.type === 'tool-invocation') return <ToolCall key={i} tool={part} />; if (part.type === 'file') return <FilePreview key={i} file={part} />; return null; })} </div> ))} ``` **Part Types:** - `text` - Text content with `.text` property - `tool-invocation` - Tool calls with `.toolName`, `.args`, `.result` - `file` - File attachments with `.mimeType`, `.data` - `reasoning` - Model reasoning (when availab
- AI SDK v6 Stable (January 2026)
- New UI Features in v6
- useChat Hook - v4 → v5 Breaking Changes
- useAssistant Hook (Deprecated)
- Top UI Errors & Solutions
- 1. useChat Failed to Parse Stream
- 2. useChat No Response
- 3. Streaming Not Working When Deployed
- 4. Stale Body Values with useChat
- 5. React Maximum Update Depth
- Streaming Best Practices
- Performance
- UX Patterns
- React Strict Mode Considerations
What does the ai-sdk-ui skill do?
Build React chat interfaces with Vercel AI SDK v6. Covers useChat/useCompletion/useObject hooks, message parts structure, tool approval workflows, and 18 UI error solutions. Prevents documented issues with React Strict Mode, concurrent requests, stale closures, and tool approval edge cases. Use when: implementing AI chat UIs, migrating v5→v6, troubleshooting "useChat failed to parse stream", "stale body values", "React maximum update depth", "Cannot read properties of undefined (reading 'state')", or tool approval workflow errors.
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill ai-sdk-ui-brendadeeznuts1111-tier-1380-omega --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.