Getting Started with Vercel AI SDK로 AI 앱 개발하기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

인공지능, DevOps

대상자

*대상**: AI 앱 개발에 관심 있는 개발자, Next.js 및 TypeScript 기반 프로젝트를 진행하는 개발자
*난이도**: 초보자 ~ 중급자 (Next.js 기초 지식 필요)

핵심 요약

3가지 핵심 구성 요소
streamText() 또는 streamObject()로 실시간 스트리밍 API 라우트 구현
Strongly-typed helpers (Zod 스키마, tool() 정의)로 모델 기능 확장
useChat() 또는 experimental_useObject()로 반응형 UI 훅 연결
핵심 기능:
streamText() → LLM 응답 스트리밍 (GPT-4o 지원)
tool() + execute() → DB/기상 정보 등 외부 API 연동
MCP (Model Context Protocol) → LLM이 자동으로 도구 인식 가능
배포: Vercel에 배포 시 스트리밍 기능 자동 지원

섹션별 세부 요약

1. 기본 설정 및 설치

pnpm add ai @ai-sdk/openai로 SDK 설치
npx create-next-app my-ai-app --ts로 Next.js 프로젝트 생성
TypeScript 기반 환경에서 작동 가능 (Next.js, SvelteKit, Node 등)

2. 스트리밍 API 라우트 구현

streamText() 사용 예시:

```ts

export async function POST(req: Request) {

const { messages } = await req.json();

const { textStream } = await streamText({

model: openai('gpt-4o'),

prompt: messages,

});

return textStream.toDataStreamResponse();

}

```

기능: LLM(Like GPT-4o)에 요청 후 토큰 단위로 실시간 스트리밍

3. UI 훅 구현

useChat() 훅 사용 예시:

```tsx

'use client';

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

export default function Chat() {

const { messages, input, handleInputChange, handleSubmit } = useChat();

return (

{messages.map(m => (

{m.role}: {m.content}

))}

value={input}

onChange={handleInputChange}

className="border p-2 w-full"

placeholder="Ask me anything…"

);

}

```

특징: 메시지가 도착하는 즉시 UI 업데이트

4. 도구(Tools) 및 MCP 활용

도구 정의 예시:

```ts

const weatherTool = tool({

description: 'Get the weather in a location',

parameters: z.object({ location: z.string() }),

execute: async ({ location }) => ({

location,

temperature: 68 + Math.floor(Math.random() * 11) - 5,

}),

});

```

MCP: 도구를 자동으로 LLM에 노출 (SDK 내장 실험적 클라이언트 지원)

5. 배포 및 확장

Vercel 배포: 스트리밍 기능 자동 지원
추천 템플릿:
Pinecone-RAG (벡터 검색)
Supabase-starter (파일 저장소)
추적 기능: Langfuse 또는 OpenTelemetry 활용 (SDK v3.3 이상)

결론

핵심 팁: streamText() + useChat()으로 최소한의 코드로 실시간 AI 챗봇 구현 가능
추천: MCP 및 도구 활용으로 LLM 기능 확장, Vercel 템플릿 활용해 RAG/파일 저장 기능 통합
배포: Vercel에 배포 시 스트리밍 기능 자동 지원 (추가 설정 필요 없음)