Library/v0/Vercel made a Model (v0 in Cursor)
v0

Vercel made a Model (v0 in Cursor)

by Better Stack

The video demonstrates how to integrate Vercel’s new internal AI model, v0‑1.0‑md, into the Cursor AI IDE by configuring it as an OpenAI‑compatible provider, then using it to generate a full Next.js to‑do app with Shadcn UI components. It walks through obtaining an API key, overriding Cursor’s OpenAI settings, selecting the v0 model, and running a prompt to build the application, highlighting the model’s auto‑fix, quick‑edit, and framework‑aware features.


Overview

The guide shows how to use Vercel’s v0 model inside Cursor to generate a complete Next.js to‑do app with Shadcn UI components. It covers getting the API key, configuring Cursor, and running a prompt to create the app.

Prerequisites

  • A Vercel account with a premium or team plan and usage‑based billing enabled.
  • Cursor AI IDE installed (download from https://cursor.com).
  • Basic familiarity with Next.js and terminal commands.

Step‑by‑Step Instructions

  1. Get your v0 API key 1.1. Visit v0.dev and log in. 1.2. Go to Settings → API Keys and click Create New Key. 1.3. Copy the key; you’ll need it in Cursor.

  2. Open Cursor settings 2.1. Launch Cursor. 2.2. Press ⌘+Shift+J (macOS) or Ctrl+Shift+J (Windows/Linux) to open the Settings panel. 2.3. Navigate to the Models tab.

  3. Configure Cursor to use v0 3.1. In the OpenAI API Key field, paste the v0 API key. 3.2. Check Override OpenAI Base URL. 3.3. Enter the base URL: https://api.v0.dev/v1. 3.4. Click Save. 3.5. Click Verify to ensure the connection works.

  4. Add v0 models to Cursor 4.1. In the same Models tab, click Add Custom Model. 4.2. Enter v0-1.0-md (or v0-1.5-md if available) and click Add. 4.3. Repeat for v0-1.0-lg if you want the larger model. 4.4. Click Save.

  5. Create a new chat in Agent mode 5.1. Open a new chat. 5.2. Set Mode to Agent. 5.3. Choose the v0 model you added (e.g., v0-1.0-md). 5.4. Type who are you? to confirm the model is active; it should reply that it is v0.

  6. Generate a Next.js to‑do app 6.1. Prompt the model: "Create a modern to‑do app using Shadcn UI components." 6.2. The model will output a command to create a new Next.js app. Copy the command. 6.3. In your terminal, run the command (e.g., npx create-next-app@latest web3-ai --ts). 6.4. Install Shadcn UI: npx shadcn@latest add (follow prompts for CSS framework and variables). 6.5. Copy the generated code from the model and replace the default app/page.tsx with it. 6.6. Run npm run dev (or bun run dev) to start the app.

  7. Verify the app 7.1. Open http://localhost:3000. 7.2. You should see a fully functional to‑do application with theme toggle, category list, and add‑task UI.

Tips & Gotchas

  • API limits: v0 is in beta with a 200‑message‑per‑day cap. If you hit the limit, wait or upgrade billing.
  • Model naming: The video uses v0-1.0-md; newer docs may reference v0-1.5-md or v0-1.5-lg.
  • Shadcn installation: The video notes an outdated command (shaden UI). Use shadcn@latest add instead.
  • Auto‑fix: If you encounter type errors after running the app, the v0 model’s autofix can be triggered by re‑prompting the same task.
  • Cursor UI: The Override OpenAI Base URL step is crucial; without it, Cursor will still use the default OpenAI endpoint.
  • Testing: After generating code, run npm run lint to catch any linting issues that the model might have missed.

Resources

This guide was generated by an AI agent based on the video above. Always verify steps against the original source.Watch on YouTube ↗

More v0 guides

See all v0 guides →

Browse other AI tools