Vercel AI SDK 기반 스트리밍 챗봇 개발

Vercel AI SDK

Vercel AI SDK는 Next.js를 만든 Vercel에서 제공하는 오픈소스 라이브러리로, 다양한 AI 모델과 쉽게 연동하고 챗봇 인터페이스를 구축할 수 있도록 도와준다.

주요 특징

• 다양한 AI 모델(OpenAI, Claude, Gemini 등)과 연동 가능
• 실시간 스트리밍 응답 처리 지원
• 간단한 코드로 채팅 인터페이스 구현 가능
• useChat() 훅, streamText() API 제공

---

사용 가능한 AI 모델

Providers (클라우드 기반)

• OpenAI (gpt-4, gpt-3.5)
• Anthropic (claude-*)
• Google (gemini)
• Mistral, Cohere, Perplexity 등 다수

Self-Hosted (로컬 실행 모델)

• Ollama
• LM Studio
• Baseten

💬 추가적으로 OpenAI 호환 API를 따르는 모든 모델도 사용 가능

---

API 키 발급

• 발급 주소: https://platform.openai.com/settings/organization/api-keys

✅ 실습에서는 간편하게 발급한 키로 진행하나, 실제 프로젝트에선 카드 등록 필요

---

환경 세팅

npm install ai @ai-sdk/react

.env.local에 API 키 설정:

OPENAI_API_KEY=sk-...

---

챗봇 개발 실습 흐름

[Client] useChat() 훅 사용

'use client';
import { useChat } from '@ai-sdk/react';

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

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>
          <b>{msg.role === 'user' ? '🧑' : '🤖'}</b> {msg.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          name="prompt"
          value={input}
          onChange={handleInputChange}
          placeholder="메시지를 입력하세요"
        />
        <button type="submit" disabled={isLoading}>전송</button>
      </form>
    </div>
  );
}

이 훅은 입력 상태 관리 + 메시지 스트리밍 + 자동 렌더링까지 모두 처리한다.

---

[Server] streamText() 사용

// /app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export const maxDuration = 30;

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

  const result = await streamText({
    model: openai('gpt-4-turbo'),
    system: 'You are a helpful assistant.',
    messages,
  });

  return result.toDataStreamResponse();
}

서버는 클라이언트로부터 메시지를 받아, AI 모델에 요청 후 스트리밍 응답을 반환한다.

---

Message 객체 구조

{
  "id": "abc123",
  "createdAt": "2025-04-07T09:48:44.750Z",
  "role": "user",
  "content": "안녕?",
  "parts": [
    { "type": "text", "text": "안녕?" }
  ]
}

필드 설명

• role: "user" | "assistant"
• content: 메시지 본문 요약
• parts: 실제 메시지를 구성하는 세부 단위 (텍스트, 코드 등)

---

스트리밍 챗봇 작동 흐름 요약

[사용자 입력]
   ↓
[useChat() 훅]
   ↓
[POST /api/chat]
   ↓
[streamText() → GPT 호출]
   ↓
[toDataStreamResponse()]
   ↓
[Client에서 실시간 표시]

---

확장

기능	설명
✅ DB 연동	메시지 로그를 Supabase 등 DB에 저장
✅ Function Calling	모델이 외부 API 호출 가능
✅ Role 프롬프트 커스터마이징	어시스턴트 말투, 역할 제어
✅ 채팅 UI 개선	사용자 프로필, 시간 표시 등
✅ 파일 업로드	이미지 → 설명, PDF → 요약 등 확장 가능

---

정리

Vercel AI SDK는 복잡한 AI 모델 연동을 Next.js 환경에서 매우 간단하게 구현할 수 있도록 도와주는 도구이다. useChat()과 streamText()를 이용하면 실시간 스트리밍 챗봇을 빠르게 구축할 수 있다.

실습부터 실전까지 한 번에 구현 가능한 LLM 연동 툴킷