Getting Started with v0: From Prompt to Production

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