Lovable 2.0 is insane… vibe-code anything in minutes!

0:00 Lovable 2.0 just released and it's 0:02 pretty insane. You can now vibe code any 0:04 app in a matter of minutes, even if you 0:07 are a complete beginner. I myself have 0:08 spent hundreds of hours vibe coding, but 0:10 this lovable update takes it to the next 0:13 level. There are seven major features 0:15 every VIP coder needs to know about, and 0:17 in this video, I'll show you how to use 0:18 them all. All right, so the first step 0:20 is go to lovable.dev or just use the 0:22 link in description. And as you can see, 0:24 the branding is completely revamped. And 0:26 actually, this is the first change in 0:28 the Lovable 2.0 update is that they made 0:30 the brand a lot cleaner and bolder. 0:32 Super clean gradients. The logo as well 0:35 feels a lot more polished and a lot more 0:37 unique. And yeah, overall I would say 0:39 the branding has definitely improved. 0:40 But the first major change is the chat 0:42 mode agent. This is a new AI agent 0:45 inside of Lovable that actually doesn't 0:47 edit the code. It's used for asking 0:49 questions, planning your project, and 0:51 debugging. I think it's best if I just 0:53 show you. So let's go back to Lovable 0:54 and again use the link below the video. 0:56 and I'm going to build something that 0:57 all of us should have and that is a 0:59 website promoting your own skills. That 1:01 could be your job experience, your CV, 1:03 the services you offer, or anything else 1:05 that you want to be known out there. So, 1:07 let's type in the prompt. Build me a 1:10 personal website that is clean, 1:12 minimalist, and showcases my portfolio 1:16 of companies. And I'm just going to let 1:18 choose the styling, the font, the 1:21 colors, and all of that. So, with the 1:23 new chat mode agent, we can actually 1:24 decide when we're planning and when 1:26 we're building. A big issue with a lot 1:27 of these vibe coding apps is that 1:29 sometimes you just want to ask a 1:31 question and it changes like five files 1:32 and you have to go back and then figure 1:34 out which of these edits are good, which 1:35 of them are bad. So, not only did 1:36 Lovable prevent it from messing up the 1:38 codebase, but they actually made it a 1:40 lot smarter. Okay, so Lovable has began 1:42 building our app. There it is. So you 1:44 can see how lovable is thinking about 1:45 this. You can see the design 1:47 inspiration, the features, color 1:50 palette, topography, and then you can 1:52 see exactly what file it's working on. 1:54 Really, this is very easy to understand. 1:56 Like you don't have to be a programmer 1:57 at all to work with this. Step number 1:59 three is creating a navigation 2:01 component. Okay. Step number four is 2:03 creating components for each of the 2:04 sections of our app. So we have a hero, 2:07 about page, portfolio page, contact 2:10 page. Okay. So, it's spinning up the 2:13 first preview of our app. Okay, we have 2:15 an error. No panic. All you need to do 2:17 is click this button. Try to fix. You 2:19 can easily fix like 90% of errors just 2:21 by clicking this button. Lovable has 2:23 made it super easy to build apps. I 2:24 mean, it literally has never been easier 2:26 to build custom software ever in the 2:28 history of humanity. Now, while it's 2:30 fixing this error, let me explain the 2:31 two biggest issues that VIP coders make 2:34 when they get into building apps with 2:35 AI. The first mistake is that they never 2:38 guessed past the MVP. You know, anyone 2:40 can type in a few prompts and build a 2:42 minimal viable version of your product, 2:44 right? But the hard part comes after 2:45 that, finishing the project and actually 2:47 deploying it to the public. So later in 2:49 the video, I'll show you how to use 2:51 Lovable to actually deploy your app with 2:53 a custom domain so that anyone on the 2:55 internet can actually use it and so that 2:56 you can actually start making money from 2:58 it. The second common mistake that 3:00 beginner VIP coders make is that they 3:02 completely ignore security. This is a 3:05 massive issue among beginners new to AI. 3:07 And I guarantee you a lot of you 3:08 watching, if you have VIP coded apps, 3:10 you have severe security flaws in there 3:12 that hackers and other bad actors can 3:14 exploit. But luckily, Lavable has 3:16 thought of this and they're releasing a 3:18 new feature called security scan, which 3:20 again I'll show you how to use later in 3:21 the video. Okay. Whoa, there it is. So 3:24 errors have been resolved and there is 3:26 our website. So let's reload it to see 3:28 the first experience again. Clean 3:30 animation. David Andre AI founder 3:32 entrepreneur. So obviously I haven't 3:34 provided it any images but that's fine. 3:36 We can easily change that. Cool. So 3:37 first draft very nice first draft. You 3:39 can see we have on hover animations very 3:42 clean design. I told it to be 3:44 minimalist. So it followed that very 3:45 well. Now another thing you can do with 3:47 lovable is to provide it with your own 3:49 assets. So for example it's not using my 3:51 logo because I didn't give it my logo. 3:54 So, I'm going to drag in my circle logo 3:56 and say, 3:58 "Repl in the top left corner with my 4:02 actual logo." Okay, there it is. I'll 4:04 help you replace the do text with your 4:06 logo in the navigation component. So, 4:08 then it's updating that file and seems 4:10 like it's done and it stays in the 4:11 header as I'm scrolling. Very nice. All 4:13 right. So, let me show you perhaps the 4:15 biggest feature in the Lovable 2.0 4:17 update, which is the multiplayer. Now, 4:20 what this means is that you can 4:21 collaborate with others on your app. So 4:23 you can literally vibe code as a team 4:26 building any app. Let me show you how 4:27 that works. So inside of your lovable 4:29 app, there's a new button in the top 4:30 right named invite. When you click on 4:33 that, you can invite people with their 4:34 email. And as it says here, it's using 4:36 the credits from your account. So 4:38 whoever is the owner or the creator of 4:40 that level project, those person's 4:41 credits will be used. So here's what it 4:44 looks like. When you get invited to a 4:46 project in Lovable, you will get an 4:47 email that looks like this. And all you 4:48 have to do is click join project. This 4:50 will open a new tab with the new Lovable 4:52 project and it gives us a little popup 4:55 Lovable 2.0 with the new features. 4:57 Obviously, I'm showing you all of that 4:58 in this video. So, let's click on let's 5:00 go. And here you can see a project that 5:02 other people are working on. And 5:03 actually, you can see here that my video 5:05 editor sent a message and Lovable is 5:07 working on it. So, no longer do you have 5:08 to vibe code alone. If you have some 5:10 friends, all it takes is one person with 5:12 the Loveable plan. You can invite a 5:14 bunch of your friends in here and then 5:15 you can vibe code together. And there it 5:17 is. The calendar view is here. I didn't 5:19 have to lift a finger. Someone else 5:20 collaborating with me on this project 5:22 added it inside of Lovable and now I can 5:25 see it and build on top of it. Now, 5:26 before I show you the new visual edits 5:28 feature as well as the custom domains, 5:30 let's talk about the pricing updates 5:32 because Lovable has simplified their 5:34 pricing a lot. So, now there are only 5:35 two paid options, the pro plan and the 5:38 team's plan. So, the pro plan starts at 5:40 $25 a month and the team plan starts at 5:42 $30 a month. Honestly, both are really 5:44 good options. I would recommend you 5:45 start with the pro plan and if you have 5:47 a team, if you have a company, you know, 5:48 if you have a bunch of members, switch 5:50 to the team's plan and add them all in 5:51 there. And since Lovable has agreed to 5:53 sponsor this video, if you use my link 5:55 in the description, you will get double 5:57 the credits, no matter what plan you 5:59 use. So, if you want to try Lovable 6:00 yourself, go to 6:02 lovable.dev/david Andre to get double 6:05 the amount of credits. So, now let me 6:06 show you the visual edits feature 6:08 because this is a really big update that 6:10 not enough people are actually talking 6:12 about. So in the chat you can see this 6:14 edit button right here. This allows you 6:15 to select any component. For example, we 6:17 can select the header. And this is the 6:20 main part in the chat. You can see very 6:22 nice UI for you to manually edit the 6:25 component. So let's say I want to change 6:26 the background of our header to be um 6:30 pink or let's do light yellow. Okay. 6:33 What about lime? Okay, looks a bit 6:36 better. Okay, I think this is fine. I 6:38 mean, whatever color you want to choose, 6:39 they have it in here in multiple 6:41 different shades. So, once you're happy 6:43 with the edits, you can just save them 6:44 and without even calling the AI at all. 6:46 You can make very easy visual edits to 6:49 your website. And again, you don't have 6:51 to understand CSS, HTML, JavaScript, 6:53 none of that. Lovable makes this super 6:55 easy with this edit button. You can 6:57 select any font and let's say I don't 6:58 like this font size. I can change the 7:00 content here without wasting my credits. 7:02 This is the key point. No matter what 7:04 plan you suggest, you don't want to 7:05 waste your credits, right? This visual 7:07 edit feature is ideal for those small 7:09 tweaks where chatting with AI would be 7:11 pointless. It would be overkill. So, 7:12 let's say I want this to be even bigger. 7:14 Boom. 7 XL. Maybe unlike the font 7:16 weight, it's too much. So, I'm going to 7:17 do Finn. Primary color. Let's 7:20 do blue. And maybe I want my last name 7:23 to be just the first letter. Save. Just 7:26 like that, you can make small targeted 7:28 changes to your app in a matter of 7:30 seconds without even wasting any AI 7:32 credits. Now, before we go into dev 7:34 mode, let me first show you the power of 7:36 the chat agent because we haven't really 7:38 looked into that. This is really great 7:39 for planning. So, I can say, how could 7:42 we make our website feel more 7:45 professional, more classy, suggest for 7:49 specific changes. So now, since I'm in 7:51 the chat mode, I don't have to worry 7:53 about the AI messing with the site. 7:55 Again, this is really great for asking 7:57 questions, for planning, for getting 7:59 feedback. You don't have to switch to 8:00 chat GPT. You can now do everything from 8:02 lovable. Okay, so it said let me check 8:04 the current state of the website to make 8:06 targeted suggestions. It read four 8:08 different files before actually 8:10 responding. And then after it analyzed 8:11 the code, it gave four suggestions. So 8:14 typography, navigation, refinement, 8:16 hero. Okay. So now I'm going to turn off 8:18 chat mode. I'm going to say good. Now 8:21 apply all four of these changes. So now 8:24 lovable is going to work and it's going 8:26 to implement these changes. And this is 8:28 actually good like prompting principles. 8:30 You know you want to plan out what you 8:32 want to do and then once you agree you 8:34 as the user and the AI both of you need 8:36 to agree. Once you are in alignment on 8:38 what the next step is then you can turn 8:40 off the chat mode and tell it to 8:42 implement it. So actually this is how 8:43 you should vibe code. You should be in 8:45 chat mode until you have clarity. And 8:47 once you have clarity on what the next 8:48 step is then you should turn off chat 8:50 mode and let lovable do the work. All 8:52 right. So let's see. Boom. There it is. 8:54 It changed the font to playfair display 8:56 which feels a lot more classy. It added 8:58 glass morphism effect to navigation when 9:01 scrolling. Okay, it also refined the 9:03 color palette. So, it removed the weird 9:05 green color I selected for the header, 9:07 which is fine. Oh, yeah. There is the 9:08 glass morphism effect. You can see very 9:10 nice, very clean. And yeah, overall it 9:12 did what I asked. So, this is exactly 9:14 how you should utilize the chat agent 9:15 feature. Have it consult you, suggest 9:18 ideas, and once you like something, turn 9:20 off the chat mode and tell it to 9:21 implement just that. All right. So, now 9:23 it's time to look at the new dev mode. 9:25 So when you're inside of your 9:26 application, you can click on the code 9:28 viewer in the top right and we need to 9:31 also sync our app to GitHub. Now there 9:32 is this convenient button, the GitHub 9:34 icon. So click on that. Click on connect 9:37 GitHub. If you don't have a GitHub 9:38 account, just go to github.com and sign 9:40 up. Super easy. Takes 30 seconds. Once 9:43 you log in, click on your icon in the 9:44 top right and select your repositories. 9:46 And in here, you can see all of your 9:48 repos. So Lavable hasn't yet connected 9:50 this um David on AI showcase to our 9:53 GitHub. So again, let's follow the 9:55 steps. Connect GitHub. This opens up the 9:57 settings. Then you need to connect your 9:59 account. Looks like my account is 10:01 already connected. If your isn't, then 10:02 make sure to connect. And then click on 10:04 organizations and click on manage. Here 10:06 are the available GitHub organizations. 10:08 So I'm going to add vectal, which is the 10:09 name of my startup. Okay. So it looks 10:11 like the organization has been added. 10:13 And then we need to select the project. 10:14 Store your project on GitHub with 10:16 two-way sync. Not yet connected. 10:17 Transfer project. Transfer to GitHub 10:20 organization. Click on vectal. A GitHub 10:21 repository is now under account vector. 10:23 Oh, if we go into our repos reload, we 10:26 should be able to see there it is, David 10:28 Andre AI showcase. So, if we click on 10:30 this, we see our entire file structure 10:33 of our lovable project. So, yeah, now 10:35 our lovable project is fully synced with 10:38 GitHub. So, no matter what changes the 10:40 AI makes, they are securely stored in 10:42 this GitHub repo, which already puts you 10:44 ahead of 95% of VIP coders who don't use 10:47 any version control for their projects, 10:49 which is a very bad habit. So make sure 10:51 to connect whatever you build with 10:52 lovable connect it to GitHub takes like 10:54 2 minutes it will pay off dividends 10:56 forever. Another thing you need to know 10:58 if you are a serious vibe coder is where 11:00 to set the system prompt in lovable. So 11:02 go to the click on the project name 11:04 click on settings and then on the left 11:06 you can add knowledge. This is the 11:08 custom instruction aka in the system 11:10 prompt where you can say like I 11:12 prefer simple and easy to use features. 11:17 Make sure the UI is clean, minimalist, 11:20 and black and white. And anything else 11:23 you want the AI to know about this 11:24 project in particular, you should add 11:26 into knowledge. And you might be 11:28 thinking, "Okay, David, but how do I 11:29 know what to add?" Well, the simplest 11:31 way is that whatever you find yourself 11:34 repeating. So if like if you find 11:36 yourself repeating a certain sentence or 11:38 a certain instruction in the chat, you 11:40 know, as you're chatting with dozens of 11:41 messages, that thing should probably go 11:44 into the system prompt. so that the 11:45 lovable AI agent is aware of it with 11:48 every single message that you send. 11:50 Another huge part of Lovable is the 11:51 connection to Superbase. So if you don't 11:53 have a Superbase account, same as with 11:55 GitHub, go to superbase.com, create a 11:57 new account, takes 1 minute most, super 12:00 easy. Don't be scared of these things, 12:01 guys. A lot of those obstacles are 12:03 actually in your head. If you just go to 12:04 these sites and create these accounts, 12:06 you'll find that it's much easier than 12:08 you previously thought. It sounds weird, 12:09 but in some ways like building with AI 12:11 and vibe coding, it's almost better if 12:13 you try to make yourself less 12:15 intelligent. Like try to assume what 12:17 would the average person do, then just 12:19 take those actions like dumb yourself 12:21 down and just do the obvious actions. So 12:24 inside of lovable, click on the 12:25 Superbase integration right here, the 12:27 green button in the top right, and then 12:28 scroll down and click on connect 12:31 superbase. Okay, so let me log in first 12:33 into my Superbase account. All right, so 12:35 once you log in into your Superbase 12:36 account, you'll see your projects. Let's 12:38 just create a new one. That way you guys 12:40 can see the whole thing. So you need to 12:42 select organization project name. I'm 12:44 going to do David Andre personal 12:47 website. Then make sure to choose a 12:49 strong database password and choose the 12:51 region that's closest to you. Create new 12:53 project. Now let's go back to 12:55 Lovable. Reload. And we should see our 12:57 new David onj personal website Superbase 13:00 project inside of Lovable. So it's 13:03 loading all of the different projects we 13:04 have. Okay. So when you click on the 13:06 manage superbase account after you've 13:08 connected and after you've reloaded the 13:10 website you should see this new project 13:12 in here. So same name and then we can 13:14 connect it right. So let's do that. 13:16 Let's click on connect and you should 13:18 see this green button connected. 13:19 Superbase connected and then lovable I 13:21 think autonomously will start working on 13:24 adding the database right. Let's see. 13:26 And then if we go in here and check our 13:28 table editor and reload. Okay we don't 13:30 have any tables yet. I guess that's 13:32 because it's not needed. Okay. So now 13:34 you can see your app is now connected to 13:35 superbase and we get the new security 13:38 scan. So you can easily check for 13:40 security vulnerabilities in your app 13:42 before deploying. But you only can do 13:44 that after you connect to superbase. And 13:46 the place where you find this new 13:47 security scan is when you click publish. 13:50 You'll see right here superbase no 13:51 security issues found. Now obviously 13:53 this is a super simple website with you 13:55 know no real back end of authentication. 13:57 But once you add authentication, once 13:58 you add backend, once you have multiple 14:00 tables, you know, some policies, stuff 14:01 like that, this feature will become very 14:04 very handy. All right. So now let me 14:06 show you how to publish the app with 14:07 your own custom domain as I promised. So 14:10 inside of Lovable, go to top right and 14:11 click on the big blue button, publish. 14:13 Here we can see a free domain that 14:15 Lovable gives us, but you can click on 14:17 the manage button to select a custom 14:19 domain. So this is another new thing in 14:21 the Lovable 2.0 update where it allows 14:23 you to easily add custom domains to 14:25 whatever app you've vibe coded. So 14:27 buying and connecting domains is now 14:29 built into Lovable. This was first 14:31 introduced a few weeks ago and over 14:32 10,000 custom domains are already 14:34 deployed. But now they made it even 14:36 easier. So again, when you click 14:38 publish, there is a button manage. This 14:40 will redirect you into the settings 14:42 where you can go into domains on the 14:44 left and you can either add a domain 14:45 that you own or buy a new one. Since I 14:48 already own a domain that I want to 14:49 connect, I'm going to click add a domain 14:51 you own. This will open up a new model 14:53 where lovable has partnered with entry 14:55 to make this very very easy. So let's 14:57 click on continue. My domain is 14:59 davidandre.com. Continue. So it's 15:01 analyzing the domain. It will find the 15:02 DNS provider which in my case is 15:04 Godaddy. And then it wants my username 15:06 and password to Godaddy. However, since 15:09 I used my Gmail to log into Godaddy, I 15:12 cannot just provide it my username and 15:13 password. So at the bottom I need to do 15:15 the manual setup. All right. So now we 15:17 just need to add these records to our 15:20 GoDaddy setup. So let's go back into 15:22 Godaddy or NameCheep, whatever provider 15:24 you use and we need to add this to the 15:26 DNS settings. So select the domain you 15:29 want to use. Click on DNS and we need to 15:31 add two new records. So let's click on 15:33 add a new record. The type as you can 15:36 see is a. So let's select a name. Let's 15:40 copy that. Boom. Paste that in. And then 15:43 copy the required value in here. And we 15:47 can leave the TTL as default. Click on 15:48 save. Okay. So we're getting an error. 15:50 And that's because we already have a 15:52 record with the names www. This one we 15:56 need to delete it. So let's delete that. 15:58 Success DNS record was deleted. So now 16:00 we should be able to add this new 16:02 one. Okay, we need to verify again. All 16:05 right, so we added the new record as 16:08 Lovable suggested. We need to add the 16:10 second one. And that should be it. So 16:14 I've added two of the two records. Okay, 16:16 click. You're all set. This uh might 16:18 take a few minutes. Uh if you're 16:20 unlucky, maybe even few hours. But let's 16:22 see if we are lucky. So done. Connecting 16:25 domain. Domain is now mapped to your 16:26 project. It might take a few minutes to 16:28 propagate. 16:29 So if we type in 16:32 davidre.com and hit enter, we have an 16:36 error. Okay. So as this error says, the 16:39 most likely issue is that the owner just 16:41 signed up for Cloudflare. So this is 16:43 what you know, Loveable is using, I 16:44 guess, on the back end. So you have to 16:46 wait like probably 5 minutes to 30 16:48 minutes until this propagates until your 16:50 custom domain which in my case is 16:52 davidree.com actually maps to your 16:54 lovable project. But now you know 16:56 exactly how to do it. You can see here 16:58 we have our custom domain connected 16:59 inside of Lovable. And if you want to 17:01 manage it and you know change it to a 17:02 different one or remove it or whatever 17:04 you want to do, you can do that easily 17:06 through the settings. So as you can see 17:08 this Lovable 2.0 update is huge. There's 17:10 a lot of new stuff, a lot of 17:12 improvements, a lot of polishing and the 17:14 branding is also improved. So, as 17:15 someone who has tested dozens of these 17:17 vibe coding apps, I can confidently say 17:19 that currently Lovable is the best. So, 17:21 if you want to try it yourself, go to 17:24 lovable.dev/david or just use the link 17:26 in the description. With that being 17:27 said, thank you guys for watching and I 17:29 wish you a wonderful, productive week. 17:31 See you.