How do I install the Vercel AI Sdk Best Practices skill?

Run npx skillmds@latest add diegosouzapw/vercel-ai-sdk-best-practices in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Vercel AI Sdk Best Practices safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: CAUTION, Skill Scanner: PASS. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Vercel AI Sdk Best Practices?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Vercel AI Sdk Best Practices free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Vercel AI Sdk Best Practices?

diegosouzapw (@diegosouzapw) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Vercel AI Sdk Best Practices by diegosouzapw

Name: Vercel AI Sdk Best Practices
Rating: 4.2 (5 reviews)
Author: diegosouzapw

File contents

Vercel Ai Sdk Best Practices Skill

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.

Iron Laws

ALWAYS use streaming responses with streamText or streamObject for AI outputs rather than blocking calls
NEVER expose API keys or model provider secrets in client-side code — use server-only route handlers
ALWAYS implement error boundaries and loading states for streaming AI responses in React components
NEVER call AI SDK functions directly from Client Components — use Server Actions or API routes
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:

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.

---name: vercel-ai-sdk-best-practicesdescription: Best practices for using the Vercel AI SDK in Next.js 15 applications with React Server Components and streaming capabilities.---# 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 Laws1. **ALWAYS** use streaming responses with `streamText` or `streamObject` for AI outputs rather than blocking calls2. **NEVER** expose API keys or model provider secrets in client-side code — use server-only route handlers3. **ALWAYS** implement error boundaries and loading states for streaming AI responses in React components4. **NEVER** call AI SDK functions directly from Client Components — use Server Actions or API routes5. **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:**```bashcat .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.

Frequently asked questions

Vercel AI Sdk Best Practices