Vercel Ai Sdk Best Practices

Name: Vercel Ai Sdk Best Practices
Author: oimiragieo

oimiragieo/agent-studio

37 installs
36 repo stars
Updated July 14, 2026
oimiragieo/agent-studio

Helps with ai & agent building tasks.

About

vercel-ai-sdk-best-practices is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.

vercel-ai-sdk-best-practices
AI & Agent Building
AI-coding skill

Vercel Ai Sdk Best Practices by the numbers

37 all-time installs (skills.sh)
Ranked #8,545 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/oimiragieo/agent-studio --skill vercel-ai-sdk-best-practices

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/oimiragieo/agent-studio/vercel-ai-sdk-best-practices.svg)](https://skillselion.com/skills/oimiragieo/agent-studio/vercel-ai-sdk-best-practices)

Installs	37
repo stars	★ 36
Last updated	July 14, 2026
Repository	oimiragieo/agent-studio ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

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>

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:

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.

'use strict';
/**
 * Post-execute hook for vercel-ai-sdk-best-practices
 * Auto-generated by enterprise-bundle-scaffolder
 *
 * Records metrics after skill execution.
 */

function postExecute(_context) {
  // Record execution metrics
  return { ok: true, skill: 'vercel-ai-sdk-best-practices' };
}

module.exports = { postExecute };

'use strict';
/**
 * Pre-execute hook for vercel-ai-sdk-best-practices
 * Auto-generated by enterprise-bundle-scaffolder
 *
 * Validates inputs before skill execution.
 */

function preExecute(context) {
  // Validate skill invocation context
  if (!context || typeof context !== 'object') {
    return { allow: true, message: 'vercel-ai-sdk-best-practices: no context to validate' };
  }
  return { allow: true };
}

module.exports = { preExecute };

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "vercel-ai-sdk-best-practicesInput",
  "description": "Input schema for Best practices for using the Vercel AI SDK in Next.js 15 applications with React Server Components and streaming capabilities.",
  "type": "object",
  "additionalProperties": true,
  "properties": {
    "target": {
      "type": "string",
      "description": "Target file or path for the skill to operate on"
    },
    "options": {
      "type": "object",
      "description": "Additional options for skill execution",
      "additionalProperties": true
    }
  }
}

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "vercel-ai-sdk-best-practicesOutput",
  "type": "object",
  "additionalProperties": true,
  "properties": {
    "ok": {
      "type": "boolean"
    },
    "summary": {
      "type": "string"
    }
  }
}

#!/usr/bin/env node
'use strict';
/**
 * vercel-ai-sdk-best-practices - Enterprise Skill Script
 * Auto-generated by enterprise-bundle-scaffolder
 */

const fs = require('fs');
const path = require('path');

// Parse arguments
const args = process.argv.slice(2);
const options = {};
for (let i = 0; i < args.length; i++) {
  if (args[i].startsWith('--')) {
    const key = args[i].slice(2);
    const value = args[i + 1] && !args[i + 1].startsWith('--') ? args[++i] : true;
    options[key] = value;
  }
}

if (options.help) {
  console.log(`
vercel-ai-sdk-best-practices - Enterprise Skill

Usage:
  node main.cjs --check <file>    Check a file against guidelines
  node main.cjs --list            List all guidelines
  node main.cjs --help            Show this help

Description:
  Best practices for using the Vercel AI SDK in Next.js 15 applications with React Server Components and streaming capabilities.
`);
  process.exit(0);
}

if (options.list) {
  console.log('Guidelines for vercel-ai-sdk-best-practices:');
  console.log('See SKILL.md for full guidelines');
  process.exit(0);
}

console.log('vercel-ai-sdk-best-practices skill loaded. Use with Claude for code review.');