AI
Migration GuideMigrate 3.0 to 3.1

Migration Guide (3.0 to 3.1)

This guide will help you:

Upgrading to Vercel AI SDK 3.1 does not require using the newly released AI SDK Core API or streamUI function. You can continue to use Vercel AI SDK with existing (Legacy) providers.

Upgrading

Vercel AI SDK

To update to Vercel AI SDK version 3.1, run the following command using your preferred package manager:

pnpm install ai@3.1

Next Steps

The release of Vercel AI SDK 3.1 introduces several new features that improve the way you build AI applications with the SDK:

  • AI SDK Core, a brand new unified API for interacting with large language models (LLMs).
  • streamUI, a new abstraction, built upon AI SDK Core functions that simplifies building streaming UIs.

Migrating from Legacy Providers to AI SDK Core

Prior to AI SDK Core, you had to use a model provider's SDK to query their models.

In the following Route Handler, you use the OpenAI SDK to query their model. You then pipe that response into the OpenAIStream function which returns a ReadableStream that you can pass to the client using a new StreamingTextResponse.

import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';


const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
});


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


  const response = await openai.chat.completions.create({
    model: 'gpt-4-turbo',
    stream: true,
    messages,
  });


  const stream = OpenAIStream(response);


  return new StreamingTextResponse(stream);
}

With Vercel AI SDK Core you have a unified API for any provider that implements the AI SDK Language Model Specification.

Let’s take a look at the example above, but refactored to utilize the AI SDK Core API alongside the AI SDK OpenAI provider. In this example, you import the LLM function you want to use from the ai package, import the OpenAI provider from @ai-sdk/openai, and then you call the model and return the response using the toAIStreamResponse() helper function.

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


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


  const result = await streamText({
    model: openai('gpt-4-turbo'),
    messages,
  });


  return result.toAIStreamResponse();
}

Migrating from render to streamUI

The AI SDK RSC API was launched as part of version 3.0. This API introduced the render function, a helper function to create streamable UIs with OpenAI models. With the new AI SDK Core API, it became possible to make streamable UIs possible with any compatible provider.

The following example Server Action uses the render function using the model provider directly from OpenAI. You first create an OpenAI provider instance with the OpenAI SDK. Then, you pass it to the provider key of the render function alongside a tool that returns a React Server Component, defined in the render key of the tool.

import { render } from 'ai/rsc';
import OpenAI from 'openai';
import { z } from 'zod';
import { Spinner, Weather } from '@/components';
import { getWeather } from '@/utils';


const openai = new OpenAI();


async function submitMessage(userInput = 'What is the weather in SF?') {
  'use server';


  return render({
    provider: openai,
    model: 'gpt-4-turbo',
    messages: [
      { role: 'system', content: 'You are a helpful assistant' },
      { role: 'user', content: userInput },
    ],
    text: ({ content }) => <p>{content}</p>,
    tools: {
      get_city_weather: {
        description: 'Get the current weather for a city',
        parameters: z
          .object({
            city: z.string().describe('the city'),
          })
          .required(),
        render: async function* ({ city }) {
          yield <Spinner />;
          const weather = await getWeather(city);
          return <Weather info={weather} />;
        },
      },
    },
  });
}

With the new streamUI function, you can now use any compatible AI SDK provider. In this example, you import the AI SDK OpenAI provider. Then, you pass it to the model key of the new streamUI function. Finally, you declare a tool and return a React Server Component, defined in the generate key of the tool.

import { streamUI } from 'ai/rsc';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';
import { Spinner, Weather } from '@/components';
import { getWeather } from '@/utils';


async function submitMessage(userInput = 'What is the weather in SF?') {
  'use server';


  const result = await streamUI({
    model: openai('gpt-4-turbo'),
    system: 'You are a helpful assistant',
    messages: [{ role: 'user', content: userInput }],
    text: ({ content }) => <p>{content}</p>,
    tools: {
      get_city_weather: {
        description: 'Get the current weather for a city',
        parameters: z
          .object({
            city: z.string().describe('Name of the city'),
          })
          .required(),
        generate: async function* ({ city }) {
          yield <Spinner />;
          const weather = await getWeather(city);
          return <Weather info={weather} />;
        },
      },
    },
  });


  return result.value;
}