# Vercel AI SDK로 스트리밍 챗봇 만들기


안녕하세요! 오늘은 **Vercel AI SDK**를 사용해서 실시간 스트리밍 챗봇을 만드는 방법을 알아보겠습니다. 스트리밍이라니 어려울까요? 아니요, 생각보다 훨씬 간단합니다! 🚀

## 스트리밍이란 뭔가요?

일반적인 AI 채팅을 생각해보세요. 사용자가 질문하고… 몇 초 기다리고… 답변이 한 번에 툭! 나타나죠.

**스트리밍**은 다릅니다. AI가 답변을 생성하는 동안 실시간으로 글자가 하나씩 나타납니다. 마치 사람이 타이핑하는 것처럼 자연스럽습니다. 사용자 입장에서는 대기 시간이 줄어들어 훨씬 더 좋은 경험을 제공합니다!

## Vercel AI SDK 소개

Vercel AI SDK는 Next.js 및 다른 프레임워크에서 AI 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다.

**주요 장점:**
– ✅ 스트리밍 기능 내장
– ✅ 여러 AI 제공자 지원 (OpenAI, Anthropic, Google 등)
– ✅ 간단한 API
– ✅ TypeScript 완벽 지원

## 프로젝트 시작하기

먼저 새로운 Next.js 프로젝트를 만들어볼까요?

“`bash
npx create-next-app@latest my-streaming-chat
cd my-streaming-chat
npm install ai
“`

## 환경 설정

OpenAI API를 사용하려면 `.env.local` 파일에 API 키를 추가하세요:

“`env
OPENAI_API_KEY=your-api-key-here
“`

## 챗봇 UI 만들기

먼저 간단한 채팅 인터페이스를 만들어봅시다:

“`tsx
// app/page.tsx
‘use client’

import { useState } from ‘react’
import { useChat } from ‘ai/react’

export default function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat()

return (

)
}
“`

## API 라우트 설정

이제 AI가 응답하는 API 라우트를 만들어봅시다:

“`tsx
// app/api/chat/route.ts
import { openai } from ‘@ai-sdk/openai’
import { streamText } from ‘ai’

export const runtime = ‘edge’

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

const result = streamText({
model: openai(‘gpt-4o’),
messages,
})

return result.toDataStreamResponse()
}
“`

## 스트리밍 동작 원리

`streamText` 함수가 핵심입니다! 이 함수는:

1. OpenAI API에 요청을 보냅니다
2. 응답을 실시간으로 스트리밍합니다
3. 클라이언트로 데이터를 청크(조각) 단위로 전송합니다

`useChat` 훅은 이 스트림을 자동으로 처리해서 메시지를 실시간으로 표시해줍니다.

## 커스텀 스타일 추가하기

기본 스타일보다 예쁘게 꾸며봅시다:

“`tsx
// app/page.tsx
‘use client’

import { useChat } from ‘ai/react’

export default function Chat() {
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat()

return (

)
}
“`

## 더 많은 기능 추가하기

### 시스템 프롬프트 설정

“`tsx
// app/api/chat/route.ts
export async function POST(req: Request) {
const { messages } = await req.json()

const result = streamText({
model: openai(‘gpt-4o’),
system: ‘너는 친절하고 도움이 되는 AI 어시스턴트야. 한국어로 답변해줘.’,
messages,
})

return result.toDataStreamResponse()
}
“`

### 대화 기록 유지하기

“`tsx
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: ‘/api/chat’,
initialMessages: [
{
id: ‘1’,
role: ‘system’,
content: ‘너는 AI 코딩 튜터야. 초보자에게 쉽게 설명해줘.’,
}
]
})
“`

## 프로젝트 실행

이제 앱을 실행해볼까요?

“`bash
npm run dev
“`

`http://localhost:3000`에서 채팅을 테스트할 수 있습니다!

## 팁: 스트리밍 속도 최적화

스트리밍 속도가 느리다면 다음을 시도해보세요:

1. **빠른 모델 사용**: `gpt-3.5-turbo`나 `gpt-4o-mini`
2. **maxTokens 제한**: 너무 긴 응답 방지
3. **temperature 낮추기**: 더 일관된 응답

“`tsx
const result = streamText({
model: openai(‘gpt-4o-mini’),
maxTokens: 500,
temperature: 0.7,
messages,
})
“`

## 결론

축하합니다! 🎉 이제 Vercel AI SDK로 스트리밍 챗봇을 만들 수 있습니다.

**핵심 포인트:**
– ✅ `useChat` 훅으로 간단한 채팅 UI
– ✅ `streamText`로 스트리밍 API 구현
– ✅ 실시간 응답으로 사용자 경험 향상
– ✅ TypeScript로 안전한 개발

다음 단계로 무엇을 해볼까요?

– 📚 여러 AI 모델 비교해보기 (GPT-4, Claude, Gemini)
– 🎨 더 예쁜 UI 만들기 (shadcn/ui 사용)
– 🗄️ 대화 기록 저장하기 (Database 연동)
– 🔌 외부 API 연동하기 (날씨, 뉴스 등)

## 참고 자료

– [Vercel AI SDK 문서](https://sdk.vercel.ai/docs)
– [Vercel AI SDK 예제](https://sdk.vercel.ai/examples)
– [OpenAI API 문서](https://platform.openai.com/docs)

—

질문이 있거나 막히는 부분이 있다면 댓글로 알려주세요! 함께 해결해봐요 😊

**다음 포스팅:** Claude API 연동 가이드