Creating a frontend for your ML application with Vercel V0
Developing a clean and appealing website for your ML application can be difficult, especially if your primary work consists of backend or machine learning tasks. Personally, I mostly work on developing ML models and automation tasks, meaning I don't spend a lot of time writing frontend code or working with design. I often use Streamlit to deploy my machine learning models quickly, and I still think Streamlit has its place for quickly making machine learning models available. However, Streamlit should only be used for initial testing; if you want to attract consumers to your website, you have to develop a better-looking page to intrigue and retain the consumers going to your page.
In this article, I will describe how I used v0 by Vercel to quickly develop a nice-looking website for my RAG search application for Norwegian court rulings. I have previously written a separate article about developing the RAG search. The best part is that it is completely free to use, and as long as you stay within the quota of prompts, you are provided with them without cost.
Disclaimer: I am not affiliated with or have any relationship with v0 by Vercel. It is simply a tool I have used, and I am thus writing an article about how I have used the tool.
You can find the website created in this article linked below:
Motivation
My motivation for this article is to create a fancy-looking website for a RAG search application I have developed. However, I usually find writing Frontend code for design (meaning writing code to make a website look good) particularly boring. Because of that, I am also very bad at developing websites that look good, and I find it difficult to create appealing-looking designs that attract consumers. Previously, when developing ML applications, I used Streamlit to host my application. Streamlit works well for early-stage testing of an application when you need to see if a consumer needs your product. However, if you want to launch a product and attract consumers, Streamlit doesn't cut it. In my opinion, Streamlit looks ok, but it also gives off a cheap vibe, indicating that you have not spent a lot of time working on your product (even though you might have spent a lot of time developing the backend of the application, the frontend will still give off that vibe). I therefore want to create a more appealing-looking website for my application, and thus, I started using v0 by Vercel to help me develop this website.
You can read about another SaaS application I have developed with Streamlit below:
Table of Contents
· Motivation · Starting with v0 · Using v0 to develop your frontend · Iterating on your website with v0 · Deployment · Conclusion
Starting with v0
You can access v0 for free on Vercel's website. You should note two primary points:
- The free tier only offers a certain number of prompts daily, so if you don't want to pay for the service, you should try to be conservative with your prompting.
- You should use Next.js, as that is what v0 is primarily made for
I have little experience developing frontend applications and have never worked with Next JS before, but the quota was enough for me to develop the website highlighted in this article. Furthermore, you could always wait until the next day, and your quota will be refilled. If you need a higher daily usage limit you could also pay 20 USD monthly for premium access.
Using v0 to develop your frontend
My application is a simple RAG search where a user inputs a prompt, and my application responds with an answer and the sources it uses for the answer. Thus, I have a simple backend with one endpoint, which takes in a user's prompt from the front end. The endpoint processes this request and responds with a text (the RAG answer) and a series of objects representing the objects GPT used to give its response text.
My initial prompt to v0 was:
i need a fancy looking website for my rag search application.
I already have an endpoint to perform the ragging (takes in a prompt,
and return a list of texts i want to render). Can you make the
frontend application for my app?This was the original design v0 came up with:
I thought the design looked pretty good. It has also been added to highlight the fields when I hover and press the field and the button. This is code that probably would've taken me many hours to write, for example, to get the colors, positioning, and hover and press effects. This shows how v0 has already saved me hours of work. Also, you could ask for specific tweaks to the frontend code, for example, different colors and so on, and v0 will create a new website for you. V0 also shows you a preview of the code in the chat, meaning you can see how it looks before even putting it in your own code.
I also noticed a significant difference between using GPT-4o and using v0 by Vercel. Overall, GPT-4o is the better LLM, of course, considering that you can ask a large variety of questions. However, when it comes to developing frontend code, v0 by Vercel is far superior concerning the output quality and the user experience when utilizing v0. When developing frontend code with GPT-4o, I often have problems with the code not acting how I want it to, for example, the coloring looking weird, the positioning of the objects being off, and so on. This is not the case with v0, which can develop an attractive-looking website from one single prompt. For someone who would have to spend hours developing such a website (and would also not enjoy that time writing the frontend code), it is immensely useful.
Iterating on your website with v0
After copying the code from v0 into a next.js project, I started iterating on the website. Since I had little experience developing frontend applications, this took me a while, though I could figure it out by prompting GPT-4o and v0 by Vercel. These were problems with setting up the API call to my backend and general package issues. v0 by Vercel uses a lot of Shadcdn code, which you must install (and v0 did not inform me that I had to install it). You can see how to add Shadcdn components here.
There were several elements I wanted to add
- The response from ChatGPT answering the user's question
- A nice overview of the sources used by ChatGPT to answer the question
- For each component of the overview, a detail page where you can see more specifics about each source
- Collapsable text to make the website less chaotic
All four points were added using one single v0 prompt. In some scenarios, however, the feature was not added exactly as I wanted, likely because my prompt was not precise enough. This was usually fixed by another prompt, telling v0 to fix the issue at hand.
You can see my full interaction (chatlog) with v0 by Vercel here.
Deployment
You can also easily deploy your website for free using Vercel. You simply have to create a project on Vercel and link it to your GitHub account. With this, Vercel auto-deploys your application, for example, whenever there is a push to your main branch. I had never hosted a website on Vercel before, but the deployment process is so streamlined that I could do it in 10–15 minutes.
Limitations of v0 by Vercel
Though v0 is a powerful tool for creating frontend applications, it does have its limitations. First, it is a highly specialized tool, in contrast to ChatGPT. This means that v0 will not perform as well on tasks other than frontend programming. For instance, while working on this project, I still used ChatGPT and Google to solve non-frontend-related questions. Secondly, v0 also has a significant usage limitation for the free tier, meaning I had to use it conservatively. This can have negative consequences since you might not get the desired result from your first prompt, so you have to re-prompt the language model. The problem, however, is that when you are limited in the number of prompts you have, re-prompting the model becomes a challenge. A solution for this is naturally to pay for the premium tier of v0. However, I wanted to avoid it, considering I do not spend much time developing frontend applications (as most of my time is spent developing ML applications). I think paying 20 dollars a month for a tool you don't use a lot is quite expensive.
Conclusion
In this article, I have discussed how you can use v0 by Vercel to develop a frontend application quickly. I think v0 is especially useful if you don't enjoy spending time developing an attractive frontend application to share your application. This is especially relevant for me since most of my work is within developing machine-learning models, and I could be better at working on developing frontend code to make sure my application looks appealing.
