Vercel AI SDK로 기본 제공 프롬프트 API 사용

Thomas Steiner

게시일: 2026년 7월 16일

Vercel AI SDK는 Next.js, React, Svelte, Vue, Angular와 같은 인기 있는 UI 프레임워크와 Node.js와 같은 런타임을 사용하여 AI 기반 애플리케이션 및 에이전트를 빌드할 수 있도록 설계된 제공업체에 구애받지 않는 TypeScript 툴킷입니다. 대부분의 제공업체는 클라우드 기반이지만, 2부작 시리즈의 첫 번째 가이드 는 Google의 지원을 받은 Jakob Hoeg Mørk가 만든 Browser AI라는 커뮤니티 제공업체에 중점을 둡니다. Browser AI를 사용하면 Vercel의 AI SDK로 Prompt API를 사용할 수 있습니다. 그런 다음 시리즈의 2부에서는 AI 애플리케이션에 그래픽 사용자 인터페이스를 추가하는 방법을 설명합니다.

라이브러리 설치

@browser-ai/core 패키지는 Prompt API의 AI SDK 제공업체입니다. npm으로 설치할 수 있습니다. 기본 Vercel AI SDK는 패키지에 의해 피어 종속 항목으로 자동 설치됩니다.

npm install @browser-ai/core

기본 사용법

프로바이더를 사용하려면 다음 단계를 따르세요.

  1. @browser-ai/core 패키지에서 browserAI 생성자를 가져옵니다.
  2. Vercel AI SDK에서 generateText() 또는 streamText() 함수를 가져옵니다. 두 함수 모두 텍스트를 생성하고 언어 모델을 사용하여 지정된 프롬프트의 도구를 호출합니다.
  • generateText() 함수는 스트리밍되지 않으며 짧은 출력 또는 전체 출력이 수신된 후에만 계속할 수 있는 출력에 적합합니다.
  • streamText() 함수는 언어 모델에서 텍스트 생성을 스트리밍합니다. 이 함수는 채팅봇 및 기타 실시간 애플리케이션과 같은 대화형 사용 사례에 사용할 수 있습니다.

모델 인스턴스를 만들려면 다음 안내를 따르세요.

  1. browserAI()를 호출합니다. 참고: 항상 모델의 availability()를 확인하는 것이 좋습니다. 이를 통해 모델이 'unavailable'일 때 대체를 사용하거나 (하이브리드 사용 참고) 모델이 'downloadable' 또는 'downloading'일 때 진행률 업데이트를 표시할 수 있습니다.

  2. 그런 다음 generateText() 또는 streamText()를 호출할 수 있습니다. 전체 매개변수 목록은 Vercel AI SDK 문서를 참고하세요. 예를 들어 다음 코드 샘플과 같이 prompt를 직접 전달하는 대신 멀티샷 프롬프팅을 위해 더 복잡한 messages 객체를 전달하거나 system 프롬프트를 전달할 수도 있습니다.

import { browserAI } from '@browser-ai/core';
import { generateText, streamText } from 'ai';

(async () => {
  const model = browserAI();
  const availability = await model.availability();

  if (availability === 'unavailable') {
    console.log('Your browser cannot run the built-in AI model.');
    return;
  }

  if (availability === 'downloadable' || availability === 'downloading') {
    await model.createSessionWithProgress((progress) => {
      console.log(`Download progress: ${Math.round(progress * 100)}%`);
    });
  }

  // Non-streaming text generation.
  const { text } = await generateText({
    model,
    prompt: 'Tell me a short joke',
  });
  console.log(text);

  // Streaming text generation.
  const result = streamText({
    model,
    prompt: 'Tell me a long joke',
  });

  for await (const chunk of result.textStream) {
    console.log(chunk);
  }
})();

멀티모달 사용

@browser-ai/core 패키지는 messages 배열의 콘텐츠 객체에서 type: 'file' 객체를 사용하여 멀티모달 입력을 지원합니다.

