v0 — Quick reference
Vercel's AI agent: prompt full-stack React + Next.js apps (shadcn/ui + Tailwind), live preview, one-click deploy. v0.app · docs at v0.app/docs
At a glance
Builds: React + Next.js (TypeScript) apps with shadcn/ui components and Tailwind CSS — production-accurate live preview, full-stack via one-click integrations. Stack: React/Next.js at heart; a plain-HTML, Vue or Python project needs heavy adaptation. Free plan: $5 of monthly credits + 7 messages/day, no credit card. You own the output — every project syncs to GitHub as standard Next.js code.
Prompt recipes
| Goal | What to type |
|---|
| First prompt | Name every section and the look. "Create a landing page for a campus plant shop: a hero with heading + tagline, an about section, a grid of 6 plants with names and prices, and a contact form. Fresh green colour scheme, lots of whitespace." |
| Add a page / feature | Say what changes and where, as a follow-up in the same chat. "In the header swap the Shop and About links; make the hero heading larger and add a sub-heading; add a 3-tier pricing section below the plant grid." |
| Connect a database | "Add a database so each contact-form submission is saved, and show the saved messages in an admin table." Accept the Add Integration suggestion chip. |
| Change the design | Prefer Design Mode for look-and-feel (see below). Or describe it: "make the hero heading larger and add a sub-heading." Specific, located asks beat "make it nicer". |
| From an image / Figma | Attach a screenshot or paste a Figma link via the attachment icon. "Here's a screenshot of the dashboard I want — rebuild it as a responsive React page with the same layout, colours and components." |
v0's five prompting rules (from the docs): start simple → plan the project → provide context → be specific (let v0 ask clarifying questions) → iterate. Group related tweaks into one message to spend fewer of your 7 daily messages. Click the microphone in the prompt bar to dictate.
Iterate & refine
Design Mode
Open it from the prompt-bar toolbar. Click any element and change its typography, colour, spacing, layout — or describe the change; edits apply back to your code. Works on the latest version of a chat (not read-only chats or mobile viewports). Included on the free plan.
Versions
Every code change v0 makes creates a version. Use the version dropdown (top-right) to switch between them.
Rollback
Restore an earlier version if a change broke something — restoring just adds a new version, so nothing is lost. Restoring is free.
Use Design Mode for look-and-feel and prompts for structure. Design-Mode edits and restores don't cost a chat message — both are cheaper than re-prompting.
Add data & integrations
| Add | How |
|---|
| Database | Project Menu ⋯ → Integrations → pick Supabase, Neon, Upstash or Vercel Blob from the Marketplace. v0 provisions your account and adds the env vars. For SQL providers it can generate and run the SQL to create/update tables. |
| AI features | Just describe it ("add an AI care-tips button to each plant card"). v0 uses the Vercel AI Gateway by default — no API key. Set spend limits + auto-top-ups during setup. For a specific provider, add fal, Deep Infra or Grok by xAI from Integrations. |
| External APIs | Store keys under Project Menu ⋯ → Environment Variables, choosing the environment (Development / Preview / Production) — preview only sees Development vars. |
| MCP tools | Connect Model Context Protocol servers from the prompt-form menu → MCPs to give v0's agent extra tools — your own server, a preset, or tools from installed integrations. |
Agent mode (since Feb 2026): v0 can search the web (with clickable source links), use a browser to test and critique the app it built, and run terminal commands in an isolated sandbox to debug and auto-fix errors. Control how far it goes with the permission mode: Ask · Auto (default) · Full.
Deploy & own the code
Publish
Publish → Publish to Production. v0 builds and deploys to Vercel's global CDN and gives a live, shareable URL in seconds.
Custom domain
Publish → Customize Domain (or Project Menu ⋯ → Domains): a free .vercel.app subdomain (instant, HTTPS) or your own domain (set DNS at your registrar via the Vercel dashboard).
GitHub sync
Connect GitHub; v0 works on a branch off main and opens pull requests you review and merge. Pushing deploys automatically (CI/CD). You can also import an existing repo.
You own it
The repo is standard Next.js / React + Tailwind source — including the database wiring. Clone it and keep building in any editor.
Cost & limits
| Plan | Price & what you get |
|---|
| Free | $0/mo — $5 included monthly credits + 7 messages/day. Includes deploy to Vercel, Design Mode and GitHub sync. No credit card. |
| Team | $30/user/mo — $30 monthly credits/user + $2/day login credits, shared team credits, collaboration. |
| Business | $100/user/mo — same credits, plus training opt-out by default, SSO and role-based access. |
| Enterprise | Custom. |
Metering: usage is by tokens against the model you pick — v0 Mini ($1 in / $5 out per 1M tok), v0 Pro ($3 / $15), v0 Max ($5 / $25), v0 Max Fast ($10 / $50). Pick the smallest model that does the job. Students: 1 year free v0 premium if your school is on the active list (Stanford, MIT, UC Berkeley, NYU…) — check v0.app/students. Verify current numbers at v0.app/pricing.
Tips & gotchas
It's a React/Next.js + TypeScript tool — the output assumes that stack. A plain-HTML, Vue or Python project needs heavy adaptation.
Group your asks. The free tier is ~7 messages/day plus $5 of monthly credits — a single iterative session can exhaust it. Batch related tweaks into one message; use Design Mode and version-restore (both free) instead of re-prompting.
Backends are "bring a provider" (Supabase, Neon, Upstash, Vercel Blob) — the integration creates your own account on that provider, which you manage. Not a hidden no-code layer.
Agent turns cost more. Search / browser / terminal steps run inside your messages and use tokens — a deep agentic turn can cost more credits than a simple edit. The v0 Max / Max Fast models get expensive on output ($25–$50 per 1M tokens).
Higher fidelity from Figma than a screenshot — a Figma link pulls design tokens (colours, spacing), not just the picture. Keep each design within a single, clearly structured frame; use a high-resolution image when attaching a screenshot.