Prototyping
with Vercel v0

By Pieti Kinnunen

November 13th, 2024

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

You can start prototyping your UI by giving the bot a prompt requesting what you would like your app to do and what it should include. You can also include the styling in the same prompt but it may be better to first only generate the functionality and then start iterating with the AI to style the application.

If some feature is missing or not working as intended, you can write a prompt pointing out which part of the app should be updated and how. Often the AI understands what you mean and updates the application to meet your request. Equally as often the tool will generate something you did not request and you’ll need to re-prompt the tool in other words to clarify what you meant.

You can also upload an image that the bot should base the design off of, or use it in the generated component.

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

Initially v0 used a token-based pricing scheme where each message cost a certain amount of tokens that could be purchased with money. Vercel is migrating the pricing model away from that more towards a similar tiered pricing model as the Vercel platform itself has.

Free

There is a free tier that includes a limited amount of daily messages and not much more features than the bare basics.

Premium

The next tier up is "Premium" for 20$ a month, which includes 10-20x higher message limits 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 an even higher messaging limit.

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 than 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.