AI SDK 3.0 → 3.1 마이그레이션

AI SDK 3.0 → 3.1 마이그레이션 (Migrate AI SDK 3.0 to 3.1)

AI SDK 3.0에서 3.1로 마이그레이션하는 방법과 레거시 프로바이더에서 AI SDK Core로, render에서 streamUI로 마이그레이션하는 방법을 설명하는 문서예요.

출처: 문서

본문

참고: 릴리스에 대한 자세한 정보는 AI SDK 3.1 릴리스 블로그 포스트를 확인하세요.

이 가이드는 다음을 도와줘요:

AI SDK 3.1로 업그레이드
레거시 프로바이더에서 AI SDK Core로 마이그레이션
render에서 streamUI로 마이그레이션

AI SDK 3.1로의 업그레이드는 새로 출시된 AI SDK Core API나 streamUI 함수를 사용할 것을 요구하지 않아요.

업그레이드 (Upgrading)

AI SDK

AI SDK 3.1로 업데이트하려면 선호하는 패키지 매니저로 다음 명령을 실행하세요:

pnpm add [email protected]

다음 단계 (Next Steps)

AI SDK 3.1 릴리스는 SDK로 AI 애플리케이션을 구축하는 방식을 개선하는 몇 가지 새로운 기능을 도입해요:

AI SDK Core, 대규모 언어 모델(LLM)과 상호작용하기 위한 완전히 새로운 통합 API.
streamUI, AI SDK Core 함수 위에 구축된 새 추상화로 스트리밍 UI 구축을 단순화해요.

레거시 프로바이더에서 AI SDK Core로 마이그레이션 (Migrating from Legacy Providers to AI SDK Core)

AI SDK Core 이전에는 모델 프로바이더의 SDK를 사용해 그들의 모델을 쿼리해야 했어요.

다음 Route Handler에서는 OpenAI SDK를 사용해 그들의 모델을 쿼리해요. 그런 다음 그 응답을 OpenAIStream 함수로 전달해 ReadableStream을 반환하고, 이를 StreamingTextResponse로 클라이언트에 전달할 수 있어요.

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

const openai = new OpenAI({
  apiKey: proces...EY!,
});

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);
}

AI SDK Core를 사용하면 AI SDK 언어 모델 사양을 구현하는 어떤 프로바이더든 통합 API를 사용할 수 있어요.

위 예제를 AI SDK Core API와 AI SDK OpenAI 프로바이더를 활용하도록 리팩터링한 것을 살펴볼게요. 이 예제에서는 사용하려는 LLM 함수를 ai 패키지에서 임포트하고, OpenAI 프로바이더를 @ai-sdk/openai에서 임포트한 뒤, 모델을 호출하고 toDataStreamResponse() 헬퍼 함수로 응답을 반환해요.

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

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

  const result = await streamText({
    model: __MODEL__,
    messages,
  });

  return result.toUIMessageStreamResponse();
}

`render`에서 `streamUI`로 마이그레이션 (Migrating from `render` to `streamUI`)

AI SDK RSC API는 3.0 버전의 일부로 출시됐어요. 이 API는 OpenAI 모델로 streamable UI를 만들기 위한 헬퍼 함수인 render 함수를 도입했어요. 새 AI SDK Core API로 호환되는 모든 프로바이더에서 streamable UI를 만들 수 있게 됐어요.

다음 예제 Server Action은 OpenAI의 모델 프로바이더를 직접 사용하는 render 함수를 사용해요. 먼저 OpenAI SDK로 OpenAI 프로바이더 인스턴스를 만들어요. 그런 다음 툴의 render 키에 정의된 React Server Component를 반환하는 툴과 함께 그것을 render 함수의 provider 키에 전달해요.

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} />;
        },
      },
    },
  });
}

새 streamUI 함수로 이제 호환되는 모든 AI SDK 프로바이더를 사용할 수 있어요. 이 예제에서는 AI SDK OpenAI 프로바이더를 임포트해요. 그런 다음 새 streamUI 함수의 model 키에 전달해요. 마지막으로 툴을 선언하고, 툴의 generate 키에 정의된 React Server Component를 반환해요.

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: __MODEL__,
    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;
}

AI SDK 3.0 → 3.1 마이그레이션