Hey there.
Eden here.
And in this video we're going to introduce v0 and c-n-y, which allow us to very easily create UI components
that we can use.
Now this is very cool.
And we're going to see in the following videos how we integrate that within our cursor flow.
Let's talk about V0 by vercel.
And I think front end is dead.
And I can't explain even how excited am I on all those cool technologies that help us build beautiful
web applications.
And the reason why I am ecstatic on vercel v0 and cursor is because I wasn't a full stack developer
or a front end developer.
And really, I had a huge gap all of that time.
All right, let's talk about V0, which is a chat based web development companion.
We basically put here prompts and we get in return components or full web pages that we can integrate
into our software.
And you might think hey what's the difference?
I can use ChatGPT or Claude or whatever, and they can generate code and I can get that code and put
that in my code base.
And first of all, you're correct.
But the difference is that this companion, this copilot, is dedicated for web development.
And you can really see the artifacts and the results of what you get, and you can iterate over it.
And it's very, very natural and convenient to use.
And we'll be doing this in the course.
And Ken is a collection of reusable components that we can simply copy and paste into our applications.
It is very easy to use and we'll be showing this in this section.
And of course V0 has a free tier which is very generous and more than enough for this course.
All right.
So let me just go and let's explore some designs that other people made.
So we can simply browse here.
And let's take a look on this design for example which is a form.
Let's look for others.
So let me go back and let's, for example, take a look at this table over here.
So you can see this is a table for financial things.
And it actually looks very nice.
All right let's take a look on one more design.
So let's go back and let's take a look at this landing page here which is currently on mobile mode.
And we can go and change it to be in the computer desktop screen.
And it looks also very nice and very modern.
All right.
So let's go back and let's go to the chat.
And I just want to warn you in advance.
This is a rabbit hole.
Even when I made this video I spent like an hour scrolling around and looking at other people's designs.
So that's a heads up.
And let's go to the chat and let's see how we can build our own cool designs.
So let me write in the prompt.
Please create a landing page for a GitHub analyzer which outputs with I GitHub open source repositories,
summary analysis stars, imported pull requests, etc. I have a bunch of typos, but the AI doesn't
care, so hopefully you don't care as well.
And we have here as well a color palette where we can choose some themes and colors that we want.
And let's go and choose this.
For example, I flagged it to be in private mode, and we can also attach images.
So it would get inspiration and even copy artifacts from other websites and sources.
So this is very, very powerful.
All right.
Now we are starting to generate it.
And I'm not going to fast forward it simply to show you how fast this is.
And how cool is this.
So you can see it starts now to generate the header the titles.
And we can see it's actually very fast.
And what I like about it is that we can actually see what we're going to get.
We can see it also generates graphs that we can use.
So very complex data structures.
And looks like it's done.
All right.
So I'm still not showing you the code behind this that was generated because now I'm going to log in.
And this is the main chat that once you log in you can interact with.
And here I'm going to write again a similar prompt to write.
Create a landing page for that the GitHub analyzer.
It's a SaaS application with a free tier which gives an API to get summary analysis stars and imported
pull requests information on open source GitHub repositories.
All right.
So let the V0 do its magic.
And we can see now it's starting to generate.
And here is the title and the header and the hero.
And we can see the logos.
Looks nice.
And again I'm not speeding it up.
This is in real time what you're seeing right now.
All right.
This is the code.
This is TypeScript code.
We can copy and paste it and we'll see this in the videos.
And I remind you it's going to use CDN components.
All right let's go and continue the preview.
And it still keeps generating things.
And we can see we have an error here.
So I can also make mistakes.
So I'm not going even to try and fix it myself I'm simply going to click here fix with AI.
And you can see it added it to my prompt here.
Cool.
So let's wait for it to finish and then we'll send the new prompt to fix.
All right.
Let me just go and submit that.
And yeah.
So now it's going to fix it.
Let me just close this and it's going to regenerate everything.
Now what I like about this as well is that notice that in the beginning we see just a little bit of
the code.
So as far as the user experience, we know that the output is also some code that we can copy paste.
So I think it was a very smart choice product wise to make this a UI and UX like this.
All right.
So let's wait a couple of seconds until it finishes generating our landing page.
All right.
Let's go to the code.
And here we have a bunch of options to copy it to fork it maybe to share it with others.
This prompt to download it as a file.
And really it's very easy to use.
And we'll be showing this in the next couple of videos.
All right.
I just want to go to CDN and I want to show you some cool integration they have with V0.
Now this is their website.
And this is a rabbit hole as well.
And we can go for example to see dashboards and really some cool components here.
Let's go to the top here.
Let's for example select maybe cards.
And yeah very cool.
Anyways what I do want to show you is the blocks feature.
So let's click that.
And here we have a bunch of components and their previews.
But what we can actually do with them is click on lift mode.
And if we'll see here we can see this pop up to copy them.
But we can open them with v0.
So now we're in the V0 chat window.
And we can tweak them.
And we can change them to our needs.
So for example I'm here A writing this component of a progress bar to make it for an API key consumption.
We got an error.
Let me just go and fix that.
And we can see the code at the beginning.
And now we can see that this card is going to be adjusted to be for an API key consumption, which is
very cool and very nice.
All right.
Let me just write to it.
Change the colors to blue.
Right.
So I fast forward it a bit and now we can see we have blue colors.
So I like the UI here and the feel that we get.
And this is very natural and easy to use.
If we go we can go and take this code and reuse it.