Prototyping
with Vercel v0

How to use the Vercel v0 AI-tool for prototyping your website UI

By Pieti Kinnunen

November 13th, 2024

*This post was written over two years ago, and while it reflects the best information available at that time, some details may have changed.

• Vercel v0 is an AI-powered tool that generates UI components from text prompts, primarily outputting React code compatible with Shadcn UI and Tailwind CSS.

• You can describe your app’s functionality and design, and v0 will generate working code with an interactive preview to help you quickly get a "v0" version of your idea.

• You can refine your UI by prompting the tool to tweak functionality, design, or styling. You can also upload images for design inspiration.

• v0 is great for prototypes, but you’ll still need to review, refine, and integrate the code into your project.

What is v0

Vercel v0 is an AI-powered tool designed to generate user interfaces through natural language text prompts. By default it creates React code but it can be used to generate code in other languages as well, for example basic HTML and CSS. The generated React code is directly compatible with Shadcn UI and Tailwind CSS and you can also prompt the tool to generate the code in other coding languages.

Users can describe their desired UI and its functionalities, and v0 will generate the code for it and display an interactive preview of it in a NodeJS environment. The user can continue the discussion and make the tool iterate on the code and design.

As the name suggests, "v0", the tool is meant to assist in getting the first version of your project done and you can go on to iterate on it creating your own version 1. V0 is aimed at streamlining the process of UI design and prototyping, making it easier to develop interfaces quickly.

How to use v0 for UI prototyping

When I start prototyping a new UI, I simply give the AI a prompt describing what I want my app to do and what features it should include. It’s amazing how quickly I can get a working layout just from a few sentences. Sometimes I’ll include the styling details in that first prompt, but I’ve found it’s often better to begin by generating just the functionality. Once the core structure works, I iterate with the AI to fine-tune the design and styling.

If something’s missing or not behaving as expected, I just write another prompt explaining which part of the app needs to be updated and how. Most of the time, the AI understands exactly what I mean and adjusts the app accordingly. Of course, there are moments when it generates something unexpected—that’s when I rephrase my prompt to clarify my intent.

I also love that I can upload an image for the AI to use as design inspiration or even as a component within the app.

Prototyping with v0

Here’s an example of a basic prompt and what v0 generated: “Create a todo list with the title "Things to do" that lets you update the list items after creating, and has a checkbox to complete the list items. Once completed, the item should move to a second list with the title "Done" “

The chat bot generated me the full code that is needed for all the styling and functionality for the component. If I wanted I could just copy-paste the generated code into my project to use the component (after installing Shadcn into my project as the UI components take advantage of that library and Lucide React for icons).

I then wanted to update the look of the component so I gave the app the following prompt: “Can you make the background of the section a soft white, the list itself should be a light blue with the texts being a dark gray.” And this was the result:

As you can see the background of the whole section is still just plain white so the application may be struggling with updating things outside of the current component that it creates. All in all it did add some of the updates I requested and I could keep iterating on this with the chat or I could take the code and finish it myself.

In this case the chat would have saved me a lot of development time as I would not need to fully build the functionalities of the list application from the ground up and instead could focus on styling and implementing the component into my project.

Can you code a whole project with v0?

V0 is designed for prototyping and not for creating projects from start to finish. Technically you could use it for a full project, but you would still need the technical know-how in order to manage the whole setup. For example I prompted v0 to create me a base for a Next.js project and it gave me three separate components. I'd then need to move those components over to my local project and combine them to be able to make the project function properly.

Vercel v0 pricing

V0 has subscription tiers with different levels of features. Along with the subscriptions, v0 includes a set amount of input and output credits that are used for sending prompts and receiving responses as tokens from the tool. Input tokens cost ranges from $1.5/1M tokens to $15/1M tokens depending on the model used. The web app uses the basic v0 agent which is the cheapest and the other models are only available via v0 API.

1M tokens for only $1.5, that sounds like a lot! So even the free tier includes 3.3 million tokens. You may be thinking how could you ever type that many input tokens, let alone any more included in the other plans? Well, input tokens don't mean just the typed out characters; relevant context that v0 uses to generate the responses, like chat history and your source files, also use up your input tokens.

Each plan comes with a set amount of credits and more can be purchased. On plans, other than the free tier, users can also get $2 worth of credits daily by logging in.

Free

There is a free tier that includes a limited amount of daily messages and not much more features than the bare basics. The tier includes $5 worth of included monthly credits.

Premium

The next tier up is "Premium" for $20 a month, which includes 4x more credits than the free tier. Additionally, the premium tier allows you to use “projects” in v0 which allow you to organize your chats into groups and also lets you bring your own data sources so the application can be more context-aware and help you in your specific use-case.

Team

The next tier from that is “Team” for $30 per month per user. This tier is directed towards project teams as it allows the team members to share chats and projects amongst each other. The tier also includes even more credits.

Business

The next tier above Team is “Business” for $100 per month per user. This tier is directed towards project teams as it allows the team members to share chats and projects amongst each other. The plan also includes the same amount of credits as the Team plan. With the business plan you are opted-out of training the model by default.

Enterprise

The highest tier is “Enterprise” which has custom pricing and is directed towards enterprise level customers. The tier allows you and your team to use SSO for v0 and also lets you opt out of data training based on your inputs.

Conclusion

V0 is a powerful tool that makes prototyping and iterating on ideas a lot quicker and more streamlined instead of coding everything from scratch. Like with every other AI-tool out there, you need to keep in mind that the generated code should not be used right out of the box as there may be bugs and other issues integrating it into your codebase.

V0 doesn’t directly generate production ready code and the user is responsible for making sure that the generated code is not copyrighted by someone else in case they want to use it in production.