v0 by Vercel Guide: Vibe Coding, UI Generation, and Limits

v0 is Vercel's browser-based platform for generating screens and full-stack web apps, meaning the interface and server code, from prompts, screenshots, Figma files, or existing repositories. It now includes an AI agent, an isolated preview, saved Git code changes, database connections, and direct Vercel publishing.

The practical question is how much of that platform fits your stack and review process. The workflow runs from input to pull request, with a credit model and deployment boundary that matter after the first generation. Official v0 product surfaces were checked on July 28, 2026.

What v0 Is and Who It Is For

v0 can prompt, edit, connect services, publish, and manage a web application. It also imports existing Git repositories and sends generated work through a branch and pull request.

v0 now includes a full in-browser editor, database integrations, and Git Import for existing repositories. It creates a working branch, commits changes, and opens a pull request while leaving the selected base branch protected.

The underlying stack favors Next.js and React with TypeScript, Tailwind CSS, shadcn/ui, and Radix UI primitives. Because Vercel builds v0 and runs the surrounding Next.js deployment platform, one click can take a generated project to a Vercel preview URL.

The target audience includes React developers and technically literate designers. v0 fits when you can review a codebase and want AI to accelerate frontend and Next.js work.

Its interface also serves founders and designers, but the generated project remains code that someone should inspect. The fit becomes weaker when nobody owns the stack, access rules, environment variables, or production deployment after generation.

Inside the v0 Workspace

v0 can turn a text brief, screenshot, or Figma frame into a working interface. Vercel's Figma guide recommends splitting large designs into smaller frames and testing each generated part before composing a full page.

The current model lineup is v0 Mini, v0 Pro, v0 Max, and v0 Max Fast. The live pricing page also publishes separate input, cache, and output token rates for each tier.

The full editor and agent can work across files, run shell commands, inspect a repository, execute tests, and call Vercel or GitHub tools. Vercel documents those actions as agent capabilities in the product.

That is closer to Bolt or Replit, although v0 remains more tightly integrated with Vercel for Next.js projects.

Git integration supports a familiar sequence: generate a component or feature, push to a working branch, review the GitHub pull request, and merge after the repository's checks pass. Teams already using GitHub and Vercel can keep those review and preview surfaces in the same workflow.

Three Ways to Start

A blank prompt works for a new page or a small app with a settled goal. Name the users, main screen, data source, and one action that must work. Ask for the interface first when the data model still needs discussion.

A design input works when visual intent already exists. Attach one Figma frame or screenshot, then check spacing, responsive behavior, keyboard focus, and component states before asking v0 to add backend logic.

Git Import is the path for an existing codebase. The Git Import guide supports public repositories, private repositories, and monorepos that the installed Vercel GitHub App can access.

v0 creates a dedicated working branch from the chosen base. Write access sends commits to the original repository, while read-only access creates a copy under your account. Both routes lead to a pull request instead of a direct base-branch change.

Starting point	Useful input	First check
Blank prompt	Users and one task	Scope and data flow
Figma or image	One clear frame	Responsive states
GitHub import	Repo and base branch	Diff and tests

From Design Input to Reviewable Code

A screenshot or Figma frame gives v0 visual evidence, yet it leaves behavior unspecified. Before generation, list the interactive states the image cannot show: loading, empty, error, validation, keyboard focus, long content, and narrow screens.

The official Figma guidance recommends smaller frames because a dense file creates more interpretation work. Start with one component or page region, compare it against the source at desktop and mobile widths, and correct the design tokens before composing the full route.

Give repeated colors, spacing, and typography a named home in the generated project. A request such as Use the existing design tokens and components; report any missing token before adding a new value limits one-off styling and produces a smaller diff.

When v0 opens a pull request, review the semantic structure before pixel detail. Check heading order, form labels, button names, focus behavior, image alternatives, and the DOM order used on small screens. A close screenshot match can still leave keyboard and screen-reader users with a broken flow.

