Cursor AI Beginners Guide: Build Apps with NO CODE!
21:51

Cursor AI Beginners Guide: Build Apps with NO CODE!

Alex Finn 01.09.2024 9 024 просмотров 352 лайков обн. 18.02.2026
Поделиться Telegram VK Бот
Транскрипт Скачать .md
Анализ с AI
Описание видео
#cursor #ai #nocode #programming This is the only Cursor AI tutorial you'll ever need! By the end of this video you'll understand Cursor inside and out. You'll know how to build your own applications, set up apps, and navigate the entire UI. Install Node: npm install -g npm Install React: npm create-react-app my-app cd my-app npm start Follow my X: https://x.com/AlexFinnX Subscribe to my newsletter: https://www.1percentbetter.io/subscribe Timestamps: 0:00 Introduction 0:23 What Cursor AI is 1:39 What I'll be covering in this video 2:12 Quick demonstration 4:13 Cursor Pricing 4:47 Exploring the UI 5:25 AI Chat bar 6:55 Using images to create apps 8:02 The composer 8:59 The settings 11:18 Installing React 13:31 Building a full scale app 14:42 Adding more features 19:33 Debugging 20:46 Recap

Оглавление (15 сегментов)

  1. 0:00 Introduction 89 сл.
  2. 0:23 What Cursor AI is 277 сл.
  3. 1:39 What I'll be covering in this video 141 сл.
  4. 2:12 Quick demonstration 358 сл.
  5. 4:13 Cursor Pricing 140 сл.
  6. 4:47 Exploring the UI 135 сл.
  7. 5:25 AI Chat bar 318 сл.
  8. 6:55 Using images to create apps 198 сл.
  9. 8:02 The composer 188 сл.
  10. 8:59 The settings 478 сл.
  11. 11:18 Installing React 479 сл.
  12. 13:31 Building a full scale app 174 сл.
  13. 14:42 Adding more features 875 сл.
  14. 19:33 Debugging 250 сл.
  15. 20:46 Recap 235 сл.
0:00

Introduction

I'm going to take you step by step how to use the most powerful AI tool in the world cursor AI by the end of this video you'll be able to build any app you've ever wanted to build no programming experience required any app idea you've ever had in your life you can now build it put it on the internet and make money off of it doesn't matter if you've never written a code ever before let's get into it boom I'm over here now let's get
0:23

What Cursor AI is

right into it so what you're looking at here is cursor AI on the left hand inside this is the most powerful AI tool I've ever used in my entire life what cursor AI allows you to do is anyone no matter how little programming experience they have even if they've never written a single line of code in their entire life can build the web app the mobile app whatever kind of application you want of your dreams doesn't matter if you've never even seen a line of code in your life you can now go in and build any application you want in seconds it's incredible whether it's a video game whether you want to build a Flappy Bird imitation whether note taking app whether you want to build a competitor to notion whatever it is you can go in say hey please build me this app and it builds it for you it's mindblowing and what's great about this is now anyone can be an entrepreneur anyone can come up with an idea with an app anyone can then get it built and get it shipped if you're anything like me you've come up with a billion different app ideas over your life and a lot of the time you just never execute on them whether it's because you don't have the skills to do it or resources a lot of people come up with ideas and just aren't able to build them out now with cursor AI anyone can come up with ideas for apps and get them built literally in seconds so what we're going to cover in this video is first
1:39

What I'll be covering in this video

I'm going to take you through a quick demonstration so you know what cursor is capable of then I'll take you to the website and we'll cover how much it cost set up all that then I'm going to take you into the UI I'm going to show you all the different elements of the UI so you know how to use it and then I'm going to go into the settings we'll make sure our settings match so you can get the most out of cursor and then I'll go through a full scale demonstration where I'll build you a full application end to end so you know everything it's capable of we'll debug it we'll write different pieces of code for we'll customize it we'll do different stylings it'll be great fun so over here on the left is
2:12

Quick demonstration

