Why does my AI chat trigger twice in development?

This is typically caused by React Strict Mode double-invoking effects. Use a useRef guard within your useEffect to ensure sendMessage or resumeStream only executes once.

How can I prevent stale data from being sent in useChat requests?

Instead of passing dynamic data in the hook's initial configuration body, pass the fresh data directly into the data property of the sendMessage function during the call.

How do I handle tool approvals in the UI?

You can use the addToolApprovalResponse function provided by the useChat hook to confirm or deny tool execution requests directly from the user interface.

Is the useAssistant hook still recommended for new projects?

No, useAssistant is deprecated as of AI SDK v5. For new projects, it is recommended to use useChat with custom backend logic for better long-term support.

What changed in Vercel AI SDK v6 regarding messages?

In version 6, message content moved from a simple string property to a parts array, which supports richer content types including text, tool-invocations, and file attachments.

Vercel AI SDK UI Hooks

Name: Vercel AI SDK UI Hooks
Author: evolv3ai

byevolv3ai

0•

Design Tools

Builds robust, production-ready React chat interfaces using the latest Vercel AI SDK v6 hooks and implementation patterns.

This skill provides comprehensive guidance and implementation patterns for building AI-powered user interfaces with Vercel AI SDK v6. It covers essential hooks like useChat and useCompletion, transitioning to the new message parts structure, and implementing complex tool approval workflows for human-in-the-loop interactions. By providing solutions for 18 common UI errors—including React Strict Mode conflicts and stream parsing issues—it ensures developers can build stable, high-performance chat experiences in Next.js and React environments while avoiding documented pitfalls like stale closures or concurrent request bugs.

Key Features

01Automated solutions for 18 common React UI and data streaming errors

020 GitHub stars

03Human-in-the-loop tool approval workflows and auto-submit capabilities

04Comprehensive migration guides for upgrading from AI SDK versions 4 and 5

05Vercel AI SDK v6 implementation patterns for useChat and useCompletion hooks

06Structured output support and type-safe agent integration via message parts

Use Cases

01Migrating legacy Vercel AI SDK implementations to the latest stable version 6

02Building enterprise-grade AI chat interfaces in Next.js and React applications

03Troubleshooting complex streaming state and React Strict Mode lifecycle issues

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evolv3ai/claude-skills-archive ai-sdk-ui

For use in Claude.ai and ChatGPT

Download Skill