vercel / ai

✓ Official★ 25,400

A skill package that teaches your agent 18 capabilities — every one documented and browsable below, no GitHub required · by vercel.

Each skill below is one capability this package teaches your agent. Install the whole package, or open a skill to install just that one.

add-function-examples🔥🔥✓ Verified🔒 repo maintenanceFreeQuick setup

Guide for adding new AI function examples, for testing specific features against the actual provider APIs.

1 file — installable on its own

→

add-function-examples🔥🔥✓ Verified🔒 repo maintenanceFreeQuick setup

Guide for adding new AI function examples, for testing specific features against the actual provider APIs.

1 file — installable on its own

→

add-provider-package🔥🔥🔥✓ VerifiedFreeQuick setup

Guide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.

1 file — installable on its own

→

add-provider-package🔥🔥✓ Verified🔒 repo maintenanceFreeQuick setup

Guide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.

1 file — installable on its own

→

adr-skill🔥🔥🔥🔥✓ VerifiedFreeQuick setup

Create and maintain Architecture Decision Records (ADRs) optimized for agentic coding workflows. Use when you need to propose, write, update, accept/reject,…

15 files — installable on its own

→

adr-skill🔥🔥🔥✓ VerifiedFreeQuick setup

Create and maintain Architecture Decision Records (ADRs) optimized for agentic coding workflows. Use when you need to propose, write, update, accept/reject,…

15 files — installable on its own

→

capture-api-response-test-fixture🔥🔥✓ Verified🔒 repo maintenanceFreeQuick setup

Store and manage API response test fixtures for provider parsing validation. Fixtures are organized in __fixtures__ subfolders within provider packages, using naming conventions documented in existing examples Supports two testing patterns: generateText (log raw response to console and copy into fixture) and streamText (use includeRawChunks and saveRawChunks helper to capture streaming chunks) Recommends storing true provider responses unless size constraints require semantic-preserving cuts...

1 file — installable on its own

→

capture-api-response-test-fixture🔥🔥✓ Verified🔒 repo maintenanceFreeQuick setup

Capture API response test fixture.

1 file — installable on its own

→

develop-ai-functions-example🔥🔥✓ Verified🔒 repo maintenanceFreeQuick setup

Develop examples for AI SDK functions. Use when creating, running, or modifying examples under examples/ai-functions/src to validate provider support,…

1 file — installable on its own

→

develop-ai-functions-example🔥🔥✓ Verified🔒 repo maintenanceFreeQuick setup

Development and validation scripts for AI SDK functions across multiple providers and capabilities. Organized by AI SDK function category (text generation, streaming, structured output, embeddings, image generation, speech, transcription, reranking, and agents) File naming convention maps provider and feature combinations (e.g., openai-tool-call.ts , amazon-bedrock-anthropic-cache-control.ts ) for quick identification Includes shared utility helpers for error handling, environment loading,...

1 file — installable on its own

→

island-rescue🔥FreeQuick setup

How to be rescued from a lonely island

1 file — installable on its own

→

island-rescue🔥✓ VerifiedFreeQuick setup

How to be rescued from a lonely island

1 file — installable on its own

→

list-npm-package-content🔥🔥🔥✓ VerifiedFreeQuick setup

Inspect npm package tarball contents before publishing to verify what files will be distributed. Lists exact files that would be uploaded to npm, helping catch missing or unwanted inclusions before publish Respects files field in package.json, .npmignore , and .gitignore rules to show the actual bundle contents Automatically builds the package, creates a tarball, displays contents, and cleans up in a single command Run from the package directory with a simple bash script; useful for...

3 files — installable on its own

→

list-npm-package-content🔥🔥🔥✓ VerifiedFreeQuick setup

List the contents of an npm package tarball before publishing. Use when the user wants to see what files are included in an npm bundle, verify package…

3 files — installable on its own

→

major-version-mode🔥🔥✓ Verified🔒 repo maintenanceFreeQuick setup

Context for working on the next AI SDK major release. Only use when explicitly invoked by the user (e.g. via '/major-version-mode'). Do NOT trigger…

1 file — installable on its own

→

major-version-mode🔥🔥✓ Verified🔒 repo maintenanceFreeQuick setup

Context for working on the next AI SDK major release. Only use when explicitly invoked by the user (e.g. via '/major-version-mode'). Do NOT trigger…

1 file — installable on its own

→

update-provider-models🔥🔥✓ Verified🔒 repo maintenanceFreeQuick setup

Add new or remove obsolete model IDs for existing AI SDK providers. Use when adding a model to a provider, removing an obsolete model, or processing a list of…

1 file — installable on its own

→

update-provider-models🔥🔥✓ Verified🔒 repo maintenanceFreeQuick setup

Add new or remove obsolete model IDs for existing AI SDK providers. Use when adding a model to a provider, removing an obsolete model, or processing a list of…

1 file — installable on its own

→

hero illustration

AI SDK

The AI SDK is a provider-agnostic TypeScript toolkit designed to help you build AI-powered applications and agents using popular UI frameworks like Next.js, React, Svelte, Vue, Angular, and runtimes like Node.js.

To learn more about how to use the AI SDK, check out our API Reference and Documentation.

Installation

You will need Node.js 22+ and npm (or another package manager) installed on your local development machine.

Copy & paste — that's it

npm install ai

Skill for Coding Agents

If you use coding agents such as Claude Code or Cursor, we highly recommend adding the AI SDK skill to your repository:

Copy & paste — that's it

npx skills add vercel/ai

