These NEW Lovable AI Tricks Will Change the Way You Build!

0:00 in this video I'm going to show you 0:01 three brand new features in lovable. 0:04 deev and one major hack that's going to 0:06 take your applications from looking 0:08 decent to looking modern and futuristic 0:11 and then we're going to apply this hack 0:13 and build our own mini prompt engineer 0:15 that can create prompts for you and 0:17 simulate their actual outputs this video 0:19 is going to be full of tips and tricks 0:21 so buckle up and let's get right into it 0:23 all right so the very first feature I 0:25 want to walk through is one where you 0:27 can actually create and initiate your 0:29 first application 0:30 right from within the browser without 0:32 even being on The Lovable platform 0:34 itself so imagine you're in a meeting 0:35 and you're discussing building some form 0:37 of application and you want to create a 0:39 demo really quickly and you want to kind 0:41 of look like you're paying attention to 0:43 the meeting while you have a tab open 0:45 typing a very basic prompt in your 0:46 browser so we can do that exactly now by 0:49 just opening a tab here going to write 0:53 generate. new slash and then you write 0:56 your prompt just in one Big Blob no 0:58 spaces obviously because it's a URL so 1:00 you can write something like 1:02 q1 task 1:06 prioritization to do list 1:10 minimalistic design it's a bit weird 1:12 writing in one large blob but you'll get 1:14 used to it and you just click enter and 1:17 then this will go to The Lovable screen 1:19 initially and then it will actually load 1:21 lovable which will actually understand 1:23 this blob of text as the actual command 1:26 and it will put together a small demo of 1:29 what you actually asked for for and 1:30 you'll see here it was able to 1:31 understand our request create basically 1:34 a to-do list app pretty much that just 1:36 has the ability to prioritize certain 1:38 tasks so obviously we can go a lot 1:40 deeper here we can make this more pretty 1:42 more complex we can add authentication 1:45 we can add storage of the tasks using 1:47 superbase but as a starter again in that 1:50 specific situation where you want 1:51 something quick and ready to go this is 1:54 a cool hack to actually use your browser 1:55 to create this automation all right so 1:57 feature number two if you go to lovable 2:01 now and you go to your account settings 2:04 and you go 2:06 to settings here you're going to see 2:09 this option called Labs so if you turn 2:12 Labs chat modes onto on you'll be able 2:15 to now have a chat directly with our 2:18 large language model behind the scenes 2:20 that doesn't necessarily change your 2:22 interface or code whereas usually with 2:24 things like lovable or bolt or wind surf 2:27 when you ask for some form of command 2:29 usually changes the underlying code no 2:31 matter what you do but with chat modes 2:33 set to chat only you can ask a general 2:36 question like am I going deep enough in 2:38 my design do you have any 2:40 recommendations for how I should 2:41 actually structure my application so you 2:43 can have a direct back and forth with an 2:46 llm itself without necessarily changing 2:48 anything in your underlying application 2:50 infrastructure which is super helpful if 2:52 you're actually looking for guidance you 2:54 don't want to have to constantly go to 2:56 chat jbt or Claud to Think Through Your 2:59 Design or what you want to build next in 3:01 your actual project so once you have it 3:02 toggled on we can actually go into 3:05 lovable let's go back into the project 3:07 we just made and then you'll see this 3:10 little icon at the bottom right hand 3:12 side that says default and you'll see 3:14 here the default is just the typical 3:16 experience where you say some basic 3:18 commands and it usually does some form 3:20 of structural change to the application 3:23 but if you click on chat only you can 3:24 see here it says chat without making 3:27 edits to your project so if you click on 3:30 chat only I can ask it now a general 3:33 question like what do you think I should 3:37 do to make this app more unique and 3:42 usable by my team and now it should be 3:46 able to just answer that question 3:47 conceptually without necessarily having 3:49 to do a Next Step so now it says let me 3:51 suggest some features that could make 3:52 this task management app more team 3:54 oriented and unique and then it goes 3:56 through a series of recommendations and 3:58 at the very end it's says would you like 4:00 me to elaborate on anything we can start 4:02 by implementing them one at a time and 4:04 then you can go back to default mode 4:07 assuming you're inspired and you know 4:08 what you want to do next and maybe you 4:10 say you know what let's implement the 4:12 task assignment feature so even though 4:14 you're not directly changing The Code by 4:16 talking chat only you can use chat only 4:18 to get some inspiration or get some 4:21 guidance and then build on that guidance 4:23 from the conversation thread and say you 4:25 know what let's Implement number one all 4:27 right so that was feature number two and 4:29 now feature number number three is going 4:30 to be a doozy it's a bit unexpected 4:32 because most platforms don't have 4:34 anything like this just yet but now you 4:37 can use a figma as an inspiration to 4:40 actually build it directly in lovable so 4:42 you can have a design in figma and if 4:45 you're not familiar with figma I'll show 4:46 you what it looks like in a second but 4:48 imagine you have a design there you can 4:50 now hook it up take the underlying 4:52 design and then import it into lovable 4:55 to start building on existing designs 4:57 which I think for a lot of product 4:59 managers product designers and 5:01 especially entrepreneurs and business 5:03 owners this now enables you to take 5:05 static designs and literally bring them 5:08 to life if you're not familiar with what 5:09 figma is if we go to the website let's 5:12 go just figma over 5:15 here you're going to see that I'm going 5:17 to be logged into my personal account 5:19 but it's pretty much somewhere where you 5:20 can go and take a look and create 5:23 designs so before typically these apps 5:26 like lovable. deev existed in the old 5:29 world you would have a design team 5:31 create different wireframes of the 5:33 different screens of what your 5:34 application will look like and then once 5:36 you finalize that that's typically what 5:38 you'd give your development team as a 5:40 blueprint for what they should build in 5:42 terms of the SAS or the General 5:44 application and you can see here each 5:46 one of these wireframes is a separate 5:48 screen with individual components and 5:51 once you add them all together this is 5:53 where you get some form of semblance of 5:54 an app blueprint now to make this work 5:57 there are a few contingencies so step 5:59 one one is whatever figma design you're 6:01 trying to import into lovable has to 6:04 have Auto layout enabled so if you're 6:06 not sure what that is if you click on 6:09 any one of these little wireframe 6:10 screens here you'll see at the right 6:13 hand side there's the word layout so 6:15 you'll see here we have fixed dimensions 6:17 of how the layout is designed so it's 6:20 not necessarily going to Auto siiz to 6:22 any screen it's on and it's pretty much 6:25 fixed in the way it's actually 6:26 structured something like this wouldn't 6:29 really gel very well with lovable what 6:31 we need is for a specific component or 6:33 wireframe element to say Auto layout 6:36 Auto layout will basically reinforce the 6:39 fact that if this goes into a brand new 6:41 application or a brand new screen it 6:44 will automatically resize all the 6:46 components to fit it as well as possible 6:48 so if we go back to files right now and 6:51 we pull up another one of my designs I 6:53 have here and I hover over any one of 6:56 these so let's just take this screen or 6:58 wireframe okay so when I click on it now 7:00 you see on the right hand side here we 7:02 have Auto layout meaning it should be 7:04 able to resize and be adaptable in 7:07 different platforms that's step one so 7:10 that's checked off now step two is you 7:12 need to use figma's app store to install 7:16 something called a 7:17 builder. builder. will be the bridge 7:20 between figma and lovable so if you go 7:23 on figma plugin 7:27 store and you go here all right and if 7:30 we go to and write uh Builder IO you're 7:35 going to see this pop up which is 7:37 Builder IO AI powered figma to react 7:40 code and then you want to do open in and 7:43 then ideally whatever design you've 7:45 chosen and I'll show you how you can 7:46 actually uh get some designs for free 7:49 online that you can use and import into 7:51 your figma account once you've actually 7:53 used it in one design it should remember 7:55 in the plugins tab of your figma 7:58 instance so if you go into where we are 8:01 currently and you see these little block 8:03 icons these actions will allow you to 8:06 invoke different things one of those 8:08 things could be plugins so if you write 8:10 here 8:12 builder. you'll see matching actions 8:15 correspond to any plugins you have 8:17 installed so when you click on that 8:19 you'll get a popup and for the first 8:21 time for you you'll just have to click 8:23 through um it'll say a few different 8:25 instructions on what to do and then once 8:27 you get through there you should be able 8:29 to see export to code now you can go on 8:32 easy mode or precise I'm going to 8:34 explain the difference between easy and 8:37 precise when it comes to easy it's 8:39 trying to emulate some semblance of the 8:42 design you're exporting meaning there's 8:43 some margin of error it's not going to 8:45 look exactly like the design it's going 8:47 to be heavily skewed or very similar to 8:50 it with precise you're trying to push 8:52 the boundaries to make it as exact as 8:54 possible and although inherently 8:57 intuitively it might make sense to want 8:59 to do precise all the time with this 9:02 integration and lovable at least early 9:03 days this was just released it seems 9:05 that easy is typically the more easy way 9:08 to actually do this so once you're 9:10 toggled on to easy you can click on 9:12 export to code right here and then it 9:14 will take its time and go through a 9:16 couple different checks and then you 9:17 should get some lovable icon at the very 9:20 bottom of your screen that you can click 9:22 to then import that in your lovable 9:24 platform you can then get a popup like 9:26 this where it says choose your preferred 9:27 Vision which of these looks closer to 9:30 what you're looking for I think both are 9:31 good so let's click the first one here 9:34 and now you see this little shiny button 9:36 open in lovable so let's click on that 9:39 and then this will go through a couple 9:40 steps and then it will Ex export it 9:43 directly to the application so you can 9:45 see here it's a success so it seems like 9:47 this project is ready to import into 9:49 lovable and all we have to do is click 9:51 on launch project here and this will 9:54 initially look like it's doing nothing 9:56 but within a few seconds it'll start 9:57 importing that entire project into 10:00 lovable and there you go looks super 10:02 cool that we can actually import this 10:04 exact design from figma and we can now 10:07 start to add onto it so we can say can 10:11 we change the font of the panda 10:16 media at the very top in this case I'm 10:19 going to use the select little icon here 10:21 to click on Panda media so now it's 10:23 going to specifically Target that div or 10:26 that element to change the font so I'm 10:29 I'm just showing you this to show you 10:30 that you can actually not only bring it 10:31 to life but you can start to actually 10:34 edit things you can start to use the 10:36 normal functionality of lovable with the 10:38 head start of the design so you can see 10:40 here we made an Ever So subtle change to 10:42 the font and then I asked lovable to 10:45 double the size of the font a couple 10:47 times until it was big enough to really 10:49 note that it's different from the 10:50 original and then we can keep going and 10:52 say you know what let's remove this and 10:55 then change different components let's 10:57 make some things functional but you get 10:59 the general just there so the next thing 11:01 I want to show you is how do you 11:02 actually find a design online that you 11:04 can import start playing around with 11:06 this feature so if you go on something 11:08 like perplexity what you can do is is 11:11 you can say find me websites that offer 11:16 free templates for figma that are Auto 11:22 layout so typically where it will root 11:24 you to is the figma gallery where you 11:27 can actually retrieve some free 11:29 templates that are Auto layout format so 11:32 if you go down here you can go to click 11:35 on this link for example and you'll see 11:38 the figma community design templates and 11:41 one little nugget here is you'll notice 11:43 that the ones that are our autolayout 11:45 are typically labeled Auto layout so 11:49 what I'll write here is I'll say Auto 11:53 layout design okay and then that keyword 11:57 should show up so you'll see see here 11:59 Auto layout Auto layout um this one 12:02 looks pretty interesting not sure if 12:04 this one's Auto layout so let's take 12:08 something like this a crypto wallet UI 12:10 design you can now open this in figma 12:14 and now one thing we want to do is you 12:15 want to click on this cover and see if 12:18 it's its Auto layout doesn't seem like 12:21 it is so I'm going to exit this one 12:24 because seems a bit misleading so let's 12:27 go back and let's look for something 12:30 like 12:32 this okay so let's do open INF figma so 12:35 that one wasn't Auto layout format and 12:37 you'll just maybe have to check a couple 12:39 of them cuz sometimes they say Auto 12:40 layout but they aren't so let's click on 12:43 a couple so I'll open this in a new tab 12:46 I'll open this in a new tab and maybe 12:49 this in a new tab and let's do this and 12:52 let's see if any of them hopefully all 12:54 of them are truly Auto layout so if we 12:56 open this 12:57 inigma I'll do do this for this one as 13:01 well and this 13:03 one and then the last 13:07 one we should be able to quickly see 13:10 here so if I go on this layout Builder 13:14 and I hover 13:15 over hover over any one of these so 13:18 these look like they are Auto layout 13:20 components which is not bad not sure if 13:24 any of these are worth actually 13:25 importing into lovable so let's see what 13:27 else we got here so if we go to this one 13:30 the content 13:31 calendar I don't see auto layout on the 13:34 side so that doesn't seem no that's no 13:37 bueno this calendar is eligible so let's 13:40 go back to the calendar one we just saw 13:42 cuz out of the ones I just tested this 13:44 one seems to be the best let's click on 13:46 this one let's do auto layout what we're 13:48 going to do is we're going to go on the 13:50 Plug-In or action section on the bottom 13:52 screen if you've already used the 13:55 builder. integration it should show up 13:57 right here we're going to click it and 13:59 now we're going to do easy mode expert 14:02 to code it's going to do its thing then 14:04 let us know it might ask us which 14:06 version it wants us to import we'll 14:08 click on it and then we'll do the same 14:09 process where we import it into lovable 14:11 as expected it prompts us to choose one 14:13 of these versions let's pick this one 14:16 here let's do open unlovable it's going 14:18 to do its thing give us that open 14:20 project button and we'll do the same 14:21 thing all right so we got the launch 14:23 project button so we'll click on it 14:26 it'll import into lovable now and then 14:28 we should be a ble to have that same 14:30 experience where it looks very close to 14:31 the original calendar in this case icon 14:34 that we saw and on Landing we got an 14:36 initial error here that some code wasn't 14:38 ding so I just clicked fix and then it 14:41 was able to resolve it and we got again 14:44 some semblance of what what we 14:46 originally had so this was let's go back 14:49 here the original an actual calendar and 14:53 we got a a version of that if we open 14:55 this up in full screen okay so this 14:57 actually looks a lot better now we we 14:59 put in full screen this is much closer 15:00 to what we were going for if not exactly 15:04 what we're going for so let me just do a 15:06 quick compare it even has the icons in 15:09 the right places by date so you can see 15:10 here 3 11 17 all have blog and freebie 15:14 then same thing here so even the fonts 15:16 are identically the same so not that 15:18 this would be a useful springboard to 15:20 build an application out of this but you 15:22 get the general idea now and this is a 15:24 way you can navigate and be confident of 15:26 what designs might be import worthy 15:28 versus is not import worthy okay so now 15:30 I want to introduce the major hack I 15:32 mentioned at the very beginning of the 15:34 video so it's using a site called 21st. 15:39 deev that allows you to actually copy 15:41 paste prompts for components for entire 15:44 webpage designs so you can directly 15:47 recreate it in lovable. deev without 15:50 having to actually recreate the style or 15:52 screenshot the actual designs and say 15:54 try to replicate this using this trick 15:57 will let you recreate all kinds of user 15:59 interfaces that might be above you in 16:02 terms of being able to describe or 16:04 actually create the code for so 16:06 something like this when we actually 16:08 dive into it looks super sleek and super 16:11 futuristic even the font looks very 16:13 clean and these are components that if 16:16 you go to the right hand side here at 16:18 the top you will typically just see copy 16:20 prompt on 21st. deev but if you click on 16:23 here you can actually get this prompt to 16:25 recreate this UI optimized for lovable 16:29 for bolt for site Brew or versel so if 16:33 we go 16:34 to something that looks pretty let's say 16:37 this 16:38 one hello waves hero waves are cool so 16:41 let's take this and we'll copy paste 16:45 this let's do the optimize version for 16:48 lovable and let's copy The 16:50 Prompt let's go back to lovable and I'll 16:54 say 16:55 create an 16:57 application for 16:59 generative 17:01 AI apps using this UI design and then 17:07 what I like to do is put some quotes 17:09 paste the prompt and then there's one 17:11 component here that I noticed that 17:13 typically gives some headaches which is 17:15 this remember do not change the 17:16 components code unless it's required to 17:18 integrate or the user asks you to so I 17:21 like to remove this part of the copy 17:24 pasted prompt just because I noticed 17:26 that sometimes in working with this when 17:29 I ask for a change down the line for 17:31 some reason it doesn't listen to me and 17:33 it might be the fact that it's trying to 17:35 not make any changes and it doesn't 17:36 remember the user asks you to so I'm 17:39 just going to paste this as is here and 17:42 you're going to see it's going to be 17:43 able to recreate that design almost 17:46 seamlessly with no additional Intel for 17:48 me all right and you can see here we 17:50 have this application that looks pretty 17:52 much identical to this application just 17:55 with our tailored copy for whatever I 17:58 mentioned so the next step here is this 18:00 didn't even have buttons this had 18:02 buttons what if we wanted to make these 18:04 more shiny buttons so we could go back 18:07 to 21st. deev so you don't just have to 18:09 use stuff from landing pages you can use 18:12 individual elements like chats buttons 18:15 calendars cards Etc and if we go down 18:19 here if we go long enough we'll start to 18:21 see other components that are not just 18:22 landing pages so we're going to see here 18:25 some fancy little swivel designs you'll 18:28 see some some buttons so if we take this 18:31 here and I copy The Prompt for these 18:34 buttons I can go and say um for the two 18:38 buttons on the 18:40 screen make them a Sleek 18:44 blue format similar to this style and 18:49 then 18:51 again and then again I will paste this 18:55 and I'll remove this condition here and 18:59 then I'll let that go and we should get 19:01 two buttons that might not jive with the 19:03 background stylistically but it should 19:06 emulate this style here where if you 19:08 hover over they're nice and reactive and 19:11 very futuristic and there you go you now 19:13 have two of these buttons here get 19:15 started and learn more where we now 19:17 imported the button component from 21st. 19:20 deev again without any understanding of 19:22 the underlying code or even how to 19:24 actually describe this and you can see 19:25 when you actually open this in a brand 19:27 new tab it'll look look a lot sleeker 19:30 and we can try this with another design 19:32 just to really drive the point home so 19:34 let's close this let's create a brand 19:36 new chat let's go back to the dashboard 19:39 all right so I'm going to reload the 19:41 specific URL cuz sometimes I get lost in 19:43 the navigation here so I'll just load 19:45 21st dodev so we see all the components 19:48 and then let's try to emulate another 19:50 one of these designs here so if we go 19:54 into something like this this globe this 19:58 shiny moving Globe we can now copy this 20:02 prompt and now we're professional so 20:04 we'll just say create this UI we'll then 20:08 paste this command remove the remember 20:11 part take that out paste that there and 20:14 we should be able to get it and then you 20:15 can actually take it from there meaning 20:17 you can start to say you know what let's 20:18 create a button that has a weight list 20:20 let's change the copy so it looks a 20:21 certain way so so we'll do a couple 20:23 edits of this just to show you how that 20:24 works and then move on to actually 20:26 building our application so we get the 20:28 spinning globe design and we can make 20:31 some changes and say one let's say 20:34 changes here let's say 20:37 one let's F focus on making it full 20:43 screen right now it only 20:46 takes one small part of the screen and 20:49 let's actually screenshot this so it can 20:52 actually 20:54 understand the relative size and then 20:56 we'll say let's 20:59 make 21:01 globe let's make the 21:03 word globe and I'll put it in quotes so 21:05 it doesn't actually change the globe 21:07 itself the spinning orb 21:10 into join our weit 21:13 list and then add a button that 21:20 says enter your 21:23 email and after the user enters their 21:28 email 21:29 they can click 21:32 join and it will submit the response so 21:37 you can see here the proportions are 21:38 still a bit off but we have this enter 21:41 your email we have the join we have the 21:43 spinning orb and we could probably by 21:45 just clicking on this div say make this 21:49 span the entire 21:51 screen just so it actually collapses and 21:54 we don't have any white space or spots 21:56 so most likely this might take one time 21:59 or a couple iterations to do but you can 22:01 imagine that just describing or bringing 22:03 in this image or icon of a spinning orb 22:06 alone would probably take you 10 or 15 22:09 prompts if you knew what you were doing 22:11 so it didn't necessarily actually follow 22:13 what I just said but this actually looks 22:14 better than what I actually suggested so 22:17 this looks pretty sleek and obviously 22:19 the next step you could take is create a 22:22 superbase instance where you can create 22:23 a database to start storing emails for a 22:27 weight list then you can start nurturing 22:28 in a list and you can take it from there 22:30 and you can do this in literally under 5 22:32 10 minutes and build something that 22:34 looks like you actually hired an actual 22:36 developer for so let's take this hack 22:38 and actually apply it to build our own 22:40 app and like I said before we're going 22:42 to do something a bit more sophisticated 22:45 than a to-do list app which is to 22:47 actually create a prompt engineering app 22:49 where you can ask for a task it will 22:52 take that task make it into a prompt and 22:54 then ideally you can click a button and 22:56 simulate how that newly formed prompt 22:59 will actually perform on a particular 23:01 large language model so let's go back to 23:03 level B one last time here and let's go 23:06 to 2dev and look for some 23:09 inspiration so if we go down I want to 23:12 go for something more minimalistic in 23:15 nature so if we go 23:17 through let's wait for some more 23:19 components 23:21 here that's kind of minimalistic I like 23:25 this Bento grid looks very clean let's 23:28 look into this 23:30 one so you can see here when we hover 23:32 over all of these 23:35 components you can click in looks clean 23:38 so let's take this okay and now I'm 23:41 going to give it some form of more 23:43 robust prompt so it knows kind of what 23:45 I'm going for and then we'll actually 23:48 apply this template so I'm going to 23:50 write I want to create an 23:53 application where I can write a request 23:59 I have or a task I want to complete and 24:04 the application will take my task and 24:08 then send it to a large language model 24:14 open AI to create a prompt out of it and 24:19 then use said 24:22 prompt to simulate how the prompt would 24:27 output 24:29 if 24:31 ran I'm going to show you an 24:36 inspiration design that I'd like to use 24:41 as the foundation for our 24:43 design and I want to 24:47 have three 24:50 sections one 24:53 section that allows me to enter the task 24:57 I want 24:58 and then turn that into a prompt let's 25:02 make this a bit cleaner here so let's 25:04 say sections and then I'll say one okay 25:09 one section that lets me do 25:11 this one section that lets me copy paste 25:17 a prompt and then simulate the result of 25:23 the 25:24 prompt and then one that lets 25:29 me 25:30 simulate a 25:32 conversation with said prompt so the 25:37 last one will be more complex we'll see 25:39 how far we get let's now forgot the most 25:43 important part here's the 25:46 design to use as your base so now I'll 25:50 put this in 25:52 quotes Okay and then we'll remove that 25:54 remember component and then we'll send 25:57 this over and we'll see what we get 25:59 started with the next natural step is to 26:01 be able to enable the llm functionality 26:04 we're going to create a superbase 26:06 database because we're going to have to 26:07 create Edge functions to support all the 26:10 functionals we need all right so we got 26:12 initial little error here had a bit of a 26:14 hiccup we clicked fix we got to this 26:17 stage where it looks like it from this 26:20 perspective but what it did do that I 26:22 didn't expect it to do is actually put 26:24 the functionality directly on the card 26:27 so now I want to say 26:29 we want the cards to look 26:34 minimalist and spam the entire 26:38 screen and then the functionality of 26:42 entering the prompts or simulating the 26:46 prompts or 26:48 conversations happens when you click on 26:52 the underlying 26:55 cards button to 26:58 go to the next page so I'm just going to 27:02 go back here so if we go to here it says 27:05 learn 27:06 more I'm just going to use that as 27:09 inspiration and paste it here and say so 27:13 if you 27:14 see in the image when you hover over a 27:19 card it should 27:22 say execute 27:25 task and then we'll paste that it should 27:27 look a bit better it should have a 27:30 secondary page now that leads from the 27:32 cards that make the original page more 27:34 minimalist to a page where we can 27:36 actually execute these workflows so now 27:38 they're all resized and if you hover 27:40 over you can see execute task and if I 27:42 click on one of them hopefully it should 27:44 lead me to a 27:45 page okay so if we go 27:49 back let's go to here I'll just say 27:53 immediately one changes one the title is 27:59 in the 28:02 background now I can't see the actual 28:07 text on the first 28:10 page when I click execute task I don't 28:15 see a second page now one thing I 28:18 noticed is I don't know if I fully 28:20 waited for the app to run before I 28:22 clicked on those buttons so let me go 28:25 back to index here refresh 28:28 refesh and let me just click on execute 28:31 task okay no none of the pages are 28:33 working I don't see a second page for 28:35 any of the 28:37 cards they should lead to being able to 28:42 enter the respective input for the 28:46 respective 28:48 functionality we need okay so now when 28:50 you click on any of these cards you do 28:52 see a second page now whether or not 28:54 looks ugly is a secondary issue let's 28:57 just check that all of the open up to 28:59 something okay they do so far let's 29:02 check the last one okay cool so next 29:05 issue is this glaring title here so 29:08 let's actually screenshot the issue 29:11 let's go back to here okay and I want to 29:13 screenshot it versus selecting a 29:14 specific element just so you can 29:16 actually see the overlap so there's an 29:21 overlap 29:23 overlap with the 29:25 title over the cards 29:30 make the cards slightly shorter to make 29:33 room for the 29:36 title on the secondary Pages please make 29:42 the UI of 29:45 the functional prompt 29:48 inputs not only more userfriendly 29:53 but prettier and better fit to the 29:59 page as some of the elements seem to be 30:05 going off of the page so that should 30:09 hopefully resolve this title issue once 30:11 and for all and obviously right now I'm 30:13 just focusing on the shell of the app 30:15 versus the underlying functionality 30:17 because once this looks like what I want 30:19 it to do then we'll actually focus on 30:22 integrating the features we need so this 30:23 looks way better now we have the title 30:26 separated when we click on execute cute 30:28 task this doesn't look awful if I check 30:30 the other ones this doesn't look 30:32 awful perfect none of them actually look 30:35 awful so that's a big M stolen forward 30:38 so now step two before we even talk 30:41 about functionality let's create a 30:43 superbase database and if you've never 30:45 used this before I would strongly 30:48 recommend at this point watching my 30:49 first video on how to master a lovable 30:52 to see how this works but the crash 30:55 course is you need to be able to create 30:57 a database to store you know the 30:59 different prompts we enter in this case 31:01 to be able to enable functionality like 31:03 calling open AI so we're going to create 31:05 a new project here I'm going to call it 31:07 let's call it um prompt buddy and then 31:11 we're going to make a password for our 31:14 super base instance we're then going to 31:16 click create new project this will take 31:18 anywhere from 3 to 5 minutes and once 31:21 it's done I'll be able to go on 31:23 superbase here and then over prompt 31:25 advisors and be able to select the the 31:28 right super base instance so let's go 31:30 back and click on create new project and 31:33 we'll flick back as soon as it's ready 31:35 all right so now our prompt buddy 31:37 superbase is set up and now if we go 31:39 into lovable into superbase we should be 31:43 able to see it here and we do so we'll 31:45 click on connect click connect again and 31:48 then this will allow us to hook up to 31:49 super base and now we can start 31:51 integrating open AI to make this 31:54 functional instead of just a shell all 31:55 right so super base is connected so now 31:58 I'm going to say we want to enable 32:02 functionality for all of these 32:06 components so I'm going to do it very 32:08 structured so to maximize the likelihood 32:11 of to actually get this working from the 32:13 first go even though most likely it'll 32:15 take a few iterations let's first 32:17 actually tell it to integrate open a in 32:20 general and to ask us for our open AI 32:22 key so we get that out of the way we 32:25 want to use gbd 40 mini for all the 32:31 functionality 32:34 here let's actually let's 32:39 integrate this into 32:43 superbase so set it up and ask me for my 32:48 open AI key so now this should signal to 32:51 it that it should start doing that work 32:53 on the back end it should prompt us for 32:55 an API key and then we should be 32:57 hopefully be able to now delineate all 33:00 the tasks for the different cards so 33:02 we're going to do add API key going to 33:04 do 33:05 submit and then it didn't set up the 33:08 actual changes yet to superbase with the 33:11 draft of our database but hopefully I'm 33:14 trying to get away from doing that so 33:15 that I can first tell it exactly what 33:17 the goal is before we worry about 33:19 setting up the actual databases 33:21 themselves all right so it looks like 33:22 we're ready to use these little 33:24 functions here so let's actually tell it 33:26 exactly what we're going for so let's 33:28 tailor each one of these function 33:33 sections task to 33:36 prompt this section should allow the 33:40 user to enter any 33:44 description of a task and then upon 33:50 submitting the behind the scenes prompt 33:55 should be along the lines of this and 33:59 then I'll go with my typical prompt for 34:01 meta prompting which is you are a prompt 34:04 engineer you write detailed prompts 34:09 based on the basic user information 34:14 you're 34:16 provided output The Prompt taking the 34:21 task that is provided to you in layman's 34:25 terms and transform it 34:28 into a robust yet cinct prompt in 34:34 markdown and then once we return this 34:39 prompt from open AI we parse the mark 34:44 down properly and display it in the view 34:49 so that's section number one prompt 34:53 simulator this should be easy it should 34:58 just allow the user to copy paste any 35:03 prompt and upon 35:07 submission they 35:09 can yield oo fancy word the output of 35:14 said 35:15 prompt okay so that one should be 35:17 straightforward and then conversation 35:18 simulator similar to prompt 35:22 simulator except you can have a back and 35:28 fourth 35:29 conversation where the last few messages 35:34 are injected in the memory of the 35:38 conversation to create a thread so that 35:42 it's continual and each response from 35:47 the AI has the context of the entire 35:53 conversation in scope all right so try 35:57 to be as detailed as possible here to 35:59 increase the likelihood that we don't 36:01 have to spend another hour on this so 36:03 let's send this over and see what 36:04 happens all right so it ran I tested it 36:06 initially wasn't working clicked fix and 36:09 now we have a version where we write 36:10 something like write a SEO blog for my 36:15 mortgage brokerage business if any of 36:20 that English makes sense and it should 36:22 actually generate using gb40 mini output 36:25 in a way that we can easily copy paste 36:27 but obviously it has a couple flaws and 36:28 you'll see that shortly you can see it 36:31 is in markdown but it doesn't actually 36:32 wrap the text so the first thing I'd 36:34 want to do is wrap this text so let's 36:37 put this 36:38 here and I'll say it works but we should 36:43 wrap the 36:46 text all right so let's in the meantime 36:49 whilst making that update see if we can 36:51 sneak and see if the second 36:53 functionality works now since the first 36:55 one didn't work the first time wondering 36:57 if the second one will work the first 36:59 time and it had an error as we expect so 37:01 let's try to fix this while we go back 37:04 to the other card and see how this 37:07 actually changed right now so let's say 37:09 write SEO blog something super generic 37:12 just to see if it actually worked and 37:15 that's one thing I like to do is instead 37:16 of just twiddle my thumbs as I try to 37:18 test other functionality while I'm 37:20 waiting for other things to fix so in 37:22 this case this looks a lot better the 37:24 text is wrapped we see the Bolding we 37:26 can easily C copy paste this one should 37:28 be good so let's hope the second one 37:31 comes along properly because it should 37:33 be straightforward and obviously one 37:35 thing we're missing here is some form of 37:38 storage so that we can see the last 37:40 prompt we did but one step at a time so 37:43 let's just do this again write an SEO 37:46 blog it's a good way for us to also 37:48 battle test that it works consistently 37:51 so we should get some form of output 37:53 here we'll take the copy we'll paste in 37:55 the next card and see what happens we'll 37:58 take this we'll go back we'll go to 38:00 prompt simulator we'll paste this and 38:04 we'll see if that works now yeah one 38:08 thing that I noticed is it kicked me out 38:09 of the actual tab so I'll click this 38:12 again and one thing I'm looking at is 38:14 I'm wondering if any of these little 38:15 special characters like that are called 38:17 markdown are going to cause any issues 38:21 here so it said prompt simulated 38:23 successfully but I don't actually see 38:25 anything uh okay so I stand corrected so 38:30 this is the input and this is the output 38:33 which is actually a pretty long output 38:34 it already did the wrapping so that's 38:36 good so this one seems to be working now 38:39 the one I'm the most skeptical that 38:41 would work on the first time is this one 38:43 so let's type our prompt and let me just 38:47 take out this little special character 38:48 stuff so we don't have to deal with that 38:51 let's take that out uh that's that's our 38:55 system prompt so let's send that see 38:59 what happens if anything happens so as 39:01 expected we have an error here I'm just 39:03 going to see what kind of error we have 39:04 so okay so it seems like the edge 39:07 function is not 39:08 working so we can make some changes 39:11 there in the meantime so this is a time 39:14 where I'm going to actually start typing 39:16 my next prompt since I already know what 39:18 it's going to be assuming we can 39:20 actually get this to work is it's going 39:22 to be can you 39:26 ensure that all prompts that are tested 39:31 are 39:32 generated 39:34 tested or chats that 39:37 occur are stored in 39:40 superbase okay so I'm just going to copy 39:42 paste this elsewhere and we'll use it 39:44 for later assuming we can get past our 39:46 little hiccups here all right so 39:47 apparently things are fixed so let's go 39:50 to here and let's create a basic prompt 39:53 and let me just say as a user Make Me an 39:57 SEO blog about generative AI That's only 40:03 one paragraph okay and let's just send 40:06 that so now what's interesting is it now 40:09 looks like an actual chat card okay 40:11 that's a pretty quick response and my 40:14 ultimate test to know is there context 40:16 being held in the conversation is can I 40:19 say something like make it shorter and 40:21 it will actually remember what it should 40:23 make shorter so if I say make this into 40:27 only one sentence okay and then I send 40:31 that it should show that here 40:36 okay so that that was pretty quick uh 40:40 let me try this again uh make this into 40:44 only 10 40:46 words 40:48 okay okay so it's hyper quick so it's 40:50 actually doing a really good job it's 40:52 keeping the context and then I'm going 40:54 to say Do You Remember what my original 40:58 request 41:00 was okay and I'll send this 41:03 here yes your original request was an 41:05 SEO blog about generative AI but 41:07 condensed into only one paragraph So 41:09 what this tells me is it's keeping 41:12 probably the last couple messages into 41:14 context which for me is pretty good 41:16 given that we're just using this as a 41:18 starter but yeah so all these now quote 41:20 unquote function and the last thing we 41:22 can do is copy paste that prompt so 41:25 we'll go here we'll go and say can you 41:27 Ure all the prompts that are generated 41:28 tested or chats that occur I'll say the 41:31 threads are stored in super base uh 41:35 let's let's be specific for task to 41:38 prompt and prompt 41:41 simulator we should be able to see the 41:46 past prompts that have 41:49 been 41:50 created and past prompts that have been 41:56 simulated 41:58 we don't need to show past chats for 42:01 conversation 42:03 simulator so this is important to be 42:05 specific about what's worth keeping on 42:08 the actual user interface versus just 42:10 keeping in the back end okay so 42:11 apparently it's ready to go so if you go 42:13 to here and we say create 42:17 a business plan structure for my law 42:22 business and I click on generate prompt 42:26 hopefully we should not just get it 42:28 generated prompt but some form of 42:30 History if we refresh the 42:33 page so we got a little error here we'll 42:35 try to fix it um let's see what the 42:37 error is looks like some form of issue 42:42 with the URL so we'll just resolve that 42:44 and go from there so the next error I 42:46 got was this where it says please sign 42:49 in to generate prompts even though I had 42:51 no authentication to begin with so this 42:53 is something that pops up sometimes in 42:55 lovable where you just have to tell it 42:57 you know what I'll be the only user 42:59 assuming you are the only user so I'll 43:00 show you the exact prompt I actually set 43:02 so it says please sign in to generate 43:04 prompts we need to get rid of that so I 43:06 can use it I'll be the only user and 43:08 you'll notice here that it has something 43:10 called rowle security where it has like 43:12 some fail safes that you can't execute 43:15 some functionality Sometimes using 43:17 superbase unless it removes that 43:19 restriction so once it removed that 43:21 restriction you can see here I just said 43:23 make me a law blog it makes the blog and 43:26 at the very bottom bottom now we have 43:28 history that's stored and if we go back 43:31 into superbase click into table editor 43:34 and you can see here generated prompts 43:38 you can see the original text I had and 43:40 the generated prompt and what's cool is 43:42 you can even see here this little unlock 43:44 icon and this is one hint you can use if 43:46 you get that error is if you go to 43:48 superbase you'll see this lock icon 43:50 telling you that there's some form of Ro 43:52 level security that you probably have to 43:53 unlock so the whole point of this was to 43:55 show you how to build something that's 43:56 not a to-do list app that's actually 43:58 functional and helpful using 21st. 44:01 deev's designs as the foundation to take 44:03 care of the pretty part while you focus 44:05 on the functionality part if you found 44:07 the tips tricks and demo helpful let me 44:09 know down in the comments below 44:10 hopefully this was helpful for you and 44:12 gave you some nuggets to make you that 44:14 much better at doing text to web apps 44:16 using lovable. I'll see you in the next 44:18 video and like share and subscribe