NEW v0.dev UPDATES Full Stack Apps Beat Bolt.new Cursor Windsurf?! 🤖 AI Coding Agent Vercel Next.JS
In this video
- 00:00Introduction: V0.dev Updates and AI Coding Tools Overview
- 00:26Bolt.new Overview: Deploying Apps with StackBlitz and Netlify
- 00:51V0.dev’s New Features: Multi-File Generation and Deployment to Vercel
- 01:24V0 Updates: NEXT.js 15, Python Support, and Premium Features
- 02:06Adding Environment Variables in V0 for Database Connections
- 02:52Interactive UI Editing in V0: Enhancing Front-End Features
- 03:34Exploring New V0 UI and Comparing to Legacy Version
- 03:58Using Projects in V0 for Enhanced Context and Prompts
- 05:07Comparison: Bolt.new Prompt Enhancements vs. V0 Projects
- 05:50Deploying V0 Projects to Vercel and Adding Attachments
- 06:12Integration of Environment Variables in Vercel Projects via V0
- 06:39Creating a NEXT.js CRM Project with Advanced Features in V0
- 07:30Live Demo: Generating Multi-File Folder Structures in V0
- 08:17Debugging and Fixing Errors in V0 Projects Using Built-In Tools
- 09:20Sponsored Segment: Stride Agents AI Appointment Setters
- 10:27Continuing Debugging: Adjustments to NEXT.js CRM Project
- 11:11Adding Forms and Dynamic Components to V0-Generated Code
- 11:51Feature Gap: V0 vs. Bolt.new’s IDE-Like Capabilities
- 12:26Forking Chats and Enhancing Codebases with V0
- 12:50Bolt.new Terminal and Additional IDE-Like Features Comparison
- 13:28Final Thoughts: Strengths and Weaknesses of V0 Updates
- 14:07Summary of V0 New Features: Projects, Multi-File Editing, and More
- 14:59Outro: Community Links, Free Resources, and Final Thoughts
Links from the video
Transcript
3,179 wordsWhat's going on guys Josh pook here and on this channel we've covered many different AI pair programmers especially vzer we've covered that many different times we covered VZ Alternatives we recently covered lovable dodev which is kind of similar to VZ as well as bolt. new which everyone has been talking about which is kind of like vzero but it gives you more of a full endtoend uh capability such as creating next sa apps remix apps whatever the case may be and for
Those of you who know about bolt. new you will know that it is attached to stack Blitz and when you actually go ahead and create an app you can deploy it directly to netlify which is a direct competitor to versel which is the owner of vzer and previously vzer was really just for frontend UI you know screenshot a dashboard upload it to VZ it will create you the you know interface for that give you the code but now with some of
Their recent updates it actually allows you to do nextjs apps or or react applications or create multi files in one generation and deploy it directly to versel there's a bunch of new updates that we're going to go over in this video vzer has really been stepping up their game and I'm excited to show you guys if you haven't seen it already let's dive right into it all right guys so we're going to dive into it and actually show you exactly um
Some of the stuff here but just to quickly go over over what versel and VZ posted on Twitter about some of their updates here so what's new with VZ support for NEX js15 Python and more improvements python node.js support image to code generation improvements support for next 15 new premium features including disabled search engine indexing for published blocks faster code editing chat history browsing and file attachments we also got access to environment variables means that VZ can securely connect to databases
Apis and external services so the way that works is he's going up here clicking on view project which will show in just a second add environment variables within that project create a database now we saying you have access to an environment variables for blog store send emails on that submission all right and we can see that the email was sent okay vzer blogs can now be deployed to versell with custom uh subdomains as you can see here you can set a
Custom domain and then deploy it so you can link and deploy to versel project and use versel project environment variables okay so versel specifically this is really cool as well for those of you who saw my video on lovable. deev um you would have saw how you can kind of use like an inspect element to select the front-end um generation of the the code generator like you know the interface and then say okay change this button around or do this or
Do that but now you can do something similar right here so you can click on well it's exactly the same you can click on the whatever um you're seeing here in the U Y and say hey can you reduce the search font right here and it's actually going to modify that so that's a really nice feature uh I'm assuming bolt. new will probably add something like that soon since all the apps are adding it now bolt. new is been making some
Cool updates too but now v0 is definitely at least catching up in terms of the end to endend space where they're able to now generate nextjs apps and whatnot all right so let's actually dive into the new and improved VZ so go to v.d like I said all links will be covered in the description um down below just like always including the Twitter links as well now you'll see it looks a little bit different than the actual Legacy version which if
We go over here you can actually see Legacy v0 so this is what the Legacy version looked like um as you can see here it's a bit different one thing I'm curious if they still have is this explore tab right here where you can see new generations and feature Generations this is something that lovable. deev had as well um and I don't know if the new vzer still has this or not I actually never even to beon even saw this on
The old VZ I'm just seeing this now so that's kind of cool to be honest where you can actually go ahead click on and okay so you can't see it anymore it looks like just CU of uh this is the Legacy version I think but anyways let's go back to the new one so a few new things one we have your library over here two we have the project so this is where you can create a project so within the project
Add like an icon here you could add a name right here so like nextjs CRM here you can add a description this is optional so you can describe what the project is going to be used for and then here under context this is optional so this is where you can give um more contacts so guidelines or instructions the model will use to generate better responses to prompt so this is actually very useful something that you can do projects kind of like
Similar to how you have projects in Claud um this is always something that I found to be very useful where you can give more context and get better higher quality generation prompt so I would suggest actually using this and putting some actual valuable information in here when you're building a project I'm personally not going to do that right now just for testing purposes but this is really cool the one thing that I'm seeing it is still kind of missing which I
Kind of like with bolt. new is if I go to bolt. new here and go like this next JS CRM for Content management and then I just click on this little star icon here it actually enhances a prompt so I could just copy this prompt right here go back to uh v0 and we could actually use this prompt here so I'm just going to create the project first now once you create the project you'll see that you have a place where
You can ask a question in the nextjs project or the next jdrm project we have here you can add instructions right this is similar to like what you can add in Claud here you can add sources you click on ADD sources you could actually add files attachments Etc give it context and build a little knowledge base so this is very valuable this is something that you currently cannot do with uh you know bolt. new so this is actually very unique here
We have the versel connection so linking your project to a versel project will enable deployments to versel from v0 so this is really cool as well so you could click on here to view in versel all right here is our versel project right here so you could do stuff here of course in your verel and then have that directly integrated with v0 which is nice and then here you can add environment variables um to store sense of information like API Keys
Credentials Etc so if you click on that actually going to take you to verel set of things so you actually have to add these environment variables in the versel project so if you plan on deploying to versel then this is extremely useful and can streamline your process tremendously now let's go ahead and paste in that prompt here you could also add attachments right so if we wanted to take a screenshot of a um CRM that we want to replicate we could
Do so just as an example here I will take a screenshot of this like so this dashboard and we can actually upload that to vzer okay so we got our prompt right here create a modern xjs uh CRM system for managing contacts with the following features contact list search and filtering contact details editable Fields contact categories tags for organization basic crud operations for contacts responsive design with clean UI form validation and error handling data persistence using a database authentication and user
Management dashboard with key metrics please include best practices typescript and Tailwind CSS for styling so we'll see how this does um if anything I would maybe make it a little bit more basic just for this you know video but let's go ahead and just run it okay so now you can see we are generating multiple different files and folders right here so generating types generated Prisma schema generated app dashboard page. TSX generating components SLC conts SLC contact list okay so it's
Generating an ID folder right here and then a page in here for different cont taxs as you can see here this is like we can actually see the folder structure on the uh right hand side here before it used to just be code with v0 as you can see it's like an actual project right here which is really nice similar to like bolt. new something went wrong please edit retry or delete your message I said what went wrong can you fix
There was no actual error I made a mistake in interpreting the uh the situation let me provide a proper response to your original request okay so it just restarted I don't know why that happened whatever okay so it is generated now looks like we're getting an error so we can see the file lib SLO cannot be found make sure the file exists I'm just going to go ahead click fix with v0 okay so it's adding the file importing next off so
Of course you could specify the um you know the type of Stack you're using kind of cool though we're using next off here um and Prisma I'm assuming you could say something like use drizzle or use you know whatever the case is or an OM Okay so created the li. off file um created next off configuration updated the import statements added a login page to handle user off make sure to set your environment variables particularly next off secret for next o
To work correctly also ensure that you have the necessary dependencies installed for next off and Prisma adapter and bcrypt okay so here it said preview is disabled because um VZ does not support previewing nodejs apis so I said can we fix this and now it's removing the server side off right here removing API routes uh using client side State Management instead of server s data fetching and removing Prisma and database interactions but of course if you deployed or just went brought
The code over to forell 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 aiiowed appointment Setters that work 24/7 never get tired and book appointments while you sleep trained on thousands of successful conversations
R AI agents outperformed human teams at just on10th 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 andain transform your entire sales process with Cutting Edge AI technology it's time to accelerate your stride with AI agents you could probably make use of it but I just want to preview it within um the zero here yeah I'm just going
To deploy just for Simplicity right here so now we're building our preview okay so I told it just to remove all the node.js stuff and now it did so we can see that um here is our code see nextjs CRM right here we can see our different contacts right here we can go back to list right see the tags company phone email add a contact new contact there should be a contact form that pops up I could tell it to add
That now a few cool things is we can go here to select we could click on you know this button right here okay so I'm saying have a form that pops up to fill in info uh to add new contact we're going to let go on that you could open this in a new tab of course so if we do that we can see that here now few things I noticed right here that you know it's not as like stack Blitz
Is like actually like uh almost like an actual IDE within the um you know it's like a web container so you can edit the code here you can um you can even see the terminal which I like about bolt. new is like you can see the terminal down here for stack Blitz and an actual terminal that's something that VZ does not have as of now okay it looks like we got an error I'm going to say fix with v0 go okay
So now if we we click on add new contact we can see that we can add new stuff right here okay this needs to be an email so let's do this okay now it added it and just added another one here we go now ideally once you add the contact I would make that form disappear of course you could optimize this and improve it more I really like this select function here now you can add to code base similar to like
How you always could you can just simply run this command and then you could Fork this chat right here which is useful forking is something I don't believe you can do with bolt. new so yeah here's an example of bolt. new right here it doesn't look like you can Fork from what I can see one thing I like though is that you can actually download the code which is really useful um as well as like I mentioned you have the bolt
Terminal here terminal here as well gives you more freedom to kind of see what's going on behind the scenes and you can actually run commands as you can see this is like actually like an more of an ID and you can actually run almost like a full app within b. new just from reading the Twitter updates that's almost what I thought you know vzer had so I'm kind of disappointed they don't have you know those features as of now it's still
I would still say this is still more of a front-end developing tool um with a little bit more flexibility now that you can do like multifile uh generations and have like the folder structure here um with multiple components and this sort of thing so this does make it definitely better than what it was and I think it still does have its strengths compared to uh certain tools maybe like bolt. new or whatever the case may be when it comes to generating
Frontend UI that you can just use right out of box but as of now I would still say they have a a ways to go just to get like the end to endend side of things if that's what they're trying to go for I do like how you can closely deploy it to versell have the environment variables and I really do like these new this new projects feature this is definitely very useful to giving contacts and building like a knowledge base
For your specific project so all I'll just summarize what the new features are we got the projects we got the selector feature where you can select an element and tell it to iterate upon it and then we have the multifile editing with different folders Etc um those are just some of the main new features and new thing capabilities that I'm seeing that are valuable to VZ just wanted to give you guys an update all in all they're definitely a lot more
Powerful features than the old VZ I still think that they could improve upon certain areas um to maybe get if they want to get more Sim ilar to like bolt. new um but also I think they have some advantages to bolt. new and other things as well so each one of these tools have their pros and cons but let me know what your thoughts are in the comments down below about these new V zero updates and let me know what is
Your specific favorite AI pair programmer for specific things do you like ezo for front end stuff cursor for more you know complex advanced stuff maybe wind surf you like bull. new for just kind of simple stuff to get prototype really quickly let me know what your thoughts are down below guys guys also if you're new to this channel we upload videos about AI Marketing sales business growth Etc 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 stay up to date with the uploads also too guys if you haven't already joined our free community stri community.com I'll leave a link down below for our free Facebook group and Discord Channel and then also too guys I just made a new free community The Stride AI Community I'm going to leave a link down below as well I would definitely recommend joining this I'm going to be making a lot of
Free content free resources a fullon uh resource Vault for ai ai uh marketing stuff coding stuff whatever the case is is going to be in this community for free so definitely check it out you can network with myself as well as other like-minded individuals and then also too guys if you run a business and you need help with sales marketing implementing systems ai ai agents AI cool callers Ai call center into your business then book a call down below at executive.com
Apply and we can see if it's a fit other than that guys I will see you in the next video keep hustling keep grinding and of course guys accelerate your stride take care