Ai Sdk Ui
Implement production React chat and completion UIs with Vercel AI SDK v6 hooks while avoiding documented Strict Mode, streaming, and tool-approval footguns.
Overview
Ai-sdk-ui is an agent skill for the Build phase that implements React chat and completion interfaces with Vercel AI SDK v6 hooks and fixes common streaming and tool-approval UI bugs.
Install
npx skills add https://github.com/jezweb/claude-skills --skill ai-sdk-uiWhat is this skill?
- Vercel AI SDK v6.0.6 patterns for useChat, useCompletion, and useObject on React 18+/19
- Message parts structure and streaming semantics for chat UIs
- Tool approval workflows for agentic actions inside the browser
- 18 documented UI error solutions including stream parse failures and tool approval edge cases
- Guards for React Strict Mode, concurrent requests, stale closures, and stale body values on useChat
- 18 UI error solutions documented
- 3 primary hooks: useChat, useCompletion, useObject
- AI SDK v6.0.6 stable baseline
Adoption & trust: 526 installs on skills.sh; 841 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your AI chat UI streams in demos but breaks on Strict Mode, concurrent sends, or tool approvals with opaque React and parse-stream errors.
Who is it for?
Solo builders on Next.js adding or migrating streaming chat and structured output UIs to AI SDK v6.
Skip if: Non-React stacks, backend-only LLM routing with no browser UI, or teams that have not chosen Vercel AI SDK as their client library.
When should I use this skill?
Implementing AI chat UIs, migrating AI SDK v5→v6, or troubleshooting useChat stream parse failures, stale body values, Strict Mode, concurrent requests, or tool approval edge cases.
What do I get? / Deliverables
You ship useChat, useCompletion, or useObject layouts with v6 message parts, tool approval handling, and mitigations for the 18 documented UI failure modes.
- Chat or completion UI wired to hooks
- Tool-approval UX aligned with agent tools
- Documented fixes for encountered v6 UI errors
Recommended Skills
Journey fit
AI SDK UI work is front-of-house product code in Build, where solo founders turn model APIs into shippable chat experiences. useChat, useCompletion, and useObject are React frontend concerns even when they call backend route handlers.
How it compares
Frontend hook and troubleshooting skill—not a replacement for defining your model routes or MCP tool servers.
Common Questions / FAQ
Who is ai-sdk-ui for?
React and Next.js indie developers implementing AI chat, completions, or structured streaming UIs with Vercel AI SDK v6 in Claude Code or Cursor.
When should I use ai-sdk-ui?
During Build frontend when adding chat panels, migrating v5 to v6, or fixing useChat stream parse errors, stale bodies, and tool-approval bugs before Ship review.
Is ai-sdk-ui safe to install?
The skill is documentation and patterns; review the Security Audits panel here and never embed API keys in client code when following its examples.
SKILL.md
READMESKILL.md - Ai Sdk Ui
{ "name": "ai-sdk-ui", "description": "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 to", "version": "1.0.0", "author": { "name": "Jeremy Dawes", "email": "jeremy@jezweb.net" }, "license": "MIT", "repository": "https://github.com/jezweb/claude-skills", "keywords": [] } # AI SDK UI - Frontend React Hooks **Version**: AI SDK v6.0.6 (Stable) **Status**: Production-Ready ✅ **Framework**: React 18+/19, Next.js 14+/15+ **Last Updated**: 2026-01-03 --- ## What This Skill Does Provides complete implementation patterns for Vercel AI SDK v6 **frontend React hooks**: - **useChat** - Chat interfaces with streaming - **useCompletion** - Text completions - **useObject** - Streaming structured data **Focus**: React UI layer for AI-powered applications. --- ## Auto-Trigger Keywords This skill should be automatically discovered when working with any of the following: ### Primary Keywords (Highest Priority) - `ai sdk ui` - `useChat hook` - `useCompletion hook` - `useObject hook` - `react ai chat` - `ai chat interface` - `chat ui react` - `ai sdk react` - `vercel ai ui` - `ai react hooks` - `streaming ai ui` - `react streaming chat` - `nextjs ai chat` - `nextjs ai` - `next.js chat` - `ai chat component` - `react ai components` ### Secondary Keywords (Medium Priority) - `nextjs app router ai` - `nextjs pages router ai` - `chat message state` - `message persistence ai` - `ai file attachments` - `file upload ai chat` - `streaming chat react` - `real-time ai chat` - `tool calling ui` - `ai tools react` - `ai completion react` - `text completion ui` - `structured data streaming` - `useObject streaming` - `react chat app` - `react ai application` ### Error-Based Keywords (Trigger on Errors) - `useChat failed to parse stream` - `parse stream error` - `useChat no response` - `chat hook no response` - `unclosed streams ai` - `stream not closing` - `streaming not working deployed` - `vercel streaming issue` - `streaming not working proxied` - `proxy buffering` - `strange stream output` - `0: characters stream` - `stale body values useChat` - `body not updating` - `custom headers not working useChat` - `react maximum update depth` - `infinite loop useChat` - `repeated assistant messages` - `duplicate messages` - `onFinish not called` - `stream aborted` - `v5 migration useChat` - `v6 migration useChat` - `useChat breaking changes` - `input handleInputChange removed` - `sendMessage v5` - `message parts v6` - `m.content undefined` - `parts array v6` ### Framework Integration Keywords - `nextjs ai integration` - `next.js ai sdk` - `vite react ai` - `remix ai chat` - `vercel ai deployment` ### Provider Keywords - `openai react chat` - `anthropic react chat` - `claude chat ui` - `gpt chat interface` --- ## Quick Start ```bash npm install ai @ai-sdk/react @ai-sdk/openai ``` **5-minute chat interface (v6 with message parts):** ```tsx // app/chat/page.tsx 'use client'; import { useChat } from '@ai-sdk/react'; import { useState } from 'react'; export default function Chat() { const { messages, sendMessage, isLoading } = useChat({ api: '/api/chat' }); const [input, setInput] = useState(''); return ( <div> {messages.map(m => ( <div key={m.id}> {m.role}: {m.parts.map((part, i) => ( part.type === 'text' ? <span key={i}>{part.text}</span> : null ))} </div> ))} <form onSubmit={(e) => { e.preventDefault(); sendMessage({ content: input }); setInput(''); }}> <input value