Vercel

Build a Web App with Just a Prompt: Vercel’s v0 Explained

Imagine a world where you could build an entire web application simply by describing it. Well, it’s not a fantasy anymore. Here, I’ll show you how Vercel’s v0 has revolutionized web development. By the end of this article, you’ll learn how to turn your written ideas into production-ready web applications!

Vercel’s v0 is a generative AI tool with an ambitious goal – to help people build websites and web applications more efficiently. You can think of it as the ChatGPT for web developers, primarily focusing on building UI components and logic for web applications. It allows you to quickly turn your ideas into a live web app that people can interact with.

For context, Vercel is the name of the company that created v0. It’s a cloud platform that provides hosting services as well as other useful tools for developers, including v0. The basic version of v0 is free (with some limitations), but it should be more than enough to get to know the tool. If you're interested in pricing, you can find it – 

For professionals, it means a boost in performance and development speed. For young web “padawans” (attention, Star Wars reference!), it’s a great way not only to write ready-to-go apps but also to use it as a learning tool. They can learn how to read and analyze code and discover new web development strategies.

What about those who don’t know how to code? While Vercel itself requires some technical knowledge, it integrates well with other platforms that offer no-code or low-code solutions, enabling non-coders to deploy and manage simple web projects with minimal technical involvement.

Beyond these points, it's also a good tool for getting quick design ideas. Let’s be honest – most developers aren’t that great at creating professional UI designs (may God forgive us for the example below).

And they don’t have to be! Because that’s the designer’s job. But v0 can help with initial UI ideas, allowing developers to use it for quick design prototyping by simply describing what they want.

Overall, v0 is designed to remove barriers and enhance productivity for everyone involved in the web development process.

The next logical question is, “But what frameworks does it actually support?” v0 is particularly strong within the JavaScript ecosystem, especially with Next.js and React. This is because Vercel is the creator of Next.js, so naturally, v0 is particularly optimized for it. Given that Next.js is built on top of React, v0 is also incredibly good for building React applications.

But don’t worry – it’s not limited to just Next.js and React. It also supports frameworks like Svelte, Vue, Remix, and others. Moreover, it supports serverless functions in multiple languages, including Python and Rust. While you cannot build a UI with Python or Rust, you can use them to run scripts and backend logic. So, while v0 is more proficient with Next.js and React, you can still achieve decent results with other frameworks and even run some backend logic.

What about a more comprehensive list of supported frontend frameworks? Well, since v0 is a foundational part of Vercel’s platform, it supports most of the same applications and frameworks that Vercel does. This means that most applications you can deploy on Vercel should be compatible with v0. And to check if your framework of choice is supported, you can visit Vercel’s official documentation, which you can find – 

Oh, and did I mention that for supported languages and frameworks, you can often deploy them without having to do any upfront configuration? Since Vercel is, among other things, a hosting platform, whether you're working with Next.js, React, Vue, Angular, etc., you can leverage it for fast and scalable deployments. Therefore, Vercel’s v0 is not only good at writing code but also convenient for deploying it to production.

One of the big benefits of v0 is that it’s aware about the latest framework versions that it supports. For example, where ChatGPT only has a few months old knowledge at its disposal, v0 tries to actively access and integrate the latest documentation for its supported frameworks. So it can refer to it and always stay up-to-date. And as usual, it works the best with the Next.js and React.

Let’s also quickly mention about what you can input into v0. Besides basic text input, it also supports images and Figma designs. But more on that later - we will cover inputs in more detail in the following sections.

If we’re talking about outputs, v0 recently received a significant quality-of-life update. In the past, v0 was “single-window” in nature, meaning it couldn’t output code in a file-like structure. The output was essentially a monolithic text stream. But recently, this has changed and now v0 can create files, folders, and write code not as the wall of text but as the structured project. We will cover this in detail in the following sections.

Is Vercel’s v0 perfect then? Of course not! It struggles to handle more complex projects. The more complicated your project, the higher the chance that v0 start to make mistakes or hallucinate – producing code that might require additional debugging and attention. Which might be a challenge for people who aren’t developers and are relying on v0 primarily as on a no-code/low-code tool.

