Unlock Precise AI Editing: A Step-by-Step Guide to Lovable.dev’s New Visual Selection Feature

0:00 hello and welcome to this episode of 0:02 houseu my name is anas and in this video 0:05 I will demonstrate a new feature in 0:07 lovable. Def this feature enables you to 0:10 Define specifically which part of the 0:13 project you want the AI to focus its 0:14 energy on before you actually needed to 0:17 to make a more generic prompt like a 0:20 request where the AI would take the 0:21 whole project into account and you would 0:24 describe approximately where you wanted 0:26 the AI to to make the edits but with 0:29 this new feature you can simply just 0:30 visually Define a section of of of your 0:33 app it enhances the quality of the 0:35 output because the AI doesn't have to 0:37 take the whole project into account it 0:39 can really focus uh on on this narrow 0:42 part of your code base uh it also 0:45 decreases the number of tokens used per 0:48 request because again because it doesn't 0:50 need to take the whole product into 0:51 account and it limits the risk of 0:54 mistakes because before you you also 0:56 risk like you would risk that the AI 0:58 would suddenly change something in a 1:00 part of the project that you didn't 1:01 really intend the AI to focus on so I 1:03 think this is really powerful and it has 1:05 been a needed feature for a long time um 1:09 so uh so yeah I'm I'm just really 1:10 excited that it's it's finally 1:11 integrated now in in lovable. Dev so let 1:14 me demonstrate how uh how it 1:16 [Music] 1:26 books so if you don't know the full 1:29 process of how to export from figma and 1:32 and so on I would recommend watching uh 1:35 the first video we created on uh lovable 1:39 uh I'll link it down in the description 1:41 and you can see how you export it from 1:44 from figma through the the builder. I 1:46 plugin and then finally into to lovable 1:48 and how you make some basic adjustments 1:50 um but the the project uh here is 1:54 essentially what we worked on in that 1:56 first video it's just a just a simple 1:59 check GP T like interface that was built 2:02 in figma then exported to to lovable um 2:05 and it 2:06 enables the idea is simply to to have 2:09 sort of like a a chat GPT AI where you 2:11 can talk about new ideas it can help you 2:13 brainstorm new product ideas um just to 2:17 have something to build you like 2:18 utilizing lovable uh features and and 2:22 possibilities okay so we have we have 2:25 this UI now and uh we can open the uh 2:28 the chat window on the left side and 2:31 what you would have done before would be 2:33 to to just uh make a a main prompt after 2:37 which like the AI would go through your 2:39 entire project and see where it would 2:41 need to make some updates um but the new 2:44 feature you pre you simply press on the 2:46 edit button uh down in the left 2:49 corner and it says that you can now 2:51 select uh to edit or ask lovable to to 2:55 modify them so uh so as you you can see 2:59 you can you can select either sort of 3:01 bigger Parts which also have like the 3:04 the the sub sections like the left side 3:06 bar the main area the right side bar or 3:08 you can go all the way into like 3:11 specific like even text elements and and 3:14 edit those 3:15 directly um so besides the AI edit 3:20 capability you can also just select say 3:22 a group of buttons so actually if we 3:24 select just one button it will apply to 3:26 all of these button that share the same 3:29 uh the same uh 3:30 component so in here you can see we can 3:34 increase the padding so we can make them 3:35 taller or this um we can make margin we 3:41 can change the the background so we get 3:44 all the the default tailin CSS uh 3:47 background 3:48 colors or we can change the Border 3:52 radius 3:54 and if you know uh Tailwind CSS and and 3:58 the different um utility classes they 4:00 provide you can even uh add the utility 4:03 classes directly so this is also really 4:07 powerful but for now let's discard these 4:10 changes um you'll just have to reload 4:14 and let's try again but now using the AI 4:17 features so again if we select these 4:20 buttons 4:22 um we can ask lovable to to modify uh 4:27 how these buttons look so let's say okay 4:30 please 4:31 um please increase the Border radio 4:37 slightly and turn the back the 4:42 background of the buttons into a 4:46 gradient going from please change the 4:49 icon color to white okay so let's try 4:54 this first and see what it does 5:01 so we have the prompt in and request the 5:04 AI to to make the 5:06 change okay it says I'll update the 5:08 project type component to add a gradient 5:10 background increase the border border 5:12 radius and make the icon 5:15 white and here we have it so it's pretty 5:18 accurate we 5:19 have we have the gradient we have the 5:22 new icons um 5:25 and say we want to uh so so these 5:30 buttons indicate different topics you 5:32 can you can talk to the uh talk to the 5:35 AI U about uh so say we want to increase 5:40 the number of of topics so in that case 5:43 I mean I haven't tried this myself yet 5:45 but I would think we could select this 5:48 part and then 5:49 say please increase the number 5:54 of topics so that uh the total number 6:00 of 6:02 options 6:04 is let say 6:06 12 increase the gap between buttons 6:13 slightly uh Center them within the 6:17 container something like that let's see 6:19 what 6:20 happens 6:23 okay and as we see it works pretty well 6:26 it 6:27 has exactly 12 options now um it added 6:31 some pretty relevant topics like 6:35 uh dashboard creation mobile lab 6:37 creation software as a service 6:39 Marketplace um so it already takes 6:42 everything into context 6:45 so uh and it's also it also centered uh 6:49 the the buttons in the container 6:53 um in that case we should probably also 6:55 Center this text but I would think we 6:57 can just uh just do that manually 7:03 um let's try to just put uh text Center 7:07 class and see yeah so so that's 7:10 essentially just the Tailwind class I 7:12 added manually I mean it could also just 7:13 have asked the AI but but in this case 7:16 it's probably easier and in case you are 7:18 familiar with tailwind and and would 7:20 like to to just add it uh just be able 7:23 to add some classes manually you can 7:24 always go to the Tailwind CSS 7:27 documentation at Tailwind css.com 7:30 go to docs and essentially 7:33 uh essentially you can see all the 7:36 different utility classes they provide 7:38 here so if we need to add uh anything 7:41 related to typography for instance we uh 7:44 can see okay 7:46 so font weight um we have these utility 7:51 classes and what you can do is just to 7:53 to copy a utility class like fun extra 7:56 bold for instance just copy it and say 8:00 we would like this one to be extra bold 8:02 we press edit uh press here and then we 8:05 add it already has fun normal so the 8:08 best practice is to just replace font 8:11 normal with uh with font extra bold and 8:14 press save and and then the fun will 8:17 will be extra 8:18 bold all right something I would 8:20 actually like to do is to uh to reverse 8:25 this gradient because uh it's like right 8:29 now it seems a bit old school a bit sort 8:31 of 3D like like how you made buttons in 8:33 the in the early 8:35 2000s uh so let's just for the fun of it 8:38 just try to select uh the button class 8:40 and just ask the AI to um please like to 8:45 reverse the gradient I just want to see 8:48 if the AI actually understands a command 8:50 like that um so let's 8:56 see that actually seemed to to work just 8:59 that's fine 9:01 um okay so what else can we try to do um 9:04 we can do some smaller tricks first okay 9:07 we have uh say we have the projects here 9:10 which should be a project list um so 9:13 let's actually see what what the AI is 9:16 able to contextualize 9:18 so say we want to just have like a dummy 9:21 list of of of existing projects and we 9:24 would also like to turn this button into 9:27 uh the same style as uh as these buttons 9:31 and we would like to Center the uh the 9:34 plus um so let's see how much it can 9:37 actually uh understand select it and 9:45 say uh complete the following 9:51 objectives uh add dummy 9:57 uh projects 10:03 widen the menu 10:06 slightly uh change color of 10:12 plus button to the same styling as the 10:17 main button group we just 10:22 added uh the gradient 10:25 to let's just see if it understands and 10:28 uh 10:30 uh 10:31 Center the 10:34 plus uh within 10:36 [Music] 10:38 the 10:39 [Music] 10:41 button uh perhaps swap it out with an 10:47 actual plus icon rather than text 10:52 because I think it's probably easier to 10:54 to to center a an SVG than a than a plus 10:57 Text due to line height and and things 10:59 like that 11:02 um at the B bottom of 11:07 the of this sidebar there should 11:12 be 11:15 uh an additional menu 11:20 enabling things like signing 11:24 out uh basic 11:27 settings uh 11:31 and anything else that might be 11:38 relevant add icons using 11:41 a 11:43 uh an icon library of your own 11:48 choice something like that 11:51 um so let's see I don't expect it to 11:55 understand everything uh I'm sure there 11:57 will be some box because it's a rather 12:00 complex prompt with a lot of changes but 12:02 uh let's see how far it 12:11 goes okay this is actually not bad the 12:15 plus is perfectly centered um it added 12:19 the the menu with some relevant 12:23 uh some relevant menu items uh it only 12:26 added one of these but we can quite 12:29 easily fix that um so oh I would say it 12:33 looks good it also Wen the menu um so so 12:37 let's say we want to just have 12:40 some some more ah okay okay so it made a 12:44 mistake it added everything correctly 12:46 but it did it in a horizontal layout 12:49 rather than a vertical layout so I guess 12:52 I guess we can just uh save fix 12:56 the uh project list layout so it's 13:01 vertical rather than 13:09 horizontal 13:12 H I guess we disagree on this one let's 13:16 see how we can how we can fix this I 13:20 mean this is the this is 13:23 the I I guess this is the current 13:26 limitation of AI that sometimes there 13:28 will be some hallucination or it won't 13:31 really understand the full context of 13:32 everything I expect this to rapidly 13:35 improve once the base models improve so 13:39 something like lovable is already very 13:41 Advanced and it will only like it will 13:43 basically become more advanced 13:45 automatically as the base models advance 13:47 and the AI will be way better at 13:49 interpreting things like imagine lovable 13:52 would integrate with Gro 3 for instance 13:54 once the API for grock 3 becomes 13:56 available it will instantly also be way 13:59 more capable uh based on on on the 14:02 current benchmarks of of c 3 compared to 14:05 uh to some of the other 14:07 models okay let's see if we can fix this 14:11 somehow uh and say all projects 14:15 currently appear as uh 14:19 horizontal scrollable lists please list 14:24 projects vertically 14:26 instead yeah so sometimes you just got 14:28 to you just got to keep keep digging a 14:31 bit and and asking the AI that is 14:34 actually 14:34 not uh doing things correctly and 14:37 eventually it might actually discover 14:40 the the 14:41 buck so let's see yeah and now it works 14:44 so now we have the full list of dummy 14:47 projects um 14:49 and I think we can go a bit deeper 14:52 actually and and uh try to add some more 14:55 functionality to this part so I would 14:57 like to see something like a contextual 14:59 menu on each uh like on each um uh 15:04 project item uh so you can do some 15:08 settings like deleting a project or 15:10 editing the name or 15:12 anything uh relevant so in that so in 15:15 that case we simply select uh the 15:18 specific uh class of of a of a project 15:22 and then we can prompt something like 15:25 um add 15:27 contextual menu uh to each uh project 15:34 item uh 15:36 Delete uh and 15:39 rename but feel 15:42 free to add other relevant functions as 15:47 well uh then we can say that it can use 15:51 um like a a library like I use Shad CN 15:55 for for a lot of the of of of the front 15:58 end uh components I normally work with 16:00 because it's very it's like a very 16:02 flexible framework and it already has 16:03 all this uh functionality for contextual 16:07 menus and and so on so we can say um 16:10 please uh please use uh shetan for the 16:16 uh contextual menu triggered by pressing 16:21 an icon in the right side of 16:26 the uh 16:29 of the project item okay so I think this 16:33 should be sufficient but but let's see 16:35 how it 16:47 goes 16:49 okay so uh let's go out of the edit mode 16:53 and see so basically now when you hover 16:55 on a project uh you will see there is 16:57 like the context icon showing you can 17:00 press it and I recognize the um the 17:05 shaten uh component of course it should 17:08 be aware of like dark mode and so on but 17:10 but that's an easy fix uh so it chose to 17:13 of course put the rename it uh it also 17:16 figured that duplicate could be a could 17:18 be a good option to have add to 17:20 favorites archive and of course delete 17:23 um so I actually agree with these 17:24 choices these are very relevant uh 17:27 contextual functions to have uh for a 17:30 particular 17:31 project so this is this is all great um 17:36 let's see if there are other uh things 17:38 we would like to do I mean I would like 17:40 to of course change these like the red 17:42 colors into the color scheme that we we 17:45 changed uh the buttons into I'm actually 17:48 impressed on how how well it it it 17:51 understands uh prompts now and how it 17:53 can contextualize it into the overall uh 17:56 into the overall app um so so yeah I I I 17:59 think this is pretty cool and it's so it 18:01 makes it so much easier now that we can 18:04 edit individual parts of of the project 18:07 and uh just uh one last thing like uh 18:09 like we have the the Tailwind CSS we can 18:12 easily add the the classes manually um I 18:16 would also advise to check out 18:19 uh uh just Google chaten and uh you can 18:24 you can find the 18:25 documentation uh press components and 18:27 here you can see the different default 18:30 components that's part of the shetan 18:32 library like calendar for instance or uh 18:35 let's say uh you can have a drawer where 18:38 you can add like a a drawer that opens 18:41 up from the bottom like there's so many 18:43 uh so many different uh uh very simple 18:47 components that are just very intuitive 18:49 and and and just make so much sense and 18:52 and of course you can still trick uh the 18:54 look of each component Sonna is also 18:57 really powerful like it shows the the 18:58 toast in the in the lower right corner 19:01 like you can add notifications to your 19:03 projects and so on um so essentially 19:06 what I usually do is I I just find the 19:08 components I like and then I say okay uh 19:11 in lovable please use the uh the shien 19:14 SAA component for instance to make the 19:16 notification so it in so so lovable 19:18 would would automatically know how to 19:21 how to implement uh implement this into 19:23 the into the front end so so that's 19:25 really powerful as well thank you for 19:28 watching this video I hope you see the 19:29 potential in this new feature from 19:31 lovable. Dev um it's definitely a 19:35 feature I've been wanting for a long 19:37 time so it's great to see that it's it's 19:39 finally happening and I hope other 19:40 identic based AI development services 19:43 like repet and b. new will uh will 19:46 follow pretty soon because in my opinion 19:48 it's pretty crucial to be able to Define 19:50 specifically where you want uh changes 19:52 to be made 19:54 um we'll be back very soon with more 19:57 content like this so stay tuned and hit 19:59 the like button and also subscribe to 20:01 our channel that would help us a lot and 20:03 also if you didn't sign up for loable 20:05 yet there is an affiliate link that you 20:07 can use Down Below have a great day and 20:09 see you soon bye-bye 20:11 [Music]