Getting Started
Using v0 is like chatting with a frontend engineer, who takes in your design guidelines and creates an application for you. A common workflow with v0 is putting in design files and images to scaffold your application and then use text prompts to nudge v0 into creating your perfect application.
Remember, just like any other AI tool, the quality of the output that v0 generates depends on the quality of the prompt or instructions you input. So, it’s important to be clear, descriptive, and instructive with your inputs.
Iterating on your ideas
As you continue to develop your project, v0 will create a new version for your application with every new prompt you give it.
Version control in v0 offers you two benefits:
-
You can compare the changes made by v0 by clicking Show diff to ensure it’s doing what you expected.
-
It lets you navigate between different versions of your application for inspiration, debugging, or rollback.
Using version control in v0
You can move between different versions of your application either by selecting from the drop down or by scrolling in the chat. When you select a version from the Versions dropdown, it takes you the prompt where this version was created and loads the preview for this version in the preview pane.
You can then click Restore on the selected version to restore this version, which will create a new version for your application.
Debugging your application with v0
While v0 is intended to develop high quality frontend applications from designs and visual cues, it is equally good at debugging your application code and platform issues. You can prompt v0 to fix the issues in the code either by using the Fix with v0 button or by prompting it with the error message that you see in the preview or console.
Shipping with v0
Adding the final touches
If you’re a developer or working with one, you may want to clone the project locally and add some final changes such as using a private library, publishing it on GitHub, or adding some sensitive code logic. For this purpose, you can use the Add to Codebase feature to pull the v0 code down to your local machine by running the npx command in your command-line tool. Otherwise, you can also use the Download ZIP option.
Deploying your application
When you are happy with what you’ve built, you can deploy your application with just one click on the Deploy button.
You may see an error message saying “Failed to deploy block to Vercel”, as follows:
If you see this error, go to the project settings and ensure that your v0 project is connected to a Vercel project. If not, go ahead and click Connect a Vercel Project to connect your v0 project. You should now be able to save deploy your application.
If the project is connected, you can check the Vercel project’s build logs to find helpful error messages, which you can ask v0 to help you debug.
Working with environment variables
If your project requires environment variables, such as API keys or authentication headers, v0 will prompt you to add environment variables to your project.
When saving environment variables in your project, you might face an error saying “Failed to create environment variables” and a message in the preview saying “Missing environment variables”.
To fix this error, go to the project settings and ensure you’ve a Vercel project connected to your v0 project. If not, go ahead and click Connect a Vercel Project to connect your v0 project. You should now be able to save environment variables.
If the project is deployed on Vercel but can’t find environment variables, go to the Vercel project settings and ensure the environment variables are configured on the Production environment. For more information, see Managing environment variables.
Adding custom domain
After you’ve deployed your project to Vercel. You can add a custom domain by following our Adding & Configuring a Custom Domain guide.
If you are unable to access your project using the custom domain, please check you’ve promoted the deployment to the production environment in your Vercel dashboard. For more information, see Promoting Deployments.
Doing more with v0
v0 is well versed in the Vercel and Next.js documentation. So, it can also help you solve your questions with prompting, for example:
- I’ve a Next.js project but every time I deploy it to Vercel the build fails with this error
[insert your error logs]. What am I doing wrong here? Can you help me find the root cause of this issue? - How can I use the Vercel Blob to show a list of images on the frontend website?
- I’m getting an error message from the Vercel API when I use the following cURL request
[insert the code here]. What am I doing wrong here? Can you suggest some ideas to solve this?
Common questions
How many messages do I get in each plan?
The number of messages you can send depends on the plan you choose. For the limits on your plan, check the billing page for your v0 account. For the latest information on pricing and plans, see v0 pricing.
When do the message limits reset?
The messages limits reset every 24 hours.
Get inspired
With v0 sky is the limit, you can convert all your ideas and imaginations into an application in no time. Here are some of the inspiring projects from the v0 Community:
For more inspiration, checkout v0 Community.