Another issue with the v0 that it’s typically generates rather generic design elements, and usually relies on its predefined templates to create its responsive and interactive designs. While these templates are great for quick results, they can make your project feel a bit less unique. That’s why you can (and often should) tweak the base design elements to give it a personal touch. Just a little extra effort can help your project stand out.

That was a lot of info! Now let’s summarize the pros and cons that you might expect while working with the v0.

And now, let’s finally learn how to use v0 to its full potential!

Let's start with v0’s feature that I think not enough people are talking about – just use it as a chat! v0 is really good at answering web development questions, and it does this job much better than, for example, ChatGPT. As we mentioned in our “Overview” section, this is because, unlike ChatGPT, v0 is aware of the latest versions of the frameworks it supports. Not only that, but v0 is also specifically tailored for web developers, which in some cases makes it better and more accurate at answering questions about web development and front-end technologies (such as TypeScript, React, Next.js, etc.).

So, it's a great tool that can help you learn about the latest React version or debug your Next.js code. It's especially useful for junior web developers, as they can ask about the latest updates and innovations of their framework of choice and receive accurate answers. Or even just to ask general web development questions and, on average, get better results than from ChatGPT.

Another really cool aspect of v0 is how it answers certain questions. For example, let's ask it, “Tell me about the most useful new features in the latest Next.js version.”

It not only provides an accurate answer by accessing and using the latest information about Next.js, but it also, if possible, includes references to relevant documentation (specific parts of it)! These reference links are provided at the end of its response.

Which is a great help if you want to get deeper into the documentation yourself.

Next, let's explore v0’s most well-known feature – generating UI. The workflow here is pretty straightforward. Just tell it in the chat that you want to create something and explain the details about your UI. v0 will automatically understand that you're not just asking a question but giving an instruction to create something. You will then see v0 generating code right in front of your eyes.

As a test, you can click on one of v0’s suggestions below the chat. Let's pick 

Right away, you would be able to see that it starts to think about the output.

And after some time you’d be able to see not just a text response, but the whole file system with fully structured project, which you can preview right away!

And as we initially mentioned in our “Overview” section – previously, it used to be just a wall of text with the preview window. But now, it's fully operational mini IDE right in front of you! And at the top of the IDE, you can switch between three different tabs: 

 tab, is that you can not only review the generated code but also edit it using this mini IDE. Just update any file you want, click 

If you want to preview your application in the new browser tab, just click following button while you’re in the 

 mode. But please, keep in mind, that the URL which you're going to see in new tab is the publicly available URL. Therefore, if your page contains any sensitive information, do not share e.g. a screenshot of your browser with others.

And if during generation you ever face an error, v0 can I help you with that as well. Whenever v0 detects an error in your code, it would enable a pop-up message. There you would be able not only to read about the issue but also to ask v0 to fix it! For that, all you need to do is to click 

It might not always perfectly fix your issue, especially if it’s a complex one. But it should be able to help you in most cases. Otherwise, you can click the button to copy the error message and try to debug it yourself.

What if you did not like generated output and want to update it somehow? Well, next let's talk about ways how you can update your code. And how to get different versions/iterations of the application that you are working on.

1. The first way how you can update your code we have already covered in the previous section. Basically you can simply use built-in IDE and jump into any file/code line that you need and manually update it. For these type of changes you can undo them only by using 

 shortcut. Unfortunately, in this case there is not much flexibility in how you can manage and jump between different versions of the code.

2. Just ask v0 to update it for you! Simply explain how do you want to update your app. And then it will start to do so right away. For example, we can ask it to add a new button.

One benefit of this method is that v0 creates snapshots of the applied changes and marks them as 

, and so on. You can switch between these versions either by clicking the version preview in the chat or using the arrows at the top to navigate between them.

