v0 by Vercel Guide: Prompt to Next.js App, GitHub Sync, Vercel CLI and the v0 API (2026)

v0 is Vercel's AI app builder. You describe a page, component or full app, and v0 generates it with a live preview you can keep refining in chat. When it looks right, you publish it to Vercel or take the code into your own workflow.

Because v0 comes from the team behind Next.js, its output fits modern React projects: v0 uses Next.js, React, TypeScript, Tailwind CSS and shadcn/ui, with the AI SDK for AI features.

This v0 by Vercel guide shows you how to prompt it well, connect GitHub, publish and add a domain, work on the code locally with the Vercel CLI, and use the v0 Platform API from your own app. Facts come from v0's and Vercel's official docs, checked on 22 October 2026. For plans and alternatives, see the v0 tool page.

Step 1: Start a Project and Prompt Well

Sign in at v0.app with a Vercel account. The free plan has a daily message limit, so good prompts matter.

Describe the layout, the data and the behaviour:

Create a SaaS pricing page in Next.js.
- Three plans: Starter, Pro and Team, monthly/yearly toggle (yearly saves 20%)
- Highlight Pro as "Most popular"
- Feature comparison table below the cards
- FAQ accordion with 5 questions
- Use shadcn/ui components and a neutral, accessible colour palette

Then iterate:

• Change one thing at a time: "Make the toggle remember the choice in the URL."
• Upload a screenshot of a design or sketch as a starting point.
• Ask for real behaviour, not just UI: "Load plans from an API route instead of hard-coding them."

Step 2: Connect GitHub

Connecting GitHub keeps your code in your own repository.

1. Open the project menu (...), then Settings, then GitHub.
2. Click Connect and then Create Repository. v0 creates a private repository.

After you connect, GitHub becomes the source of truth. v0 pushes its changes to a working branch, opens (or reuses) a pull request, and merges it into your base branch when you publish. That means you can review v0's changes like any other pull request, and teammates can work on the same repo.

Step 3: Publish to Vercel

1. Click Publish in the chat header. v0 deploys the app to Vercel and gives you a live URL.
2. For later updates, click Publish Changes.
3. To use your own domain, open Project, then Settings, then Domains.

Step 4: Work on the Code Locally

Once the project is on GitHub, clone it and use your normal tools:

git clone https://github.com/your-username/your-v0-project.git
cd your-v0-project
npm install
npm run dev

Check package.json for the exact scripts your project uses.

Use the Vercel CLI

The Vercel CLI links your local folder to the Vercel project, pulls environment variables and deploys. These commands are from the official Vercel CLI docs:

npm i -g vercel        # install the CLI
vercel login           # sign in
vercel link            # link this folder to your Vercel project
vercel env pull        # download environment variables to a local .env file
vercel dev             # run the project locally with Vercel's environment
vercel                 # deploy a preview
vercel deploy --prod   # deploy to production

vercel env pull is the one people miss: it gives your local app the same API keys and database URLs as the deployed version, without copying secrets by hand.

Step 5: Call v0 from Your Own App (Platform API v2)

The v0 Platform API lets your own app create v0 chats and generations. The current version is v2, and it does not work with chats created through the old v1 API. Install the SDK:

npm install v0

Create a chat from server-side code:

// app/api/generate/route.ts
import { v0 } from "v0";

export async function POST(request: Request) {
  const { message } = await request.json();
  const chat = await v0.chats.create({ message });
  return Response.json(chat);
}

Set your key as V0_API_KEY in your environment (for example with vercel env). Keep it server-side only: never expose it in browser code.

For React UIs that render v0 output, there is also a React package (@v0-sdk/react), and you can scaffold an example app with npx create-v0-sdk-app my-v0-app.

Getting the Most from v0

• Think in components. Ask for one section at a time and compose the page.
• Name your stack constraints in the prompt: "use Server Components", "no client state for the table".
• Review accessibility: labels, focus states and colour contrast.
• Move to your editor once the structure is in place, and use v0 for new screens.
• Keep secrets in Vercel environment variables, never in prompts or code.

Related Guides

• v0 by Vercel: features, pricing and alternatives →Plans and what v0 is best for.
• Lovable AI App Builder Guide →Full-stack apps with GitHub sync.
• Bolt.new AI App Builder Guide →Build and deploy apps in the browser.
• React vs Next.js →Understand the framework v0 generates.
• AI Tools for Developers →Compare AI app builders, agents and editors.

Frequently Asked Questions

Is v0 free?

Yes. v0 has a free plan with a daily message limit. Paid plans are billed per user per month; check the official pricing page for current amounts.

What stack does v0 use?

v0 uses Next.js, React, TypeScript, Tailwind CSS and shadcn/ui, with the AI SDK for AI features.

How do I connect v0 to GitHub?

Open the project menu, then Settings, then GitHub, click Connect and Create Repository. GitHub then becomes the source of truth, and v0 works through branches and pull requests.

How do I deploy a v0 project?

Click Publish in the chat header to deploy it to Vercel, and Publish Changes for later updates. Add a custom domain under Project Settings, then Domains.

Is there a v0 API?

Yes. The v0 Platform API v2 lets you create chats from your own app with the v0 npm package. Keep your V0_API_KEY on the server.

Conclusion

v0 is the quickest way to get a solid first version of a Next.js interface or app. Prompt it clearly, connect GitHub early, publish to Vercel with one click, and use vercel link and vercel env pull when you move to local development.

Compare v0 with other AI app builders in the AI tools directory.