import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
// Previne timeout-ul pe Vercel Serverless Functions
export const maxDuration = 30;
export async function POST(req: Request) {
const { messages } = await req.json();
const result = streamText({
model: openai('gpt-4o-mini'),
messages,
temperature: 0.7,
});
// Returnează un Response cu header-ul e corect de stream (text/event-stream)
return result.toDataStreamResponse();
}Dintr-un motiv greu de înțeles, încă văd dashboard-uri unde userul trimite un prompt și așteaptă 5 secunde cu un spinner obosit până când modelul termină de generat tot răspunsul. Trecerea la streaming prin Server-Sent Events (SSE) scade latența percepută de la peste 4 secunde la vreo 180ms TTFB. În ecuația asta, Vercel AI SDK elimină cam 80% din codul boilerplate pe care îl scriam acum un an.
De la un POST clasic la Server-Sent Events
Am avut un proiect recent cu 12k request-uri pe zi unde internii se plângeau că „aplicația se blochează” la răspunsuri mai lungi. În fundal, un API route de Next.js aștepta rezoluția completă de la OpenAI, apoi trimitea un JSON uriaș înapoi. Greșit.
WebSocket-urile sunt overkill când tot ce vrei e să împingi text dintr-o singură direcție (server -> client). SSE (Server-Sent Events) folosește o conexiune HTTP standard peste care serverul trimite chunks de text pe măsură ce le primește de la furnizorul de AI. Utilizatorul începe să citească prima propoziție aproape instant, exact cum se întâmplă pe ChatGPT.
Unde te ajută Vercel AI SDK și unde se rupe filmul
Abstracția oferită de pachetul ai și hook-ul useChat e spectaculoasă pentru cazuri standard. Îți gestionează automat starea mesajelor, auto-scroll-ul, input-ul, flag-ul de isLoading și parsarea stream-ului pe client.
Dar există un trade-off sincer pe care trebuie să-l știi înainte să te arunci cu capul înainte. useChat e excelent pentru UI-uri de tip conversational chat sau text generation simplu. În schimb, dacă ai nevoie de streaming de date structurate complexe (de exemplu JSON schema partial, unde trebuie să validezi fiecare câmp pe măsură ce vine) sau dacă vrei să captezi erorile de rețea la jumătatea stream-ului și să faci resume din ultimul chunk, ești pe cont propriu. Va trebui să renunți la abstractions și să lucrezi direct cu ReadableStream pe client.
Cum arată setup-ul minim funcțional
În App Router, un Route Handler care face stream e surprinzător de curat. Codul din exemplul de mai jos se ocupă de legătura directă dintre OpenAI API și clientul tău. Pe partea de client, importi doar useChat din ai/react și îi treci direct endpoint-ul.
Un mic detaliu de producție: nu uita să setezi maxDuration dacă ești pe Vercel Hobby sau Pro, altfel Serverless Function-ul va da timeout după 10-15 secunde la răspunsuri foarte lungi.
Voi ce folosiți pentru interfețele cu LLM în producție? Rămâneți pe Vercel AI SDK sau v-ați scris propriile wrappers peste fetch și ReadableStream?