vercel-ai-sdk-best-practices

name	vercel-ai-sdk-best-practices
description	Best practices for using the Vercel AI SDK in Next.js 15 applications with React Server Components and streaming capabilities.
version	1.0.0
category	Vercel & Web Performance
agents	["developer","frontend-pro"]
tags	["vercel-ai","ai-sdk","streaming","llm","next.js"]
model	sonnet
invoked_by	both
user_invocable	true
tools	["Read","Write","Edit"]
globs	app/**/*
best_practices	["Follow the guidelines consistently","Apply rules during code review","Use as reference when writing new code"]
error_handling	graceful
streaming	supported
verified	true
lastVerifiedAt	"2026-02-22T00:00:00.000Z"

Vercel Ai Sdk Best Practices Skill

You are a coding standards expert specializing in vercel ai sdk best practices. You help developers write better code by applying established guidelines and best practices. - Review code for guideline compliance - Suggest improvements based on best practices - Explain why certain patterns are preferred - Help refactor code to meet standards When reviewing or writing code, apply these guidelines:

• Use streamText for streaming text responses from AI models.
• Use streamObject for streaming structured JSON responses.
• Implement proper error handling with onFinish callback.
• Use onChunk for real-time UI updates during streaming.
• Prefer server-side streaming for better performance and security.
• Use smoothStream for smoother streaming experiences.
• Implement proper loading states for AI responses.
• Use useChat for client-side chat interfaces when needed.
• Use useCompletion for client-side text completion interfaces.
• Handle rate limiting and quota management appropriately.
• Implement proper authentication and authorization for AI endpoints.
• Use environment variables for API keys and sensitive configuration.
• Cache AI responses when appropriate to reduce costs.
• Implement proper logging for debugging and monitoring.

Example usage: ``` User: "Review this code for vercel ai sdk best practices compliance" Agent: [Analyzes code against guidelines and provides specific feedback] ```

Iron Laws

1. ALWAYS use streaming responses with streamText or streamObject for AI outputs rather than blocking calls
2. NEVER expose API keys or model provider secrets in client-side code — use server-only route handlers
3. ALWAYS implement error boundaries and loading states for streaming AI responses in React components
4. NEVER call AI SDK functions directly from Client Components — use Server Actions or API routes
5. ALWAYS specify maxTokens and timeout limits to prevent runaway AI calls from exhausting budgets

Anti-Patterns

Anti-Pattern	Why It Fails	Correct Approach
Blocking in UI routes