AI SDK

The AI SDK is a TypeScript toolkit designed to help you build AI-powered applications and agents using popular frameworks like Next.js, React, Svelte, Vue 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 18+ and npm (or another package manager) installed on your local development machine.

npm install ai

Unified Provider Architecture

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

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

Alternatively you can use the Vercel AI Gateway.

Usage

Generating Text

import{generateText}from'ai';const{ text }=awaitgenerateText({model: 'openai/gpt-5',// use Vercel AI Gatewayprompt: 'What is an agent?',});

import{generateText}from'ai';import{openai}from'@ai-sdk/openai';const{ text }=awaitgenerateText({model: openai('gpt-5'),// use OpenAI Responses APIprompt: 'What is an agent?',});

Generating Structured Data

import{generateObject}from'ai';import{z}from'zod';const{ object }=awaitgenerateObject({model: 'openai/gpt-4.1',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

import{ToolLoopAgent}from'ai';constsandboxAgent=newToolLoopAgent({model: 'openai/gpt-5-codex',system: 'You are an agent with access to a shell environment.',tools: {local_shell: openai.tools.localShell({execute: async({ action })=>{const[cmd, ...args]=action.command;constsandbox=awaitgetSandbox();// Vercel Sandboxconstcommand=awaitsandbox.runCommand({ cmd, args });return{output: awaitcommand.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.:

npm install @ai-sdk/react

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

import{openai}from'@ai-sdk/openai';import{ToolLoopAgent,InferAgentUIMessage}from'ai';exportconstimageGenerationAgent=newToolLoopAgent({model: openai('gpt-5'),tools: {image_generation: openai.tools.imageGeneration({partialImages: 3,}),},});exporttypeImageGenerationAgentMessage=InferAgentUIMessage<typeofimageGenerationAgent>;

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

import{imageGenerationAgent}from'@/agent/image-generation-agent';import{createAgentUIStreamResponse}from'ai';exportasyncfunctionPOST(req: Request){const{ messages }=awaitreq.json();returncreateAgentUIStreamResponse({agent: imageGenerationAgent,
messages,});}

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

import{openai}from'@ai-sdk/openai';import{UIToolInvocation}from'ai';exportdefaultfunctionImageGenerationView({
invocation,}: {invocation: UIToolInvocation<ReturnType<typeofopenai.tools.imageGeneration>>;}){switch(invocation.state){case'input-available':
return<div>Generating image...</div>;case'output-available':
return<imgsrc={`data:image/png;base64,${invocation.output.result}`}/>;}}

Page @/app/page.tsx

'use client';import{ImageGenerationAgentMessage}from'@/agent/image-generation-agent';importImageGenerationViewfrom'@/component/image-generation-view';import{useChat}from'@ai-sdk/react';exportdefaultfunctionPage(){const{ messages, status, sendMessage }=useChat<ImageGenerationAgentMessage>();const[input,setInput]=useState('');consthandleSubmit=e=>{e.preventDefault();sendMessage({text: input});setInput('');};return(<div>{messages.map(message=>(<divkey={message.id}><strong>{`${message.role}: `}</strong>{message.parts.map((part,index)=>{switch(part.type){case'text':
return<divkey={index}>{part.text}</div>;case'tool-image_generation':
return<ImageGenerationViewkey={index}invocation={part}/>;}})}</div>))}<formonSubmit={handleSubmit}><inputvalue={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 GitHub Discussions 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.