Vercel v0: aplicații și interfețe din prompturi în AI Web Builders (v0, Bolt.new & Lovable)

Prompt la v0.app -> preview live (Next.js, Tailwind CSS, shadcn/ui) -> Design Mode / GitHub / Publish pe Vercel

v0 (v0.app) este un agent AI de la Vercel care creează cod real și aplicații full-stack din prompturi. Chat-urile noi pornesc de la o aplicație Next.js cu Tailwind CSS și shadcn/ui, dar v0 poate genera cod și cu alte biblioteci. Agentul face căutări web, inspectează site-uri, repară erori și folosește unelte externe prin MCP. Aplicația se publică pe infrastructura Vercel sau se trimite ca pull request.

Design Mode se deschide din bara preview-ului. Selectezi un element din aplicația care rulează și îl modifici din panou (tipografie, culoare, fundal, margini, bordură, opacitate, umbră, text) sau printr-o instrucțiune scrisă, la care v0 atașează automat o captură a elementului. Apply creează o versiune nouă a chat-ului, cu diff care se poate revizui sau anula. Cmd+I / Ctrl+I comută între selecție și folosirea normală a aplicației.

Cu GitHub conectat, fiecare chat pornește de la o ramură de bază, iar v0 împinge modificările pe o ramură de lucru, cu preview pe Vercel. Publish creează sau refolosește pull request-ul, îl unește în ramura de bază și așteaptă deploy-ul de producție, respectând regulile de protecție ale repo-ului. Bazele de date (Upstash, Neon, Supabase și altele) se adaugă din Vercel Marketplace. Planuri: Free (7 mesaje pe zi), Plus (30 USD de utilizator pe lună), Business (100 USD de utilizator pe lună) și Enterprise; Premium (20 USD) este în curs de retragere.

Concepte cheie și caracteristici

Concept / Parametru	Descriere practică
Design Mode	Editare vizuală pe aplicația care rulează; Apply creează o versiune nouă cu diff.
GitHub	Ramură de bază, ramură de lucru, preview, pull request; Publish face merge și deploy.
Import	Din repo GitHub, proiect Vercel sau fișier ZIP (butonul + din prompt).
Databases	Integrări din Vercel Marketplace (Upstash, Neon, Supabase etc.); v0 poate crea și modifica tabele SQL.
MCP	Servere MCP proprii sau presetate (Linear, Notion, Sentry, Vercel…), folosite ca unelte la generare.
Model picker	Alegi modelul din composer; selectorul nou, cu modele adăugate din AI Gateway, este disponibil echipelor Enterprise.

Exemple practice și scenarii reale

Exemplul 1: Prompt pentru un dashboard

Documentația v0 recomandă cerințe specifice, detalii tehnice și împărțirea sarcinilor mari.

Create an analytics dashboard for an online store.
1. Top row: four cards (Revenue, Orders, Conversion rate, Active users), each with a weekly trend badge.
2. Revenue bar chart with a monthly / weekly toggle.
3. Recent orders table: customer, order ID, status badge (Paid, Pending, Failed), amount, actions menu.
Use shadcn/ui components, dark mode, accessible contrast.

Exemplul 2: Construire progresivă

Tehnica „progressive enhancement” din ghidul de prompting v0: întâi funcția de bază, apoi restul.

1. Create a basic todo list with add/delete
2. Add localStorage to save todos
3. Add completion checkboxes and filtering

Greșeli frecvente și capcane

• Cauți comanda npx shadcn add "https://v0.dev/chat/b/..." din tutoriale vechi. Documentația actuală descrie GitHub, importul și descărcarea fișierelor din Code viewer.
• Ștergi repo-ul GitHub conectat. După conectare repo-ul devine sursa de adevăr pentru cod, iar documentația avertizează că se poate pierde codul.
• Ceri tot proiectul într-un singur mesaj. Pentru proiecte complexe, v0 recomandă să ceri întâi un plan și apoi implementarea pe pași.

Noțiuni și module înrudite

• bolt-new-webcontainers
• lovable-fullstack
• ai-builder-prompting-rules