Vercel AI SDK란?
Vercel AI SDK는 OpenAI, Anthropic, Google 등 다양한 LLM 프로바이더를 통합하는 오픈소스 라이브러리입니다. 특히 스트리밍 응답을 간단하게 구현할 수 있어 챗봇, 자동완성, 코드 생성 등 AI 기능을 빠르게 프로덕션에 올릴 수 있습니다. SvelteKit과의 궁합도 훌륭해서 서버 액션과 스트림을 자연스럽게 연결할 수 있습니다.
이 글에서는 Vercel AI SDK를 SvelteKit에 연동해 Claude와 GPT-4o를 동시에 지원하는 스트리밍 챗봇을 만드는 방법을 단계별로 살펴봅니다. 대화 히스토리 관리와 멀티 모델 전환 기능까지 실전 코드로 정리했습니다.
프로젝트 셋업
패키지 설치
SvelteKit 프로젝트에 AI SDK와 사용할 모델 프로바이더를 설치합니다.
# Vercel AI SDK 코어 + 프로바이더 설치
npm install ai @ai-sdk/openai @ai-sdk/anthropic
# 환경변수 설정 (.env)
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...서버 엔드포인트 구성
SvelteKit의 +server.ts를 활용해 스트리밍 응답을 처리하는 API 엔드포인트를 만듭니다. AI SDK의 streamText 함수가 핵심입니다.
// src/routes/api/chat/+server.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
import type { RequestHandler } from './$types';
export const POST: RequestHandler = async ({ request }) => {
const { messages, model = 'gpt-4o' } = await request.json();
// 모델 선택 로직
const selectedModel =
model === 'claude-3-5-sonnet'
? anthropic('claude-3-5-sonnet-20241022')
: openai('gpt-4o');
const result = streamText({
model: selectedModel,
messages,
system: '당신은 친절한 AI 어시스턴트입니다. 항상 한국어로 답변합니다.',
});
return result.toDataStreamResponse();
};SvelteKit 프론트엔드 구현
useChat 훅으로 상태 관리
AI SDK는 useChat 훅을 제공합니다. 메시지 상태, 입력 처리, 스트리밍 상태를 모두 자동으로 관리해줘서 프론트엔드 코드가 매우 간결해집니다.
<!-- src/routes/chat/+page.svelte -->
<script lang="ts">
import { useChat } from '@ai-sdk/svelte';
let selectedModel = $state('gpt-4o');
const { messages, input, handleSubmit, isLoading, stop } = useChat({
api: '/api/chat',
body: { model: selectedModel },
onError: (err) => {
console.error('Chat error:', err);
},
});
</script>
<div class="chat-container">
<!-- 모델 선택 -->
<select bind:value={selectedModel}>
<option value="gpt-4o">GPT-4o</option>
<option value="claude-3-5-sonnet">Claude 3.5 Sonnet</option>
</select>
<!-- 메시지 목록 -->
<div class="messages">
{#each $messages as message}
<div class="message {message.role}">
<strong>{message.role === 'user' ? '나' : 'AI'}</strong>
<p>{message.content}</p>
</div>
{/each}
{#if $isLoading}
<div class="loading">응답 생성 중...</div>
{/if}
</div>
<!-- 입력 폼 -->
<form onsubmit={handleSubmit}>
<input
bind:value={$input}
placeholder="메시지를 입력하세요..."
disabled={$isLoading}
/>
<button type="submit" disabled={$isLoading}>전송</button>
{#if $isLoading}
<button type="button" onclick={stop}>중지</button>
{/if}
</form>
</div>대화 히스토리 관리와 영속성
세션 저장 전략
실제 서비스에서는 대화 히스토리를 DB에 저장해야 합니다. useChat의 initialMessages 옵션과 onFinish 콜백을 활용하면 깔끔하게 처리할 수 있습니다.
히스토리 저장 패턴의 핵심은 스트리밍이 완전히 끝난 시점(onFinish)에 DB에 저장하는 것입니다. 중간에 저장하면 불완전한 응답이 남을 수 있습니다.
토큰 한도 관리
대화가 길어지면 컨텍스트 윈도우 한도를 넘을 수 있습니다. AI SDK는 maxTokens와 함께 메시지 슬라이딩 윈도우 패턴을 쉽게 구현할 수 있습니다. 최근 N개 메시지만 전송하거나, 요약 프롬프트를 앞에 붙이는 방식이 일반적입니다.
멀티 모델 전환 구현 시 주의사항
Claude와 GPT를 동시에 지원할 때 가장 큰 함정은 메시지 포맷 차이입니다. AI SDK가 내부적으로 정규화해주지만, 시스템 프롬프트 처리 방식이 프로바이더마다 다를 수 있습니다. Claude는 시스템 메시지가 별도 파라미터로 처리되는 반면, 일부 모델은 messages 배열에 포함됩니다. streamText의 system 옵션을 사용하면 이 차이를 추상화할 수 있습니다.
또한 에러 핸들링도 중요합니다. API 레이트 리밋, 네트워크 오류, 컨텍스트 초과 등 다양한 오류가 발생할 수 있으므로 onError 콜백에서 사용자에게 명확한 피드백을 제공해야 합니다.
스트리밍 성능 최적화
스트리밍 챗봇에서 UX를 결정하는 핵심 요소는 첫 토큰 응답 시간(TTFT)입니다. 서버에서 클라이언트까지의 레이턴시를 줄이기 위해 다음을 고려하세요:
- Edge Runtime 사용: SvelteKit의
export const config = { runtime: 'edge' }로 Vercel Edge에서 실행하면 레이턴시가 크게 줄어듭니다. - 지역 설정: API 호출 지역을 LLM 프로바이더 서버와 가깝게 설정합니다.
- 스트림 버퍼링 최소화:
toDataStreamResponse()는 기본적으로 버퍼링 없이 즉시 전송하므로 별도 최적화가 필요 없습니다.
실전 배포 체크리스트
Vercel에 배포할 때는 환경변수 설정과 함께 몇 가지를 확인해야 합니다:
- Vercel 대시보드에서
OPENAI_API_KEY,ANTHROPIC_API_KEY환경변수 설정 - 스트리밍 응답 타임아웃: 기본 10초 → Hobby 플랜은 Edge Function으로 우회 필요
- CORS 설정: 외부 도메인에서 API를 호출하는 경우 헤더 추가
- 레이트 리밋: 프로덕션에서는 사용자별 요청 제한 구현 권장
마무리
코드벤터는 Vercel AI SDK와 같은 최신 AI 개발 도구를 실제 프로젝트에 적용하며 쌓아온 경험을 공유합니다. 글로벌 협력 네트워크를 바탕으로 다양한 AI 기반 서비스 개발을 진행하고 있으며, 스트리밍 챗봇부터 에이전틱 시스템까지 실전에서 검증된 패턴을 지속적으로 정리해 나갈 예정입니다. SvelteKit + AI SDK 조합은 빠른 프로토타이핑과 프로덕션 품질을 동시에 달성할 수 있는 강력한 선택지입니다.
