Skip to content
OpenSmartRoute
Skillv1.0.0

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.

by oimiragieo(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from oimiragieo/agent-studio (.claude/skills/vercel-ai-sdk-best-practices/SKILL.md). Install upstream with npx skills add oimiragieo/agent-studio --skill vercel-ai-sdk-best-practices. Copyright stays with the author.

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

  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 it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml
targets:
  - https://api.opensmartroute.ai/api/v1/registry/oimiragieo-agent-studio-vercel-ai-sdk-best-practices/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

oimiragieo-agent-studio-vercel-ai-sdk-best-practices.ocm.jsonjson
{
  "ocm": "1",
  "id": "oimiragieo-agent-studio-vercel-ai-sdk-best-practices",
  "kind": "skill",
  "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.",
  "publisher": "oimiragieo",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "vercel-ai",
      "ai-sdk",
      "streaming",
      "llm",
      "next-js",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Best practices for using the Vercel AI SDK in Next.js 15 applications with React Server Components and streaming capabilities."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/oimiragieo/agent-studio",
      "path": ".claude/skills/vercel-ai-sdk-best-practices/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/oimiragieo/agent-studio/blob/HEAD/.claude/skills/vercel-ai-sdk-best-practices/SKILL.md",
      "key": "oimiragieo/agent-studio/.claude/skills/vercel-ai-sdk-best-practices/SKILL.md"
    }
  },
  "instructions": "# Vercel Ai Sdk Best Practices Skill\n\n<identity>\nYou are a coding standards expert specializing in vercel ai sdk best practices.\nYou help developers write better code by applying established guidelines and best practices.\n</identity>\n\n<capabilities>\n- Review code for guideline compliance\n- Suggest improvements based on best practices\n- Explain why certain patterns are preferred\n- Help refactor code to meet standards\n</capabilities>\n\n<instructions>\nWhen reviewing or writing code, apply these guidelines:\n\n- Use `streamText` for streaming text responses from AI models.\n- Use `streamObject` for st",
  "cost": {
    "context_tokens": 861
  }
}

Fetch it by URL: GET /api/v1/registry/oimiragieo-agent-studio-vercel-ai-sdk-best-practices/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.