Build a user interface using AI prompts: Vercel V0 development kit now in public beta

Build a user interface using AI prompts: Vercel V0 development kit now in public beta
AI programming

Vercel, sponsors of the Next.js React framework, has opened an AI-driven web development kit to public beta, after the private beta attracted over 100,000 signups in three weeks.

The kit, called v0, is described as a “generative user interface system” which outputs React code based on the shadcn/ui component library, whose creator is a Vercel design engineer, and the Tailwind CSS library. An initial prompt generates three choices of user interfaces, inviting the developer to select their preferred option.

A key feature is that the developer can refine the initial design with new instructions. An example shows 9 iterations starting with the prompt “An admin user management form” and continuing with “Add a nav bar”, “put this inside a card”, “give the card a reasonable max-width”, “Add some padding / margin above the card”, “replace these with icons”, and “add a footer.” The final output is a professional-looking form that the developer can add to their project, with both HTML and React code. The command to import the code is:

npx v0 add xxxx

where xxxx is the ID of the v0 project.

Code generated by V0.dev

According to Vercel, v0 is trained on “custom code our team has written mixed with open source and synthetic datasets.” The company says it will use user-generated prompts and/or content to improve its products, but that customer data and code is not used to train the models used by v0. An opt-out will be added in due course.

Although the private beta of v0 supported only React, shadcn/ui, and Tailwind, support for other UI libraries may be added, including Svelte, Vue or plain HTML, as well as other design systems.

What about code to fetch data and display it in the UI? Vercel said that it “will explore adding support for data fetching code.”

The code generated by v0 is not just intended for prototypes, but to be high quality and suitable for production. The public beta will have both free and paid tiers.

Developers are familiar with the notion of AI-generated code thanks to GitHub’s Copilot and other such products, but AI-generated user interfaces are less common. A thread on X when the private beta was introduced showed significant enthusiasm with comments like “the best dev tool I’ve seen for some time” and “going to save so much time.” 

Some though are sceptical. “Visual UI builders have been a thing for decades and this is more or less the same thing except the input mechanism has changed. Instead of point and click you’re prompting it with text,” said one comment on Hacker News. Another remarked that “It’ll be interesting to see whether these AI tools scale into more complex work.” The history of IT is littered with bright ideas that demo well but fail once put to the test with real-world projects.

Equally, though, the task of creating forms and other common user interface patterns is often repetitive and dull and AI tools that speed this process without compromising design will be welcomed.