Video21 min watch

NEW v0.dev Clone A Website From URL!🤖 Front End UI AI Coding Agent Beats Bolt.new Cursor Windsurf?!

In this video

  1. 00:00Introduction to V0: Clone Websites from URL
  2. 00:21Overview of New V0 Features and Upgrades
  3. 00:50Exploring V0’s Console Output and Reverting Changes
  4. 01:19Demonstration: Cloning a Website from a URL in V0
  5. 01:53Limitations of Cloning: Screenshot Partial Websites
  6. 02:23Improving Cloning: Entire Website Screenshots
  7. 02:59Reviewing Cloned Code and Next.js Component Features
  8. 03:25Adding Sections and Customizing Cloned Websites
  9. 03:51Demonstrating Dark Mode and Reverting Versions
  10. 05:05New Features in V0 Compared to Bolt.new
  11. 05:40Suggestions for Enhancing the Website Cloning Feature
  12. 06:42Testing Additional Websites with the Cloning Tool
  13. 07:09Creating New Projects and Adding Context in V0
  14. 07:41Testing Full Website Cloning with Additional Instructions
  15. 08:05Cloning and Observing Header and UI Design
  16. 08:28Reviewing V0’s Screenshot Limitations and Aesthetics
  17. 09:08Debugging Hydration Errors with Console Logs
  18. 09:49Example of Error Resolution in V0 Projects
  19. 10:28Sponsored Segment: Stride Agents AI Appointment Setters
  20. 11:14Testing V0 on Complex Websites: Challenges with Verifications
  21. 11:57Insights from V0’s Self-Built Console Panel Feature
  22. 12:25Testing V0 on ChatGPT UI Clone with Dark Mode
  23. 13:09Successful Dark Mode and Feature Testing for ChatGPT UI
  24. 13:36Overview of V0 Updates and Future Potential
  25. 14:07Improvements Needed for Full Website Cloning
  26. 14:42Wishlist for V0 Features: Crawling Subpages and Scraping Links
  27. 15:34Comparisons of V0 vs. Bolt.new vs. Other AI Tools
  28. 15:56Community and Subscription Call-to-Action
  29. 16:24Final Thoughts: AI Tools, Community, and Consultation Offerings

Links from the video

Transcript

3,182 words

What's going on guys Josh poock here and on this channel we've covered many different AI pair programming tools we recently covered vzer which we covered many different times on this channel but vzer recently had some recent updates if you didn't see my last video on it I'll leave a link down below but there were a few different upgrades that I actually missed talking about in this video which we're going to cover today with VZ you can do a lot of cool

Things especially now you can literally copy a website link and clone it with vzer in one prompt really cool stuff guys we're going to dive into it show different examples and show some additional use cases and upgrades that VZ also had that you may not know of let's dive right into it all right guys so vzer has been pumping out like I said a lot of different upgrades so I would suggest tesing out my uh checking out my other video I

Made on it as well as checking out their Twitter page because they are just kind of posting all their different upgrades that they have as you can see you can revert to um certain changes you can um really do a bunch of different things here you know they have a terminal now as well in VZ so you can see the console output which is new so pretty cool stuff let's go ahead and go over to v0 all right so here we

Are at v0 so we're going to dive right into actually um creating these websites so one of the easiest ways right now is you know you no longer have to just say take a screenshot of a website you can actually just um you know copy the website link like so so we're going to try ver cels to start off this is obviously a nice UI um looking website so we can go here to v0 and say for sale loone this website

Okay so it technically I mean it does take like a screenshot automatically of the website so it kind of is like a screenshot of a website I guess it does save you time with just being able to uh obviously paste in the link now one thing I'm noticing here is that it looks like it's only taking a screenshot of the top half of the website I'm curious if it's going to get the whole entire website as we can see if I

Go to versell here and scroll down you know there's a lot to the website um there are certain screenshot like extensions or different tools or you can screenshot the entire website so if it doesn't do that um I think it would be cool okay so yeah it does look like it cuts off right here which is still good but it would be nice if it could automatically take a screenshot of the entire website so that's something I would like to see

Just with this one URL though we are getting um a pretty good starting point of the versel website as you can see we got the header you know the the buttons here you know all this stuff right here um we have kind of like a versel logo right here and icon if we take a look at the code here we can see like I mentioned in my last video you can now kind of do more nextjs type uh you know uh

Builds in VZ it's no longer just like you know one file of code it will actually have like a components folder here we have different components already split up have a page. TSX we go to here for console log so no console log output to display so we'll check back here in just a second obviously we can add to code base we could Fork which is nice that's a newer feature I believe actually I don't know how new this is maybe