cursor AI over on the right is a demonstration app when you build a new app this is what you're going to see so I can go in here I can say build me a note taking app where I can write a note and then save it then I can access the notes down below really basic note taking app just gave it a couple sentences of what I want I hit enter and watch what it's doing it is generating all the code for us which is pretty unbelievable if you've never written a line of code before doesn't matter it's doing it for you here we go we can accept all it's going to accept it completed press save and you can see on the right there's your note taking app within seconds it's built right write your note here I love cursor save note boom it's saved I didn't write a single line of code I wrote a couple of sentences in English and I have an app and now I can do other things right now I can go in and say uh I can say please make this prettier make the note taking section bigger and I'm basically going in and having developers write code for me it's a free developer that's just writing code for me it's building all the files I need I don't need to know any code I hit accept and it's good to go and it builds out my app and edits it it's pretty amazing I just hit save and now the not taking section is bigger and the whole thing's better I didn't write a single line of code and now you think about the possibilities if I sat here for 10 more minutes kept adding new functionality I could have a pretty compelling app on my hand again what's incredible here is anyone can now build the apps of their dreams no coding experience required now let's get into how to use cursor AI I probably got you interested in the program now let's talk about how it works here's the cursor website we're
4:13

Cursor Pricing

going to go right into the pricing so there is a free version if you're just starting you can get away with using the free version easily you can't do as many prompts but maybe you just want to go in and get your feet wet right you can try it out also comes with a trial for the more complex versions but if you really want to use this hardcore put in a ton of prompts do a lot more stuff you could upgrade to the pro version for $20 a month but I would recommend everyone start the free version test it out make sure it's for you but I'm really Blown Away with this I'm pretty confident you'll probably move up eventually but you can easily get away with doing the free version and then here's the
4:47

Exploring the UI

application itself I showed you a little bit of this during the demo at the beginning uh but it's really simple what you see in the middle here is where you put your code if you're a programmer here's where program normally write their code but you're probably not going to be using this as much if you don't have programming experience and that's totally fine you don't need to do this you can have ai build everything for you so you have two different options when it comes to building an app with AI the chat box on the right and the composer so the chat bar is accessed by doing command l or you can hit this button up here in the top right and this chat bar is basically like having your
5:25

AI Chat bar

own AI developer working for you can ask it questions you can have a debug things for you can have it write code do research for you have a full AI developer here working for you and you can talk to it in plain English you don't need to know anything technical right so if I want to come in and say write me code for a notes taking app and hit enter the developer is now going to go and do work for me right it builds the full code for me in seconds for a note taking app and then if I wanted to I can just hit apply get it implemented or I can keep chatting with it back and forth it has full context over everything you've been saying to it can you so you can have a real full scale conversation with it I really like using the chat bar for some quick questions to get things debugged real quick for my full scale edits I like to use the composer which I'll go through in a second just some other cool features here too going back into the chat bar over here you can choose any AI model you want I choose and I highly recommend Claude 3. 5 Sonic it is without a doubt the most powerful coding model available right now as of the date of this video so make sure to choose that but you can do a lot of different things you can also mention different files if you want to talk about very specific files to change when you get more familiar with your program you can do that you can even mention the web if you want to say look up this application on the web and copy it you can tag the web and do that there are so many different little cool things you
6:55

Using images to create apps

can do you can even put in images right so if I take an image and put it into this code section I can actually say copy this UI let me show you so I'm going to put in here this screenshot I just took a chat GPT it's going to take the image and I can say make the UI look like this I hit enter it's actually going to start making the UI out of the image I sent right so you can see here's the code I can hit apply accept and then apply accept it's creating all the different files for us we just accepted it now that code set let's actually see what it looks like so I pull over my original window boom it made the UI look exactly like chat GPT even says message Chat GPT in it uh that's pretty amazing and that was all just off an image I didn't even write any text English I just sent a picture and it made it uh that's how powerful this is that's all the different things you can do and this is again without any Tech technical experience required whatsoever
8:02

The composer

but the other option is the composer if I hit command shift I this opens up the composer and this is where we basically just talking to a developer and the developer is implementing stuff for us when we do things in the composer goes in and actually creates uh different files for us it creates whatever kind of code files we need to launch applications so if I went in here and said make this prettier it builds the JavaScript code out builds a CSS code which is the styling code it builds it all out for us we just hit accept and it's good to go the composer is by far the most powerful feature of cursor this is where it's just you talking to your built-in AI developer and the developers going in and writing code and creating files for you it really is amazing so really important section here I want to take you through my settings the settings are very critical to have aligned correctly it'll make sure you get the most out of cursor and get the best performance so let's go
8:59

The settings

