content/docs/02-getting-started/09-coding-agents.mdx
This page explains how to get the most out of the AI SDK when working inside a coding agent (such as Claude Code, Codex, OpenCode, Cursor, or any other AI-assisted development environment).
The fastest way to give your coding agent deep knowledge of the AI SDK is to install the official AI SDK skill. Skills are lightweight markdown files that load specialized instructions into your agent's context on demand — so your agent knows exactly how to use the SDK without you needing to explain it.
Install the AI SDK skill using npx skills add:
npx skills add vercel/ai
This installs the skill into your agent's specific skills directory (e.g., .claude/skills, .codex/skills). If you select more than one agent, the CLI creates symlinks so each agent can discover the skill. Use -a to specify agents directly — for example, -a amp installs into the universal .agents/skills directory. Use -y for non-interactive installation.
Once installed, any agent that supports the Agent Skills format will automatically discover and load the skill when working on AI SDK tasks.
<Note> Agent Skills use **progressive disclosure**: your agent loads only the skill's name and description at startup. The full instructions are only pulled into context when the task calls for it, keeping your agent fast and focused. </Note>node_modulesOnce you've installed the ai package, you already have the full AI SDK documentation and source code available locally inside node_modules. Your coding agent can read these directly — no internet access required.
Install the ai package if you haven't already:
After installation, your agent can reference the bundled source code and documentation at paths like:
node_modules/ai/src/ # Full source code organized by module
node_modules/ai/docs/ # Official documentation with examples
This means your agent can look up accurate API signatures, implementations, and usage examples directly from the installed package — ensuring it always uses the version of the SDK that's actually installed in your project.
AI SDK DevTools gives you full visibility into your AI SDK calls during development. It captures LLM requests, responses, tool calls, token usage, and multi-step interactions, and displays them in a local web UI.
<Note type="warning"> AI SDK DevTools is experimental and intended for local development only. Do not use in production environments. </Note>Install the DevTools package:
<div className="my-4"> <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}> <Tab> <Snippet text="pnpm add @ai-sdk/devtools" dark /> </Tab> <Tab> <Snippet text="npm install @ai-sdk/devtools" dark /> </Tab> <Tab> <Snippet text="yarn add @ai-sdk/devtools" dark /> </Tab> <Tab> <Snippet text="bun add @ai-sdk/devtools" dark /> </Tab> </Tabs> </div>Wrap your language model with the DevTools middleware using wrapLanguageModel:
import { wrapLanguageModel, gateway } from 'ai';
import { devToolsMiddleware } from '@ai-sdk/devtools';
const model = wrapLanguageModel({
model: gateway('anthropic/claude-sonnet-4.5'),
middleware: devToolsMiddleware(),
});
Use the wrapped model with any AI SDK Core function:
import { generateText } from 'ai';
const result = await generateText({
model, // wrapped model with DevTools middleware
prompt: 'What cities are in the United States?',
});
Start the DevTools viewer in a separate terminal:
npx @ai-sdk/devtools
Open http://localhost:4983 to inspect your AI SDK interactions in real time.
DevTools captures and displays the following for every call:
For multi-step agent interactions, DevTools groups everything into runs (a complete interaction) and steps (each individual LLM call within it), making it easy to trace exactly what your agent did and why.
You can also log tool results directly in code during development:
import { streamText, tool, stepCountIs } from 'ai';
import { z } from 'zod';
const result = streamText({
model,
prompt: "What's the weather in New York in celsius?",
tools: {
weather: tool({
description: 'Get the weather in a location (fahrenheit)',
inputSchema: z.object({
location: z.string().describe('The location to get the weather for'),
}),
execute: async ({ location }) => ({
location,
temperature: Math.round(Math.random() * (90 - 32) + 32),
}),
}),
},
stopWhen: stepCountIs(5),
onStepFinish: async ({ toolResults }) => {
if (toolResults.length) {
console.log(JSON.stringify(toolResults, null, 2));
}
},
});
The onStepFinish callback fires after each LLM step and prints any tool results to your terminal — useful for quick debugging without opening the DevTools UI.