Video27 min watch

NEW Lovable.dev AI Coding Agent vs Bolt.new & Cursor?!🤖 GPT Engineer Full Stack Apps Supabase

In this video

  1. 00:00Introduction to AI Pair Programming with Lovable.dev
  2. 00:41Overview of GPT Engineer and Transition to Lovable.dev
  3. 01:32Exploring Projects Built with Lovable.dev
  4. 02:10Getting Started with Lovable.dev: Features and Capabilities
  5. 02:56Pricing Plans Compared to Bolt.new
  6. 03:49Testing the Free Version: Project Creation
  7. 04:18Accessing Public and Private Apps on Lovable.dev
  8. 04:48Editing Elements with Visual Selection Features
  9. 05:23Dashboard, Chat History, and Project Settings
  10. 06:10Featured Projects and Community-Driven Templates
  11. 07:11Testing a Prompt for a Project Management App
  12. 07:39Configuring Tech Stacks and Available Options
  13. 08:12Creating UI Elements and Integration Features
  14. 08:44Future Capabilities and Ongoing Feature Releases
  15. 09:21Previewing and Editing App Components
  16. 10:39GitHub Integration and Project Settings in Lovable.dev
  17. 11:32Sponsored Segment: Stride Agents AI Appointment Setters
  18. 12:24Improving Functionalities and Adding Light/Dark Mode Toggle
  19. 13:16Troubleshooting Errors and Debugging Steps
  20. 14:01Testing App Components: Kanban, Calendar, Time Tracking
  21. 14:43Uploading a Screenshot to Update Kanban Board
  22. 15:11Adding and Testing Drag-and-Drop Functionality
  23. 15:43Enhancing UI with ShadCN UI and Customizations
  24. 16:23Superbase Integration for Authentication and Data Management
  25. 17:08Comparing Templates and Starter Projects in Lovable.dev
  26. 17:44Previewing and Customizing Landing Page Templates
  27. 18:43Using Select Feature for Element-Specific Edits
  28. 19:19Final Thoughts on Lovable.dev vs Bolt.new
  29. 19:55Community and Exclusive Content on Stride Community
  30. 20:25Conclusion: Accelerate Your Stride!

Links from the video

Transcript

4,102 words

What's going on guys Josh pook here and on this channel we've covered many different AI pair programmers or AI idees we've covered wind surf we covered Aid we've covered cursor we've covered bolt. new we covered Klein or Claude Dev a bunch of different ones and in today's video we're going to be covering an AI pair programming web application called lovable this is made by the creators of GPT engineer and it is very similar to bolt. new has some really cool features

Let's dive right into it all right guys so for those of you who don't know about gbt engineer it's a really big project on GitHub it has over 52,000 stars and you know they actually started um a web application for it that's a little bit more user friendly this one is a python project right here um it's in the terminal um and this is called they initially had it called GPT engineer. apppp so if you click on this link it will

Redirect you now to lovable. GV so this is the name of their new app right here we're going to dive into it in just a second now all links I cover in this video will be in the description down below of course now before we dive into lovable here I am on one of the founders Twitter pages right here and I'll leave it link down below there's a bunch of different examples here on his page of different web applications that were

Built with lovable or GPT engineer. apppp and it's pretty interesting when you see some of these um you can you know dive through here get some different ideas you can you see this one there's like a full app that's built on uh lovable right here which is pretty impressive as you can see this is like a chat dashboard right here with different um llms like mistol open uh open open source llms as well as closed Source llms you got the recent

Chats here image generation AI chat bunch of different stuff so this is just one example there's a bunch of different stuff as you can see like this is a Wikipedia Contra uh content tracker um pretty cool you know like I said a bunch of different stuff um I would recommend checking out as well as you can check out The Lovable Twitter too but let's dive into actually testing this out so it's very simple to get started you can simply just go

To lovable. deev create an account 20 times faster than coding prompt to edit you own the code subscribe what you want get a first version in seconds iterate and improve a chat one click to deploy and share so just from those those features alone we probably like okay this sounds very similar to bolt. new and that is the case it is similar there is a few different uh differences that I'll cover in just a second pros and cons to each yes

