Back to Skills

vercel-ai-sdk-v5

verified

Expert-level Vercel AI SDK v5 patterns for production chatbots. Use for: (1) Chat persistence with Drizzle/PostgreSQL, (2) Generative UI with typed tool parts, (3) Human-in-the-loop tool confirmations, (4) Custom data streaming with reconciliation, (5) Anthropic provider with extended thinking/reasoning, (6) Type-safe message metadata with token tracking. Covers advanced patterns only - assumes basic AI SDK knowledge. NOT for AI SDK v6.

View on GitHub

Marketplace

horuz

horuz-ai/claude-plugins

Plugin

nextjs

Repository

horuz-ai/claude-plugins
1stars

plugins/nextjs/skills/vercel-ai-sdk-v5/SKILL.md

Last Verified

January 21, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/horuz-ai/claude-plugins/blob/main/plugins/nextjs/skills/vercel-ai-sdk-v5/SKILL.md -a claude-code --skill vercel-ai-sdk-v5

Installation paths:

Claude
.claude/skills/vercel-ai-sdk-v5/
Powered by add-skill CLI

Instructions

# Vercel AI SDK v5

Production patterns for AI chatbots with persistence, generative UI, and streaming.

## Quick Reference

| Need | Reference |
|------|-----------|
| Database schema & persistence | `references/persistence.md` |
| Tools & generative UI | `references/tools-and-generative-ui.md` |
| Custom data streaming | `references/streaming.md` |
| Type definitions | `references/types.md` |
| Anthropic + reasoning | `references/anthropic-config.md` |
| Working examples | `cookbook/` directory |

## Core Architecture

### Message Flow
```
Client (useChat) → API Route (streamText) → DB (Drizzle)
     ↑                    ↓
     └── UIMessageStream ←┘
```

### Key Imports
```typescript
// Core
import { streamText, convertToModelMessages, UIMessage } from 'ai'
import { createUIMessageStream, createUIMessageStreamResponse } from 'ai'

// Client
import { useChat } from '@ai-sdk/react'
import { DefaultChatTransport } from 'ai'

// Provider
import { anthropic } from '@ai-sdk/anthropic'
```

## Decision Tree

### Streaming Response Type
- Simple text streaming → `streamText().toUIMessageStreamResponse()`
- Need custom data parts → `createUIMessageStream()` + `writer.write()`
- Need both → `createUIMessageStream()` + `writer.merge(result.toUIMessageStream())`

### Tool Execution Location
- Has server-side data/secrets → Server tool with `execute`
- Needs client confirmation → Client tool (no execute) + `addToolOutput`
- Auto-runs on client → Client tool + `onToolCall` handler

### Data Attachment
- Message-level info (tokens, model, timestamps) → `messageMetadata`
- Dynamic content in message → Data parts with `writer.write()`
- Temporary status (not persisted) → Transient data parts

## Naming Convention

This skill uses `agents` instead of `chats` for all database tables, routes, and methods:
- Table: `agents` (not `chats`)
- Foreign keys: `agentId` (not `chatId`)
- Actions: `createAgent()`, `loadAgent()`, `deleteAgent()`

## File Organization

Follow feature-based arch

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
3666 chars