Vercel AI SDK 완전 가이드: Next.js에 AI 채팅·스트리밍 붙이기 (2025)

pnpm add ai @ai-sdk/openai @ai-sdk/anthropic

import { openai } from '@ai-sdk/openai'
import { streamText } from 'ai'

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

  const result = streamText({
    model: openai('gpt-4o-mini'),
    system: '당신은 친절한 AI 어시스턴트입니다.',
    messages,
  })

  return result.toDataStreamResponse()
}

'use client'

import { useChat } from 'ai/react'

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

  return (
    <div className="flex flex-col h-screen max-w-2xl mx-auto p-4">
      <div className="flex-1 overflow-y-auto space-y-4">
        {messages.map(m => (
          <div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
            <span className="inline-block bg-gray-100 rounded-lg px-4 py-2">
              {m.content}
            </span>
          </div>
        ))}
        {isLoading && <div className="text-gray-400">생각 중...</div>}
      </div>

      <form onSubmit={handleSubmit} className="flex gap-2 mt-4">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="메시지를 입력하세요..."
          className="flex-1 border rounded-lg px-4 py-2"
        />
        <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded-lg">
          전송
        </button>
      </form>
    </div>
  )
}

// OpenAI → Claude로 교체: 딱 2줄
import { anthropic } from '@ai-sdk/anthropic'
// import { openai } from '@ai-sdk/openai'

const result = streamText({
  model: anthropic('claude-sonnet-4-6-20251001'),
  // model: openai('gpt-4o'),
  messages,
})

import { generateObject } from 'ai'
import { openai } from '@ai-sdk/openai'
import { z } from 'zod'

// Zod 스키마로 출력 형식 정의
const ProductSchema = z.object({
  name: z.string().describe('상품명'),
  category: z.enum(['전자제품', '의류', '식품', '기타']),
  sentiment: z.enum(['긍정', '부정', '중립']),
  keyIssues: z.array(z.string()).describe('주요 문제점 목록'),
  rating: z.number().min(1).max(5),
})

export async function analyzeReview(reviewText: string) {
  const { object } = await generateObject({
    model: openai('gpt-4o-mini'),
    schema: ProductSchema,
    prompt: `다음 리뷰를 분석하세요: ${reviewText}`,
  })

  return object
  // { name: "...", category: "전자제품", sentiment: "부정", keyIssues: [...], rating: 2 }
}

import { streamText, tool } from 'ai'
import { openai } from '@ai-sdk/openai'
import { z } from 'zod'

const result = streamText({
  model: openai('gpt-4o'),
  tools: {
    getWeather: tool({
      description: '특정 도시의 날씨를 조회합니다',
      parameters: z.object({
        city: z.string().describe('도시명'),
      }),
      execute: async ({ city }) => {
        // 실제 날씨 API 호출
        const response = await fetch(`https://api.weather.com/${city}`)
        return response.json()
      },
    }),

    searchDatabase: tool({
      description: '제품 데이터베이스에서 검색합니다',
      parameters: z.object({
        query: z.string(),
        limit: z.number().default(5),
      }),
      execute: async ({ query, limit }) => {
        return await db.products.search(query, limit)
      },
    }),
  },
  messages,
  maxSteps: 5, // 최대 도구 호출 횟수
})

'use client'

import { useCompletion } from 'ai/react'

export function SummaryButton({ article }: { article: string }) {
  const { completion, complete, isLoading } = useCompletion({
    api: '/api/summarize',
  })

  return (
    <div>
      <button
        onClick={() => complete(article)}
        disabled={isLoading}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        {isLoading ? '요약 중...' : '요약하기'}
      </button>
      {completion && (
        <div className="mt-4 p-4 bg-gray-50 rounded">
          {completion}
        </div>
      )}
    </div>
  )
}

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

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

    // 레이트 리밋 확인
    const allowed = await checkRateLimit(userId)
    if (!allowed) {
      return NextResponse.json(
        { error: '요청 한도를 초과했습니다. 잠시 후 다시 시도해주세요.' },
        { status: 429 }
      )
    }

    const result = streamText({
      model: openai('gpt-4o'),
      messages,
      onFinish: async ({ usage, text }) => {
        // 사용량 로깅
        await logUsage({ userId, tokens: usage.totalTokens, chars: text.length })
      },
    })

    return result.toDataStreamResponse()
  } catch (error) {
    console.error('AI API 에러:', error)
    return NextResponse.json({ error: '서버 오류가 발생했습니다.' }, { status: 500 })
  }
}