But I definitely say it you know if they it could potentially be a competitor instant intuitive beautiful design support any backend select an edit get Hub integration which is nice and so here is the pricing so you can start for free just like in bolt. New and you get it's it's somewhat limited I'm not going to go over at all here you can see like five free messages per day unlimited project public projects you get unlimited public projects Implement a screenshot

SL figma sync with GitHub oneclick deploy Community Support then there's a starter plan at 20 bucks a month then 50 bucks a month for like additional messaging limits and then 200 bucks a month this is of course if like you these two plans are if like you need a bunch of different uh Ming limits I guess you get VIP events here too but anyway so kind of similar to bolt on new pricing their pricing is starts at 20 bucks a month

Too I don't know you can compare the limits uh yourself if you want if you want to purchase this app we're going to be testing it right here on free version right now so my uh here we have my projects we have latest right here so this is actually interesting I didn't know about this this seems to be like the latest I don't know if this is every single app that you can see like let me click on one of these

Okay so this is wow so this is kind of cool like we can access I don't know if this is everybody's apps that they're building or if there's certain people that allow it to be public I mean if you you know you may not want uh if you're creating an app for everyone else to be able to see it for one but I guess maybe that's if you publish it um we'll see I'll check in just a second but look at

This like this is a pretty nice intuitive um website right here so this is kind of cool you can go over here to open tab AB uh for preview so like we could preview the app right here I believe we could also send this link to others as well which is kind of cool um like if we wanted to share the app and then over here you could click on remix so this would be able to like use this app and

Then make your own changes could request a change here um select I guess you can SE okay so this is actually really cool that you can like select wow that's actually really awesome like that's something bolt doesn't have you can simply click select and it will select uh like an element on the visual page here and I could select it and it shows over here in the side selecting this div right here so I could say okay make this you know

Bigger for example we'll show some examples of that in just a second most likely here we can select um you know mobile or you know desktop we can refresh page and there's probably some other stuff here I'm missing back to chat so we can see the chat here if we go to show history we can actually go to all the different iterations we can check that like so obviously there were some issues here that they were facing and then he troubleshooted

It okay so pretty cool stuff we can go back to dashboard account settings check out the docs here as you'll see um these this latest section is being updated like every 7 Seconds 23 seconds um which is really nice really cool to see we got like a bunch of different apps to give us one ideas and two to um you know we could also use some of these as starting points yeah we can also go to featured here this is going

To show featured ones I guess that are probably actually pretty good so these are like verified good ones so latest you'll just see all them it could be bad ones could be good ones but featured you could actually get some pretty good stuff here like YouTube prototype Snappy sze landing page um note you know G claw GPT right here this is like a claw chat gbt which is really nice that you know this is pre-built and everything like if we go

To show history so this guy already did like 64 iterations um which is pretty nice that you could go ahead so I guess it won't always let you remix okay this one would allow us to remix as you can see this is the simple prompt they started with so you can get an idea too of like what the prompt is to start with and then you can see they added an image like so so we're going to go ahead and create

Our own right now but I just wanted to show you that like you can't this is actually something really nice that I like it's kind of has a little bit of like a community type Vibe where it shows you all the different other potential projects that you could easily just kind of copy or start there okay so I'm going to test out this prompt right here I don't know how well it's going to do create a very intuitive modern project management

App with many features uh make it very complete and impressive task manager calendar time tracking and much more spend time to make it work out of box and make it perfect okay so you could go ahead change it from public to private okay so actually that is how you make it private so you're going to need the starter plan to do this but this is where you can build and deploy in private if you're in public then anyone can view it

And remix it so keep that in mind you go to configure here this is where you can actually uh see your different teex Stacks so unfortunately the one thing here is that it seems that is limited right now or Tex Stacks this is something that bolt. new does quite well they have multiple different Tex Stacks you could do python app you could do a NE uh nextjs app like look at all the different uh Stacks right here nextjs native uh script

Slide Dev vu. JS remotion react typescript Etc so nice that they have that um even still though I do like that it has Shad C Nui and types script and react because that's a really good T text stack um unfortunately doesn't have stuff like remix or nextjs but let's go ahead and just send this of course you could add an image as well all right so also too while that is loading I will show you that it does give you some

