Transfer Lovable.dev Projects to Cursor AI - via GitHub Integration

0:00 lovable. deev is amazing for building 0:02 fullstack applications from scratch I 0:04 love using it to create that first 0:05 version for my app's user interface 0:07 however if you're tired of message 0:09 limits or just want more Hands-On 0:11 control over your code in this video 0:12 I'll show you how to move your lovable 0:14 project over to cursor which is an AI 0:16 IDE where you can still prompt AI to do 0:18 all the work for you let's do this so 0:20 for our demo today we are going to be 0:22 creating a simple one-page website using 0:24 lovable we're going to take this lovable 0:26 project and upload it into GitHub using 0:28 lovable GitHub integration and then we 0:30 are going to open up cursor and import 0:32 that GitHub project into our cursor 0:34 environment we're going to use cursor to 0:36 run our application locally and make a 0:37 few changes to our application so that 0:39 we can push our code back to GitHub and 0:41 eventually see those changes get 0:43 propagated into our lovable projects UI 0:45 I hope that made sense but if it didn't 0:47 let's just jump right into it by the way 0:48 if you are new to cursor or wondering 0:50 about what it is and how it works I do 0:52 have a complete beginners tutorial you 0:54 don't have to know any kind of coding to 0:55 follow along so if you're interested in 0:57 getting into cursor I'll leave a link in 0:58 the description below so do have a 1:00 prompt created already in my prompt tool 1:02 over here as you can see in my project 1:04 overview we're going to be creating a 1:06 onepage website for Skyline commercial 1:09 for Lauderdale's Premier Commercial Real 1:11 Estate firm this website is for a 1:12 fictional real estate company I'm just 1:14 making this website so that I can test 1:16 my AI assistant chatbot in it I'm not 1:18 going to actually implement the AI 1:20 chatbot in this video if you're 1:21 interested in the AI chatbot creation I 1:23 can do that in another video but this 1:25 video is more about getting your project 1:26 from lovable into cursor and getting you 1:29 all set up into cursor C so that you can 1:30 continue iterating on development with 1:32 your application in cursor so this is my 1:34 app name and purpose over here I do have 1:36 information for our IP main features Tex 1:39 stack design and performance as well as 1:41 code quality down here I'm just going to 1:43 go ahead and copy the block over here 1:46 now we go back to lovable and I can just 1:49 paste the entire prompt so we have code 1:51 quality down here if I scroll all the 1:53 way back up to the top this is the 1:54 beginning of the project overview so I 1:56 did generate a logo for Skyline 1:58 commercial thanks to chat GPT I'm going 2:00 to go ahead and paste that right into 2:01 here I did this in one shot I got the 2:03 palm trees I got the Sun the buildings 2:06 Skyline commercial I mean that's a legit 2:08 logo good job to chat GPT the logo has 2:10 been updated we are going to click enter 2:12 all right so lovable is generating the 2:14 code this is where the magic happens 2:16 this is where it all goes down all right 2:17 so lovable is done generating the 2:19 website let's see what we have so first 2:21 we have a nice hero image over here if I 2:23 scroll down okay so about us property 2:26 Excellence market knowledge data driven 2:28 insights comprehensive real estate 2:30 Solutions property search market 2:31 analysis down here ready to get started 2:34 contact us so I am happy with how this 2:36 looks it looks very professional however 2:38 two things one I think there should be a 2:40 heading over here that says Skyline 2:42 commercial real estate and two there are 2:44 no palm trees or anything that kind of 2:46 tells me that this is a real estate firm 2:49 in for Lauderdale so let's prompt 2:50 lovable to address those changes I had a 2:53 big header text above the hero section 2:54 that says Skyline commercial real estate 2:56 we also need for Luder deal Vibes like 2:58 palm trees and sunshine to be 3:00 incorporated somehow and I'm going to 3:01 attach the company logo 3:05 [Laughter] 3:08 enter what is that lovable what's going 3:11 on okay so lovable made some changes it 3:14 put the logo up here it put these weird 3:16 circles down here and I do not like that 3:19 at all so we're just going to revert 3:21 scroll back up and restore up to this 3:24 point okay so those are gone so we just 3:26 reverted those changes I'm going to use 3:28 the edit feature over here lovable if 3:30 you click on that and just hover your 3:32 mouse over different parts of the UI you 3:34 should be able to see different 3:35 components that comprise that section 3:37 that you're hovering upon so as you can 3:38 see over here there is an H1 meaning 3:40 heading one if I click that you can see 3:42 this section that gives you details 3:44 about what's on that element so we do 3:46 have text there but it's not showing so 3:49 let's just screenshot this so I've just 3:51 screenshotted this H1 window and I 3:53 screenshotted this entire section over 3:55 here and I'm going to say the text in H1 3:58 is not showing we have content in H one 4:00 but it's not showing on the UI 4:02 screenshots attached it's kind of 4:04 redundant but lovable should be able to 4:06 get the point from that all right so 4:07 lovable still did not show The Heading 4:10 just so I don't waste another token I'm 4:11 going to go into my settings go under 4:13 the lab section we are going to enable 4:15 chat mode toggle that on and refresh the 4:18 whole page so chat mode will allow us to 4:21 ask and chat with lovables AI without 4:24 wasting any messages so over here click 4:26 on default go to chat only we're going 4:29 to say today we've tried a couple times 4:31 to show the H1 text but lovable has 4:32 failed to do so seems simple but please 4:34 analyze why it hasn't worked and how to 4:36 fix it for good so lovable is saying to 4:38 first try this and if that makes the 4:41 text visible then we need to fix it by 4:43 doing this that sounds like lovable is 4:45 not too sure of the solution so I'm 4:46 going to say offer a solution that 4:48 you're sure will fix it feel free to 4:50 analyze more or ask me any questions to 4:52 clarify so lovable is saying let me 4:54 analyze this more deeply to provide a 4:56 definitive solution scroll down it's 4:58 telling me the reason why this will work 5:00 yes please make the change so I'm going 5:03 to switch from chat only to default mode 5:05 so that it can make the changes and 5:07 click on enter okay so lovable fix the 5:09 issue we can see the heading text and we 5:11 have a button as well so what just 5:13 happened was we couldn't see the text in 5:15 the heading we use the edit feature over 5:17 here to hover over the heading and see 5:19 what the text was in the code click X on 5:21 that and in chat mode you can chat 5:23 without wasting any tokens so to 5:25 actually make fixes in lovable you need 5:27 to be in the default mode which we 5:29 switch back back to default mode and 5:31 said yes please make the changes which 5:33 it did fix it let's get into the GitHub 5:35 integration now so in the top right hand 5:36 corner over here click on edit code 5:38 we're going to click on transfer 5:40 repository if your account's not 5:42 connected to lovable yet you might get a 5:44 popup saying to login to your GitHub 5:46 account in order for lovable to connect 5:48 to it so I'm going to click on my name 5:50 it is loading and now it says a GitHub 5:52 repository is now under your account 5:53 Jeremy roas and if I click on this link 5:56 command click so now this is my GitHub 5:58 project that lovable .ev has created and 6:01 that just took what two clicks pretty 6:03 awesome so now back in lovable if you 6:04 click on edit code you can see we are 6:06 connected to this GitHub project right 6:08 here so now let's get into how to import 6:10 this project into cursor from GitHub I 6:11 do want to do one thing before we get to 6:13 cursor and that is to change the name of 6:15 this repository go back to lovable click 6:17 on lovable over here rename project 6:20 we're going to name this Skyline 6:22 commercial and click rename project 6:24 rename repository is also checked so we 6:26 should see that change in GitHub as well 6:29 okay so Skyline commercial if I go back 6:31 to the GitHub project and refresh you 6:33 can see that our project has now been 6:35 updated to Skyline commercial so the 6:37 first thing that you need to do when you 6:38 open up cursor is to create a folder for 6:40 your project I like to create a folder 6:42 that's the exact same name as our GitHub 6:44 repository my folder is called Skyline 6:46 commercial it is blank because we 6:48 haven't created any files in it yet so 6:50 let's click on open and here we are in 6:51 cursor with our blank project Skyline 6:54 commercial again if you're new to cursor 6:56 I have a complete beginners tutorial 6:58 telling you how to install cursor how to 6:59 import a project and get it all the way 7:01 to deployment so I'll leave a link in 7:03 the description to that video if you 7:04 want to check it out here we are in 7:05 cursor if we go in the top right corner 7:07 click on this icon toggle AI pane this 7:10 brings up the composer window which 7:12 we'll be using the agent mode so right 7:14 now by default it's on normal let's flip 7:16 it to agent and now we're going to type 7:18 a prompt in order for the agent to help 7:20 us to import the GitHub project so I do 7:23 have a prompt ready we're just going to 7:24 go back to my prompt tool over here I 7:27 have a source control block please help 7:29 me import and run the following GitHub 7:31 project into our current directory so we 7:33 do need the GitHub project URL so you 7:35 can get your GitHub project URL over 7:37 here under code and you can just copy 7:39 this URL you can also get the GitHub 7:41 project URL back in lovable if you click 7:43 on edit code and this is the same exact 7:46 URL over here so this should be all we 7:48 need in order to get cursor to import 7:50 our project so I'm just going to click 7:52 copy and go back to cursor remember we 7:54 are in agent mode so let's just paste 7:57 and click submit if you're wondering why 7:59 says slow request I did run out of my 8:01 fast request for the month I ran out of 8:03 it like I think 4 days into February so 8:06 I've been doing a lot of development in 8:08 cursor but I will edit out the slowness 8:10 of this request so that you don't have 8:11 to sit and wait for the reply the first 8:14 thing that cursor wants to do is to 8:15 clone the application so we're going to 8:17 click run command so now under our 8:19 Skyline commercial directory we have 8:22 imported all of the files from our 8:23 project and now cursor has recognized 8:25 that this is a typescript project using 8:27 Vite so we do need to run npm installed 8:30 to install all of our dependencies so 8:32 the dependencies have now been installed 8:33 and now it's saying let's run the 8:34 development server by running npm runev 8:37 I don't like to run npm runev from the 8:39 chat so I'm going to click cancel and 8:41 we're going to click on this icon over 8:42 here that says toggle panel and this is 8:44 our internal terminal within cursor and 8:47 we're just going to type npn runev and 8:50 that should run our application I have 8:52 Local Host 881 configured uh it might be 8:55 different for you but I have a few 8:57 different local applications running so 8:58 you can actually just command click into 9:00 this all right and now we have our 9:02 application running on our local 9:04 computer for Lauderdale's Premier 9:05 Commercial Real Estate firm I scroll 9:07 down all the sections look intact about 9:10 us our services and the contact us at 9:13 the bottom so that was super super easy 9:15 for my purposes I use lovable to 9:17 generate the first version of my UI so 9:19 at this point in time if I were 9:21 developing this application for a client 9:22 I would not go back to lovable to make 9:24 any changes there I would make all of my 9:26 changes right here in cursor now you may 9:28 be wondering if I make changes here in 9:30 cursor will those changes get 9:32 synchronized to our lovable project in 9:34 lovable. depth and the answer to that is 9:36 yes so when you make changes here in 9:39 your project in cursor as long as you 9:41 push those changes back to GitHub your 9:43 lovable project will see that your 9:44 GitHub project has been updated it will 9:46 pull those changes into your lovable 9:48 project so to demonstrate that changes 9:50 we make here in cursor get automatically 9:52 synced back to lovable we're just going 9:54 to make a really small change in the 9:55 heading so if I do a control find on 9:58 real estate firm back here in cursor I'm 10:00 going to find this text let's just add 10:02 an exclamation point and click save so 10:04 if you go to Version Control click on 10:06 index TS over here this is a diff which 10:09 will show us the change that we made so 10:11 as you can see red is the old version 10:14 green is the new version which we're 10:15 going to push into GitHub so we are 10:17 going to add a commit message saying 10:19 added exclamation point to header so now 10:21 we're going to click commit and push so 10:23 committing commits the changes to our 10:25 local repository and pushing actually 10:27 pushes the changes to the cloud in our 10:29 GitHub Hub repository so the first place 10:30 we're going to check if the push was 10:32 successful is back in GitHub so if you 10:34 go back to GitHub click refresh you can 10:36 see we have seven commits now it was six 10:38 before and the most recent commit was 10:40 added exclamation point to the header so 10:42 the push from cursor was successful if 10:44 we go back into lovable now let's see if 10:47 the changes were made so we are back 10:48 here in lovable I didn't even have to 10:50 refresh the page it already says 10:52 external commit and you can see the 10:54 commit message over here added 10:56 exclamation point to the header is also 10:58 included as well now if I refresh the 11:00 project and there you have it we have 11:01 our exclamation point change so again if 11:03 you see this external commit message 11:05 that means that your lovable project 11:07 recognize that your GitHub repo had a 11:09 change and it pulled in the external 11:11 commit and will automatically update 11:12 your application now if you make a 11:14 change in lovable and you want to again 11:15 continue development in cursor you do 11:17 need to pull the latest changes within 11:19 cursor let me show you real quick so 11:20 let's click on edit and go to the header 11:23 again click on the header element to 11:25 bring up the content let us remove the 11:27 exclamation point and and click save so 11:30 now this message popped up it says 11:32 visual edit and lovable so that is 11:34 basically a commit so let's go back to 11:36 our GitHub project you see we have seven 11:39 commits if I refresh it now says eight 11:41 commits and it says The Lovable bot made 11:43 a visual edit in lovable so now in order 11:45 to get these changes into our cursor 11:47 environment all we have to do I'm going 11:49 to stop our server by doing controll C 11:52 so now in order to get the latest 11:53 changes from our remote GitHub 11:55 repository all we need to do is just run 11:57 one command and that is git pull so the 11:59 git pull command is going to take any 12:01 changes from our remote repository that 12:03 we don't have in our local repository 12:05 and pull those changes into our local 12:07 repository so let's click enter all 12:09 right so I ran the git pull and as you 12:11 can see it pulled the changes from 12:12 index. TSX so if I go back to index. TSX 12:16 we can see that the exclamation point 12:17 has been removed and if I go back to my 12:19 local host click refresh up it's not up 12:22 let's run the project n pm runev and go 12:25 back to our Local Host now we don't have 12:28 the exclamation point anymore over here 12:30 all right everybody so that wraps up our 12:32 tutorial today so just to recap we 12:33 created our application in lovable we 12:35 used the lovable GitHub integration to 12:38 connect our project to our GitHub 12:39 account we then went into cursor and 12:41 prompted the cursor agent to import our 12:43 project by providing our GitHub project 12:45 URL the cursor agent cloned our GitHub 12:48 repository and then ran npm install to 12:50 install all our dependencies then we 12:52 were ready to run our application 12:53 locally using npm runev we made one 12:56 small change to our application in 12:57 cursor just to demo how the change will 12:59 get synced back to lovable so after we 13:01 made the change in cursor we pushed the 13:03 code to our GitHub repository then we 13:05 went back to our lovable project and 13:06 pretty much instantly we saw this 13:08 external commit refresh our application 13:10 and saw the change from cursor get 13:12 synced back to our lovable application 13:14 so that is how to take your lovable 13:16 project and import it into cursor to 13:18 continue developing your application and 13:20 any changes that you make in cursor that 13:22 get pushed to GitHub will automatically 13:24 get synced back to your lovable dodev 13:26 project if you like this video please 13:27 hit that like button down below 13:29 subscribe for more videos like this and 13:30 I'll see you in the next one peace