content 객체 필드 (type: 'file')

필드 허용되는 값 유형 설명 

type


'file'

이 콘텐츠 객체를 파일 입력으로 표시합니다. 

data


string | Uint8Array | Buffer | ArrayBuffer | URL

지원되는 여러 형식 중 하나의 파일 콘텐츠입니다.

data가 string인 경우 다음 중 하나여야 합니다.

형식 설명
Base64로 인코딩된 콘텐츠 Base64로 인코딩된 원시 파일 바이트입니다.
Base64 데이터 URL 예: data:image/png;base64,...
http(s) URL 파일이 가져올 원격 URL입니다.

예를 보려면 다음 코드 스니펫을 참고하세요.

import { streamText } from 'ai';
import { browserAI } from '@browser-ai/core';

const base64ImageData = await getBase64ImageData();
const audioData = await getAudioBuffer();

const result = streamText({
  model: browserAI(),
  messages: [
    {
      role: 'user',
      content: [
        { type: 'text', text: "What's in this image?" },
        { type: 'file', mediaType: 'image/png', data: base64ImageData },
      ],
    },
    {
      role: 'user',
      content: [
        { type: 'text', text: 'Transcribe this audio file!' },
        { type: 'file', mediaType: 'audio/mp3', data: audioData },
      ],
    },
  ],
});

for await (const chunk of result.textStream) {
  console.log(chunk);
}

구조화된 출력

Vercel AI SDK는 정적 유형 추론을 사용하는 zod인 TypeScript 우선 스키마 검증을 통해 구조화된 출력을 지원합니다. 자세한 내용은 zod의 스키마 정의 문서를 참고하세요.

스키마와 일치하는 JSON 객체를 요청하려면 output: Output.object({ schema })를 generateText() 또는 streamText()에 전달합니다.

  • Output.object()가 포함된 generateText()는 생성이 완료되면 output 필드에 최종 JSON 객체를 반환합니다.
  • Output.object()가 포함된 streamText()는 각 중간 결과가 JSON으로 올바르게 파싱되도록 보장되는 partialOutputStream 비동기 반복 가능 항목을 제공합니다. 예를 들어 스키마에서 두 개의 숫자 배열을 적용하는 경우 첫 번째 부분 결과로 [], 두 번째 부분 결과로 [123], 최종 결과로 [123, 456]을 받게 됩니다.
import { browserAI } from '@browser-ai/core';
import { generateText, streamText, Output } from 'ai';
import z from 'zod';

const model = browserAI();

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

const prompt = 'Generate a lasagna recipe.';

// Non-streaming object generation.
const { output } = await generateText({
  model,
  output: Output.object({ schema }),
  prompt,
});

console.log(output);

// Streaming object generation.
const { partialOutputStream } = streamText({
  model,
  output: Output.object({ schema }),
  prompt,
});

for await (const partialObject of partialOutputStream) {
  console.log(partialObject);
}

하이브리드 사용

Vercel의 AI SDK가 진가를 발휘하는 곳은 하이브리드 사용입니다. 기본 제공업체의 하위 수준 구현 위에 더 높은 수준의 추상화 레이어를 제공합니다. Prompt API를 제공업체로 사용하는 경우 browserAI 생성자를 호출하여 model을 만듭니다.

import { browserAI } from '@browser-ai/core';

const model = browserAI();

다른 제공업체(예: Google 생성형 AI 프로바이더)를 사용하려면 다음 단계를 따르세요.

  1. 선택한 제공업체를 설치합니다.

    npm install @ai-sdk/google

  2. 제공업체의 생성자를 사용하여 model을 인스턴스화합니다. 일반적으로 Google 생성형 AI와 같은 클라우드 제공업체의 경우 API 키를 전달해야 합니다. Google 생성형 AI 제공업체의 경우 클라우드 모델 식별자(예: 'gemini-2.5-flash')를 전달할 수도 있습니다. streamText() 호출과 같은 나머지 코드는 정확히 동일하게 유지됩니다.

    import { createGoogleGenerativeAI } from '@ai-sdk/google';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