Examples of different ways you can start so you could start with figma by doing this you could start by drawing your UI using like xala draw or similar ones you could do GitHub Imports okay so this is on the wait list that is coming and then clone a website so it's just saying get this extension screenshot it Etc so it is still quite new so they are releasing a lot of things I am very excited to see where they take this

App okay so here is what we got so far so we can see that it's you know saying okay I'm going to create this here's all the different features it's going to have a dashboard task management and canand calendar view deadlines and me wow wow okay I didn't expect it to have like this this is one prompt okay so as you can see it like you can click here and we can see exactly what it did so this is what it

Did it edited 11 files right here so okay so we got the settings. TS team. TSX time tracking calendar task Etc so we can see all the different files there here is our app so we got the dashboard we got total task completed hours tracked team members go up here we have our profile we have uh notifications we have tasks right here so this functionality coming soon of course okay so yeah okay so it didn't add the functionality for these first

Try I thought that would have been very impressive if it did yeah looks like the search isn't really working let's go ahead and preview this see if it works a little bit better no not yet so now we can go ahead and add some changes if we click on Project settings up here we just so you know we can see our project information so all the different information how many messages we sent AI edits knowledge manage knowledge okay so this is

Where we can add contacts and instructions so you could add Project Specific rules or gu guidelines set coding style preferences like indentation naming conventions add external documentation or style guide so that's pretty useful um if you're going to use that so GitHub this is where you can connect to GitHub so I'm not going to do that right now but that would be useful especially like if you're um you know building out actual projects here here we can rename project or delete

Project so if we had our GitHub connected we could click on GitHub here create a repository to collaborate edit your code that's where we could easily do that publish so we could this where we could publish public or private and then deploy using a subdomain learn more about custom domain so actually deploy right from GPT engine oh W or well lovable and it's using netlify so very similar to uh bolt. new right 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 centers that work 24 7 never get tired and book appointments while you sleep trained on thousands of successful conversations our AI agents outperform 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 Cutting Edge AI technology it's time to accelerate your stride with AI agents okay so here is a little bit more of it advanced uh iterative prompt to try to improve it so let's say add in all the actual functionality for the task calendar time and

Tracking uh time tracking team and settings and have it all linked to the dashboard also add dark mode and light mode toggle let's go ahead and send this I'm very curious to see if we'll be able to do this is like multiple different tasks so um I don't I honestly don't expect it to get all them but let's see so we can see a theme provider here it's adding the light mode and dark mode we can click on this and we'll

Actually see okay so it's saying okay here's what we're going to do boom boom boom so it's adding the theme toggle doing all this adding the task right now as we can see it's writing so this is how it shows up in lovable it's a little bit different than bolt. new bolt. new you will actually see kind of like a folder structure similar to like how you would see in your actual IDE like vs code which is nice but this is

Nice too like I said there may be some features that this is lacking compared to bolt new um and vice versa too but like I said for lovable this is still I would it's not I don't want to say it's new cuz they've been around for a while but it's I mean it is kind of new like they're still rolling out features and whatnot so I'm excited to see where they take this okay so we got an error our first error

So the app encountered an error let's say okay so we could go show logs we're getting like a syntax error it seems and a build error so let's just go click try to fix it so it's going to automatically paste that into the editor here and let's see what happen happens okay so here's what we got obviously we have a bit of issues here with the light mode and dark okay so yeah dark mode seems to not be fully functioning but

It is still somewhat working um let's see we got task here so we could okay so this is kind of working we got a a toast right here we can move to uh done move to progress this our can band board would be nice if this is draggable instead of just clicking right here and click add Tas so the add task isn't working um calendar so here's our calendar we can see upcoming events here time tracking so we new entry okay

So track time here not fully functioning um Team okay we can see our team here uh settings appearance so we can change that email notifications push notifications I think the way I would personally go about actually building this out is focusing on like say one at a time all right we when we tell it to do so many different things it only has so much bandwidth right so it's going to do them all may do them all but they're not going

To be perfect you focus on one specific thing like let's say we try to get the task right here get this really dialed in then it will be a lot easier so we'll do a couple more okay so I'm also going to take a screenshot right here and then I'm going to upload this screenshot right here so let's go ahead and try this out as you can see we got the screenshot here as well as the prompt to uh update the

