Transcript
00:00:00This is an event landing page I built myself in just a few minutes.
00:00:05It even includes an AI-powered virtual try-on experience.
00:00:09My boss assigned me the project and V0 helped me turn my ideas into real software.
00:00:14In this video, I'll show you what V0 is and how to build projects step by step.
00:00:19So what is V0?
00:00:21AI makes it easy to generate code.
00:00:23V0 harnesses that power into a format that makes it easy for anyone to build real apps
00:00:28and websites or collaborate with developers.
00:00:30V0 is designed to help you go from zero to shipped as fast as possible.
00:00:36This is how V0 works.
00:00:37You describe the app, agent, or website that you want, and then V0 generates the code in
00:00:42a live preview.
00:00:43You can make changes and modify your project by talking to V0, tell it what changes to make,
00:00:48and it will make them for you.
00:00:49V0 generates real software using Vercel and Next.js, but V0 isn't just a website builder.
00:00:56It can generate real apps, connect them to AI and databases, and generate code that developers
00:01:00can use and deploy.
00:01:02This is possible because V0 is built by Vercel, the creators of the Next.js coding framework,
00:01:08which is used by brands like Under Armour, Stripe, and Notion.
00:01:11So when V0 builds and deploys your Next.js app, you're using the same code and secure
00:01:15infrastructure as the top companies in the world.
00:01:19Let's show a few projects so you can see V0 in action and how easy it is to get started.
00:01:24So I'm on a marketing team, and I have two big projects to do this week.
00:01:27First, I need to build an event page for a new product we're launching.
00:01:31And second, I need to update a landing page on our website.
00:01:34Let's start first with the event page.
00:01:36The event is for a product release party where we'll be dropping a new watch called Son of
00:01:40Ali.
00:01:41I want to make the landing page stylish and exciting to build hype and create an engaging
00:01:45virtual try-on experience for visitors so that they register.
00:01:48So I'm going to tell V0 to do just that.
00:01:53I'm all done running my prompt.
00:01:54So now I'll submit my instructions, and V0 will start building.
00:01:59While V0 is building, I want to show you what makes it so powerful.
00:02:02If you click on Settings, then Integrations, you'll see all the integrations available
00:02:07to you in V0.
00:02:09First you can see that V0 has AI built in already.
00:02:12It will use the AI SDK to build out AI features and the AI gateway to give your app access
00:02:17to hundreds of AI models automatically.
00:02:20You can also build out or connect to databases to power the back end of your app and even
00:02:25accept payments through Stripe.
00:02:27With these integrations, you can build out real, full-stack AI-enabled apps.
00:02:32Okay, let's check on our event page.
00:02:34V0 finished building out this first version, so let's test it out.
00:02:38So I'm going to go ahead and upload an image of myself, and it should give us those four
00:02:44generations that we asked for with the virtual watch try-on.
00:02:49Awesome, so V0 has actually taken my instructions and updated the code.
00:02:55If we look at the editor, you can see that V0 is actively updating the Next.js code.
00:03:00The editor also makes it easy for developers to review and edit code.
00:03:04All right, V0 is done making changes and they look great.
00:03:09Before I publish this, I want to share it with my team for feedback.
00:03:12So I can click on Share and then copy the link and send the chat and preview to my team.
00:03:18What they see with this preview will be exactly what the users see when I make the page public,
00:03:22so I don't have to worry about anything changing when I actually deploy.
00:03:26Once my team has reviewed the page, I'm ready to give it a custom URL and publish it.
00:03:31What's more is that this actually has created a project on Vercel for this V0 creation that
00:03:36I've made.
00:03:37So if I click on Inspect on Vercel, I can go and actually take a look at that project.
00:03:42Within that project, I can see all of the analytics, errors, and a complete history of deployments.
00:03:48Okay great, so I've published this app to production.
00:03:51So now I can actually visit the live site and this will be what users see and I can share
00:03:56that link and they can access it publicly.
00:03:59What's really cool with V0 is that I can actually choose to add a custom domain.
00:04:03I can customize the domain at .vercel.app, buy a domain, or add a domain that I already
00:04:09own.
00:04:10Since this is a page for a one-time event, I'm going to customize the base domain and
00:04:14then publish it again.
00:04:15Great.
00:04:16Okay, now that domain is updated and I can access the same page at that new domain that
00:04:21I've edited and added.
00:04:23And that's it.
00:04:24V0 has now deployed my app on Vercel's infrastructure and it's public for anybody to be able to access.
00:04:30Now let's move on to my next project, which is updating a landing page that has already
00:04:34been published on our marketing site.
00:04:36Our development team manages the site and version controls the code through GitHub, so I'm going
00:04:41to need to make the update as a part of their workflow.
00:04:44The good news is that V0 makes it easy for me to do exactly that.
00:04:48I'm going to open a new V0 window and click on import from GitHub.
00:04:52I actually already have the URL for this GitHub repo that I'm trying to access, so I'm going
00:04:56to go ahead and then paste it into that top bar and click import.
00:05:01And just like that, V0 imports the repo.
00:05:05So now V0 has imported the repo and I'm ready to make a change.
00:05:08What I'd like to do is add a banner to the top of this marketing page that directs people
00:05:12to that event landing page we just created so they can sign up for the Son of Ali launch
00:05:17event.
00:05:18So I'm going to ask V0 to do just that.
00:05:21While V0 makes the change, I'm going to go ahead and click on Git.
00:05:27You can see that V0 has automatically created a branch for me, which will make it easy for
00:05:31my developers to review and test the changes that I'm making before merging them into the
00:05:35main site.
00:05:36All right, V0 has made the change, so now it's time to create a pull request that my
00:05:42team can review.
00:05:44So I'm going to go ahead and click on open PR and then open pull request.
00:05:49Now if I click on view PR, I can see that my pull request has been opened on GitHub.
00:05:54And because our site is on Vercel, a preview build has automatically been created.
00:05:59So not only can my developers review the code, but the rest of the team can see what the update
00:06:03looks like and give feedback through comments.
00:06:06And that's it.
00:06:07I just made a change to our marketing site by myself without opening a ticket for engineering
00:06:11and they can review the change as part of their existing process.
00:06:15We've built V0 for teams who work with developers, whether that's marketing, product, founders,
00:06:19or even engineers themselves.
00:06:22With V0, anyone can turn their ideas into real software and collaborate on existing apps and
00:06:27websites.
00:06:28Visit v0.app and ship your first project today.