It's not that new um deploy of course share I'm curious if I go here screenshot this and tell it to add this onto um the bottom part let's upload this image and say this okay so continue on with the website here is the other part when scrolling so we're going to go send this okay so as we can see or cell clone generating the code here we can see the new components being generated a featured section right here analytics section right

Here line chart UI right here okay and now if we scroll we can see this other section here um we got a line chart so obviously not perfect and you know I took a screenshot when it was in dark mode and when I pasted in the website it was in light mode so it looks a little different here we could keep improve improving this just so for some of you guys who haven't seen my other video or don't know about some

Of these new updates I'll quickly cover some of these so you can now actually click on select and select certain things so if I said for example um you know took this maybe this right here that make this dark mode just send this specifically regarding this header as you can see here it's selected the component header section right here diff div right here and as you can see we got our prompt and it is changing that section right now so this

Is good this is something that currently bolt. new does not have um which is nice I really like this okay so boom as you can see we got the dark mode here we could fix some of the but button coloring right here if we wanted to also two up here you can revert back to a previous version like so so now we're going back to the previous version or we could go to the next version very easily um that's nice that

They have that now one thing that I think would be kind of cool is you know I I was kind of more a little bit more excited for this clone website feature um you know it is still cool definitely but I would like it like for example if I copy a URL I think it would be cool one like I mentioned if it uh takes a screenshot of the entire page I think it also would be cool if it was able

To crawl the sub pages and it was able to pretty much crawl all the different links for for the website um take a screenshot of all them and then actually be able to CL completely clone a full website just as a side note I think would even be cooler which you know this all stuff will probably come fairly soon like for example there's many different tools out there where you could go like I have this tool right here that I use

Um and if I go to site stack you can see like uh teex stack um you can typically see like what the site is using like this is obviously VZ so it's using nextjs uh rod xui bunch of different stuff so if it could you know analyze a site see what its Tex stack is and actually recreate the website I think that would be definitely really cool and is something that probably will come uh fairly soon okay we'll do some more

Optimizations to some of these in just a second but I want to go ahead and test out multiple different sites right here with this new feature all right we're going to do two more sites here and just for this one too I'll also create a new project so if you don't know what new projects are it's essentially similar to like Claude Sonet you can create a project give it context you can add a name here add a description add context I'm

Just going to keep it simple for now and you can also go to add sources here you can add different documents resources you can see that we have a versel connection right here so you could view this on versel which is nice that it connects to this this is like how uh bolt connects to netlify you add environment variables here so this is automatically going to create like a project in your versel so all in all like since I not really

Adding too much context it's you know really not going to make too much of a difference that I'm doing it in a project here you could also add instructions here like you know make this like for example use app router let's just say that use app router okay keep it pretty straightforward okay boom and then I'm just going to say clone this entire website okay we're going to go send and if you're on the free tier by the way you get

Three different projects okay as you can see here we are cloning this site now this site is a compos site they just launched like Asian o here which is kind of interesting I was looking into it but I thought it was a pretty you know nice looking website so I thought it would be a good one that we can try to clone here okay so got picked up on the header uh the logo here the button the GitHub stuff right here

The star obviously you know you're probably familiar with vzer does a good job on kind of UI and whatnot you can see it looks like it even has a slight gradient here on the text um agent o I believe if I'm saying that right um the one thing like I said it is kind of annoying that it doesn't screenshot the entire page like I thought that would be pretty basic it shouldn't be too difficult for it to do that okay I

Took a screenshot of the additional stuff right I'm going to say continue on with the rest of this website here and I also said make it a full nextjs application now if I look on the console here we can actually see um looks like we're getting an error here a hydration error so you can actually see different things with the console we'll see once this is actually done Jing the code if we get any errors okay so now we have more

Of the website got some placeholders right here we got a console here we can see an HTML cannot be a child call cause a hydration error so we could actually copy this console we can see there's three events we could paste this in here you can see here it says I apologize for the errors from my previous implementation let's fix the layout to resolve the hydration issues it's modifying the layout modifying the page. TSX so it is good that we have

This console log I think it's always important like like you have a bolt. new where you actually have a console log so you can kind of see what's going on so I just kept repasting this back in here I mean uh yeah it's still getting the same issue the same error I don't know exactly why it's not being able to fix this ped it in twice so realistically obviously I would just use this code and just fix it in either myself

