Intro, downloading Cursor and Composer

0:00 today we're talking about building apps with AI this is a comprehensive guide for you with no coding experience you'll be able to build an app by the end of this video this is going to be the most comprehensive cursor tutorial for those who want to Vibe code Vibe code is the act of speaking or typing into cursor composer which is the smartest AI tool for coding in the world by far in this video we're going to talk about this in three parts the first part will be the basics of cursor and so we talk about all of these different things we're going to go through all of the vocabulary everything that you need to know as someone who doesn't know how to write code to communicate with AI powered coding tools like cursor and so in this first basic section we're also just going to build an AI image generator and I want you to fully understand how relatively easy it is to create really cool apps you don't need to pay for other people's software anymore the AI image generator that we create looks like this and so we're

1:10 going to be able to uh say a man riding a bike with an e.l.f hat on and I will show you from scratch how I built this very quickly and boom so we created this AI image generator we can copy we can download and then in part two we built this landing page and we found a library on GitHub that had really cool animations and we just remixed it and created this landing page and we also went through the process of deploying it and uploading it to our own domain so I bought a domain a gate.com and that is this site you can visit this site and I'll show you everything every step of the process to create this and then finally in part three we T we built an AI powered app and this app really targets one of my big pain points with the new open AI deep research I really like how it can create 10 to 30 page reports but it doesn't have images built into it which

2:23 is why I wanted to create an app that allows me to paste in all of my ideas and then I could generate images for the different section so I can generate charts with AI and this allows me with one click to generate charts with AI and if I want to make changes I can actually talk to an AI and say mention the companies here and explain these more in the chart and so we used claws API to allow us to edit these charts and so now we have this chart here that we can view that automatically created by AI it shows all the different companies and how they can either race competitively or prioritize safety and slow progress and then it shows the different outcomes you can export this as a PDF and so it's just a more fun way to read the Deep research project those are the three apps that we created today and I'm going to go through all of the basics getting started with cursor and then we're going to build these apps and we're going to talk about other things like how to use GitHub as someone who's literally can't write a line of code or understand code for that matter we're going to talk about versel and deploying apps to

3:34 versel I promise you it'll be worth it you're going to love Vibe coding I'm Riley Brown let's dive in this right here is cursor and you can download cursor at cursor. comom I downloaded it for mac and whenever you open up a new window after you have it downloaded this is what it looks like this right here is Bolt and bolt is a friendly familiar interface just like GPT you can type whatever you want and in a chat like experience it will generate the app that you want except it's hosted online and many people love this it's just a simple website you go to you immediately type it in while cursor is a tool that you download all of the project files are hosted on your computer and by the end of this video you'll understand why I think that's actually a good thing and the reason why a lot of people prefer this experience over this experience is because of the interface and it's just easier to get started but I think that you'll run into a lot more roadblocks using web-based tools than cursor because I think the cursor agent is just the most Superior and I think you'll understand that by the end of this video

4:45 so the question many of you may have is how do you get to this experience within cursor how do I type my idea in cursor to have it generate the files so that I can create the app that I want and I'll tell you right now so when you create a new cursor window there are three options open project clone repo and connect via ssh in this video we're going to go through this one and this one let's go ahead and start off by going over this which is basically creating your new project from scratch so if we press the open project button we are now taken to our file system and people might be you know confused they're like wait files I don't know where to put it it doesn't matter pick a place where you're not actually going to delete it and you're creating an empty folder that's how you get started on cursor so I'm going to create a new folder and we're going to call this let's call this new project for tutorial doesn't matter what you name it you're going to press enter and then open then what you're going to do is you're going to press command I and congratulations congratulations you made

5:53 it to this what this is is this right here they're the same thing except this one gives you more control so we now have a cursor window open and we're going to turn this to agent mode okay so what the hell is composer composer is an AI agent that allows you to create files edit files and delete files and run terminal commands within your code base and you might be thinking what do all of those terms mean so let's ask composer what is a codebase answer by creating a new file called uh codebase explanation uh text file and we're just going to use the agent and as I said earlier it can create files and the codebase is just the collection of files and that can be found right here so you see here it created this text file called codebase explanation and it it basically created this right here this is a text file and now we can

7:07 read what a codebase is so it is all the programming files written in various languages and all of those files will show up right here we can also create folders we're going to name this one folder and then we can move this into that folder and we can hit move and so now we have a folder with codebase explanation and and we have created a DOT file computer software doesn't run on text files it runs on special other kind of files that I don't know how to write luckily AI can write basically anything I ask it and if you learn how to prompt AI correctly you can get AI to create highquality applications and there's a lot of controversy around this but it's true okay so not only can we create text files we can also edit them please make uh code base explanation longer 10 paragraph essay and we can use the agent that will say let me expand on the codebase it says it's reading the file now it's done reading the file I'll now expand this

8:16 into a con comprehensive 10 paragraph essay about code bases so it can very easily change the files within your app so you see it shows the diff view so it shows what it's removing and it shows what it's adding and since it's in text file you actually don't see the paragraphs because txt it doesn't have like automatic line breaks in order to see line breaks we would actually need to change the format we can do that can you change this file to MD which is markdown and this will change it to MD and then we'll actually be able to see the paragraphs and so what it did is it took all of the text from the previous one and it created a new codebase explanation.

9:03 MD file and then it deleted the old txt file which is basically the same as converting it we press accept and now you see the line breaks and this is in markdown and many smart people who write a lot for their job actually use cursor all the time because you can use the agent to make edits you can also use the chat feature within composer which I'm not going to talk about as much because as a Vibe coder you're mostly not you don't really read the code necessarily because you don't always have to in fact I hardly ever read the code I just rely on composer but you can select this right here and then you can press chat and we can say make more concise and you can make changes and so if you know a little bit about coding and you can uh you can actually highlight parts of the of the file and make Chang es and then you can press apply and we can press command y or you can select that right there and it made the change and it gives you full Precision over all of the files within your code base so I think you understand

10:15 the basic premise that there are different types of files over here and when you work on really big projects the amount of files might increase to hundreds or thousands of files depending on the size however when you're starting out it's useful to keep it as small as you can because it does get harder the bigger your code base is which makes sense right that intuitively makes sense as a programmer that's the same thing as a Vibe coder using AI decode that still applies so now let's go ahead and generate some code files so let's go ahead and open up a new composer window now that I'm working on something completely unrelated to uh what we were doing previously it's good good to just open up a new cursor window because all of the previous messages in your chat