3. Another great way to update your component, is to click on the element that you want to update and to describe new changes. This gives you a really precise control over your existing code.While you are in the 

 tab, just click arrow-like button at the top and select whatever element on the screen you want to update. This will trigger a small input field next to the selected element where you can explain what you want to do with it.

Similar to chat-based updates, this would also create a new version that you can manage and revert to if needed.

Now that we have learned how to update your code, let's cover how to manage all those different versions of it.

Another useful feature is that you can fork your changes. For example, let’s say you have three different versions of your application and you want to update the second one without breaking an existing workflow in your current chat.

To do so, first enable whatever version you want to fork and modify. Then, in the navigation bar, click the button that looks like a branch.

What will it do? It will create a completely new chat. And the version that you have picked would become the base version of your application. Where you can apply and test whatever changes you want, without actually breaking your initial main chat. This way you can test new ideas/changes while keeping your workflow easy to manage and operate.

Let's say you liked the result of the generated application. Now let's figure out how to move code generated by v0 into your project.

First of all, let's see how you can manually copy a code block. To do so, open the 

 tab. At the top right corner you would notice the two buttons from the screenshot below. The first one allows you to copy the content of the current file, if your project consists of multiple folders and files. The second button lets you download the whole project at once.

Another approach is to use a script to do the job for you. In this case, you need to push the following button, which will show you a script that you can copy and run in your project. After you run it, the changes will be applied automatically.

This is a really useful feature, but it has its limitations. It works really well only if your project uses the 

 library. You can see the name of this library at the very beginning of the script. However, if you're not using 

 in your project, I suggest copying or downloading your code manually.

Now, let's learn how you can share your v0 application with others for a preview.

1. As we discussed in the “Code generation” section, you can preview your generated application in a new tab, from there you can simply copy the URL and share it with anyone. Until you delete your project in v0, this link will be available 24/7

2. Another way is to click the “Share” button at the top. Then, in the pop-up modal window, you will be able to choose the level of access you want to grant to the person you’re sharing the link with.

But this is not the same as simply sharing the URL. This way, you’re actually sharing the whole chat along with the generated code. Keep in mind that, by default, your link will open a full-screen preview of your application. To access v0’s interface and chat history, you need to click the button in the top right corner (screenshot below) to exit full-screen mode. Once you do that, the familiar v0 interface will appear.

3. Finally, you can easily deploy your application live if needed. Since Vercel, among other things, is a hosting platform, it means that anything you generate with Vercel’s v0 can be quickly and easily deployed on their platform. Of course, if you just want to share your application with others, you can simply use the two previous methods. But if you want to ensure that your application doesn’t disappear after deleting your current v0 project, as well as save yourself the hassle of exporting your application and uploading it to a hosting service, or if you want to give your application a professional-looking URL, this is a viable option for you to consider.

 at the top right corner and follow the instructions.

Whether you an engineer who builds from the Figma designs, or you are a designer who wants to get a little bit more into writing code – v0 allows you to import those Figma designs and use them to build an application. Even though results might not be perfect, especially for the really complex designs, v0 still does a pretty good job of creating close-looking apps out of it.

However, it's worth mentioning that right now it is considered a premium feature, and thus it is pay-walled.

To import your design and start working on it, all you need to do is to click 

After that, login to your Figma account and copy the project’s URL. Then you can paste it into v0’s pop-up window. Once you see that your Figma design is attached to the chat, write down the instructions for what you want done with it. For example “I’m making an AI chat app, please build it for me using provided design”. And that’s it! After that, you can update your app anyway you want.

You can use images as a design template in a way very similar to how we used Figma. And this feature is not locked behind a premium subscription.

All you need to do is import an image that contains a design you like and then write a prompt describing what you want to do with it.

There are two simple ways to import an image. The first is to simply drag and drop the image into the chat window. The second is to click the 

 button and choose an image you want to use.

Vercel’s v0 "Projects" feature allows you to generate and manage AI-generated code in a more structured way. To create your own project, head to the 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Build a Web App with Just a Prompt: Vercel’s v0 Explained

Tags

Tools

Level

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript