Cursor + V0: Can We Build An AI Next.js App in 8 Minutes?

--- type: transcript date: 2024-09-02 youtube_id: zyqwt65NIgs --- # Transcript: Cursor + V0: Can We Build An AI Next.js App in 8 Minutes? in this video I'm going to be showing you how to build out a simple AI application by leveraging cursor b0 by versel and then we're going to be using one of the models on fou if you're not familiar with any of these I'll go through them as we build this out the first thing that we're going to go into is the foul model that we're going to be using if you just select background within the models here so you can go to file. models and in this case we're just going to be using the first background removal model we're going to go over to the API documentation so we're just going to leave this open here I'm going to go over to v0 here and I'm going to say I want a simple application that allows me to upload an image and then send that image to the back end and ultimately show it on the right hand side of the screen once the result is processed make this page also have a simple nav with a title and a footer so v0 is essentially a really great way to build out react components it does really well with shaty Nui as well as tailwind and it's built by the team over at brel which are some of the best front-end Engineers out there here we see our simple component what we can do here is we can just click install and then copy that command now that we have that we're just going to create a new nextjs project I'm going to say bunx create next app and then we're going to do it in the root of our directory here and then once we have that I'm just going to show you we're going to expand app here and then we're going to paste in that script that we got from v0 we're just going to proceed with everything you can select the styles that you want it doesn't really matter and then once it's all done installing you should see the component here here we see that we do have this image uploader what we're going to do is we're we're going to go over to our homepage here that's within this page and we're just going to delete everything here I'm just going to make a simple fragment and then I'm going to add the image uploader so I'll let the auto completion do its thing and then I'm just going to import image uploader from the component there once we have that set up we can just start our server we can bun Dev here we see our image processor so we have the ability to upload things and then our process res so once we have that what we can do from here is we can open up what's called the composer view so on Mac it's command shift I it's probably going to be similar on Windows as well and then what you can do here is you can select the files that you want to pass within the context so I'll just select the image uploader as well as the page and then I'm going to give it a little bit more instruction so I'm going to say I want to wire this up with a file AI model that removes the back background from images use the image uploader frontend component for the UI and the frontend logic and for the backend let's make a server action that handles the BG removal from file so at this point what you can do is you could go over to file and you could paste in the documentation but I'm going to show you a little bit of a trick So within cursor you can go at dogs and there are a ton of dogs built in here so you'll see I've already put in this foul BG remover I'm going to show you how to do that in a second but there's a ton of different things in here use Amazon dogs or other dogs like nextjs or Lang chain or other stuff like that but if you want to add your own is you can simply just copy in the URL for the dog and then you can submit that and then you can name it whatever you'd like so I've already done this so with here if I just go docs now we see that we do have the fou BG remover and it was just indexed so it was just index before recording this video I don't need to just copy and paste like a caveman that information from the website I can just index it directly within cursor here I'm going to submit that and then what it's going to do we do see the website there within the chat interface so it is referencing that and then the cool thing with the composer view is it's not just going to reference the context of the files and interact with those particular files it could actually make files from scratch in this case we see our actions. TS which our nextjs project currently does not have and then we see the correct way in terms of how to set up the file model so you can also reference this with the documentation if You' like then from here we have the tweaks to our front end it's going to have a diff and you can also go through this line by lines you can just command why each different section of the diff and accept it one by one or you can just accept the whole file and the other great thing with cursor is if you are a fan of just using your keyboard you can just tab through everything and they also have key bindings for basically everything that you want to do within the workflow so here we can just accept each of these different files or alternatively if you want to accept them all you can just command shift enter and you'll be able to have all of those changes applied you'll see all of those different check marks there here we'll exit of the composer then we're just going to have to get our API key from fou so I'm just going to go over to Keys We'll add a new key and we'll call it BG removal 2 and then within our project is we're just going to create A.L and then you can just paste in your key like that so fou key and then paste in the value so then you can save that out and close it out so once that's done what we're going to do is we're going to go over to our server so we do see that we do have to install the file dependency still we'll go back to cursor we'll open up a new terminal window and then I'm going to bun add and then we're going to install the foul AI client there now we just need a photo to test this so here I'll just save out this grade photo of this draft here we can select that photo so here we see that we see our selected image and if we click process image we see that it's processing we have that sort of pending state with it hopefully sending the request to file. and there we go now we have the background removed from our image now what we can do is we can go back to cursor and we can just start to give instructions on what we want to add to our application in this case I want to say I want to add the ability to download the image and make the image full screen what I did there is I command K to open it up again is probably going to be similar on Windows and then here you're going to see it go through and make some diffs to apply some updates that download image feature the toggle full screen in this case we're going to accept them all but you can also command y to accept them one by one we're going to accept them save up the file again then we're going to go back try this again we can just select our image process image then we see it's processing and then we'll see now we have a download image and a view full screen so view full screen we can click away download image it opens up the link to the image and then you can just tweak it so it didn't quite get what I wanted and I'm going to say I want the image to download not open in the browser and I want to add an X in the full screen view to close it out so this is just to give you a really quick example on how you can leverage cursor a VZ as well as foul to build out a really simple AI application so something like removing a background from an image you can do it a ton of different ways in my opinion there's no wrong way to do it there's definitely obviously different ways to do this sort of thing but here if I just process the image one more time and hopefully we see that we have those requests that we had asked for if I click view full screen we now see we can close it out we have that X there and if I click download image it actually downloads so that's pretty much it for this video if you found this video useful please like comment share and subscribe otherwise until the next one