Next, inspect the boundary around the generated code. Confirm that the generated component uses the repository's existing primitives, data-fetching pattern, route structure, and test setup. Reject a parallel component library or duplicate helper unless the change explains why the existing code cannot serve the requirement.

The final check is responsive behavior with real content. Use long names, missing images, validation errors, and an empty result set. Design input gives v0 a useful starting shape; repository conventions and state coverage determine whether the result belongs in the product.

Keep the source design beside the preview during correction, and ask for one discrepancy at a time. A narrow request produces a reviewable commit and makes credit use easier to attribute than a broad instruction to fix every visual difference.

Pricing

v0 bills generation through a dollar-denominated credit balance. The product changelog and Teams guide call the $30 plan Plus, while the pricing guide still calls the same $30-per-user offer Team. This page uses Plus, the name in the newer product surfaces.

Plan	Price	Credits and limits
Free	$0	$5 monthly; 7 daily messages
Plus	$30/user/mo	$30 monthly; $2 daily login
Business	$100/user/mo	$30 monthly; training opt-out
Enterprise	Custom quote	SAML SSO; RBAC; SLAs

Plus and Business accounts can purchase more credits. Plus also includes shared chats and central billing, while Business adds training opt-out by default. The public docs disagree on the Plus name, so confirm the checkout label before budgeting.

The dollar-denominated balance still maps to model-specific input, cache, and output rates. A longer repository context or a higher-cost model can consume more of that balance, so check the usage record after the same bounded task used in any platform comparison.

Where the Vercel Fit Pays Off

v0's narrowest strength is the documented focus on Next.js, React, Tailwind CSS, shadcn/ui, and the AI SDK. That stack focus gives the agent a clearer default than a platform trying to treat every framework the same.

The Vercel integration gives Next.js projects a short path from generated code to a preview URL. Other platforms can deploy to Vercel, but v0 shares projects, environment variables, integrations, domains, and deployment state with the Vercel account.

Figma import accepts visual layout and design tokens as input. The official guide asks teams to break large designs apart and test each generated part before composing a page.

The v0 model tiers let you trade speed and cost against reasoning depth. Mini is the low-cost option, Pro is the balanced default tier, and Max or Max Fast cost more for difficult work. Read the live token rates before choosing one for a long generation.

Git Import gives an existing project a reviewable branch rather than a copy-and-paste handoff. That workflow is easier to audit because the pull request shows exactly which files the agent changed.

Where v0 Falls Short

v0 remains dependent on Vercel for its easiest workflow. Git Import lets v0 work with an existing repository, and GitHub becomes the source of truth. The simplest preview and production path still assumes a connected Vercel project.

v0 can generate Next.js server actions and API routes, then connect to Supabase, Neon, Upstash, and Vercel Blob. Complex services outside that model still need separate architecture and deployment work, so confirm the backend boundary before choosing v0 for the whole application.

The credit model gives you token rates for each v0 model, while the final cost still depends on input context and generated output. Check the usage screen after a bounded task before estimating a long session.

v0 expects someone to review code, branches, environment variables, and deployments. A team without that owner should compare the more managed workflows in the vibe-coding comparisons before committing production data.

Backend and Environment Boundaries

Vercel's full-stack guide documents Next.js server actions and API routes as v0's primary backend path. It also lists Supabase, Neon, Upstash, and Vercel Blob among the database and storage connections.

Each connection introduces credentials and provider-specific access rules. Store secrets through the environment-variable interface, use server-only variables for privileged keys, and verify which values are available in preview and production. A successful preview can still use a different database or missing secret after deployment.

Ask v0 to name every external service before it edits code. The answer should include the provider, environment variables, data written, and failure behavior. Compare that list with the pull-request diff and Vercel project settings rather than accepting the chat response alone.

Database work needs a schema review and two-account authorization test. Inspect migrations, uniqueness rules, foreign keys, indexes, and row-level policies. Then create records as one user and attempt to read or change them as another user through both the interface and a direct request.

Use separate test-mode accounts for payments and outbound services. Confirm that webhook handlers authenticate their source, survive retries, and avoid duplicate work. Keep a written inventory of domains, storage, scheduled jobs, and provider dashboards because those resources will not appear fully in a source-code handoff.

