Beginners Guide to AI-Powered Coding With Cursor (No Coding Experience)

you can now build apps without knowing how to code and this is because of the progress in AI coding models and the progress of AI coding platforms that use these models and the best platform by far is cursor so whether you want to build tools for your own personal use or build internal tools for your company or job or if you want to build an app to make money this video is for you this is a stepbystep cursor guide and today we're going to be building an app with cursor and in this process we are going to talk about what cursor is we're also going to discuss the key features of cursor that I use we're also going to discuss apis and how you can use other tools out there and add powerups and abilities to your app we're also going to discuss adding different types of features with AI and then we're going to discuss deploying so that you can put this on the internet and send a link to your friend so that they can try it the best way to understand and learn cursor is to just see it in action so we're just going to start off by downloading cursor and you can do that on cursor. comom you can see the URL right here and whatever machine you're on you're going to download this and it will then show up on your computer somewhere I have it pinned down here at the bottom bar because I use it every day I'm going to rightclick on this and open up a new window and we see two options we can start with a folder or we can open with SSH we are now going to start with a folder and if you want to start completely from scratch you can just create a new folder on your computer and name it anything and start from a empty project we are not going to do that for me I like to use a template which does all of the boring work of getting the project set up we're going to go to software composer. comom and once you join this community it's free you just come into this site within software composer on the left panel here you're going to see templates you're going to click on this templates folder and you're going to hit link to template and we're going to hit use template it doesn't really matter what you name it I'm just going to call this hello man and we're going to hit use template and we are now going to download this template and this is going to be our starting point for cursor so we're going to press this little folder icon here at the top left once that's open there's going to be these three dots right here by file and we are going to press download as a zip and that will take a few seconds and as you can see here the zip is downloaded and so we need to unzip it so just double click on it that should unzip the file we're going to take this and we're going to drag this into desktop for now and what we're going to do is we're going to find where that project exists here it is it's in hello man and so what we can do is we can open up cursor and we're going to hit open a folder we're going to go to hello man click on this open and now we have our template and so this is our code project we have our code files on the left and if we press command I we can now open up composer cursor allows you to ask for features or ask for changes in your app and it will go out in composer and it will edit these Cod files it will create these code files and now with their new agent feature within composer it can now delete files and it will ask your permission it says do I have permission to delete this file so it can add edit and delete code files and it can fully create coding projects that you can deploy to the internet and so we have all of our files set up and so the first thing that we need to do just copy me exactly for this step because the template that we downloaded was made for repet and I'm just going to say that so you should say that for your first prompt we're going to type this out together we're going to say the following I started this project as a template in repet so it was supposed to be a repet project and now I want you to make sure that it is compatible with Local Host and running it locally please do that and then run it on Local Host we're going to run our first agent prompt here and this is basically going to set it up it's going to convert the project to the right format it should take only a minute or two and then what it's going to do is it's going to run the project on Local Host so we're hitting accept and now it's going to ask us to run commands and so we're just going to run these commands here and now we're going to hit run command run all of them that they said so perfect your development server is now running and so in order to open this up you can press command click and this will open up your server and here it is this is the starting point of the template and so now what we can do is we can open up a new composer here and we can type whatever app we want let's ask for it to create a basic chat app I want you to create a chat app and we can also use and I use whisper flow to speak into my computer and if you see me speaking into my computer and it transcribing it that's what using so I want to create a chat app I want this to look exactly like chat GPT and I want to use the open AI API and I want to chat with chat gp4 and I want to have a loading indicator for the chat Bots response and I want you to make this like a simple clean chat app and what we can do here is we can actually go to chat GPT and we can copy this so let's just screenshot this right here and what we're going to do is we're going to drag this screenshot directly in here and we're going to say I uploaded a screenshot and have just the little buttons below the chat input field put little sample questions there and they should be really short questions and just have those simple questions there recreate this interface don't worry about the top bar for now but you're making the homepage of this app this page right here that I can immediately chat with ignore the Firebase configurations for now one more thing that I'm going to do is I'm going to turn on the web for chat GPT and I'm going to say give me code examples for GPT for o uh to create a basic next JS nextjs is the framework that we're using and so you just need to put that in to make sure that you get the proper formatting that you get the proper code examples for chat GPT and so give me code examples nextjs app this is for a basic chat app using the open AI API so here we go we actually got a response that we can copy we can copy the entire response and what we're going to do is we're going to come back to cursor and say here are the code examples for GPT and I'm just going to paste them all right here in the chat and now what we're going to do is I'm going to also say set up the proper EnV file for me to put my API key in we'll get to that in a second just include that because we basically need to create an account on open AI that says the credits that are used with this technology I'm going to pay for it basically and that's an API key and so we're just going to run this and let's see what it creates so it is now looking through the codebase looked through the directory decided what it needs to do it decides what model to use it's using GPT 40 that's correct now it's creating the main chat interface so it's still creating the main chat interface and here it's asking us to run this command and so this is now it wants to use some icons and it also wants to use the open AI uh API so we're just going to hit uh run command and we're just going to click pop out terminal here and so here we go it is done it's still not going to work cuz we haven't given it our API token yet and so as you can see here this is now what the app looks like we have this message Chat GPT input field hello chat GPT hi and if we were to press send I think nothing's going to happen we're going to get an error because we haven't put in our API key yet and so we need to go get our API key and what I can do on chat GPT I can just go to chat GPT and turn on Search and say take me to the uh exact page and I just say give me link to get my API token and here we go so we can click on this link that it gave us let's open this up new tab created and here are the API keys so here's the link platform.

