Ugrás a tartalomra
BILDR.HUB
← Blog·engineering7 min read

Vercel AI SDK, gyakorlati bemutató éles projektből

Streaming, tool calls, RAG, structured output egy SDK-ban. Mit ad ma a Vercel AI SDK, és miért használjuk minden új AI feature-höz.

Turny Bátor·ügyvezető, BILDR HUB·
Vercel AI SDK, gyakorlati bemutató éles projektből

A Vercel AI SDK az utóbbi évben odáig fejlődött, hogy ha új AI feature-t kell beépíteni egy webappba, alapból ezzel kezdek. Modell-agnosztikus (OpenAI, Anthropic, Google, Mistral, helyi Ollama), streaming first, és a React komponens szintjén is van hozzá kapcsolódás.

Mit tesz az asztalra

  • generateText és streamText: egységes API minden provider felé.
  • generateObject: Zod schema alapján structured output, type-safe.
  • Tool calling: ugyanaz a sémadefiníció minden modell mögött.
  • useChat / useCompletion hookok: a UI-streaminget 4 sor kód megoldja Next-ben.
  • Middleware: caching, logging, rate limit közbeillesztés provider előtt.

Egy streaming chat endpoint

import { streamText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

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

  const result = await streamText({
    model: anthropic('claude-sonnet-4-5'),
    system: 'Magyar nyelvű ügyfélszolgálati asszisztens vagy.',
    messages,
    maxSteps: 5,
  });

  return result.toDataStreamResponse();
}

Amire fókuszáljunk

Az SDK-t addig érdemes előnyben részesíteni a natív provider SDK-val szemben, amíg a feature-eid mindegyike megtalálható benne. Amint olyan specifikus dolgot akarsz amit csak az Anthropic adminisztrátor SDK ad (pl. native message batching, vagy provider-specifikus extended thinking parameter), simán le tudsz menni a natív SDK-ra anélkül, hogy az AI SDK-t kihajítanád, csak azt a route-ot írod át.

Buktatók amit éles projektben tanultunk

  • A streaming response-t a Cloudflare Workers-ben nem mindig könnyű megfelelő content-encoding-gal kiküldeni. ReadableStream igen, de a kliens oldalon a decoder beállítása fontos.
  • A useChat hook a state-et a kliensen tárolja, long session-nél ezt át kell tenni szerveroldalra (KV vagy DB).
  • A tool callok streaming módban később jönnek meg mint vártad, a UI-t úgy építsd, hogy a tool eredmény külön block legyen.
  • A generateObject Zod schema-ja TÉNYLEG strict, egy optional mező nélküli prompt sokszor visszadob hibát.

Mikor NE használd

Pure backend agent-eknél (cron job, queue worker, scheduled task) gyakran közvetlenül a natív Claude SDK vagy az OpenAI SDK kevesebb absztrakcióval olcsóbb. Az AI SDK ereje a UI streaminghez és a React komponensek köré épített dev experience.

A szerző

Turny Bátor

ügyvezető, BILDR HUB

Egyeztetés