into to settings you can do settings up here in the top right uh and what we'll start off is the models right so we want to make sure we have the right AI models in use best AI models doing our work for us so I disabled some of the weaker models we're mostly going to be using Claude 3. 5 Sonet but just in case other backup ones need to be used I left on GPT 40 uh and a couple others so make sure to pause here copy these over and then where we're going to go next is into features uh so this is an important one as well pause here make sure you have these aligned in your settings too uh so for these I enable a lot of the recommendations that the AI can give you I make sure we use the fastest models possible but having these enabled will make sure you get maximum AI recommendations automatically and everything you're doing which will make it a lot easier for you as you're coding and then when I scroll down here you can copy these as well but basically what we're doing is a couple different sty St istic choices making sure again we get tool tips that pop up that make this as easy as possible to do and basically make this as beginner friendly as possible so again pause here make sure you have these match up and you can go back later and customize this any way you want I have this set up for the most beginner friendly recommendations possible and then lastly maybe most importantly we want to go into beta and we want to enable the composer is probably the most powerful tool in all of cursor so come in here make sure that's enabled even though it's in beta it works really well and it's going to do a lot of magical things for you so enable that because a lot of the tutorials after this we'll be using the composer right before we get into this demonstration I build out a full scale app for you make sure to hit like subscribe and turn on notifications below I'm going to be making tons and tons of more videos like this showing you how to build out applications if you want to build the applications of your dream no programming experience required put it on the internet make money make sure to hit sub subcribe so you can learn everything there is about AI programming and technology so let's get into the demonstration portion now I'm going to build you a full scale app I'm going to show you editing debugging I'm going to show you everything you need to do to build your own fullscale application no programming experience required now what I'm going
11:18

Installing React

to quickly show you is how to set up your own demo app of your own so you have a template ready to go so you can start building your own apps this is what you're going to need to do at the beginning you just enter these couple of commands in your demo app is ready to go and then you can start talking to the AI and build whatever app it is you need I'm going to put these commands down below too so you can copy and paste them if you'd like but I'll show you how to do it here first the first thing you want to do is actually open up your terminal you do that with control till day key that pops up what you see here down below uh so what I'm going to show you how to do is actually install a react application react is a framework regularly used on the internet most web apps use it it's just the easiest way to get web apps up and running and it's going to be something the AI understands that you can give it commands to so if you've never installed react before the first thing you need to do is install node is one of the packages that make it really easy to install applications type in npm install dasg npm you hit enter on that installs node and now what we can do next is install react so you hit enter on that and then we'll come in after that I already have it installed so that's why I'm not hitting enter on it then what you can do is now let's get react installed and that is going to be done through npm create react app and then you can give it whatever name you want here but maybe you just give it my app you hit enter this is going to then install react it's going to set up your boiler plate code your demo app it's going to be called my app and then from there you can just go right into the new file system it created so for you it'll create where you see base right here it's going to say my app and then you can just do CD my Dash and then if you hit tab it'll autocomplete for you do that it'll put the rest in there you hit enter now you're in your new application now you can start writing your code through the AI if you get lost in any of these sections the AI will help you as well so just pop open your chat box and say hey I'm caught up here this isn't working for me the AI will walk you through it but all the commands I use will be down below so again we're
13:31

Building a full scale app

back to cursor I got my app again over to the right let's build a new application I pull up the composer which again it is command shift I on Mac uh to pull it up I'm sure it's probably control shift I on computer PC um so let's for this demonstration let's build out a to-do list app one of the most basic apps we can do and then we'll make it a little bit more advanced and interesting so we'll start off with the most basic Bas prompt we can do I want to build a simple Todo list app one sentence I didn't even hit period I hit enter here we go it's building the code for us it's building the files we hit accept in the bottom right here okay we got a very basic to-do list app on the right let's say buy some groceries add we can say subscribe to Alex Finn add turn on notifications add so now let's do some more interesting things with this right
14:42

Adding more features

