v0 by Vercel: UI to App, and When to Hand Off

v0 is Vercel’s AI agent for building web interfaces and full-stack web apps. You describe what you want, or upload a screenshot or a Figma design, and v0 writes the code, runs it in a live preview, connects a database when the app needs one, and publishes it to Vercel. It works best in Next.js with React, TypeScript, Tailwind CSS and shadcn/ui. Since a major update in February 2026 it also imports existing GitHub repositories and ships changes through branches and pull requests. The old v0.dev address now redirects to v0.app. Hand the work to a coding agent when the app outgrows the chat: a codebase several people change, tests that have to run in CI, or a stack v0 does not favor.

What v0 builds

Vercel’s own list is broad: landing pages, dashboards, online stores, internal tools, data visualizations, SaaS and AI-powered apps, and AI agents. In practice v0 is strongest where it began, turning a description or a mock-up into a polished, working interface, and then growing that interface into an app with data and server logic.

• From a prompt: describe the screens and behavior, in any language.
• From a design: upload screenshots or mock-ups, or import a Figma file; v0 pulls icons, logos and images from the file. Figma’s own rate limits apply to how much v0 can read.
• From existing code: import a GitHub repository, a Vercel project or a zip file.
• Beyond code: Design Mode for visual adjustments, and saved Instructions, including a built-in Plan Mode preset that makes v0 write a plan and wait for your approval before changing code.

The stack: Next.js and shadcn/ui

v0’s full-stack guide↗ (opens in a new tab) says it defaults to Next.js, which lets front-end and back-end code live together through server actions and API routes, and that while v0 can use other frameworks, Next.js gives the most reliable results. The FAQ names the rest of the stack: React, TypeScript, Tailwind CSS and shadcn/ui, with version 6 of the AI SDK when the app calls a model. Because the output is ordinary Next.js, any developer who knows the framework can read it.

Projects run in a Vercel Sandbox, a lightweight virtual machine with a full Node.js environment, which replaced v0’s older browser-based preview. Server code, API routes and database connections work in the preview, and the sandbox has a terminal where you can run commands yourself. Each chat gets its own sandbox, and files persist between visits to the same chat.

Databases and integrations

Databases come from the Vercel Marketplace. The databases page↗ (opens in a new tab) lists one-click integrations with Supabase, Neon, Upstash and Vercel Blob; adding one creates an account with that provider and puts the connection variables in your project. For SQL databases, v0 can generate and run SQL to create, change and drop tables. Snowflake is supported for data apps. For AI features, v0 uses Vercel’s AI Gateway by default, and can also connect fal, Deep Infra and Grok, or any provider whose key you add as an environment variable.

Secrets are ordinary environment variables, managed in Vercel. The usual Next.js rule applies: only variables prefixed NEXT_PUBLIC_ reach the browser, and v0 warns when code exposes values that way. Treat any generated app that handles real users’ data as needing its own review; vibe coding security covers what to check.

v0 also speaks MCP. You can add your own remote server from the prompt form’s MCPs menu, with no auth, custom headers, a bearer token or OAuth, or choose a preset such as Linear, Notion, Sentry or Zapier. According to v0’s MCP page↗ (opens in a new tab), those tools are for v0 to use while it generates; the app it builds cannot call them. Whether a tool call runs unasked depends on the chat’s permission mode: Ask, Auto, or Full, which skips approval rules entirely.

Publishing to Vercel

Select Publish in the chat header. The first time, v0 walks you through creating the Vercel project, choosing who can see the deployed app, and confirming a vercel.app address or a custom domain. Every project keeps a stable production URL, and later publishes update the app behind it. Working branches get their own preview deployments, so you can review a change before it reaches production. When a build fails, Fix with v0 reads the logs and attempts a repair. Build settings, environment variables per environment, rollbacks and logs live in the Vercel dashboard, one click from the deployment card.

GitHub sync and export

Git is optional, but it changes how v0 behaves. Connect a project from Settings → GitHub and v0 creates a private repository and pushes the code. From then on, v0’s GitHub guide↗ (opens in a new tab) says the repository is the source of truth. Each chat starts from a base branch; when v0 has a change, it creates a working branch, such as v0/main-abc123, and commits every change there automatically. v0 never pushes straight to main. Publish creates or reuses a pull request, merges it into the base branch and waits for the production deployment, and your branch protection, required checks and required reviews still apply.

• Import: bring an existing repository in through the Vercel GitHub App, public or private, including a monorepo, where you pick the app’s root directory.
• Work alongside other tools: connect the same repository and pull. Vercel’s FAQ suggests exactly this for collaborating with someone in Cursor or Claude Code.
• Export: you can export the code and deploy it elsewhere, though previews, environment variables and one-click deployments assume a Vercel project.
• Careful with deletion: v0 warns that if you delete the connected repository, the code may be unrecoverable.

Limits to plan around

• Next.js first: Vercel says other frameworks give less reliable results, so a project built on something else loses much of v0’s advantage.
• Vercel-shaped: the smoothest path assumes a Vercel project for previews, secrets and hosting. Leaving is possible, but you give up the one-click loop.
• Sandbox lifetime: a sandbox starts with a 30-minute lifetime that extends while you work, up to 24 hours from creation, after which v0 recreates it on your next visit. Your files persist.
• A read-only code viewer: you browse, search and comment on lines as context for the next prompt, but changes go through the chat or the terminal.
• Tool access: MCP tools help v0 while it builds, not the finished app, and Full mode runs tool calls with no approval at all.
• Always online: v0 has no offline mode.

When to hand off to a coding agent

v0 and a coding agent such as Claude Code, Codex or Cursor are stages more than rivals. v0 is quickest from an idea or a mock-up to a deployed Next.js app. A coding agent works in the repository on your terms, with your test suite, your linting and your review process. Signs you have reached the handover:

• The interface is settled and most prompts are now about business logic, data or edge cases.
• Several people are changing the code and you want every change reviewed, not only the ones that go through Publish.
• You need tests, migrations or a build step that run in your own CI.
• You want a back end, queue or worker that is not Next.js.

The handover is gentle because the code is already in GitHub. Keep v0 for interface work on its own branches and let the agent work through pull requests on the same repository, or stop prompting in v0. There is also a middle path: v0 sandboxes come with Claude Code pre-installed, started by typing claude in the v0 terminal, with its traffic routed through Vercel’s AI Gateway; Enterprise admins must turn this on first. The step-by-step handover, and how v0 compares with Lovable and Bolt, is in Lovable, Bolt and v0 vs Claude Code. For the closest builders, see Bolt.new, which runs in the browser tab and supports JavaScript back ends only, and Replit Agent, which hosts apps on Replit’s own servers.

Keeping the work list outside the chat

A v0 chat is a good place to build and a poor place to remember what is left, especially once the project moves to a coding agent. fenbs keeps that list on a board: each feature, enhancement or bug is a task with a note, a plan and a test status, in lanes To Do, Next Up, In Progress and Completed. Add https://fenbs.ai/api/mcp as a custom MCP server in v0, signing in with OAuth or a token issued under Settings with a name, scopes and an optional expiry, and v0 can read the next task while it builds and report what it changed. When Claude Code takes over, it connects to the same board, and History shows which assistant changed each task. fenbs has no due dates or sprints; it is the shared list, not a project plan.