AI API 연동: OpenAI/Claude + 스트리밍

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

# .env.local
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...

// src/lib/ai.ts
import { generateText, streamText } from 'ai'
import { openai } from '@ai-sdk/openai'
import { anthropic } from '@ai-sdk/anthropic'

export async function generateCopy(prompt: string) {
  const { text, usage } = await generateText({
    model: anthropic('claude-sonnet-4-6'),
    system: '한국 마케터를 위한 카피라이터. 짧고 임팩트 있게.',
    prompt,
    maxTokens: 500,
    temperature: 0.7,
  })
  return { text, tokens: usage.totalTokens }
}

// src/app/api/chat/route.ts
import { streamText } from 'ai'
import { anthropic } from '@ai-sdk/anthropic'
import { createClient } from '@/lib/supabase/server'

export async function POST(request: Request) {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) return new Response('unauthorized', { status: 401 })

  const { messages } = await request.json()

  const result = streamText({
    model: anthropic('claude-sonnet-4-6'),
    system: '한국 마케터를 위한 카피라이터.',
    messages,
    onFinish: async ({ usage, text }) => {
      // 사용량·결과 DB 저장
      await supabase.from('generations').insert({
        user_id: user.id,
        prompt: messages[messages.length - 1].content,
        result: text,
        tokens_used: usage.totalTokens,
      })
    },
  })

  return result.toDataStreamResponse()
}

// src/app/(app)/generate/page.tsx
'use client'
import { useChat } from 'ai/react'

export default function GeneratePage() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
  })

  return (
    <div className="max-w-2xl mx-auto p-6">
      <div className="space-y-4 mb-6 min-h-[400px]">
        {messages.map(m => (
          <div key={m.id} className={m.role === 'user' ? 'text-right' : ''}>
            <div className={`inline-block p-3 rounded-lg ${
              m.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted'
            }`}>
              {m.content}
            </div>
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="원하는 카피를 설명하세요"
          className="flex-1 px-3 py-2 border rounded-md"
        />
        <button disabled={isLoading} className="bg-primary text-primary-foreground px-4 py-2 rounded">
          {isLoading ? '생성 중...' : '생성'}
        </button>
      </form>
    </div>
  )
}

import { z } from 'zod'
import { generateObject } from 'ai'

const schema = z.object({
  variants: z.array(z.object({
    text: z.string(),
    tone: z.enum(['friendly', 'professional', 'playful']),
    length: z.number(),
  })).length(5),
})

const { object } = await generateObject({
  model: anthropic('claude-sonnet-4-6'),
  schema,
  prompt: '여름 세일 30% 카피 5가지 톤별',
})
// object.variants: [{ text, tone, length }, ...]

async function generateWithFallback(prompt: string) {
  try {
    return await generateText({
      model: anthropic('claude-sonnet-4-6'),
      prompt,
    })
  } catch (err) {
    console.warn('Anthropic 실패, OpenAI fallback')
    return await generateText({
      model: openai('gpt-5.5'),
      prompt,
    })
  }
}

import { APICallError } from 'ai'

try {
  const result = await generateText({ ... })
} catch (err) {
  if (APICallError.isInstance(err)) {
    if (err.statusCode === 429) {
      return { error: 'AI 서버 과부하. 잠시 후 재시도.' }
    }
    if (err.statusCode === 401) {
      return { error: '인증 실패. 관리자 문의.' }
    }
  }
  throw err
}

import { unstable_cache } from 'next/cache'

const cachedGenerate = unstable_cache(
  generateCopy,
  ['ai-generate'],
  { revalidate: 3600 }  // 1시간
)