so I'm going to go in I'm going to say maybe we want to add a date for every to-do item so that we know when the due date is make it so I can add a due date for every two do item and basically what I'm doing here is I'm talking to the AI like it's a developer I'm telling it what I wants and it goes and builds the code for us you can talk to it like it's a human being you don't need to talk to it like it's code or programming or whatever it is literally pretend like it's a developer human being and tell it what you want it to do even in the most simple terms possible okay so it wrote some code for us for the to-do we accept it here we go now I can say by grosser and I can say make it due by the first there we go I have my to-do item it's due by that date now maybe we want to make it a little prettier obviously I don't think anyone want to use this to-do list app the way it is now but let's make it a little prettier make it make the to do items prettier I want them in a table below the input stop style it so it looks nice here we go so we're doing a little bit of styling here right you're not only describing what functionality you want you're describing how you want to make it look and so it's building The Styling for us I hit accept now we got a nice little table here I actually kind of like the way this looks uh but maybe we want to make every to do item background a nice light blue you know maybe we want to add a little bit of color this to spice it up a bit I may like a nice powder blue let's accept it okay so now we got a little bit of color to it okay uh okay now I want to be able to check off these two items right I went to Whole Foods right before this I picked up some way over price cereal let me make sure I can hit the check mark here make it so there's a check box next to the to-do item so that when I check it it disappears all righty here we go generating the code we want to be able to check it off get that dopamine hit when we finish the task I hit the check box it disappears I get a nice dopamine hit why else would you do a 2d list other than getting dopamine hits from doing tasks here we go let's accept it code's all written for us I was talking to you my developer went off wrote the code now it's good to go here we go checkbox gone task done now we got a functional to-do list app here I have haven't wrote a single line of code this is as functional as any other to-do list I mean Microsoft's paying developers millions of dollars to build apps worse than this and we just built it by ourselves for free Let's uh put another to-do list out here uh eat my overpriced Whole Foods cereal all right let's make that Doe for tomorrow I'm actually going to do it right after I finish this video I'm going to eat the overprice cereal so we got that in there now we can start doing some other interesting things maybe we want to do something really interesting maybe we want to get more dopamine hits every time we do a Todo item when I hit a task being done I not only want it to disappear I want a popup to pop up with a motivational quote just so I feel really good about doing that task whenever I click the checkbox to finish a task make the task disappear and then have a dialogue box popup that tells me great job and says something motivational you know I really want to feel good every time I do a task so I'm telling the AI to go there build out the functionality if this was the real world and I hired a developer to do this I'd be paying them $10,000 they'd go out get this command they'd go buy a Starbucks for $15 drink the Starbucks they'd go play video games for 2 hours and they'd write the code come back a day later charge me $10,000 and be good to go with cursor I'm it's done it's over I hit the command it goes in seconds later let's do this let's check it off boom you're making excellent progress I get the popup now I'm feeling great every single time I do a task I just showed you how you can build a full scale application by yourself I showed you how you can go back make edits try new things I give you some creative ideas for styling we did a lot here uh here's another thing let's go in and do a little bit of debugging
19:33

Debugging

too let's say uh we broke the code somehow right so I go in boom we got the red lines which means there's a bug oh no we got compiler issues all right let's do this let's go into our chat this is something you're going to run into a lot if you ever do coding you're going to constantly run into bugs let's talk about how we can fix it so I can say hey there is a bug can you please fix it hit enter I'm just telling the developer to go in and fix this I don't know what's going on developer please go in and fix our issues code's written it figured out what the issue is it explains to us I apologize it's apologizing to me for the oversight it not even the one that did the bug and it's apologizing to me that's the way I want my employees working for me if I screw up you apologize to me thank you cursor AI this is the way I want my developers working for me now let's hit accept apply that hit save boom fixed it they fixed it for me I screw up they say my bad they take the blame for the mess up even though it's my fault they fix it it's done I might get rid of all my friends and just talk to cursor AI this is the type of support I want around me so we did it
20:46

Recap

all I showed you cursor AI I showed you how to set it up I showed you all the features you need to know about I showed you how to build your own application I showed you how to treat it poorly we're good here you are now fully prepared to go and build your own applications no programming spear is needed put out your applications on the internet start making money you're a tech entrepreneur you're basically Bill Gates at this point you're basically Jeff Bezos how easy was that too easy I hope you enjoyed this video tutorial let me know down below what you plan on building I would love to hear let me know what you'd like me to build I'm going to create hundreds of more videos just like this I want to build applications for you let me know what you want me to build I'll go out and build the video everything is based on user feedback I love you guys subscribe turn on notifications hit the like button if you got anything out of this make sure to sign up for my free newsletter in the description as well I put out a ton of AI content in that and also uh follow me on X that's my one of my favorite social media sites so appreciate you all love you all I'll see you next time

Ещё от Alex Finn

Ctrl+V

Экстракт Знаний в Telegram

Транскрипты, идеи, методички — всё самое полезное из лучших YouTube-каналов.

Подписаться