Vercel AI SDK — Edge-First 아키텍처로 스트리밍 AI 앱 구축

// 제공자 추상화 계층
import { createOpenAI } from "@ai-sdk/openai";
import { createAnthropic } from "@ai-sdk/anthropic";
import { createGoogleGenerativeAI } from "@ai-sdk/google";

const openai = createOpenAI({ apiKey: process.env.OPENAI_API_KEY });
const anthropic = createAnthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

// 제공자Regardless 동일한 API 호출
const result = await streamText({
  model: openai("gpt-4o"),
  messages: [{ role: "user", content: "안녕!" }],
  system: "도움이 되는 어시스턴트입니다."
});

# TypeScript로 새로운 Next.js 프로젝트 생성
npx create-next-app@latest my-ai-app --typescript --tailwind --app

cd my-ai-app

# AI SDK 및 제공자 패키지 설치
npm install ai @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google
# 선택사항: 구조화된 출력
npm install zod

import { streamText } from "ai";
import { createOpenAI } from "@ai-sdk/openai";

const openai = createOpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: process.env.OPENAI_BASE_URL, // 선택사항: 호환 API용
});

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

  const result = streamText({
    model: openai("gpt-4o"),
    messages,
    system: `도움이 되는 프로그래밍 어시스턴트입니다.
    관련 시 코드 예시를 제공하세요.`,
    maxTokens: 2048,
    temperature: 0.7,
  });

  return result.toDataStreamResponse();
}

"use client";

import { useChat } from "ai/react";

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

  return (
    <div className="max-w-2xl mx-auto p-4">
      {/* 메시지 목록 */}
      <div className="space-y-4 mb-4">
        {messages.map((msg) => (
          <div
            key={msg.id}
            className={`p-3 rounded-lg ${
              msg.role === "user" ? "bg-blue-100 ml-8" : "bg-gray-100 mr-8"
            }`}
          >
            {msg.content}
          </div>
        ))}
      </div>

      {/* 입력 폼 */}
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="질문을 입력하세요..."
          className="flex-1 p-2 border rounded-lg"
        />
        <button
          type="submit"
          disabled={isLoading}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50"
        >
          {isLoading ? "생각 중..." : "보내기"}
        </button>
      </form>
    </div>
  );
}

import { createOpenAI } from "@ai-sdk/openai";
import { createAnthropic } from "@ai-sdk/anthropic";
import { createGoogleGenerativeAI } from "@ai-sdk/google";
import { streamText } from "ai";

const openai = createOpenAI({ apiKey: process.env.OPENAI_API_KEY });
const anthropic = createAnthropic({ apiKey: process.env.ANTHROPIC_API_KEY });
const google = createGoogleGenerativeAI({ apiKey: process.env.GOOGLE_API_KEY });

type TaskType = "creative" | "analytical" | "code" | "summary";

const modelRouter: Record<TaskType, any> = {
  creative: anthropic("claude-sonnet-4-20260514"),
  analytical: openai("o3-mini"),
  code: anthropic("claude-sonnet-4-20260514"),
  summary: google("gemini-2.0-flash"),
};

export async function POST(req: Request) {
  const { messages, taskType }: { messages: any[]; taskType: TaskType } = await req.json();
  const model = modelRouter[taskType] || modelRouter.creative;

  const result = streamText({
    model,
    messages,
    maxTokens: taskType === "code" ? 4096 : 1024,
    temperature: taskType === "creative" ? 0.9 : 0.3,
  });

  return result.toDataStreamResponse();
}

import { z } from "zod";
import { generateObject } from "ai";
import { createOpenAI } from "@ai-sdk/openai";

const ArticleSchema = z.object({
  title: z.string().describe("기사 제목"),
  summary: z.string().describe("한 문단 요약"),
  tags: z.array(z.string()).describe("관련 태그"),
  readingTime: z.number().describe("예상 읽기 시간(분)"),
  sentiment: z.enum(["positive", "neutral", "negative"]),
});

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

  const { object } = await generateObject({
    model: openai("gpt-4o"),
    schema: ArticleSchema,
    prompt: `이 텍스트를 분석하여 기사 메타데이터 추출: ${text}`,
    temperature: 0,
  });

  return Response.json(object);
}

import { embed, embedMany, streamText } from "ai";
import { createOpenAI } from "@ai-sdk/openai";
import { cosineSimilarity } from "ai/embeddings";

const openai = createOpenAI({ apiKey: process.env.OPENAI_API_KEY });

let documentVectors: { embedding: number[]; content: string }[] = [];