Unified Provider Architecture

The AI SDK provides a unified API to interact with model providers like OpenAI, Anthropic, Google, and more.

By default, the AI SDK uses the Vercel AI Gateway to give you access to all major providers out of the box. Just pass a model string for any supported model:

Copy & paste — that's it

const result = await generateText({
  model: 'anthropic/claude-opus-4.6', // or 'openai/gpt-5.4', 'google/gemini-3-flash', etc.
  prompt: 'Hello!',
});

You can also connect to providers directly using their SDK packages:

Copy & paste — that's it

npm install @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google

Copy & paste — that's it

import { anthropic } from '@ai-sdk/anthropic';

const result = await generateText({
  model: anthropic('claude-opus-4-6'), // or openai('gpt-5.4'), google('gemini-3-flash'), etc.
  prompt: 'Hello!',
});

Usage

Generating Text

Copy & paste — that's it

import { generateText } from 'ai';

const { text } = await generateText({
  model: 'openai/gpt-5.4', // use Vercel AI Gateway
  prompt: 'What is an agent?',
});

Generating Structured Data

Copy & paste — that's it

import { generateText, Output } from 'ai';
import { z } from 'zod';

const { output } = await generateText({
  model: 'openai/gpt-5.4',
  output: Output.object({
    schema: z.object({
      recipe: z.object({
        name: z.string(),
        ingredients: z.array(
          z.object({ name: z.string(), amount: z.string() }),
        ),
        steps: z.array(z.string()),
      }),
    }),
  }),
  prompt: 'Generate a lasagna recipe.',
});

Agents

Copy & paste — that's it

import { ToolLoopAgent } from 'ai';

const sandboxAgent = new ToolLoopAgent({
  model: 'openai/gpt-5.4',
  system: 'You are an agent with access to a shell environment.',
  tools: {
    shell: openai.tools.localShell({
      execute: async ({ action }) => {
        const [cmd, ...args] = action.command;
        const sandbox = await getSandbox(); // Vercel Sandbox
        const command = await sandbox.runCommand({ cmd, args });
        return { output: await command.stdout() };
      },
    }),
  },
});

UI Integration

The AI SDK UI module provides a set of hooks that help you build chatbots and generative user interfaces. These hooks are framework agnostic, so they can be used in Next.js, React, Svelte, and Vue.

You need to install the package for your framework, e.g.:

Copy & paste — that's it

npm install @ai-sdk/react

Agent @/agent/image-generation-agent.ts

Copy & paste — that's it

import { openai } from '@ai-sdk/openai';
import { ToolLoopAgent, InferAgentUIMessage } from 'ai';

export const imageGenerationAgent = new ToolLoopAgent({
  model: 'openai/gpt-5.4',
  tools: {
    generateImage: openai.tools.imageGeneration({
      partialImages: 3,
    }),
  },
});

export type ImageGenerationAgentMessage = InferAgentUIMessage<
  typeof imageGenerationAgent
>;

Route (Next.js App Router) @/app/api/chat/route.ts

Copy & paste — that's it

import { imageGenerationAgent } from '@/agent/image-generation-agent';
import { createAgentUIStreamResponse } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  return createAgentUIStreamResponse({
    agent: imageGenerationAgent,
    messages,
  });
}

UI Component for Tool @/component/image-generation-view.tsx

Copy & paste — that's it

import { openai } from '@ai-sdk/openai';
import { UIToolInvocation } from 'ai';

export default function ImageGenerationView({
  invocation,
}: {
  invocation: UIToolInvocation<ReturnType<typeof openai.tools.imageGeneration>>;
}) {
  switch (invocation.state) {
    case 'input-available':
      return <div>Generating image...</div>;
    case 'output-available':
      return <img src={`data:image/png;base64,${invocation.output.result}`} />;
  }
}

Page @/app/page.tsx

Copy & paste — that's it

'use client';

import { ImageGenerationAgentMessage } from '@/agent/image-generation-agent';
import ImageGenerationView from '@/component/image-generation-view';
import { useChat } from '@ai-sdk/react';

export default function Page() {
  const { messages, status, sendMessage } =
    useChat<ImageGenerationAgentMessage>();

  const [input, setInput] = useState('');
  const handleSubmit = e => {
    e.preventDefault();
    sendMessage({ text: input });
    setInput('');
  };

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          <strong>{`${message.role}: `}</strong>
          {message.parts.map((part, index) => {
            switch (part.type) {
              case 'text':
                return <div key={index}>{part.text}</div>;
              case 'tool-generateImage':
                return <ImageGenerationView key={index} invocation={part} />;
            }
          })}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          disabled={status !== 'ready'}
        />
      </form>
    </div>
  );
}

Templates

We've built templates that include AI SDK integrations for different use cases, providers, and frameworks. You can use these templates to get started with your AI-powered application.

Community

The AI SDK community can be found on the Vercel Community where you can ask questions, voice ideas, and share your projects with other people.

Contributing

Contributions to the AI SDK are welcome and highly appreciated. However, before you jump right into it, we would like you to review our Contribution Guidelines to make sure you have smooth experience contributing to AI SDK.

Authors

This library is created by Vercel and Next.js team members, with contributions from the Open Source Community.

Install the whole package (18 skills):

Copy & paste — that's it

npx skills add https://github.com/vercel/ai

Or install a single skill:

Copy & paste — that's it

npx skills add https://github.com/vercel/ai --skill <name>

Pick the skill name from the Skills tab — each entry there installs independently.