How to build apps with AI

Getting started – building a Technically app

This is the v0 homepage:

It’s got the familiar chat interface for AI, where you can just tell it what you want to build. But you can also:

• Pick an existing template from the community to riff on

• Upload a screenshot of an app that you want to build

• Import a Figma file

• Pick a pre-defined kind of app, like a landing page or signup form

Basically, there are a bunch of ways to start.

The word “app” means a lot of things to a lot of people. When I think about v0 as someone with a marketing job, I think of a tool that can help me build websites quickly. If I have a product launch coming up and don’t want to wait on engineering for a new landing page, I could use v0 for that. Or even for something as specific as a mini-site (complete with a lead intake form) for a conference I’m running.

While writing this post, I dug through the annals of Technically history and found some old designs from an OG Technically website:

When you upload your screenshot, the model reads back to you what it’s seeing, then starts generating code. The first version was alright, but definitely needs some tweaks:

You can chat with the model directly to iterate on the app. I want the header logo to be the Technically computer icon, not the entire original screenshot, so I told the model that:

It made its own illustration instead, but not bad! I also want to add some navigation, so I prompted the model in pretty simple natural language:

Solid.

No matter what adjustments you make, the same thing is happening under the hood: v0 is rewriting and adding code to the project to match your prompt. It shows you this happening in real time, which is pretty cool. You can see the project code too:

All of the code is editable and version controlled – v0 might be building the apps for you, but it’s all happening via transparent code and you can shift into developer mode whenever you want more fine grained control.

If you’re curious about the models under the hood: Vercel uses an ensemble of foundation models and their own post-trained models so that v0 is able to use libraries and frameworks from the Vercel cinematic universe like React, Next.js, and React Three Fiber and GLSL for 3D graphics. But you can also tell v0 explicitly to use whatever framework or library you want.

Whenever you’re happy with how your app looks and works, you can use Vercel’s infrastructure to actually deploy it out to the world:

And here it is, live on the web for all to see.

v0 obviously isn’t the only way to use AI to generate code. You could use a model interface itself (like ChatGPT ) or an IDE (like Cursor), or any number of other tools. But v0 is about building apps, and the features they’ve built to support that like previews, forking, and one click deploys (the Vercel team used the term “code-last” to describe v0 in contrast to code-gen tools that are code-first). In my experience there’s no faster way to get from idea to live app or website than this.

Some more advanced v0 stuff

This little Technically site is, admittedly, a simple app. But what if it wasn’t…

Setting up a backend

Let’s say I want to add a subscribe form to the page. The data that people enter here needs to get stored somewhere (a database). Now we’re moving from a purely frontend app to a full stack one. How does v0 handle that? It’s pretty slick:

Vercel has built-in storage integrations with a few different providers (like Supabase, Neon, and Redis) that we can use instead of going through the trouble of setting up our own database . Clicking on any of them takes you through a flow to create an account and then configure the data:

Once you finish creating the database, you get redirected back to v0 and the model prompts you for what you want to do next (in our case, create that subscribers table).

With v0 integrations like this, even app backends are easy to deal with.

Customizing v0

You can customize v0 to better match whatever project you’re working on. First, v0 lets you use “sources” (basically, your own data) that you want the model to reference and pull from when generating code. You could include documentation for your app, visual references, even existing code that you want v0 to model things after.

You can also mess with the instructions that the model gets. You can tell the model to only use specific libraries and frameworks, always use the color blue, avoid certain UI patterns (like no scroll animations, please), or even just default to specific styles.

Working with your team

v0 has a bunch of slick collaboration features so you can work on these apps with the rest of your team. You can share a project with a team member (or anyone), including all of your chat history with v0 so they can see how you got to where you are:

You can also use this handy “fork” button to make a copy of a teammate’s project and riff on it without editing their original work:

All of the code here is version controlled , and soon (release in 2 weeks) you’ll be able to connect it to a GitHub repo so it fits into the version control flow of the rest of your team’s work.

v0 community

v0 has a community section, where users can upload their own apps. Internal Vercel sources tell me that 1.3M people have used v0 so far, so there’s a lot to choose from. You can fork any app and turn it into your own, plus see an actual deployed version and interact with it:

Other very serious projects v0 can do

All generated by v0:

I am not sure why the model picked this photo of Luigi but hey.

Using v0 yourself

You can start with v0 for free with messaging limits and up to 5 projects. Everything works nicer if you already have a Vercel account that you can integrate and deploy projects to. Check out some projects from the community, and get…imagining?