NEW Chrome Extension for Lovable | Learn how to create a Google Chrome without coding

0:02 hello and welcome everyone it's your boy 0:03 doc Williams and today we're going to be 0:05 talking about how to build Chrome 0:06 extensions without coding we're going to 0:08 be talking about AI agents we're going 0:10 to be talking about lovable and we'll be 0:11 talking about a brand new Chrome 0:13 extension being launched today so to 0:16 begin we have a special guest star here 0:18 today we'd love to invite her on to the 0:21 stage right now Delicia how we doing 0:23 today I'm doing wonderful how are you 0:26 doing today doing great thank you so 0:28 much for being here and seeing us today 0:32 um so first of all we you have an 0:35 announcement something is launching on 0:36 product hunt could you tell us a little 0:38 little bit about what you built and uh 0:41 we'll kind of go from there for a moment 0:43 yeah so I built ly and ly is a Google 0:47 Chrome extension to enhance your 0:49 lovable. deev experience now lovable is 0:52 already great but we'll make it get 0:54 Greater by adding other Advanced 0:56 features like importing projects from 0:58 GitHub voice chat um chatting with the 1:01 documentation to help you get more of 1:03 that Vibe coding going on oh I love it I 1:07 love it hey look at this we got Bobby 1:08 out here saying hey what's going on 1:10 Bobby thank you so much for being here 1:13 we got Miguel this is awesome this is 1:15 awesome you got a crew coming in here 1:17 this is wonderful okay let us know in 1:20 the um comment section down below what 1:22 are you building right now are you using 1:24 lovable or using another ID for you know 1:27 using AI agents let us know okay so real 1:30 quick um Delicia tell us the for the 1:33 good people that might be just starting 1:35 with lovable just starting out could you 1:36 tell us what this platform is in general 1:40 yeah absolutely so lovable is an AI full 1:44 stack engineer it's a AI website builder 1:47 so right now you can't build mobile apps 1:50 but there's not any good ones anyways 1:52 but you can build web apps websites 1:54 landing pages if you want to clone 1:56 Facebook you can definitely do it in 1:58 lovable no coding experience necessary 2:02 awesome and we've been seeing you on 2:04 Twitter and by the way we're going to be 2:05 dropping her uh URL right there so you 2:07 can connect with her in just a little 2:09 bit make sure you follow her she's doing 2:11 amazing things could you give some 2:13 examples of some of the projects that 2:15 you have been building with the platform 2:17 too yes absolutely so um one of my 2:21 favorite projects that I built is I 2:22 built a speed Reading Coach I actually 2:25 can speed read at about 1175 words per 2:29 minute uh which is really fast but you 2:32 don't have to speedread that fast but it 2:34 helps you learn how to speedread I also 2:36 built a startup that built startups 2:39 called spark and what it does is the 2:41 boring business side of your startup so 2:43 it uses AI to do market research 2:46 competitive analysis set up your email 2:49 marketing so a lot of the less fun 2:52 things um that a lot of entrepreneurs 2:55 tend to overlook that's awesome look you 2:57 got everybody coming in the chat talking 2:59 about this says this is good this is 3:01 good well excellent okay so let's talk 3:04 about what you built and remember it is 3:06 live on product hunt right now make sure 3:09 that you upvote take a look at this 3:11 visit the site all those things uh tell 3:13 me more about uh the launch and the 3:16 Chrome extension then we'll actually 3:18 download it and kind of start using it 3:20 everything like that yeah absolutely so 3:23 I am very active in The Lovable Discord 3:26 Channel I I saw a couple people from the 3:28 Discord over here so hey lovable Discord 3:32 and I I spend a lot of time helping 3:34 people um with their lovable projects a 3:37 lot of them are non-technical they're 3:39 they're beginners and when you're 3:41 building with these AI you're doing your 3:43 Vibe coding you get a lot of errors and 3:46 you get a lot of bugs that you need to 3:47 debug and sometimes it can be difficult 3:50 if you're not sure what you don't know 3:52 right so love ay helps with that um it 3:55 has the rubber ducky that helps you 3:57 debug or you get to talk to it tell it 4:00 what your problem is and how you want to 4:02 fix it and then it generates a prompt 4:04 that you can give to lovable to help you 4:07 kind of walk through that problem and 4:09 you can also ask the AI we have a help 4:12 button you push it to ask any questions 4:14 about the lovable documentation and get 4:17 extra help if you need it okay let's do 4:20 it now um from what I understood I I was 4:23 seeing 4:24 earlier that you built this with lovable 4:28 and with cursor we get a lot of 4:30 questions about wait a minute what can I 4:32 do with lovable what can I do with 4:34 cursor when do I need to transfer this 4:36 over could you kind of talk about your 4:38 process when you're building with both 4:40 of these things yes absolutely so for 4:43 Levi particularly um lovable does not 4:47 build Chrome extensions so I use cursor 4:49 to build that um because Chrome 4:51 extensions have a very specific way that 4:54 they have to be built with very specific 4:56 files and carer was really great at 4:58 handling that for lovable I actually 5:02 used it to integrate external API so I 5:05 am using things like Gro open AI 5:08 anthropic fir crawl all on the back end 5:11 through a edge function with super base 5:13 yes Bobby through a edge function with 5:15 superbase and lovable is directly 5:18 integrated with superbase so it makes it 5:20 super easy to be like hey I want to add 5:23 open AI to my platform and lovable is 5:27 like hey I got you here's how we're 5:29 going to do it 5:30 let's go I love to see it love to see it 5:33 okay uh let us know in the chat if you 5:35 want to see more instruction how to do 5:37 this what we need to see I already saw 5:39 on Twitter that you were going or x that 5:42 you were going to be putting out videos 5:44 also more details comparison hopefully 5:46 we can see more how you're using cursor 5:48 and uh layering this in so this is 5:51 excellent to see um okay so I think what 5:54 we're going to try to do is I'm thinking 5:57 about downloading the extension and then 5:59 and going in and seeing how to use it 6:01 what do you think about that should is 6:03 that okay yeah I think that's a perfect 6:05 idea let's do it all right good times 6:07 and by the way Mr hackathon thank you so 6:09 much for being here um we're doing 6:11 another stream later on and you're 6:13 always here to support so I appreciate 6:15 it make sure that you upvote and uh and 6:17 support the launch too okay so let's 6:20 take a look I'm going to go over here oh 6:24 I love the Page by the way I love this 6:27 page of course built lovable all the 6:32 micro animations you see there is all 6:35 built and lovable oh my goodness it 6:37 looks good it looks good I'm going to 6:39 drop the link down below we've done it 6:41 on uh on Twitter twitch on YouTube 6:44 wherever you're watching this make sure 6:45 that you take a look you can use this to 6:48 get started so I'm going to add the 6:51 extension right 6:53 here okay add to Chrome how long did it 6:56 take to get verified and everything when 6:59 you were 7:00 um submitting it to the store and 7:02 everything so okay I will say it did 7:06 take me a little longer than usual to 7:09 get verified because Google Chrome wants 7:11 you to do only one thing and I wanted to 7:14 do all of the things because I am a 7:17 proponent of future creep future creep 7:21 um so I always want to add more and more 7:23 stuff uh but if you stick to what Google 7:26 tells you to do which is start with one 7:28 feature and make it work then you can 7:31 get approved in as little as 24 hours 7:34 but it took us about seven days to get 7:36 approv oh wow okay yeah so don't don't 7:39 do what I did okay I was just about to 7:42 ask I'm like should I do that um okay 7:45 well okay so we just downloaded I see 7:47 the Chrome extension right here um I'm 7:50 clicking on it let should I also share 7:53 my full screen I guess too to uh do you 7:56 want me to show the animation and 7:57 everything of the I better no that no 8:01 that's okay so when you click on the 8:03 extension itself um it's just the 8:06 feedback button if you want to share 8:07 some feedback with us but the great 8:09 thing about ly is that it's kind of 8:11 naely integrated with lovable so if you 8:15 head on over to lovable. deev you should 8:18 see some cool new buttons okay awesome 8:21 by the way it there's uh to support us 8:24 by uh buy me a coffee we will be 8:26 supporting the Chrome extension in a 8:28 little bit okay 8:29 so here I am I'm in my account right 8:32 here I signed up also to Bobby's talking 8:35 about Google needs better process for 8:37 checking the payloads before submitting 8:39 listen yes sorry sorry but I'm glad you 8:42 guys did it I'm glad you guys did it 8:44 okay so we're here at lovable what 8:46 should I do next so first you're GNA 8:49 refresh the page ref you just installed 8:51 it you want to refresh that page for us 8:54 and then now you should see some new 8:56 buttons pop up so now you see that new 8:58 import and plan button oh man what 9:01 should I be doing there should I just do 9:04 plan first what are you thinking yeah so 9:06 first you're going to want to type in 9:07 your prompt um okay so you want to kind 9:10 of think about what you want to do 9:11 doesn't have to be perfect that's why we 9:13 have the plan button okay so what I'm 9:16 going to use is um I want to create a 9:21 directory for side hustles and learning 9:25 how to make money 9:28 online sounds good okay I've got this 9:31 right here now just hit that plan button 9:35 and let's watch the magic 9:37 unfold okay right now we're calling our 9:40 our AI to create a PRD which is a 9:44 product requirements document um so this 9:48 kind of just gives you a nice good 9:49 overview of what you want to build um 9:52 what features you want what plan uh 9:55 pages that you need so you're really 9:57 thinking through what you're going to do 9:59 instead of just jumping into it and what 10:02 I'm seeing here too is what I like it's 10:04 telling me what kind it's built with 10:06 react and type script so it's giving me 10:08 more details right here um okay the 10:11 features constraints okay okay okay and 10:16 user stories as well wow okay this is 10:20 great okay so I'm reading through this 10:23 um do I make edits or once I'm good with 10:25 it I say accept what should I do yeah so 10:29 if if you like this one you can hit 10:30 accept if you don't like it you uh you 10:32 can't make direct edits yet definitely 10:35 coming uh but we wanted to make it 10:37 really straightforward at first without 10:39 people tinkering too much um yeah you 10:42 know have people get a a feel for it but 10:45 you just accept that PRD um once you're 10:47 good with it and then it's going to 10:49 generate an action plan for you okay so 10:53 these are all the different steps you're 10:55 going to need to take in order to build 10:58 um your web application nice now I I'm 11:03 just going to review it is this going to 11:05 help me when it it gets submitted to as 11:08 it's going to be building this is just 11:09 more context yes so actually what's 11:12 going to happen is um after you start 11:14 your implementation we're going to 11:16 generate the first prompt for you and 11:18 then once you get into your project 11:20 itself you're going to see a new plan 11:22 tab which is going to have this tab um 11:25 this context for you that you'll be able 11:27 to check out you like you can check off 11:30 the different plans and then there's 11:31 also a button where you can copy a 11:33 prompt for that task and you'll be able 11:36 to like keep on track with what you're 11:38 doing uh Good Times okay so let me 11:41 should I press Start implementation yeah 11:44 go for it what you're describing right 11:46 here it reminds me of another platform 11:50 um that you're doing all the playing 11:52 you're keeping track of everything 11:53 because I get scattered when I'm in here 11:55 so this is really good all baked in 11:57 right there with the Chrome extension 11:58 okay so I have this and then now I'm 12:01 just going to click the return button 12:02 right here I'm going to enter it and 12:04 then we get going yep exactly let's go 12:07 ahead and do it I love this I still 12:10 think this is just magic this is just 12:11 magic so so what's happening here what's 12:14 going on yeah so now um lovable is going 12:17 to start building your project and then 12:19 we also have a couple little other 12:21 buttons which we shouldn't touch right 12:23 now uh we should wait for lovable to 12:25 finish but I'll just kind of go through 12:26 what some of them are so we already 12:28 talked about the new plan tab where you 12:30 can kind of uh mark off your task but 12:32 there's also some buttons in your text 12:34 area down at the bottom you have a 12:37 microphone so you can use uh voice to 12:40 text you have the sparkle button which 12:43 improves your prompts for you and then 12:45 you have the rubber de which is good for 12:47 debugging and talking through your 12:49 problems you also in the top right there 12:52 you have the help button which if you 12:54 press that a popup comes up and then you 12:57 can ask the lovable documentation 13:00 questions used in AI so like if you 13:02 don't know hey does lovable support 13:05 XYZ um oops lovable error that's not 13:10 us no wores no wores but um you can ask 13:15 the the documentation you know different 13:18 questions you might 13:19 have yes I didn't use a magic stick icon 13:23 but yes I love it right here so and then 13:26 um okay so we're seeing this get 13:28 generated right here so the help that 13:30 will help us as we go through and kind 13:32 of chat for you personally as you're 13:35 going through this workflow like you 13:36 were saying you're saying hey don't use 13:38 this yet what's your workflow as this is 13:41 first baking in and really working 13:43 through all of these things Let It Go 13:45 for the first version and then start 13:47 using the other uh features and things 13:49 like that yes exactly you you're going 13:52 to want lovable to do his thing um you 13:54 don't want to interrupt it or anything 13:56 like that usually like what I do 13:59 uh in between the AI doing my work for 14:03 me is I I scroll on Twitter yeah yeah 14:06 that's what I mean that's what we're 14:07 we're about to do in a second but before 14:09 we get on there so as this is working 14:11 could you talk a little bit about some 14:13 of the basics that someone would need to 14:16 know if they're trying to create a 14:18 Chrome extension right they're like I 14:19 love what you're doing right here how 14:22 technical is it to build a Chrome 14:24 extension did you have to do a lot of 14:25 research did you use Claud to kind of 14:28 build out your thoughts tell us about 14:31 what you did to prepare for this yeah 14:33 absolutely so I'm going to say um a 14:36 caveat is to do what I say and not as I 14:40 do because I definitely did not follow 14:44 what I'm about to tell you um so oh you 14:48 might want to try refreshing the page I 14:50 know um there's been a couple of issues 14:53 today with love um so 14:56 hopefully yeah okay 15:00 that's fine this happens um but for the 15:05 Chrome extension I totally just Vibe 15:07 coded it I went into cursor and I said I 15:10 want to build a Chrome extension this is 15:12 what I wanted to do and then it it made 15:15 me a Chrome extension and then I just 15:17 kind of kept going forward you know 15:19 adding features and 15:20 functionality um and I did get a little 15:22 bit of spaghetti coat that's where Bobby 15:24 came in and he had to refactor it that's 15:27 why I say probably don't do that you 15:29 should definitely start with a plan and 15:32 a strategy you don't have to do much 15:34 research um but you should like add 15:37 cursor rules to say hey you're 15:39 developing a Chrome extension here's the 15:42 documentation here's what you need to do 15:45 and that'll definitely help the process 15:46 go more smoothly I love it I love it um 15:50 and you guys are wonderful and lovable 15:52 community so supportive in the live 15:54 channels and everything so make sure 15:56 that you check them out support them um 15:58 as we're dealing with this should I go 16:00 back to the homepage restart what what 16:02 should I do if I run into something like 16:05 this is it kind of just start over kind 16:08 of go from there what no um just see 16:10 what lovable says um you know uh so 16:14 scroll down or did it 16:17 not nothing yet so chat right here 16:20 scrolling I'm just right here oh okay 16:24 yeah so um that could be a problem on 16:27 leveles end no wores um you can always 16:29 just oh well this is going to be great 16:32 for everybody so we're going to do 16:34 something that is Magic that is not part 16:36 of the ly extension is actually part of 16:39 lovable that a lot of people don't know 16:41 about so what I want you to do Doc is I 16:44 want you to click on that heart in the 16:45 top left 16:47 corner top left click this yes sir okay 16:52 and then you're gonna go to your account 16:53 settings uhhuh mhm and now you're going 16:57 to click on account settings for time uh 16:59 account settings yes sir and then you're 17:01 going to scroll down to where you see 17:03 Labs chat mode and you're going to turn 17:05 that toggle on oh okay so this enables 17:10 the chat mode inside of lovable so you 17:13 can ask it questions without changing 17:15 any code it is literally a game changer 17:19 I love that I love that and um that is 17:22 wonderful okay so we do that and then we 17:24 go back to the project go back we go 17:26 back to our project okay let's see what 17:29 we just did down here okay here we go 17:33 okay I'm back in the project so now you 17:35 see this new button it says default 17:37 you're going to want to click on that 17:39 and you're GNA want to change the chat 17:41 only mode so this is really great when 17:44 you need to ask lovable questions um 17:48 right now it is free so ask questions 17:50 away about your code base you know and 17:54 let's go ahead and we can ask it hey 17:57 what happened you know know I think 17:59 that's a great way to start hey what's 18:00 going on what happened 18:03 exactly all 18:06 right right 18:10 here it's thinking about it's 18:13 life this is good and these are great 18:16 tips these are great great great tips 18:18 thank you so much okay and I just cannot 18:22 believe how much I out of all the 18:24 different platforms lovable just I think 18:26 it's one of the best communities for 18:29 these platforms and just uh The Vibes 18:32 are good and people are always so 18:34 helpful to to just answer questions so 18:36 it's awesome to see okay so it's 18:38 thinking about its life for a moment I 18:40 see the chat bubble right there yeah 18:44 let's 18:46 see include 18:50 screenshots that's good to to make sure 18:53 if I'm getting the error and everything 18:54 like that should I almost like do the 18:56 screenshot of everything that I'm seeing 18:58 right here like what's going on um and 19:02 I'm not getting errors right now no 19:05 errors yet or the you know anything that 19:10 I'm seeing but maybe I'll just wait for 19:12 a second it's looking like it's 19:15 thinking yeah well while we wait on 19:18 lovable um I can definitely show you 19:20 some more of the functionality I will 19:22 say today's lovable birthday so they're 19:25 one year old today so they might be uh 19:28 experiencing you know a little bit of 19:30 traffic increase you know 19:32 everybody so while we're waiting you can 19:36 go down to ask lovable and this is a 19:38 really cool thing that ly does if you 19:41 type a 19:43 slash um you'll see this slash commands 19:46 pop up and there's some really cool 19:49 things you can do in here one of my 19:51 favorites is the SEO so you can click on 19:54 that SEO or you can type SEO in it pop 19:57 up and so here you can add in your SEO 20:00 settings so you can actually create a 20:03 favon if you don't have one you upload a 20:06 PNG image and it'll automatically resize 20:10 those for you and it'll show a preview 20:12 and then after you fill everything out 20:15 and you click okay then it will generate 20:18 a prompt for you oh that's amazing 20:21 that's great yeah that's great okay and 20:24 so I'm just doing slash and I can just 20:26 have all these different things okay so 20:27 we have SEO there awesome 20:31 M that is amazing okay so we have let's 20:35 go back hold on for a second so let's go 20:38 back are we doing anything still let's 20:40 try it one more time yeah or maybe let's 20:43 try a new project new project let's do 20:46 it yeah do a new 20:49 project let me go I'm going to start 20:52 going back to dashboard kind of go 20:54 through the same process should I do a 20:55 different type of app idea should I just 20:57 go from there 20:59 um you know let's for this time let's do 21:04 let's just use one of theirs let's click 21:06 on one of their options that they have 21:10 and then we can work through like what 21:12 happens when you don't create a plan 21:14 first right because you can also create 21:16 a plan later on so let's pick a new app 21:19 idea here okay and um I'm sorry I was I 21:24 was typing in the chat talking to do you 21:27 want me to make one from scratch or use 21:29 a template what did you say I'm sorry um 21:31 so you can use one of their suggestions 21:34 um right Xbox yeah or we can use one of 21:38 your projects you already have uh let's 21:41 do this um let's do expense tracker 21:46 let's do okay all right all right so 21:49 let's go ahead and run this one and 21:51 we're just gonna run it directly just 21:54 okay yes so we can just go ahead and run 21:57 this directly um and so if you have ly 22:01 installed and you're not always um 22:05 using the generate plan button to begin 22:08 with you can always add a plan later on 22:11 which I think is really 22:13 cool okay so if I'm understanding 22:15 correctly even older projects I'm like 22:17 it's not really going well I can go back 22:20 and make it make it better make it 22:23 exactly okay awesome exactly 22:29 so it's working we see a couple things 22:31 that's adding right now okay okay 22:34 yeah all in all how many hours or how 22:37 many projects you think you've you've 22:39 done in uh in lovable already yeah so I 22:43 can tell you exactly how many projects 22:46 I've done I have created a total of give 22:49 me one 22:52 second 78 projects okay okay okay so 22:57 what as you're going through this 22:59 process when did you start feeling like 23:01 you really were you were really hitting 23:03 your stride was it were you thinking of 23:06 just ideas like for different startup 23:08 ideas were you trying to solve your own 23:10 problem were you hearing what other 23:11 people were trying to you know business 23:14 ideas you're like let's just see if I 23:15 can create it what um yeah what was your 23:18 process and when did you feel like you 23:20 were really dialed in when you using 23:23 lovable yeah so I definitely started 23:26 with I am the type of girl who likes to 23:28 just play around with new tools anytime 23:30 I see something new and interesting I'm 23:33 like okay let me just play around with 23:35 it get a feel for it figure out where 23:37 all of the buttons are all of the the 23:40 features that it offers and so after I 23:43 got my feel and kind of got my stride 23:45 going then I could more um develop more 23:48 easily and it's best to develop in a 23:51 linear path right so always going 23:55 forward instead of Step stepping back 23:57 because that's how you keep things on 23:59 track so after I learned that then it 24:02 was like Smooth Sailing that's awesome 24:05 awesome David saying this is both 24:07 inspiring and gold that's awesome thank 24:09 you so much for being here today uh we 24:12 have new ones in the chat too so what 24:14 does the Chrome extension do exactly can 24:16 you showcase the Chrome extension listen 24:18 this is why we got it recorded but we'll 24:19 talk about a couple things right now 24:21 which is awesome um but yeah as we're 24:25 doing this project I think you'll be 24:26 able to see the Chrome extension in 24:28 action if I'm understanding so yeah yeah 24:31 let's let's keep going so now we have 24:33 the expenses and everything how can we 24:36 use this Chrome extension yeah so since 24:39 we didn't create a plan originally we 24:41 can go ahead and click on this plan tab 24:44 up there at the top absolutely and we 24:47 can click to generate a plan so you 24:50 don't have to generate a plan um when 24:52 you start you can generate it now and 24:54 then you just want to get our AI like up 24:57 to speed just tell it what you're trying 24:59 to build and like where you at where you 25:01 are in your project so if you're just 25:04 starting out or maybe you're like a 100 25:06 edits in you know we can which happens 25:10 more often than you think you can 25:12 generate a plan from whatever stage 25:14 you're at okay so let's just say I just 25:18 created the first version of my monthly 25:20 spending uh spending and budget goals I 25:24 want to make sure that I can add 25:28 uh expenses so I can track 25:33 them there we 25:35 go awesome okay and then I can say start 25:41 planning 25:44 absolutely everything that I do Bobby 25:46 sign about voice mode that's exactly 25:48 right if I can do voice mode on anything 25:50 I will I uh and it's a wonderful thing I 25:53 love that you have this feature so now 25:55 we have the um we have the PRD we have 25:59 everything right here we're being able 26:02 to progress to see what we need to add 26:04 into the project I can also I love how 26:07 it's laid out right here of I can easily 26:11 understand what it's going to add and 26:13 why so user experience technical 26:16 considerations integration 26:19 Pages now I can just say accept then 26:22 absolutely yes okay you just accept that 26:26 and then it's going to create your task 26:27 for you 26:29 um so you can review your action plan 26:32 and then you can click Start 26:34 implementation it it'll create your your 26:37 task for you as well as your if that 26:39 happens just click try again um you know 26:42 uh sometimes the parsing with AI doesn't 26:46 always do what it's supposed to do and 26:49 so now if we can just refresh the page I 26:53 yeah just refresh the page real fast and 26:56 now there you see you have your your new 26:58 prompt that you can you can add um you 27:01 also if you want to click the sparkle 27:03 button it can condense and simplify the 27:06 p and it has confetti I love it I love 27:10 it I love it yeah so we could go ahead 27:13 and we can submit that yeah go ahead and 27:16 do 27:17 it so okay I feel like that's really 27:20 great you know if you you've already 27:22 started a project or you forgot to click 27:25 the plan you can always add a plan later 27:28 you can always improve your props I love 27:30 it and it says I'll create a new form 27:32 component for adding expenses with the 27:34 specified props validation error 27:36 handling using react hook form for form 27:39 management validation okay so it's doing 27:41 all the work for me I appreciate it yeah 27:43 you don't have to think about that you 27:45 don't even have to know what any of that 27:47 means it does all the work for you it 27:50 thinks 27:53 it oh 27:58 oh one second one I muted myself y'all 28:02 okay no problem was like 28:05 headon I talk too much with my hands and 28:08 I knocked it no worries no worries now I 28:11 got some questions David's saying this 28:13 and this maybe as it's building 28:15 everything out which is great so David 28:17 said my concern is once uh you publish 28:19 an app and using superbase and hosting a 28:21 user on board and the app scills what 28:24 are the costs could you kind of talk 28:26 about how do you look at that those kind 28:28 of things yeah absolutely so you can 28:30 deploy directly from lovable and that is 28:33 free hosting which is really great but 28:35 you can also self-host it yourself um 28:38 using something like netlify or versale 28:41 which also offer free hosting um and 28:45 they all scale indefinitely now as your 28:48 product scale if it goes viral like you 28:50 get a 100 million users in a day then it 28:53 is going to cost you some money um you 28:56 know maybe a couple thousand dollars but 28:58 hopefully those 100 million users are 29:00 paying you something so it doesn't 29:02 matter right exactly also um super Bas 29:06 scales indefinitely as well uh of course 29:10 as you scale it costs money but the 29:11 really great thing about superbase is 29:13 they are very supportive of you know 29:17 non-coders entrepreneurs people building 29:20 businesses so I would definitely always 29:22 reach out to super base and they have a 29:24 lot of startup programs where you can 29:27 get credits and extra help and yes like 29:30 Bobby said it's definitely very 29:32 affordable it's like $25 a month um up 29:35 to like a 100,000 users I think um 29:40 definitely reach out to super base I 29:41 don't work for them so I don't want to 29:44 lie to 29:45 anybody I love it I love it no this is 29:48 good and I always say uh like you 29:50 mentioned um if you're going to be 29:52 scaling like that having a section that 29:55 you can get paid off of this stuff this 29:57 this is this is part of it it we want 30:00 you want to make sure that this is 30:01 profitable you want to be able to scale 30:03 and add features without stressing about 30:05 cost have a feature for Pro or something 30:08 like that to start making some money 30:11 that's what we're always talking about 30:11 on this channel so tell me more about uh 30:15 this we have it completed what it needed 30:18 to ask uh to add it says the form can be 30:22 used by passing uh and it tells me more 30:24 details what should I do next should I 30:27 go back to plan how do I use this now 30:29 that it executes should I test it what's 30:32 the next step yeah so uh I definitely 30:35 always suggest when you're um coding 30:38 with AI to anytime the AI does something 30:40 you should always test it yourself uh we 30:43 are working on that test button up in 30:45 the right corner where it will test it 30:47 for you so you can say hey test the form 30:50 I just built and it'll go off and test 30:51 it as you continue coding um so I would 30:55 say try to test it um whatever 30:59 built let's see should I make it go into 31:02 a different window and just kind of test 31:04 those things what's the best process do 31:07 do you ever test it just in the preview 31:10 yes I test almost everything just in the 31:12 preview mode you it's really difficult 31:14 to test things like user authentication 31:17 in the in the iframe just because of 31:20 different security concerns so you are 31:22 going to want to always pop that out 31:24 when you're doing like Google off or any 31:26 type of user off um just so it's more 31:29 secure because a lot of time they'll 31:31 block it they'll be like Google will be 31:33 like what what are you doing what is 31:34 this weird if frame you're in no we're 31:37 not allowing it so you you're gonna want 31:38 to test that outside but most 31:40 functionality you can test right here 31:43 now as we're seeing that it says hey I'm 31:46 going to be um I can now have an Express 31:49 Express form can should I just mention 31:52 and T kind of type like hey I'm on the 31:53 front page I don't see the button to 31:56 submit Express like expense report 31:59 something like that absolutely so that's 32:01 when you're gonna go back in that chat 32:03 mode I'm just going to say let's say I'm 32:06 on the homepage and I don't see an icon 32:09 or button to be able to submit expenses 32:14 can I add a button or should 32:17 I okay great and you want to change over 32:20 to chat mode from 32:23 default go over here and then I go here 32:30 exactly let's 32:31 see yeah so this is you know I really 32:35 enjoy chat mode because it'll help you 32:37 think through 32:39 things um through these problems because 32:42 sometimes the AI makes mistakes right 32:44 you know it it's built on human data and 32:47 humans make mistakes so we can expect AI 32:49 to make some mistakes 32:51 sometimes and so the cool thing is after 32:54 it it will propose a plan for you and 32:57 you can kind of read through that and 32:59 then there's a cool little button that 33:00 says implement the plan so if you're 33:02 satisfied with what this is you can 33:04 click that button and then lovable will 33:06 do it for you okay so I click the 33:12 button awesome and now it's thinking 33:15 about it we've got a question David 33:17 thanks so much for being active in the 33:18 chat the stat uh the stack is 33:22 nextjs oh no lovable actually uses uh 33:26 bite and react and types script so right 33:30 as of now nextjs is not compatible with 33:35 lovable but that's 33:38 okay all right all right now we have an 33:41 add expense button which is great right 33:44 here yeah and so right here I can go 33:47 with the date okay I can say okay this 33:50 is my date entertainment I can say 33:53 description saw a movie you saw Captain 33:58 America yep let's see all Captain 34:02 America um and then I can also oh I talk 34:06 too 34:09 fast um you know what I also noticed in 34:12 the middle of like when it's like 2 or 3 34:14 in the morning and I'm using dictation 34:17 uh I start slurring my words and then 34:18 like it all goes downhill when I'm like 34:21 well I got to annunciate 34:23 better okay so it says added a so moving 34:28 okay great so now let's go to our plan 34:32 tab 34:33 yeah plan tab there we go and now right 34:37 so now you can see some of the different 34:39 plans um tasks so we just did expense 34:43 form component which is the second task 34:46 there and we can go ahead and we can 34:48 check that 34:49 off and so now you can keep up to date 34:52 with like what you're doing um all of 34:55 the different steps that you need to add 34:57 Etc which I think is really cool this is 35:00 wonderful because sometimes I get so 35:02 many suggestions in chat when I'm using 35:05 either lovable or I'm using repet or 35:07 whatever it is and then I get 35:08 overwhelmed I'm like wait where was I in 35:11 like what was I supposed to be doing to 35:13 stay on track so I love this plan 35:15 feature to make sure that I get I keep 35:17 my life together so this is great yeah 35:21 exactly and if you click on one of the 35:23 little copy button oh can I have a 35:25 question so I see high priority medium 35:28 priority and then going from there is it 35:31 kind of just understanding my main goal 35:33 of the application and it's kind of 35:35 breaking down what I should be focused 35:37 on high priority and then I can the 35:39 medium priority is kind of like nice to 35:41 have things am I understanding that 35:43 correctly yeah exactly so high priority 35:45 is kind of like your your MVP right it's 35:48 the core functionality you need for it 35:51 to just work and then the the medium 35:53 prority is like nice to have but it 35:56 wouldn't be the end of the world if I 35:58 don't have it and then low priority is 36:01 just like the cherry on top right you 36:03 definitely don't have to have the Cherry 36:05 but it does make things better I love it 36:08 I love it so should we add one more 36:11 should we go through this should I add 36:13 like Implement a data model to store 36:15 expense information yeah let's go for it 36:17 so you can click that copy button and 36:19 then what happens here is is that it's 36:21 going to generate a prompt based on that 36:24 task and we can go back to 36:26 chat and we can paste that prompt right 36:28 on in that we got okay and then I can 36:32 just go return and hit this bad boy we 36:35 already did this Implement add expense 36:39 form right here I've added new 36:42 okay the component should be created at 36:46 expenses 36:48 okay I think we might have already did 36:50 this one um so we're of the game off 36:55 yeah so apparently we already did this 36:57 so let's do something else um yeah let's 37:00 develop let's do the expense listing 37:02 let's develop the list view I think 37:05 that's great so we copy that we go over 37:08 and we can input it okay super easy um 37:12 and then also if you're ever like oh I 37:15 don't know this looks like a lot you can 37:17 always just do it in chat mode first you 37:20 know because I know some people are like 37:22 whoa what's going on here I love it yeah 37:25 so while we're doing that we can if you 37:27 want to click on the help button for me 37:30 y so this is where you can actually get 37:33 help about lovable itself so you can ask 37:36 a question like how many free edits a 37:39 day do I get something like that and it 37:41 will search The Lovable documentation 37:44 blogs um YouTube videos for the answer 37:48 let's go with this I'll just say 37:50 yeah how many edits can I make on the 37:53 free 37:55 version we go from there um right here 37:58 so it's searching I love this oh okay 38:03 ray context is not expressely State the 38:05 number of edits you can for the free 38:07 version it mentions a daily and monthly 38:09 limit okay so now it's giving me context 38:11 all of those things okay excellent 38:14 excellent um this is really good this is 38:18 really good there could I ask you two 38:20 questions I want to get back to the chat 38:22 too because I think this is important 38:23 question there too but you mentioned the 38:26 slashes and going through through for um 38:29 documentation authentication 38:31 templates as you're going through this 38:34 would you first is there any methodology 38:38 or anything that you should say hey 38:39 here's what you should be thinking about 38:41 first for example like should I not try 38:44 to think about authentication before I 38:46 start doing one thing before that could 38:48 you talk about that yeah absolutely so 38:52 the way I like to develop is I like to 38:55 start with my superbase in my database 38:58 like after I get my my kind of core this 39:01 is where I'm starting then I'll go and 39:03 I'll integrate superbase and make sure 39:06 that that's connected and then that's 39:08 where like your off prompt really works 39:11 well because then you can just select 39:13 your um your login method say oh I want 39:17 to use Google I want to use a magic link 39:19 Etc and then it'll create a prompt to 39:22 tell lovable how to use superbase to 39:24 create that UI as long as well as the 39:28 actual functionality of it I love it so 39:31 if I'm understanding you correctly first 39:32 I should be connecting superbase and go 39:35 here first connect everything and then 39:38 start using uh the prompt to start doing 39:41 what I want is that correct yeah yes 39:44 exactly so if you're going to do 39:45 anything with data anything with um apis 39:49 like if you want to integrate open AI or 39:52 replicate or stripe or what have you um 39:55 and if you want to have users you're 39:57 going to want to do that superbase 39:59 integration as early as possible like I 40:02 talked about that linear development 40:04 keep going forward you don't want to 40:05 have your whole app built and then be 40:07 like oh now I want to add you know a 40:11 login page no it's too late the house 40:14 yeah no no that's good and I see Bobby's 40:17 answering this in the chat but I think 40:19 this is really important to talk about 40:21 uh cend mentions if we launch a web app 40:24 how can we get customers to use it can 40:27 you brief it out I love this question um 40:31 Delicia would you like to talk about 40:33 this first I have my thoughts but what 40:35 what do you think about that question 40:38 yeah so getting customers to use your 40:41 your project um is definitely not true 40:44 that if you build it they will come you 40:46 know this is not Field of Dreams it does 40:48 not work like that you have to go where 40:50 your customers are where your users are 40:52 right so if you're building you know a 40:55 web app that baseball stats go to a 40:59 baseball game you know go hang out in a 41:02 baseball Forum you know someone ask a 41:04 question be helpful say someone ask oh 41:07 what's the latest stats on the Atlanta 41:09 bravs I'm front of Atlanta you know 41:11 when's the last time they made the World 41:12 Series you know you can say oh I built a 41:15 web app for this and the answer is XYZ 41:19 and that's how you start getting people 41:21 to to build a rapport with you and your 41:23 brand so they're more likely to want to 41:26 try it out 41:27 yeah I love that so much yeah I I just 41:30 Echo those sentiments um just Google 41:34 search it get into Facebook groups uh go 41:37 to Live Events do whatever to just 41:39 connect and what I would really say is 41:42 oh and thank you so much by the way for 41:43 Bobby talking about that I would say 41:47 just be a normal human and try to solve 41:50 problems I see too many people on Reddit 41:53 that they see like a topic and they're 41:55 like I just built this and they just 41:57 drop a link without being helpful and it 41:59 kind of is spammy if you're just trying 42:02 to solve problems and it comes up I 42:05 think that's wonderful and I also maybe 42:07 I'm biased I think live streaming and 42:10 talking about it in real time in 42:12 inviting people to contribute and talk 42:14 about things they see that you're a real 42:16 person they see that they if they like 42:18 your Vibe they're going to stay and it 42:20 it builds a community for people to want 42:23 to go from there so I love it great 42:25 questions let us know what do you 42:27 building what are you trying to build uh 42:29 that'd be awesome and we'll see how we 42:30 can support you definitely tag me on 42:33 Twitter yeah exactly we're going to drop 42:36 all the all the chats D said solve 42:38 problem and get early uh yeah users 42:40 early and iterate on their feedback 42:41 that's exactly right and for me this is 42:43 just me but I'm always about I've got to 42:46 make my time worth it maybe you won't 42:48 collect payments right away but I need 42:50 to know would they be willing to pay for 42:52 it why or why not a lot of people don't 42:54 ask or they build for months and then 42:56 they're back in the corner they're like 42:58 oh how am I going to monetize this just 43:00 ask from the front and if they say no 43:02 I'm not willing to pay just ask them why 43:05 I would love to know what features is it 43:07 missing and just go from there awesome 43:10 yeah that's definitely how I built love 43:12 ay and also uh I just want to show off 43:15 some of the other features in so if you 43:18 want to click on that rubber ducky for 43:20 me it's one of my favorite 43:22 features so in software development 43:25 rubber ducking is the 43:27 the is the task of talking to like an 43:30 actual rubber duck right so a lot of 43:33 software Engineers they have like a real 43:35 rubber duck on their desk and when they 43:36 get stuck they talk to their rubber duck 43:38 and they explain what's going on and 43:40 talking about it out loud often helps 43:43 the engineer understand where they went 43:46 wrong and the great thing about this is 43:48 the AI understands how to rubber duck 43:51 debug as well so we made a little prompt 43:54 here you can type her text and you can 43:56 explain explain the problem that you're 43:58 having we don't have a problem but 44:00 imagine we did right imagine the um data 44:04 isn't being saved to the database 44:06 properly right so we can describe that 44:08 problem we're having to our rubber de 44:11 gotcha okay so I'm gonna 44:13 say right now I'm not seeing the data 44:15 being saved to the database I'm not 44:18 really sure where to 44:22 begin all right and then we're going to 44:24 go click on that next step in the next 44:27 step is describing how you want it to 44:29 work right so a lot of times when people 44:32 are debugging with AI they just end up 44:34 yelling at it the problems it's like 44:36 this isn't working this isn't working 44:38 but the AI has no context on the right 44:40 way that it's supposed to work so you're 44:42 basically just yelling at it for no 44:44 reason and the AI is like bro I I don't 44:48 know what you mean so you always want to 44:50 describe how you want it to work so for 44:52 this one maybe we want it to work we 44:54 want the data to be dis displayed from 44:57 the database onto like a a graph or 45:00 something yeah okay I want to see the 45:05 database on the screen I want it also to 45:09 be projected where I can see it with uh 45:12 different rows and columns so I can 45:15 understand what I'm looking 45:18 at okay perfect and then um you go ahead 45:22 and click Next Step Next Step okay and 45:26 so it will show you your time to reflect 45:28 you can reflect personally but also you 45:31 can continue to chat and it'll generate 45:33 a prompt for you to 45:34 use say that again so after it says the 45:37 problem you describe your expected 45:40 Behavior the rubber duck says do I I can 45:43 take this right here to bring it into 45:45 the chat or say that last part again 45:47 about cre yeah so yeah you can take it 45:50 directly to the chat by clicking the 45:52 continue to chat button and it 45:53 automatically insert it see it's magic 45:56 um um and this will make sure you're in 45:58 chat mode of course um and then this 46:01 will uh have the AI to rubber duck 46:04 itself now this isn't a real problem so 46:06 lovable would probably be confused like 46:08 what are you talking 46:10 about but if it was a real problem it 46:13 will it would be like yeah let me rubber 46:15 deck myself let me think through this 46:17 problem step by step it will lay out 46:20 exactly what it's been doing um and a 46:22 lot of times it will catch the error 46:25 itself it'll be like oh yeah yeah I see 46:27 that I should have imported X instead of 46:30 importing Z you know so it's it's a 46:32 really powerful tool if you ever get 46:39 stuck uh oh am I muted or you 46:43 muted 46:55 okay for 47:35 uhoh 47:38 SpaghettiOs well now it's Telicia hour 47:42 confetti it's a party it's a party it's 47:45 a party so apparently some technical 47:48 difficulties 47:55 [Music] 47:57 there we go are you here oh ni he's back 48:00 okay and you're hearing me this is what 48:03 happened so because I'm using voice mode 48:06 on the um on the browser and I was doing 48:10 that with rubber ducky everything else 48:11 got shut 48:13 down leave the studio reset everything 48:16 because it's like where's the sound 48:17 coming from what's Happening Here so uh 48:20 funny these these things happen in life 48:22 these things happen Okay as as we're 48:25 going through this 48:27 uh we're going to be sharing my screen 48:29 real quick uh as we've been talking 48:31 about this building your own Chrome 48:34 extension how you're able to do this 48:36 with AI agents remember as we're showing 48:38 this off there is a product hunt uh 48:42 campaign going on right now with level 48:44 five make sure that you support them 48:47 upvote do all of those things the links 48:49 are going to be in the chat down below 48:51 and for you to try it out this entire 48:53 live stream you can also access as a 48:56 replay so you can go step by step in all 48:58 of the different features we H 49:00 highlighted before we go on TIA is there 49:02 anything else that I miss anything that 49:04 you want to highlight all of those 49:06 different things Rose in the house love 49:08 it hey 49:10 Rose um yeah so I think the only other 49:14 thing I would like to highlight is uh 49:17 one more slash command so just erase 49:21 that um but one more slash command is 49:24 the slash docs is something that I think 49:27 is really powerful so here if you're 49:29 trying to do something like uh integrate 49:32 open AI or integrate um you know stripe 49:36 you can paste in the documentation URL 49:39 and then describe what you're trying to 49:41 do with that doc so you could paste in 49:43 stripe and say I'm trying to add a 49:45 payment button um to XYZ place and then 49:48 when you process documentation the cool 49:51 thing that happens is we have a web 49:53 crawler go scrape the page gather that 49:57 information give it to a llm give it to 49:59 an AI on the back end and then generate 50:02 a prompt for you that gives additional 50:05 context to leval because documentation 50:07 is always changing always a new latest 50:10 version and level doesn't always have 50:12 that Contex so you can just insert it 50:14 here pretty simply okay so if I'm 50:17 understanding correctly should I first 50:19 like say for instance I look up stripe 50:22 documentation something like that and 50:24 for apis I would then grab that URL and 50:29 then bring it into lovable yes exactly 50:32 you bring it in and post that um and 50:35 then you just kind of describe what 50:36 you're trying to do with it you know so 50:40 I'm trying to add different I'm trying 50:43 to do a get and a post command using the 50:47 stripe API I want to get the information 50:50 of the customers email and how much they 50:54 spend um 50:58 okay let's 51:01 see process 51:04 documentation processing 51:08 processing so it does take a little 51:10 moment to you know scrape the whole web 51:12 page oh yeah especially is it's some 51:14 dense 51:15 documentation true there so then it 51:18 process and then see it it it tells 51:21 lovable exactly how how it should use it 51:24 and then lovable can go okay great I got 51:26 it um so I think that's really cool I 51:29 think this is great so have you been 51:31 using this with your own new projects 51:32 too have you been using your Chrome 51:34 extension to really iterate and go from 51:36 there I basically use my Chrome 51:39 extension to build my Chrome 51:42 extension I love that I love that that 51:44 is so good that's really good remember 51:47 everyone uh there's two things I would 51:49 like to highlight about this don't 51:51 forget um you can also support 51:53 everything right here by buy me a coffee 51:56 make sure that you're supporting the 51:58 extension everything that you're doing 52:00 all these great features there are 52:02 creators there's wonderful Minds behind 52:04 it make sure you support Felicia make 52:07 that that I'm G to put that in the link 52:08 right now right now make sure you 52:10 support this is a great Chrome extension 52:12 we're going to support this right after 52:13 the stream this is wonderful um okay so 52:17 could you talk about just a little bit 52:20 this is a launch what what's on the road 52:22 map we have this is it done completed 52:25 are you going to do other things are you 52:26 moving on what's Happening yeah so 52:29 there's definitely more on the road map 52:31 for sure um we're working on that 52:34 automatic testing for our users so you 52:36 can go and say hey test a login feature 52:39 for me we're working on something really 52:41 cool called cook mode which will allow 52:44 you to import your your project um your 52:47 images tell it what you want to do and 52:50 then Levi will completely take over your 52:53 this is Peak Vibe coding completely 52:55 hands out 52:57 I love it uh we're also working on a 52:59 voice help feature so when you click 53:01 that help instead of typing questions 53:04 you can turn on uh the voice help and 53:07 you can talk to it and share your screen 53:09 and say something like hey this button 53:11 is on the left side but I wanted it on 53:13 the right side and then it will generate 53:15 prompts for you to kind of debug and 53:17 solve those issues so that's some of the 53:19 things coming we have a lot in store um 53:22 definitely not stopping here I love it I 53:25 love it so as we're finishing up here is 53:27 there anything else you wish I were to 53:29 ask you anything that you want to dive 53:31 in more how do you feel as we're 53:34 wrapping up this session but hopefully 53:36 if you allow us we'd love to have you 53:38 again on the show because this is just 53:40 scratching the surface in all of the 53:42 wonderful things that you're doing out 53:44 here so we would would love for you to 53:46 come back but anything as we're wrapping 53:48 up right now anything else that you want 53:51 to to go through or 53:53 highlight uh yeah so I would love to to 53:56 just leave everybody with like my two 53:59 tips for coding with AI coding with 54:02 lovable tip number one is to think like 54:05 a programmer and that doesn't mean that 54:07 you need to be a software engineer with 54:10 10 years experience no it just need you 54:13 need to think through things step by 54:15 step you can't just force it full steam 54:19 ahead right um imagine if you were 54:21 building a house you wouldn't hire a 54:23 contractor and tell it to build you a 54:25 house like that's nonsense you would say 54:28 oh I want this kind of house I want this 54:29 many bathrooms you know I want this kind 54:32 of tiling there's a lot that goes into 54:34 it and it's the same with building with 54:36 AI and programming you got to really 54:38 think through all of the steps before 54:39 you start and number two my biggest tip 54:42 is have patience AI is still pretty new 54:47 in this realm like this is things that 54:50 have never been done before so just have 54:53 patience slow down read what the AI is 54:57 saying read the documentation don't be 55:00 afraid to try things and experiment but 55:02 just have 55:04 patience those are great tips those are 55:06 great tips well thank you again for 55:09 being here for the launch and and 55:11 sharing the day as you are very busy I 55:13 saw what time you posted in all the 55:15 promotions throughout the day so you're 55:17 doing great please let us know how we 55:19 can support you the link is down below 55:21 make sure that you go follow her go 55:23 follow the project make sure that you 55:25 upvote for for The Lovable campaign on 55:28 product hunt that is going on today and 55:31 make sure if you like these kind of 55:32 episodes if you want to talk about more 55:35 subjects about lovable or what you're 55:36 doing to create your micro app your 55:39 Chrome extension all those things let us 55:41 know in the comments section down below 55:43 like And subscribe because we do this 55:45 every single week so until next time 55:48 we'll see you later and thank you so 55:50 much for your time and energy being here 55:52 in the chat goodbye everyone 55:55 bye but