Recover and Review Before Deployment

If a non-coder reaches a broken preview, open the version menu and restore the last working generation. v0 creates a new latest version from the restored code, so the failed attempt stays in the chat history. Narrow the next prompt to one failed behavior and name what must not change.

Stop prompting after two focused repair attempts, or sooner if the failure affects another user's data, payment state, or secrets. Keep the working version deployed while a qualified reviewer checks that path. Restoring generated code does not prove that an external database was rolled back.

A Vercel preview proves that the project builds and serves a page. Data rules, error paths, and payment safety need separate checks while the work still sits on the v0 branch.

Start with the generated diff, the list of files and lines changed on the v0 branch. Open it in v0 or the GitHub pull request, then look for new dependencies, public environment variables, broad database policies, and server actions that trust browser values.

Any secret prefixed with NEXT_PUBLIC_ becomes available to client code. Keep privileged service keys in server-only variables and check the preview and production settings separately.

Run the repository's existing checks from the sandbox or continuous integration. A useful request is: Run the unit tests, report every failure, and do not change code until you explain the likely cause. That keeps diagnosis separate from a broad repair pass.

Test the app with at least two user accounts when records have owners or roles. Open a copied direct URL while signed in as the restricted account, then try the same action through the interface. A hidden button never counts as authorization.

• Inspect the full pull-request diff before merging.
• Confirm database rules with separate test accounts.
• Keep service secrets in server-only environment variables.
• Check the Vercel preview and production configuration separately.

Changes with several risk areas deserve smaller pull requests. Split a new database schema, authentication flow, and visual redesign into separate branches when each can be reviewed on its own.

How v0 Compares

v0 occupies the React and Vercel-focused part of the platform category. Managed app builders put more backend setup behind their own services, while editor tools such as Cursor or Copilot begin inside an existing local repository.

The closest comparison is with Lovable and Bolt. All three can produce a running application from a prompt. v0 concentrates on React and Next.js output plus the Vercel workflow.

Lovable provides a more managed backend experience for non-developers, while Bolt keeps a browser terminal and broader scaffolding workflow central. Replit covers more languages through a full cloud IDE.

For a broader comparison, the vibe-coding comparisons hub breaks down the full category.

v0 Verdict

v0 is the best match among these browser builders for a React or Next.js project that already uses GitHub and will deploy on Vercel. Its branch-based import path makes generated work inspectable, while teams outside that stack should expect more setup and less benefit from the platform's tight Vercel connection.

FAQ

Which frameworks does v0 handle best?

Vercel's documentation says v0 supports popular frontend frameworks and UI libraries, with its strongest expertise in Next.js, React, Tailwind CSS, shadcn/ui, and the AI SDK. Other frameworks can work, while the official full-stack guide calls Next.js the most reliable route for server actions, API routes, and Vercel deployment.

How much does v0 cost?

Free includes $5 of monthly credits and seven messages a day. Plus costs $30 per user monthly with $30 monthly credits and $2 in daily login credits. Business costs $100 per user monthly with the same included credits plus training opt-out, while Enterprise uses custom pricing.

What models does v0 use?

v0's pricing surface lists v0 Mini, v0 Pro, v0 Max, and v0 Max Fast model tiers. Vercel AI Gateway is a separate integration that v0 can add to an application you are building, giving that app access to external models.

Can v0 build a full-stack app?

Yes, v0's official docs say it can generate Next.js server actions and API routes, connect to Supabase, Neon, Upstash, and Vercel Blob, manage environment variables, and deploy on Vercel. Next.js is its most reliable full-stack path. Complex services outside that model still need deliberate architecture, security testing, and cost controls.

Can v0 work with an existing GitHub repository?

Yes, Git Import can open a public, private, or monorepo project that your Vercel GitHub App can access. v0 creates a working branch, commits generated changes, and opens a pull request rather than modifying the base branch directly. Once connected, GitHub is the source of truth, so protect the repository and review every generated change.