Toți clienții mei din SUA mă întreabă același lucru: „Putem pune un asistent AI pe site?” Răspunsul e da, și e mai simplu decât cred cei mai mulți. Iată exact cum se face într-o aplicație Next.js, cu Vercel AI SDK.
Nu e un demo de jucărie. La final vei avea o interfață de chat reală, cu răspunsuri în streaming, legată la un LLM (un model de limbaj) și construită cu App Router, după un tipar care chiar e gata de producție.
Ce construiești
- O interfață de chat cu răspunsuri în streaming (nu aștepți să vină tot răspunsul)
- O rută de API în Next.js care face apelurile către AI pe server
- O structură curată de componente, pe care o poți pune în orice proiect existent
De ce Vercel AI SDK?
Ai putea apela direct OpenAI. Dar Vercel AI SDK îți dă:
- Streaming din start:
useChatse ocupă de toată starea în locul tău - Merge cu orice model: treci de la GPT-4o la Claude sau Gemini fără să rescrii logica
- Făcut pentru Next.js: App Router e suportat pe deplin
Pasul 1: Instalează dependențele
``bash
pnpm add ai @ai-sdk/react zod
`
Îți mai trebuie și o cheie API de la furnizorul modelului (OpenAI sau Anthropic) ori una prin Vercel AI Gateway.
Pasul 2: Creează ruta de API
Creează app/api/chat/route.ts:
`typescript
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
export async function POST(req: Request) { const { messages } = await req.json();
const result = streamText({ model: openai('gpt-4o'), system: 'You are a helpful assistant.', messages, });
return result.toDataStreamResponse();
}
`
Asta e tot pe partea de server. Funcția streamText se ocupă singură de streaming, fără să configurezi SSE de mână.
Pasul 3: Construiește interfața de chat
Creează app/chat/page.tsx:
`typescript
'use client';
import { useChat } from '@ai-sdk/react';
export default function ChatPage() { const { messages, input, handleInputChange, handleSubmit } = 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 mb-4">
{messages.map(m => (
<div
key={m.id}
className={p-3 rounded-lg ${
m.role === 'user'
? 'bg-blue-100 ml-auto max-w-sm'
: 'bg-gray-100 mr-auto max-w-sm'
}}
>
<p className="text-sm">{m.content}</p>
</div>
))}
</div>
<form onSubmit={handleSubmit} className="flex gap-2">
<input
value={input}
onChange={handleInputChange}
placeholder="Ask something..."
className="flex-1 border rounded-lg p-2 text-sm"
/>
<button
type="submit"
className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm"
>
Send
</button>
</form>
</div>
);
}
`
useChat ține istoricul mesajelor, starea câmpului de text și răspunsul care sosește în streaming, totul într-un singur hook.
Pasul 4: Adaugă cheia API
Creează .env.local:
`
OPENAI_API_KEY=your_key_here
`
Rulează pnpm dev și deschide /chat. Ai un chatbot AI care merge, cu răspunsuri în streaming.
Cum îl faci gata de producție
Câteva lucruri de adăugat înainte să-l lansezi:
Limitarea cererilor (rate limiting): nu vrei apeluri nelimitate la API. Adaugă în ruta de API o verificare simplă, după IP-ul sau sesiunea utilizatorului.
Promptul de sistem, pe măsură: schimbă câmpul system după ce vrei să facă botul: suport pentru clienți, asistent pentru produse sau răspunsuri la întrebările frecvente.
Tratarea erorilor: pune apelul streamText într-un try/catch și întoarce un răspuns de eroare cum trebuie.
Schimbarea modelului: cu AI SDK e o nimica toată. Vrei să treci pe Claude?
`typescript
import { anthropic } from '@ai-sdk/anthropic';
// înlocuiește openai('gpt-4o') cu:
anthropic('claude-sonnet-4-5')
``
Ce cer de fapt firmele
Cele mai multe firme vor unul dintre aceste trei lucruri:
- Chatbot de suport: răspunde la întrebări despre produsul sau serviciul firmei
- Primul filtru pentru cereri noi: strânge informațiile înainte de o discuție de vânzare
- Instrument intern: caută prin documente sau baze de date
Pe scurt
În 2026, să adaugi un chat cu AI într-o aplicație Next.js înseamnă cam 30 de minute de configurare. Vercel AI SDK rezolvă părțile grele: streamingul, gestionarea stării, trecerea de la un furnizor de AI la altul. Tu te ocupi de logica produsului.
Dacă vrei așa ceva în site-ul tău (un bot de suport pentru clienți, un asistent pentru produse sau ceva făcut special pentru tine), programează o discuție gratuită.