📄 ai-sdk/docs/migration-guides/migration-guide-3-1

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.1',    stream: true,    messages,  });
  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);}

With 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 toDataStreamResponse() 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.1'),    messages,  });
  return result.toUIMessageStreamResponse();}

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-sdk/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.1',    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-sdk/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.1'),    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;}

On this page

Migrate AI SDK 3.0 to 3.1

Upgrading

AI SDK

Next Steps

Migrating from Legacy Providers to AI SDK Core

Migrating from render to streamUI

Deploy and Scale AI Apps with Vercel.

Vercel delivers the infrastructure and developer experience you need to ship reliable AI-powered applications at scale.

Trusted by industry leaders:

OpenAI
Photoroom

Talk to an expert