const google = createGoogleGenerativeAI({ apiKey: API_KEY });
const model = google('gemini-2.5-flash');

클라우드 대체

클래식 하이브리드 사용 사례는 Prompt API를 사용할 수 있을 때 사용하고 다른 상황에서는 클라우드 제공업체로 대체하는 것입니다. Prompt API를 사용할 수 있는지 확인하려면 @browser-ai/core 패키지에서 doesBrowserSupportBuiltInAI() 함수를 제공합니다. 이 함수를 사용하여 model을 클라우드 기반 모델 또는 기본 제공 모델로 동적으로 인스턴스화할 수 있습니다.

import { doesBrowserSupportBuiltInAI } from '@browser-ai/core';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

const model = await (async () => {
  if (doesBrowserSupportBuiltInAI()) {
    const { browserAI } = await import('@browser-ai/core');
    return browserAI();
  }
  const { createGoogleGenerativeAI } = await import('@ai-sdk/google');
  const google = createGoogleGenerativeAI({ apiKey: API_KEY });
  return google('gemini-2.5-flash');
})();

기본 제공 대체

또 다른 하이브리드 사용 사례는 온라인 상태일 때 클라우드 제공업체를 사용하는 것이 좋지만 Prompt API가 지원되는 경우 기본 제공 제공업체로 대체하는 것입니다.

import { doesBrowserSupportBuiltInAI } from '@browser-ai/core';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

let model;

const switchProvider = async (forceCloud = false) => {
  model = await (async () => {
    if (navigator.onLine || forceCloud) {
      const { createGoogleGenerativeAI } = await import('@ai-sdk/google');
      const google = createGoogleGenerativeAI({ apiKey: API_KEY });
      return google('gemini-2.5-flash');
    }
    const { browserAI } = await import('@browser-ai/core');
    return browserAI();
  })();
};

if (doesBrowserSupportBuiltInAI()) {
  window.addEventListener('online', switchProvider);
  window.addEventListener('offline', switchProvider);
}
await switchProvider(true);

데모

라이브 데모 를 사용하면 두 제공업체를 나란히 사용해 볼 수 있습니다. 라디오 버튼에서 클라우드 API (Gemini 2.5 Flash) 또는 기본 제공 AI를 선택하고 실행을 누르면 페이지에 네 개의 섹션이 순서대로 채워집니다. generateText()로 한 번에 생성된 짧은 농담, streamText()로 토큰별로 스트리밍된 긴 농담, 완전한 JSON 객체로 반환된 라자냐 레시피, 그리고 partialOutputStream를 사용하여 점진적으로 유효한 JSON으로 스트리밍된 동일한 레시피입니다. 기본 제공 AI를 선택했는데 브라우저에서 아직 모델을 다운로드하지 않은 경우 데모가 시작되기 전에 진행률 표시기가 표시됩니다.

Vercel AI 데모

다음 단계

이제 Vercel AI SDK로 Prompt API를 사용하는 방법을 알았으므로 다음 단계는 AI SDK UI 및 AI 요소를 사용하여 앱에 그래픽 사용자 인터페이스를 추가하는 것입니다.

AI SDK UI는 대화형 채팅, 완성, 어시스턴트 애플리케이션을 쉽게 빌드할 수 있도록 설계되었습니다. 프레임워크에 구애받지 않는 툴킷으로, 고급 AI 기능을 애플리케이션에 통합하는 과정을 간소화합니다.

AI 요소는 AI 기본 애플리케이션을 더 빠르게 빌드할 수 있도록 지원하는 구성요소 라이브러리 및 맞춤 레지스트리입니다. 대화, 메시지 등과 같은 사전 빌드된 구성요소를 제공합니다.

앱에 GUI를 추가하는 방법을 알아보려면 Prompt API와 함께 Vercel AI SDK UI 및 AI 요소 사용을 참고하세요.