Get expert help using the Vercel AI SDK to build chatbots, AI agents, and RAG systems.
Install
mkdir -p .claude/skills/ai-sdk && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/533" && unzip -o skill.zip -d .claude/skills/ai-sdk && rm skill.zipInstalls to .claude/skills/ai-sdk
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".Key capabilities
- →Implement generateText and streamText flows
- →Configure AI SDK tool calling
- →Setup RAG system retrieval components
- →Integrate React hooks (useChat)
How it works
Searches internal documentation and verified SDK patterns to construct API-compliant code implementations.
Inputs & outputs
When to use ai-sdk
- →Building AI-powered chatbots
- →Implementing RAG systems
- →Using generateText and streamText
About this skill
What the AI SDK Is
The AI SDK by Vercel (the ai package on npm) is a TypeScript toolkit for building AI applications. It provides a unified API across model providers for text generation, structured output, tool calling, agents, embeddings, and framework UI integrations.
- Repository: https://github.com/vercel/ai
- Documentation: https://ai-sdk.dev/docs
Critical: Do Not Trust Your Own Memory
Whatever you remember about the AI SDK is likely outdated. The SDK changes frequently across versions - APIs are renamed, removed, and added. Your training data almost certainly contains obsolete APIs, deprecated patterns, and model IDs that no longer exist. UI hooks like useChat are among the most frequently changed APIs, so be especially careful with client code.
Never write AI SDK code from memory. Always verify every API, option, and pattern against the documentation and source code for the version that is actually installed in the project.
Use the Bundled, Version-Matched Docs
The ai package ships its full documentation and source code inside node_modules. These always match the installed version, so trust them over anything you remember.
- Ensure
aiis installed. Ifnode_modules/ai/does not exist, install only theaipackage using the project's package manager (e.g.pnpm add ai). Install provider packages (e.g.@ai-sdk/openai) and framework packages (e.g.@ai-sdk/react) later, when the task requires them. - Read and grep the bundled docs at
node_modules/ai/docs/and the source atnode_modules/ai/src/. - Provider and framework packages bundle their own docs at
node_modules/@ai-sdk/<name>/docs/. - If something isn't in the bundled docs, search https://ai-sdk.dev/docs. You can append
.mdto any docs page URL to get its markdown, and search viahttps://ai-sdk.dev/api/search-docs?q=your_query. - If you cannot find support for an answer in the docs or source, say so explicitly — do not guess.
AI Gateway: The Fastest Way to Start
The Vercel AI Gateway is the fastest way to get started with the AI SDK. It provides access to models from OpenAI, Anthropic, Google, and other providers through a single API, without installing provider packages or managing multiple API keys.
To set it up:
- Authenticate with OIDC (for Vercel deployments) or get an AI Gateway API key.
- Provide it to your app via the
AI_GATEWAY_API_KEYenvironment variable. - Reference models with
provider/modelstrings.
For exact setup, authentication, and usage, read the bundled guide and the AI Gateway docs.
Choosing a Model
Never use model IDs from memory — models are released and retired frequently. Fetch the current list before writing code that references a model. Do not truncate the list (e.g. with head) so you can find the newest models:
# All available models
curl -s https://ai-gateway.vercel.sh/v1/models | jq -r '.data[].id'
# Filter by provider (e.g. anthropic, openai, google)
curl -s https://ai-gateway.vercel.sh/v1/models | jq -r '[.data[] | select(.id | startswith("anthropic/")) | .id] | reverse | .[]'
When multiple versions of a model exist, prefer the one with the highest version number.
Building and Consuming Agents
Use the SDK's built-in agent abstraction (such as ToolLoopAgent) rather than hand-rolling tool-calling loops. For end-to-end type safety, infer the UI message type from your agent definition when consuming it on the client (e.g. with useChat). Consuming an agent is framework-specific: check package.json to detect the stack, then follow the matching quickstart.
Look up the current agent, tool, and type-safety APIs in the bundled docs (node_modules/ai/docs/, especially the agents section) or at https://ai-sdk.dev/docs.
DevTools
AI SDK DevTools captures your AI SDK calls - requests, responses, tool calls, token usage, and multi-step runs - so you can inspect exactly what your agents do. Use it while developing to debug generations. It is a separate package and is intended for local development only.
For setup instructions, read the bundled DevTools documentation.
Keep the SDK Current
Outdated installs are the most common source of errors. Compare the installed version against the latest:
- Installed: the
versionfield innode_modules/ai/package.json. - Latest: run
npm view ai version.
If the installed version is a major version (or more) behind the latest, tell the user they are on an old release, and recommend upgrading before continuing. Migration guides are at https://ai-sdk.dev/docs/migration-guides.
After Making Changes
Run the project's type checker. Be minimal — only set options that differ from the defaults, checking docs or source for the defaults rather than over-specifying. Most type errors come from remembered, now-changed APIs; re-check the current docs and source when they occur.
When not to use it
- →Projects not using the official Vercel AI SDK
- →Non-AI application development
Prerequisites
Limitations
- →Requires local documentation files for reliability
- →Does not support non-Vercel SDK patterns
- →Hooks API evolves rapidly
How it compares
It enforces strict source-of-truth usage by ignoring outdated internal training data and referencing current project docs.
Compared to similar skills
ai-sdk side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| ai-sdk (this skill) | 11 | 2mo | Review | Advanced |
| hr-portal-skill | 0 | 1mo | No flags | Beginner |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| landing-page-guide-v2 | 48 | 8mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by vercel
View all by vercel →You might also like
hr-portal-skill
hariventures2000-ship-it
Use this skill when developing, testing, debugging, or modifying code inside the HR Portal frontend (apps/hr-portal). It applies to handling HR administration tasks such as employee roster management, contract seeding, leave request approvals, attendance monitoring, payroll calculation, and recruitm
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
landing-page-guide-v2
bear2u
Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
nextjs-best-practices
davila7
Next.js App Router principles. Server Components, data fetching, routing patterns.
frontend-code-review
langgenius
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.