Can band board so it's draggable as as well as um the light mode and dark mode okay so we can see it's installing the required dependencies for drag and drop so react uh beautiful DND latest now it's updating the dark mode right here as well as updating the task okay so now we got it loaded it seems that it did work for the actual app uh you know pain side of things okay the drag a drop is working really nice so

That's actually cool um like so so the dragon drop is working um it seems that the sidebar the dark mode isn't working on there but it's working perfectly on the actual mid pane right here so you can see here on the dashboard too it's working nice now I'm going to say dark mode is working perfect except for the side menu it's not working there also Taskmaster logo text should be black on light mode and white on dark mode also just make

The entire app look way better and way more modern with shads and UI everywhere okay and here we have it so now it looks like sidebar is working dark mode is working nice as you can see here light mode and dark mode um it looks a little bit nicer I say maybe It upgraded the UI I can't see too much in terms of shaten stuff but all in all guys this was I believe three or four promps so obviously you could

Spend more time on this uh iterate and improve of course now a few other cool things that this has and this is something that uh bton new has as well is a deep integration with superbase so if you click on superbase as you can see this is an beta but you can connect to add authentication store data or call thirdparty apis with superbase so you can connect superbase like so um there's an onboarding video showing you how to do it right

Here click on connect superbase and open up and you could actually authorize superbase I'm not going to do that right now but that is really cool that they have this feature this is something that bolt new has as well and I I personally love superbase so all guys um I think you get the gist here you could build cool apps very kind of similar to bolt. new um has some pros has some cons I hope they get more Frameworks I hope

They improve the coding experience and just make it you know a little bit better in many different ways but I really like how they have the gallery where you can actually use different uh starter templates I think that's something that bold. new should um have as well like even up here if we go to templates now we can see that we we can actually start a project like we can do a developer portfolio landing page or an open- Source database technology

Company landing page modern business landing page SAS starter um landing page so we can go start building right here you could also preview it all right so here's the preview of the landing page right here as you can see has a few cool things we can click on start building and this will give us a nice starter template for our lovable project so I I really like that feature I hope they add more templates I think this is something that is

Really useful that a lot of tools could have is like these templates as you can see with this template we can actually see how they built this too which is really nice like we can see the history we can see that they're giving it like colors and stuff for the Tailwind a bunch of different prompts and whatnot so you could read through these prompts probably get some ideas how some best practices to build your apps as well okay so other than

That guys and I really do like this select feature right here this makes it very easy to be very nitty-gritty um with your prompts and you know say okay hey this sign in button right here like let's go to the button here all right I'm saying add a blue button to the background uh to the sign in background button right here and this is with us using this kind of inspect element type clicker right here to select different elements and now

You can see it's easily added this blue background right here to our button so very easy to edit things with this select feature I really like I think uh it's something that I personally haven't seen with to really any other um you know AI pair programmer yet so I think that's pretty cool and pretty unique for lovable let me know what your thoughts are in the comments down below about lovable. deev guys let me know if you tried GPT engineer before

You know maybe you tried a year ago or whatever it was pretty popular uh maybe we'll do a video on that too let me know what your thoughts are on lovable if you tried it if you're going to try it how you think it compares to bolt. new if you build any cool things with it did I miss any features guys let me know what your thoughts are in the comments Down Below guys if you're new to this Channel and you

Like this type of content AI business growth Marketing sales Etc and like the video comment down below and subscribe to stay up to date with all the videos also too guys if you haven't already joined our free community stri community.com I'll leave a link down below to our free Facebook group and Discord Channel and I'm also going to leave a link down below to our new exclusive stride AI Community this community is going to be super super value packed I'm going

To have courses free resources complete res AI resource Vault with templates tools Frameworks Etc so if you want all that jam-packed value 100% for free definitely check that out uh I'm going to be making a lot of course content in the next coming weeks and I'm putting it in here for you guys so stay tuned for that you'll also be able to network with myself as well as other like-minded individuals that watch this channel are into AI business Etc other than

That guys I will see you in tomorrow's video keep hustling keep grinding and of course guys accelerate your stride take care

Latest from the blog

View all