async function addDocuments(documents: string[]) {
  const { embeddings } = await embedMany({
    model: openai.embedding("text-embedding-3-small"),
    values: documents,
  });
  documentVectors = documents.map((content, i) => ({
    embedding: embeddings[i],
    content,
  }));
}

async function searchDocuments(query: string, topK: number = 3) {
  const { embedding } = await embed({
    model: openai.embedding("text-embedding-3-small"),
    value: query,
  });
  const scored = documentVectors
    .map((doc) => ({ ...doc, similarity: cosineSimilarity(embedding, doc.embedding) }))
    .sort((a, b) => b.similarity - a.similarity)
    .slice(0, topK);
  return scored.map((s) => s.content);
}

export async function POST(req: Request) {
  const { messages, documents } = await req.json();
  if (documents?.length) await addDocuments(documents);

  const lastMessage = messages[messages.length - 1];
  const context = await searchDocuments(lastMessage.content);

  const result = streamText({
    model: openai("gpt-4o"),
    messages,
    system: `다음 컨텍스트만 사용하여 답변하세요.
    컨텍스트에 관련 정보가 없으면 그렇게 말하세요.
    
    컨텍스트:
    ${context.join("\n\n")}
    `,
  });

  return result.toDataStreamResponse();
}

import { streamText, tool } from "ai";
import { createOpenAI } from "@ai-sdk/openai";
import { z } from "zod";

const openai = createOpenAI({ apiKey: process.env.OPENAI_API_KEY });

const result = streamText({
  model: openai("gpt-4o"),
  messages,
  tools: {
    searchWeb: tool({
      description: "현재 정보를 위해 웹 검색",
      parameters: z.object({
        query: z.string().describe("검색 쿼리"),
        maxResults: z.number().default(5),
      }),
      execute: async ({ query, maxResults }) => {
        const response = await fetch(
          `https://api.search.com/v1/search?q=${encodeURIComponent(query)}&limit=${maxResults}`
        );
        return response.json();
      },
    }),
    calculate: tool({
      description: "수학 계산 수행",
      parameters: z.object({ expression: z.string().describe("수학 표현식") }),
      execute: async ({ expression }) => {
        try { return { result: Function(`return ${expression}`)() }; }
        catch (e) { return { error: "잘못된 표현식" }; }
      },
    }),
  },
  maxSteps: 5, // 최대 5단계 도구 호출 허용
});

npm install @ai-sdk/react

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

export function AIChat() {
  const { messages, input, setInput, handleSubmit, isLoading, error, stop } = useChat({
    api: "/api/chat",
    onFinish: (message) => console.log("응답 완료:", message.content),
    onError: (error) => console.error("채팅 에러:", error),
  });

  return (
    <div className="ai-chat">
      <div className="space-y-2">
        {messages.map((m) => (
          <div key={m.id} className={`p-2 rounded ${m.role === "user" ? "bg-blue-100" : "bg-gray-100"}`}>
            {m.content}
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={(e) => setInput(e.target.value)} placeholder="무엇이든 물어보세요..." />
        {isLoading && <button onClick={stop}>중지</button>}
        {error && <div className="error">{error.message}</div>}
      </form>
    </div>
  );
}

# Vercel CLI 설치
npm i -g vercel

# 프로젝트 연결
vercel link

# 환경 변수 설정
vercel env add OPENAI_API_KEY

# 배포
vercel deploy --prod

import { toEdgeAPI } from "ai";

export const config = { runtime: "edge" };

export async function POST(req: Request) {
  const result = streamText({
    model: openai("gpt-4o"),
    messages: (await req.json()).messages,
  });
  return toEdgeAPI(result.toDataStreamResponse());
}

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
EXPOSE 3000
CMD ["npm", "start"]

export async function POST(req: Request) {
  const corsHeaders = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "POST, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Authorization",
  };
  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
}

const result = streamText({
  model: openai("o3-mini"),
  messages,
  maxTokens: 4096,
  timeout: 55000, // 55초(60초 엣지 제한 미만)
});

npm update ai @ai-sdk/openai

const cachedChat = cache(async (messages: any[]) => {
  const hash = JSON.stringify(messages);
  const cached = await redis.get(hash);
  if (cached) return JSON.parse(cached);
  const result = await streamText({ model: openai("gpt-4o"), messages });
  await redis.setex(hash, 3600, JSON.stringify(result));
  return result;
});

export function middleware(request: NextRequest) {
  const token = request.cookies.get("auth-token");
  if (!token && request.nextUrl.pathname.startsWith("/api/chat")) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
  return NextResponse.next();
}