open. com API keys and if you come here and you haven't create an account with open AI yet you're going to need to go through those steps once you've gone through those steps you're going to hit create new key you should keep these secret which is why I'm going to pause the video and get my API key off camera because I don't want anyone using my API tokens so once you have your API token since I asked it to create the EnV file remember that EnV file is where your API key needs to go and what we're going to do here is we're just going to click on where it says env. loc and look at this it opened it up here so now I'm just going to put my API key right here in the env.

loal and that that will allow this to work okay so I pasted my API key there and now what we can do is we're going to go back to our little app here and we're going to open up Local Host because that's where it's running and I'm just going to refresh it real quick and now let's type in a question hello chat GPT boom it works what are you up to man tell me how to use cursor and it thinks I'm talking about Mouse control but that's the point and look at this you notice that this is in this really weird format so we can just ask the composer to change that and you can just all you can do screenshots look at this you can just screenshot this and uh let's ask for a bunch of changes here I want you to please make the output have markdown format right now it looks like a jumbled mess and also I really hate the icons that you have please make the icon for me like a basic person icon and have text for the uh ai's response and make the ai's name Jimmy and actually have a little tiny icon for Jimmy and also just like make the whole chat interface cleaner and better right now it looks choppy and ugly so look at the image and Anze it and then I want you to like just make it clean simple and adhere to everything that I said here and so we can now run this and I asked for like four or five different changes there we go here all right so now it is asking us to install react mark down so we're just going to run this command and that will allow this formatting to be a lot better oh wow it's already made some changes here uh updated the icons okay it's already done let's accept and so now here's Jimmy hello I'm Jimmy you're AI assistant how can I help you today tell me the steps for using chat GPT and so we can run this and so it has better spacing but I can't tell if it has bullets or headings okay so that's not doing bullets or headings it's not doing bullets or headings please make that happen and format it correctly and so we're going to run this command whatever it wants here and so now we're just going to press accept and here there we go it automatically switched over we didn't even have to create a new chat let's go ahead and refresh this real quick oh what the heck explain the process of cooking with olive oil and let's see um I'm going to say expand on this and let's see if it it remembers if it has context to the full chat okay so it does have full context and we can fully we basically fully created an AI chat app in just a few minutes all right so now let's go over the features of cursor that I use most frequently and so this search bar allows me to search for anything in the codebase so I could search for Jimmy and here it will show me all the pages with Jimmy and so I can click on hello I'm Jimmy so I can very quickly um Ed edit this codebase and so I'm your AI assistant help you with various tasks here are some things that I can do and this is basically what it lists out right here and these are the things that are shown here we have this bottom part that says message Jimmy let's say we wanted to change this part that says message Jimmy to something else we can go to that search bar and we can type in message Jimmy and we can click on this right here we see placeholder equals message Jimmy so we can just change that send a message to Jen Z Jimmy and that'll make sense in just a second and once you're done with that you press command s and that saves it which Now updates it right here now it says send a message to jenz Jimmy so since you've never written a line of code you may not even know where to go to edit the prompt that runs jenz Jimmy and so so I want to go there real quick and let's say I don't know where it is and we just want to find it so we can edit the prompt in the code we can actually go to the chat and we can just say at codebase make sure that you just go ahead and type in here show me the prompt that is used for Jimmy I want to change it chat will not immediately change files in your project so composer will it'll actually edit them and all you have to do is press accept and you can accept all the changes that it does and that's how I normally code here I'm just looking for this current prompt here and so we can actually see that the Jimmy's initial welcome prompt is defined and use chat here's the relevant section this is the prompt for the whole chat experience and I wanted to ask this question here because we're not looking for this initial message thing right here what we're doing is we're looking for this right here it's like you are a helpful assistant and so we if you want to go to that page just click on this route.