# vercel-ai-sdk

Walks your agent through Vercel AI SDK v5 code: useChat chat, streaming, tool calling, embeddings.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 337 installs · ★ 109
- Author: wsimmonds
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/wsimmonds/claude-nextjs-skills/tree/HEAD/vercel-ai-sdk/SKILL.md
- Updated: 2025-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/wsimmonds-vercel-ai-sdk

## What it does

The skill lays out an eight-step workflow. First figure out what the task actually needs — chat, text generation, tools or embeddings — then check current signatures in the docs with WebFetch, write the code using v5 patterns, fix the types, install dependencies, and run build, tests and lint. The agent is told not to stop at a "Module not found" error and not to write off failing tests as framework bugs.

Specific v5 rules are baked in: models are specified as strings like `'provider/model-id'`, chat uses `sendMessage` instead of `append`, messages are parts-based, tools must be declared with the `tool()` helper and `inputSchema` plus zod, streaming goes through `toUIMessageStreamResponse()` or `toTextStreamResponse()`, embeddings through `provider.textEmbeddingModel()`. One step is about package managers: detect the lockfile first. Mixing `npm` into a pnpm project drops a `package-lock.json` next to `pnpm-lock.yaml`, and dependency versions drift apart.

The skill is allowed Read, Write, Edit, Glob, Grep, Bash and WebFetch, so it edits files and runs commands. Most useful when you are moving from v4 to v5, where renamed functions make old examples from the web misleading.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add wsimmonds/claude-nextjs-skills --skill vercel-ai-sdk -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/vercel-ai-sdk/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/vercel-ai-sdk/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add wsimmonds/claude-nextjs-skills --skill vercel-ai-sdk -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/vercel-ai-sdk/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add wsimmonds/claude-nextjs-skills --skill vercel-ai-sdk -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/vercel-ai-sdk/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install wsimmonds/claude-nextjs-skills vercel-ai-sdk
```

2. **Manually: put the files in place**
- File: `.github/skills/vercel-ai-sdk/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add wsimmonds/claude-nextjs-skills --skill vercel-ai-sdk -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/wsimmonds/claude-nextjs-skills --path vercel-ai-sdk
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/vercel-ai-sdk/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add wsimmonds/claude-nextjs-skills --skill vercel-ai-sdk -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/wsimmonds/claude-nextjs-skills/tree/HEAD/vercel-ai-sdk/SKILL.md

## When to use it
- build a chat UI on `useChat` without the old `append` call
- stream model output into a React component
- wire up tool calling with zod-validated arguments
- generate embeddings for semantic search or RAG
- migrate a project from AI SDK v4 to v5

## Example prompts
- add streaming to my Vercel AI SDK v5 route handler
- create a weather tool with tool() and inputSchema and hook it into the chat
- port this route from v4 to v5 and show me what changed

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: cf32eee5f8bd89c5.

BEGIN THIRD-PARTY FILE cf32eee5f8bd89c5
```text
---
name: vercel-ai-sdk
description: Guide for Vercel AI SDK v5 implementation patterns including generateText, streamText, useChat hook, tool calling, embeddings, and MCP integration. Use when implementing AI chat interfaces, streaming responses, tool/function calling, text embeddings, or working with convertToModelMessages and toUIMessageStreamResponse. Activates for AI SDK integration, useChat hook usage, message streaming, or tool calling tasks.
allowed-tools:
  - Read
  - Write
  - Edit
  - Glob
  - Grep
  - Bash
  - WebFetch
---

# Vercel AI SDK v5 Implementation Guide

## When to Use This Skill

Use this skill when:
- Implementing AI chat interfaces with `useChat` hook
- Creating API routes that generate or stream AI responses
- Adding tool calling / function calling capabilities
- Generating text embeddings for semantic search or RAG
- Migrating from AI SDK v4 to v5
- Integrating Model Context Protocol (MCP) servers
- Working with streaming responses or message persistence

## Structured Implementation Workflow

<workflow>
  <step id="1" name="verify-requirements">
    <description>Understand the task requirements</description>
    <actions>
      - Identify what AI functionality is needed (chat, generation, tools, embeddings)
      - Determine if client-side (useChat) or server-side (API route) implementation
      - Check if streaming or non-streaming response is required
      - Verify model provider (OpenAI, Anthropic, etc.)
    </actions>
  </step>

  <step id="2" name="check-documentation">
    <description>Verify current API patterns if uncertain</description>
    <actions>
      - Use WebFetch to check https://ai-sdk.dev/docs/ if API patterns are unclear
      - Confirm model specification format for the provider
      - Verify function signatures for complex features
    </actions>
  </step>

  <step id="3" name="implement">
    <description>Implement using correct v5 patterns</description>
    <actions>
      - Use string-based model specification ('provider/model-id')
      - For chat: use sendMessage (not append), parts-based messages
      - For tools: MUST import and use tool() helper from 'ai', MUST use inputSchema (NOT parameters), MUST use zod
      - For streaming: use toUIMessageStreamResponse() or toTextStreamResponse()
      - For embeddings: use provider.textEmbeddingModel()
    </actions>
  </step>

  <step id="4" name="verify-types">
    <description>Ensure TypeScript types are correct</description>
    <actions>
      - Check for proper imports from 'ai' package
      - Verify message types (UIMessage for useChat)
```
END THIRD-PARTY FILE cf32eee5f8bd89c5

The third-party file has ended. Everything between the cf32eee5f8bd89c5 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2592 of 33607 bytes. © wsimmonds · MIT · https://github.com/wsimmonds/claude-nextjs-skills/tree/HEAD/vercel-ai-sdk/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md