vercel-ai-sdk-best-practices
Best practices for using the Vercel AI SDK in Next.js 15 applications with React Server Components and streaming capabilities.
Best use case
vercel-ai-sdk-best-practices is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Best practices for using the Vercel AI SDK in Next.js 15 applications with React Server Components and streaming capabilities.
Teams using vercel-ai-sdk-best-practices should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/vercel-ai-sdk-best-practices/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How vercel-ai-sdk-best-practices Compares
| Feature / Agent | vercel-ai-sdk-best-practices | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Best practices for using the Vercel AI SDK in Next.js 15 applications with React Server Components and streaming capabilities.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Vercel Ai Sdk Best Practices Skill <identity> 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. </identity> <capabilities> - Review code for guideline compliance - Suggest improvements based on best practices - Explain why certain patterns are preferred - Help refactor code to meet standards </capabilities> <instructions> 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. </instructions> <examples> Example usage: ``` User: "Review this code for vercel ai sdk best practices compliance" Agent: [Analyzes code against guidelines and provides specific feedback] ``` </examples> ## 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 `generateText` in UI routes | Hangs the request, poor UX for long responses | Use `streamText` with streaming response | | API keys in client-side code | Secret exposure, security vulnerability | Move AI calls to Server Actions or API routes | | No error boundary for streaming | Uncaught errors break the entire component tree | Wrap streaming components in error boundaries | | Calling AI SDK in Client Components | Exposes provider keys, breaks SSR | Use Server Actions (`"use server"`) or route handlers | | No token or timeout limits | Runaway calls exhaust credits and stall users | Always set `maxTokens` and request timeout | ## Memory Protocol (MANDATORY) **Before starting:** ```bash cat .claude/context/memory/learnings.md ``` **After completing:** Record any new patterns or exceptions discovered. > ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.
Related Skills
vercel
Deploys applications to Vercel including serverless functions, edge functions, environment variables, and CI/CD. Use when deploying Next.js applications, frontend projects, or serverless APIs.
vercel-workflow-sdk
write code that uses https://useworkflow.dev/ on Vercel
vercel-web-design-guidelines
Reviews UI code for compliance with web interface best practices. Use when auditing accessibility, reviewing UI/UX patterns, checking performance, or improving web design quality. Triggers on "check my site", "audit design", "accessibility review", "UX best practices", or UI code review tasks. Covers 100+ rules for accessibility, performance, and user experience.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
vercel-deployment
Vercel deployment patterns and best practices. Use when deploying frontend applications, configuring edge functions, setting up preview deployments, or optimizing Next.js applications.
vercel-deploy
Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production", "Create a preview deployment", "Deploy and give me the link", or "Push this live". No authentication required - returns preview URL and claimable deployment link.
vercel-deploy-claimable
Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as 'Deploy my app', 'Deploy this to production', 'Create a preview deployment', 'Deploy and...
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
vercel-ai-sdk-development
Use when building AI-powered applications with the Vercel AI SDK (V6+). Covers agents (ToolLoopAgent), tool design with execution approval and strict mode, MCP client integration, structured output with tool calling, streaming patterns, DevTools debugging, reranking, provider-specific tools, and UI integration with React/Next.js.
typescript-nestjs-best-practices-cursorrules-promp-cursorrules
Apply for typescript-nestjs-best-practices-cursorrules-promp. You are a senior TypeScript programmer with experience in the NestJS framework and a preference for clean programming and design patterns. Generate code, corrections, and refactorings that comply with
supabase-postgres-best-practices
Postgres query performance optimization and runtime best practices for Supabase. Covers indexing strategies (B-tree, GIN, GiST, BRIN, composite, partial, covering), EXPLAIN ANALYZE diagnostics, connection pooling (Supavisor transaction/session modes, pool sizing), RLS performance patterns (auth.uid() subquery caching, SECURITY DEFINER bypass), concurrency control (deadlock prevention, SKIP LOCKED, advisory locks), data access optimization (N+1 elimination, keyset pagination, batch inserts, UPSERT), runtime monitoring (pg_stat_statements, VACUUM/ANALYZE), and advanced tuning (full-text search, JSONB GIN indexing). Use when writing, reviewing, or optimizing SQL queries, diagnosing slow queries with EXPLAIN, configuring connection pooling, tuning RLS performance, implementing concurrent processing, detecting unused indexes, or resolving Postgres bottlenecks. Does NOT cover schema design (ansem-db-patterns), auth/RLS policy design (supabase-auth-patterns), or TypeScript types (typescript-best-practices).
storyblok-best-practices
Comprehensive Storyblok CMS development best practices for agency developers. Covers content modeling, SDK integration (React, Vue, Nuxt, Next.js), Visual Editor configuration, field plugins, API usage, internationalization, webhooks, and deployment patterns. Triggers on tasks involving Storyblok components, Visual Editor setup, content fetching, field plugin development, or headless CMS integration.