ai-sdk-ui
Vercel AI SDK v5 React hooks (useChat, useCompletion, useObject) for AI chat interfaces. Use for React/Next.js AI apps or encountering parse stream errors, no response, streaming issues.
npx skills add majiayu000/claude-skill-registry --skill ai-sdk-ui-secondsky-claude-skills --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 v5. **Version**: AI SDK v5.0.116 (Stable) **Framework**: React 18+, Next.js 15+ **Last Updated**: 2025-12-22 ## Table of Contents 1. [Quick Start](#quick-start-5-minutes) 2. [When to Load References](#when-to-load-references) 3. [useChat Hook](#usechat-hook---complete-reference) 4. [useCompletion Hook](#usecompletion-hook---complete-reference) 5. [useObject Hook](#useobject-hook---complete-reference) 6. [Next.js Integration](#nextjs-integration) 7. [Top UI Errors & Solutions](#top-ui-errors--solutions) 8. [Streaming Best Practices](#streaming-best-practices) 9. [When to Use This Skill](#when-to-use-this-skill) 10. [Package Versions](#package-versions) --- ## Quick Start (5 Minutes) ### Installation ```bash bun add ai @ai-sdk/openai # preferred # or: bun add ai @ai-sdk/openai ``` ### Basic Chat Component (v5) ```tsx // app/chat/page.tsx 'use client'; import { useChat } from 'ai/react'; import { useState, FormEvent } from 'react'; export default function Chat() { const { messages, sendMessage, isLoading } = useChat({ api: '/api/chat', }); const [input, setInput] = useState(''); c
- Table of Contents
- Quick Start (5 Minutes)
- Installation
- Basic Chat Component (v5)
- API Route (Next.js App Router)
- When to Load References
- useChat Hook - Complete Reference
- Basic Usage (v5 Pattern)
- Full API Reference
- v4 → v5 Breaking Changes
- useCompletion & useObject Hooks
- Next.js Integration
- Top UI Errors & Solutions
- 1. useChat Failed to Parse Stream
bun add ai @ai-sdk/openai # preferred
What does the ai-sdk-ui skill do?
Vercel AI SDK v5 React hooks (useChat, useCompletion, useObject) for AI chat interfaces. Use for React/Next.js AI apps or encountering parse stream errors, no response, streaming issues.
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill ai-sdk-ui-secondsky-claude-skills --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.