Introducing the Vercel AI SDK: npm i ai

A Streaming-First Toolkit for AI Interfaces

Over the past six months, a wave of AI companies—including Scale, Jasper, Perplexity, Runway, Lexica, and Jenni—have launched their products on Next.js and Vercel. The appeal is clear: developers can concentrate on building AI features instead of wrestling with infrastructure. Today, Vercel is extending that focus with two new offerings: the Vercel AI SDK and an upgraded Chat & Prompt Playground.

The Vercel AI SDK is an open-source library designed for building conversational, streaming, and chat user interfaces in JavaScript and TypeScript. It ships with support for React/Next.js and Svelte/SvelteKit, with Nuxt/Vue support on the roadmap. Installation is a single command:

npm install ai

The full source code is available on GitHub.

Interchangeable Model Adapters

Choosing the right LLM is a critical decision, as each provider offers distinct tradeoffs and tuning options. Rather than locking you into a single vendor, the SDK provides first-class adapters for OpenAI, LangChain, and Hugging Face Inference. This interoperability means you can pair your preferred model provider with a common, streaming-ready interface:

import { OpenAIStream, StreamingTextResponse } from 'ai'
import { Configuration, OpenAIApi } from 'openai-edge'
// Create an OpenAI API client (that's edge friendly!)
const config = new Configuration({
  apiKey: process.env.OPENAI_API_KEY
})
const openai = new OpenAIApi(config)
// IMPORTANT! Set the runtime to edge
export const runtime = 'edge'
export async function POST(req: Request) {
  // Extract the `messages` from the body of the request
  const { messages } = await req.json()
  // Ask OpenAI for a streaming chat completion given the prompt
  const response = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages
  })
  // Convert the response into a friendly text-stream
  const stream = OpenAIStream(response)
  // Respond with the stream
  return new StreamingTextResponse(stream)
}

Hooks for Real-Time Responses

The SDK includes React and Svelte hooks that handle data fetching and rendering of streaming text. These abstractions let you display responses as they arrive, creating an interactive experience for users. Building a full chat or completion interface takes just a few lines using the useChat and useCompletion hooks:

'use client'
import { useChat } from 'ai/react'
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()
  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          {m.role}: {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <label>
          Say something...
          <input
            value={input}
            onChange={handleInputChange}
          />
        </label>
      </form>
    </div>
  )
}

Beyond rendering, the library exposes stream helpers and callbacks. These let you persist completed streaming responses to a database within the same request, streamlining data management and the handling of streaming text output.

Built for Serverless Deployment

The AI SDK is engineered to work with Vercel Functions, so you can deploy AI applications that scale instantly, stream generated responses, and run efficiently with Fluid compute. With Vercel’s framework-defined infrastructure, you write your application code in frameworks like Next.js and SvelteKit, and Vercel handles converting that code into global application infrastructure.

Comparing Models in the Playground

In late April, Vercel launched an interactive online playground featuring 20 open-source and cloud LLMs. It allows developers to compare model outputs in real time, tweak parameters, and instantly generate Next.js, Svelte, and Node.js code snippets.

Now, the playground has gained a new chat interface, enabling side-by-side comparisons of chat models. Additionally, it now generates code using the Vercel AI SDK itself, letting you jump from experiment to working chat app in just a few clicks.

Roadmap

Vercel plans to add more SDK examples and templates built entirely with the AI SDK in the coming weeks. As new best practices for building AI applications evolve, the company intends to incorporate them directly into the SDK based on developer feedback.

Developers interested in early access to Vercel’s AI partner ecosystem can apply to the AI Accelerator, which offers access to over $850k in credits from Vercel and its collaborators.