Vibe Index
🎯

list-npm-package-content

🎯Skill

from vercel/ai

VibeIndex|
AI Summary

Lists the contents and structure of an npm package by retrieving and displaying its files and directories.

list-npm-package-content

Installation

Install skill:
npx skills add https://github.com/vercel/ai --skill list-npm-package-content
Stars188
Last UpdatedJan 26, 2026

Skill Details

SKILL.md

Overview

![hero illustration](./assets/hero.gif)

# AI SDK

The [AI SDK](https://ai-sdk.dev/docs) 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](https://ai-sdk.dev/docs/reference) and [Documentation](https://ai-sdk.dev/docs).

Installation

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

```shell

npm install ai

```

Unified Provider Architecture

The AI SDK provides a [unified API](https://ai-sdk.dev/docs/foundations/providers-and-models) to interact with model providers like [OpenAI](https://ai-sdk.dev/providers/ai-sdk-providers/openai), [Anthropic](https://ai-sdk.dev/providers/ai-sdk-providers/anthropic), [Google](https://ai-sdk.dev/providers/ai-sdk-providers/google-generative-ai), and [more](https://ai-sdk.dev/providers/ai-sdk-providers).

By default, the AI SDK uses the [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) to give you access to all major providers out of the box. Just pass a model string for any supported model:

```ts

const result = await generateText({

model: 'anthropic/claude-opus-4.5', // or 'openai/gpt-5.2', 'google/gemini-3-flash', etc.

prompt: 'Hello!',

});

```

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

```shell

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

```

```ts

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

const result = await generateText({

model: anthropic('claude-opus-4-5-20250414'), // or openai('gpt-5.2'), google('gemini-3-flash'), etc.

prompt: 'Hello!',

});

```

Usage

Generating Text

```ts

import { generateText } from 'ai';

const { text } = await generateText({

model: 'openai/gpt-5', // use Vercel AI Gateway

prompt: 'What is an agent?',

});

```

```ts

import { generateText } from 'ai';

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

const { text } = await generateText({

model: openai('gpt-5'), // use OpenAI Responses API

prompt: 'What is an agent?',

});

```

Generating Structured Data

```ts

import { generateText, Output } from 'ai';

import { z } from 'zod';

const { output } = await generateText({

model: 'openai/gpt-5',

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

```ts

import { ToolLoopAgent } from 'ai';

const sandboxAgent = new ToolLoopAgent({

model: 'openai/gpt-5',

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](https://ai-sdk.dev/docs/ai-sdk-ui/overview) 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.:

```shell

npm install @ai-sdk/react

```

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

```ts

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

import { ToolLoopAgent, InferAgentUIMessage } from 'ai';

export const imageGenerationAgent = new ToolLoopAgent({

model: openai('gpt-5'),

tools: {

generateImage: openai.tools.imageGeneration({

partialImages: 3,

}),

},

});

export type ImageGenerationAgentMessage = InferAgentUIMessage<

typeof imageGenerationAgent

>;

```

##