Or fix it in cursor are you tired of pouring thousands of dollars into appointment Setters only to watch leads slip away imagine having a team of elite sales agents booking qualified appointments for you around the clock no more wasted time on training no more frustration with performance and no more draining your budget on inconsistent and expensive call centers introducing stride agents AI powered appointment Setters that work 24/7 never get tired and book appointments while you sleep trained on thousands of successful

Conversations our AI agents El perform human teams at just one tenth of the cost join the ranks of businesses that doubled their appointments and booking rates in just a matter of weeks don't get left behind in the AI Revolution visit stride agents.com now and transform your entire sales process with cuttingedge AI technology it's time to accelerate your stride with AI agents yeah I'm going to try a third site here which is our good old friend perplexity I'm going to just say

Clone this okay and that's another annoying thing with the cloning feature that I found is like sometimes it'll take a screenshot too early like here it's saying verify you are human this may take a few seconds so as you can see now it's cloning the cloud flare verification of being a human which is annoying um to be honest I think this feature definitely could uh use some improvements this is kind of interesting I'm just just reading on the v0 um Twitter

Here they retweeted this one basically uh saying that the v0 console panel right here was built um the feature itself was entirely built in vzer so that's kind of cool it's good to I guess hear that a lot of these AI uh coding tools are building you know improving themselves with AI code with the typically the tool itself okay so instead of rxd we'll try Chad gbt here okay so it looks like the screenshot kind of messed up again here but

Luckily I guess you know chat GPT is pretty well known so it sees the chat GPT logo and it actually just kind of start building the uh interface right here okay so I said make it dark mode and make it able to send messages delete chats create chats rename chats and have a profile image on the top right and more features to make it more impressive so looks like we're getting an issue okay so I actually redid this uh prompt here

And it got this now I'm actually going to use that same prompt so this time it actually got it in one shot we didn't actually reach an issue we can see dark mode here the icon right here looks like it's using um of course Shad CN right here for components can edit the name right here delete create new chat so just like we asked let's see if we can send a chat yep so we can send a chat and we can

See we get a simulated response right here so all in all I think that one VZ has been making a lot of crazy updates like I mentioned in my last video now the whole clone website feature I think is you know it's still new I think it's useful I think it's definitely useful especially if you want to do something quick and it's maybe like a website that isn't one of these ones that is going to like have loading or you know

Maybe have some verification um if it's like a bigger website you know it tends to sometimes have that you know so if you're trying to copy like a website a landing page I think this could be definitely useful but at the same time honestly if like you want to copy the whole website you could use like um an extension something like this Go full page there's different ones as well where you can literally just screenshot and it's going to take a

Long screenshot of the actual entire website so I think lots of the times that will be more useful I hope that vzer adds something like that because it's not the greatest just to be able to have the header right that's only going to get so much of a website most websites are longer than just the what you can see the top pane usually you're going to be scrolling so I think that is the next thing that they should add as well

As kind of like I mentioned before the feature where I think it would be cool if they could scrape different links and then be able to you know take a screenshot of all the different web parts of the website and then actually create like a full website that would be really useful to actually put unquote clone a website I think this new feature still has some ways to go but all in all bz has been doing a great job with these

Updates I do like the console feature I do like the projects feature and like I said if you do want to see me go more in depth into some of those features um like the projects and whatnot check out my other VZ video and let me know what your thoughts are about you know VZ versus bolt. new versus lovable you know I've done videos on all these different tools of course there's cursor wind surf Etc but I'd say in terms of

Like in browser tools there's really vzer bolt. new um lovable. deev I've done videos on all those so and there's other ones as well I'm going to do some other videos on some of those ones too very soon for the ones that I haven't let me know in your uh what your thoughts are in the comments down below what your favorite AI coding tool in the browser is if you guys are new to the channel we upload videos all the time

About AI Marketing sales business growth so if you like that type of content you got some value here make sure to like the video comment down below and subscribe to of the date with the uploads also too guys if you haven't already joined our free community currently it's free stride AI Community I'm going to be posting a lot of different behind the scenes stuff a free resource guide as well as I'm making uh some actual course content that's going to be

In here it's going to be extremely valuable and jam-packed I can guarantee you promise you that you're going to want to be in here so definitely check it out I'll leave a link down below for the stride AI community and then also too guys if you run a business you need to help growing it with Marketing sales operations use implementing AI agents AI cool callers AI appointment centers Ai call center into your business then book a call down below at executive.com

Apply and we can see if it's a good fit or not other than that guys I will see you in the next video de hling keep grinding and of course guys accelerate your stride take care

Latest from the blog

View all