Cursor 2.0 Tutorial for Beginners (Full Course)

Welcome to the complete cursor guide with Kihan Zang. He is the best developer I've ever met, and he's used Cursor every single day since it came out. In this video, he's going to give us the most comprehensive course on how to use Cursor on the entire internet. And by the end of this course, you'll be able to confidently use Cursor to vibe code landing pages, desktop apps, or anything you can imagine.

If you've been looking for a comprehensive, easy-to-follow, well-organized, and practical course that takes you from zero to hero, this is the right cursor course for you. You don't need any prior knowledge of programming. All you need is a computer. If you already have a foundation, the whole video is timestamped, so you can switch to any chapter that you want. And in the second half of the video, we're actually going to be covering the most advanced features inside Cursor. We are truly covering everything. And so if you're new here, make sure to subscribe, as I upload new videos all the time about vibe coding and building with AI. This is going to be a very long video. Let's dive in. Khan, welcome.

Hello. What are we talking about today?

Today we're going to be going through in detail what cursor is, everything it can do, and we're going to be building an MVP, upgrading it into something that's full stack and scalable and deployable, and we're going to be comparing it with other vibe coding tools.

Amazing. So, we're going to talk about why it's the best tool out there. Um, and we're also going to go over like all the features, right? Like basically every single feature within Cursor.

Yeah. We're going to be running through all their new features. They just dropped Cursor 2.0 with a ton of amazing features. We're going to be going through all of that. And we're also going to go through Cursor 1. We're going to use all of its features as well.

And Composer.

And Composer, their new model. Yes. We'll be talking about that today.

And then we'll see how it stacks up against, you know, Replit, Lovable, Bolt, etc.

Yeah. And we're going to be starting from the basics. We're going to be going through things like, you know, what a file is, what a directory is, all the way up into building and deploying an app.

Yeah. And we'll talk about databases. We're going to get to that later today.

Oh, that's going to be covered once we start scaling up our app. Yeah.

Hell yeah. Okay. Well, let's not waste any time. Uh, for those of you who are watching right now, I will put the sections and the timestamps on the screen right here. You feel free to skip ahead. If you are a seasoned developer, you may want to skip to like Cursor 2.0, the third section, if you want. But if you are brand new to coding, you do not even need to know what a file is or a variable.

You just need your computer. That's it.

You literally just need a computer. You are going to be able to build an app by the end of this video, and not just a basic app, like an app with a database. And we're going to talk about everything in this video. So strap in. It's going to be a fun one. All right. So tell me, what is cursor?

Thanks for asking. So, Cursor is an IDE, which is basically VS Code's cousin. If that isn't making a lot of sense, an IDE is an integrated development environment. And Cursor is probably the only real true IDE out of most vibe coding tools. And that's kind of lays the groundwork for why Cursor and VS Code is the previous generation, the most popular IDE.

And so, I guess shouldn't we go over the reasons like why we should be using cursor or like why use cursor over other tools and such?

Yeah, of course. So, as I mentioned before, Cursor being an IDE gives you a very solid foundation for kind of beginning your journey as a vibe coder. And this matters because you're not necessarily writing code, but you should know how all the fundamentals piece together and give you the product that you want. And having a more traditional IDE framework kind of around this is very beneficial. It's something that you can grow into, and Cursor is an amazing platform for you to just learn. So I think the first part about it is that it allows you to build a really solid foundation for vibe coding in general. You can grow into it, and the ceiling for it is very high. There's a lot of technicalities that you can jump into it. Real programmers actually use it. So definitely one of the best tools to build a strong foundation when you begin.

Amazing. And yeah, I think I think a lot of people sometimes start their project on other vibe coding tools like Replit, V0, Lovable, and then they move to Cursor when they want to expand it. When in reality, if you just actually take two to three hours to learn Cursor, you can just stay in Cursor because switching from one platform to another, it's kind of annoying, and Cursor has it. Legit has everything you need. That's how I view it.

And you know, it also works the other way around. If you know Cursor, you can switch to, you know, Replit, Lovable super easily. So, the skill is very transferable, but it isn't necessarily the other way around because of the IDE nature that Cursor has.

It just has all of the tools that you might need.

Yeah. It's like, you know, if you know how to use Photoshop, obviously you know how to use Canva, right?

Sure. Yeah.

100%. What's the next reason?

Yeah. So, the next point is that it's not a website. And this kind of bleeds into what we were talking about. A lot of the other competitors in the space are web-based, and that's actually more limiting than you might think. As in, they kind of only really optimize to allow you to build websites, and that's kind of a very interesting caveat. Although websites are the most common, you know, form of software, Cursor actually allows you to build basically whatever you want because it's an application that lives on your laptop, which means you could use it to build mobile apps. You could use it to build indie games. You could use it to build landing pages, websites, anything else that everyone else lets you build. But it also gives you the control to build anything else. Like you could build your own embedded systems, which means you could program your own keyboard if you wanted to. Like it goes like all, it covers the full range of what code can do.

Yeah. And the way that I, the way that I understand it, right, if you look at a popular tool like Replit, Replit is a website, right? As you said, it, it is a a website that you go to, and the code is stored on Replit's server, right? It is on their servers. Whereas Cursor, right, with Cursor, your code is on your computer. Um, you can basically create literally anything with Cursor.

Yeah. Whatever exists as code, Cursor can help you with. That is something unique only to Cursor, actually. And obviously you can use VS Code and actually learn how to code, but this is a vibe coding tutorial. Did you know that the next generation spends about 90% of their mobile internet time using mobile apps, not websites? That's why you should learn how to build mobile apps without writing a single line of code. Well, the most powerful tool in the world to build mobile apps is the Vibe Code app. And you can use it directly on your phone and ship it to the App Store. No coding required. Just describe what you want to build in plain English and watch the Vibe Code app generate a fully functional app in minutes. Vibe Code even uses Claude Code as its default model. Whether you want to build a custom productivity app, a social platform, a habit tracker, your idea becomes a reality faster than you ever thought possible. And you don't even need a computer. You can test it instantly on your phone and refine it with simple prompts. And when you're ready, you can literally send your app to the App Store. Download Vibe Code today and turn your app idea into reality in minutes, not months.

And Riley briefly touched on this, but point number three is that it is local. It's an app that exists on your computer. And this changes a lot of things. You know, you don't need to ask Replit or Lovable for the code. It exists on your computer. And similarly, you can drag and drop files. You can interact it with, you know, your desktop view. It's definitely more in your control. and everything just exists locally, which makes developing and streamlining things like down the line amazing.

Mhm. Yeah. They just don't baby you in the same way that um tools that aren't local do. But like again, that's why we're taking this course. If you just learn those few things, you don't need to be babyed. You can create a GitHub repo and and save your code, and then you can easily transfer it to any other uh coding.

Exact. That's exactly why, you know, if you learn Cursor, you can learn anything else and pick it up super easily. Like this is the Photoshop of, you know, code writing.

100%.

Yeah. So number four obviously is that Cursor is the most established player in the vibe coding space. They've been around. I've been using it for like years now, and you can't really say that about a lot of other vibe coding tools. And this means they have a large community. And I previously touched on this before, a lot of engineers such as myself actually use it to write code. They're fully professional, and it exposes you to all the, you know, extensions that you can get with VS Code. The community that you find, general community that you find like regarding any code snippets, you can technically take and apply to using with Cursor. Meanwhile, you know, if you're stuck in like Replit's ecosystem, for example, you might have to ask some Replit-specific questions and go through their forums. Like I could just use Google and I could take what I learned from there and put it into like.

And on top of this, a lot of the professional developers are using extensions for Cloud Code, for CodeX, and Gemini CLI, which are like known as being the best coding models in the world and will probably continue to be the best coding models in the world. You can just plug them into Cursor.

Yeah. Yeah. Of course. And definitely like the VS Code extensions that, as I mentioned earlier, Cursor is kind of VS Code's cousin. It can use all of the benefits that you get from VS Code, which is absolutely huge. I don't want to downplay this at all.

Amazing.

And so number five is obviously very recently Cursor released Agent 2.0. I know, and it is a very big game changer, especially for vibe coders, and I think for people getting started, especially. It takes a large chunk and kind of inspiration from ChatGPT's chat-based interface, and Cursor has always had kind of like a chat-based element to it, but this new UI kind of is built for people to begin with and kind of get their feet wet and start building immediately. So it's, they're taking a step into the direction of babying you, but also still exposing to you all of the like powerful features behind it. And I think at this point in time, Cursor 2.0 is actually probably the most heavyweight like AI like.

Coding agent.

Coding platform. Like it can use agents multiple concurrently. That is, you know, just so powerful.

100%. You still have everything that we just talked about, like all of the power of Cursor, but it has this nice little layer on top that makes it almost feel a little bit like ChatGPT, which is nice. Which is with the VS Code, uh, with the extensions that we'll talk about later, they're going in the same direction where it's Cloud Code, but it no longer looks messy. It's nice and easy to use.

Yeah. Yeah. So it is kind of like, you know, with code, you get really down to the low levels, things get scary, you're looking at like squiggly lines and small text, you know, VS Code does a great job of, oh, V-code and Cursor do a great job of packaging it in a friendly way, and Cursor takes it one step further, adding a bunch of AI capabilities.

Amazing. All right. Well, I now know what Cursor is. I know why I want to use it. Well, let's let's use it.

Yeah, let's hop right in. So this wouldn't be a full, in-depth guide without me showing you guys the basics of how to download Cursor. So, I think you can just go straight to cursor.com. And here, you know, it automatically tells me that I'm on Mac. I'll just download for Mac OS.

You can also download it for Windows.

Yep. I am installing this right now live for, you know, the sake of the video. And I will be opening the Cursor download.

It's probably been a while since you've downloaded Cursor.

Yeah. Well, as soon as I can. There we go. So, now, you know, drag it into the applications. And we should be able to just open Cursor. There you go. Simple as that. We now have Cursor. This is probably what your Cursor will look like. I've used VS Code, so it probably pulled some things over, but this is, uh, you know, if you download it for the first time, you open it, this is probably something what you look like. I have some projects that I've been working on. You might not, but that should be the only difference.

This right here is kind of the biggest difference between other vibe coding tools and Cursor. It's like Cursor doesn't have a text input field that says, "What do you want to build?"

Yeah.

Right. Which makes it scary.

Yeah. I, I think first of all, they should probably just add that. But second of all, um, yeah, talk us through what these things mean and like what it means to create a project.

Yeah, of course. So to kind of break it down a little bit further, a project is basically just where the code lives, and the code lives obviously in a file, and the files live in a folder. And so think about this as something very similar to like navigating your Finder, right? Like you have desktops, and then you can have folders here, right? For example, I can just open this folder right now in Cursor. I could call this, you know, rename this as like, uh, let's see, cursor video. And I can go ahead and open this folder. And for this video's sake, it will serve as a project. So I can just go straight into desktop, find cursor video, and open it. And so this brings you to project view. We're currently in editor, which I like to call Cursor 1.0 because this is Cursor 2.0. But, you know, this is what I meant by you get to build the foundations really, really solid from the bottom up.

I think I think it's important to note notice how he created an empty folder, right? He created an empty folder, and that's basically how most Cursor projects start if you don't, if you start from blank, it's an empty folder. And you can tell because on the left side there, there's no files, right? We're in a folder, which people call a directory in coding language, I guess.

Yeah, folders and directory are interchangeable. Often times you'll hear one or the other. Uh, they mean the same thing, and this is what I meant by like, this is by the books, the same way as all code projects are created. You make a folder and you name it something and you're like, all right, this folder is going to have everything related to, you know, this project.

Amazing. And so let's create a file.

Yeah, of course. There are three main parts of Cursor editor. On the left, you have where your folder kind of is broken down into files if you have any files. This is the middle where normally it'll show you what's in the file. This is the right, which is where the AI kind of gets to work. So, you know, there's two ways to make a file. I can just go ahead, you know, click new file. This actually will tell you to make a new file, and I can make this example.py. And so, you'll notice immediately that most the files contain a dot and then a following section. And that normally labels what type of file this is. So, .py stands for Python file. If I click enter, it's literally an empty file. Similarly, you can do things like text.txt. .txt obviously stands for text extension. And to jump a little bit into the AI, I can tell it, write me a poem and put it into poem.md. And .md stands for markdown, which is just, you know, a different way to render text.

And if he had already created an empty poem.md file, it would have added it to the existing one. But since he hadn't added it, it created a new file you see on the left called poem.md.

Yeah. And so that's one of the amazing parts of Cursor. It can go ahead and create things for you and edit things. So if I said like, write me a shorter one in text.txt, right? It will go ahead and put a shorter poem into the file that I've already created. So now it just wrote me like a four-line poem. Perfect. You know, about coding. Makes sense. And so this, we kind of just wanted to give you guys a view of what files are. Very basic. You can put text in files. You could put files in folders.

Amazing. What did you use over there on the right actually?

Yeah. So this is their AI feature. It's their agent. And so the agent in technical terms kind of just means it's the same thing as AI, but they built a few things on top of AI to make it work a little bit better as you would want it to. So, you know, if you ask ChatGPT, make me a file, it's going to be like, I can't really do that. But the agent is given tools that allow it to create files, edit files, and do all the things that we really need it to do to write code. And so I just showed a few capabilities like creating a new file, editing a file, and it kind of elevates what AI can do. And so this elevated AI, we call agents. I could actually demo it writing code right now. So we've only just told it to wrote a few like poems and some text. I could say, make me a simple game in example.py where I guess the number. And so this will probably take it like five seconds. It's a really short game where you're just, you know, guessing the number, but it is it I just want to highlight that it exists as code. It's really simple, and we'll be working up from here, but now we have a file. You might not exactly know what to do with the file. So, the best part about Cursor is if you truly have a growth mindset and you're trying to learn how this works, I can just ask it, how do I play the game? And it will tell me. And so, we've been kind of skimming over what is going on. Basically, you know, it'll also reply to you. It said like, I created a poem. I've been skipping over that because it just tells you what I, it just kind of echoes back what I asked it to do. But now it'll be saying things like, "Okay, I'll run a game from your terminal." This is interesting. It's currently running the game. And so this is interesting because play in your terminal. It'll tell you, play in your terminal, open a terminal, navigate to your project directory, and run the game. So now it's giving me instructions to use this file of code that it just wrote for me. And so a terminal is basically a way for you to interact with your computer. And to interact with a computer, it can execute code, and there's no, you know, play button that allows you to just run this file, which is why it is a little less friendly than like Replit or like, uh, other tools, but we can learn it with strong fundamentals on how to start from scratch. Open your terminal. If you don't know, there's a terminal thing up here. You can do a terminal. There's also a shortcut for it. Pretty nice. But it tells me to hop in here. I'm already in here, but we'll copy it anyways just to show you that this AI is not lying. And so I would just be running this.

So, and by running this, you're copying that little string and pressing enter in the terminal.

Yeah.

Okay. And that's what it means to run.

Yeah. That's what it means to run is you take the string. You can type things into this terminal, right? And this terminal here is identical to the terminal that you, you may have seen on your computer if you were to just type in Spotlight Terminal. Yeah. Open up a terminal. For those of you who are completely untechnical, you know, two years ago, the terminal was scary. If I was ever reading instructions for anything and it said to open your terminal, I'm like, I'm out. I'll pay money to not have to do this.

Yeah.

But after, you know, learning how to use Cursor, it's actually kind of fun to open the terminal.

Yeah. You know, you feel like a hacker. You feel like, you know, you know what coding is. This is where strong fundamentals truly kick in.

But the important thing is that is identical to the terminal that you opened up, right? Like it is. Yeah, it's the same exact thing.

And I, you know, thanks for slowing me down. I was going a little fast. Uh, I can actually break this down a little more. This tells you to navigate to the project directory. I basically paste it in and I click enter. And now it'll tell me, you know, in the beginning, it will show you what directory you're in. So this means I'm in the home. This means I'm in the cursor video folder, which you saw me create actually. And this is how I run the game. It says run the game. And I'll just copy this. I'll paste it in. And once again, as you can see, these two are the exact same. And we can play a number game.

And so now we're playing a game within the terminal.

Yeah. All within like, you know, three minutes, right?

So obviously this game only I can interact with text, but that's why it took so little time to like.

Guess, guess a number.

Yeah. You know, like, uh, 67. Too low. Okay. We can do some quick math. 80. Too low. Okay. 90. 95. 92. 93. 94. Okay. Perfect. So yeah, that was kind of like, it does work. It did like tell me that I got it right, and the temps do increment up. So, you know, pretty simple little program. This is the first thing that you can create. Not as useful as some things that we will be building later today, but great way to get started and introduced a lot of things like the terminal, files, different types of files, and now we know where code lives. So, really great start to setting a strong foundation.

100%. That was super, super interesting. What do we want to hop to next?

So yeah, now that we have a very basic from the bottom up, I'd like to also show you guys a little bit more of a repo that I actually was working in really recently. And so I can go ahead and create a new window. I can show you that this was a project I was working on. And this is what kind of like a project would look like after it exists. And it looks a little scary, but that's why I kind of want to take the time to break it down for you guys. As you can see here, this is the main folder. It's glass AI chat. Check out the last video. Me and Riley made. It gets pretty big. And all of these are folders within a folder. So these are folders, and they have more files in them. And these are folders that can have folders inside of them. And so these directories, they make a really big nested thing. And you'll notice that there are a lot of different types of files, right? You know, we got the config.js, we got the .ts, the .css. And all of these once again just mean that, you know, the different coding languages. So what exists in here is JavaScript. In the previous example, we were using Python. You can really quickly tell by the ending extension, and also VS Code will go ahead and give you a little icon to make it even easier. And I did want to highlight a little bit about how like common patterns you might see when you explore larger repos, especially since we're going to be telling AI to write these things, and it'll probably look something similar to this later in the video. And so you're going to see something like backend, assets, source, source. I just wanted to briefly touch on a little bit of coding principles where normally there is a front end, and front end is in this case source, and it will contain components, and it'll be the things that you kind of see. So if we look at Cursor itself, everything that you can see and click on, it's a component. This is the front end. It's the thing that you view and interact with. And then the back end is basically everything that you don't necessarily see. So for example, obviously Cursor has a bunch of data. I can use AI. These are all features. This is just what it looks like. I can say hi, and it's saying hi back to me. It's using the back end. And all that code belongs in its own folder. And so that's kind of the breakdown of larger folders and directory structures. I just wanted to really quickly talk about that a little before we dive in deeper. So it's not too scary once we start progressing because we do progress really quickly with Cursor.

Yes. And we're going to build a really cool app in the next section. And as you'll see, we're going to do, we're going to be using AI to write all the code. So, as you said, it moves fast, but um, stay patient. It'll all make sense, especially as we get closer to actually building and using the app that we create.

Yeah. Yeah. So, I guess next we'll go ahead and do something that a lot of people love to use AI for. We're going to go ahead and make a little quick landing page. And I want to resume right where we dropped off. I was showing you guys this. We're going to go to Cursor 2.0, which is agents. But currently, this is working on the project that I was just, you know, showcasing. So, I don't want that. If you want to open a new one, new window. I'm trying to find new window. Oh, right here. So, this kind of brings you back to the original landing page that we were on. And I can go ahead and, well, I'll put it in the cursor video. Yeah. So, in here, I'll go ahead and delete these files. So, so now I want to show you guys, we're in an empty folder now. And up here on the top left is kind of how you switch between Cursor 1.0 and Cursor 2, aka Editor and Agents. We're going to be using Cursor 2.0. And, you know, this is the old chat. I was asking it to write a poem. I'm going to create a new chat. And I'm going to go ahead and say, do some research on the company Vibe Code and create me a landing page. Run this landing page locally when you are done. So, I'm going to go ahead. Oh, I want to introduce these features. Composer 1 is a model that Cursor themselves have released. And here I can pick which model I want to use. I will go ahead and use Sonnet 4.5. I like it the best, and we'll explain and break down all of these little, you know, widgets and things in this chat. But actually, this is what I meant by like Cursor is taking a step towards being a lot more beginner-friendly. This is basically, you know, asking it to build something that you want. So, we're going to go ahead and ask it to build this.

So, let's talk about this for a second. So, you just entered a prompt. You said, "Do some research on the company Vibe Code," which implies that it's going to do research, which is pretty cool. So the web agent has the power to use tools. One of those tools is searching the the internet. And if you give it a hard question and you tell it to search the internet for a while, it'll search like 10 pages sometimes or it can read an entire documentation page. And you can see here it's done research. Now it is generating the code.

Yep.

And then it's going to run it locally. You want to double-tap on that a little bit. Running it locally. What does that fully mean?

Oh yeah, running it locally. Of course. Thanks. Thanks for reminding me. So, as I mentioned before, Cursor is great because it is local. All these files exist on my local computer. I can after this pull it up in Finder. And running it in local basically means that I'm going to execute these files on my computer. And what this means, if you guys want to get a little more technical, is that most of the websites that you visit are files just like the ones being written right now, run on a server. And the, there's no difference between a server and a computer. They're the same thing. So somewhere out in South California or or North California or, you know, the East Coast, there's a bunch of computers running a bunch of code, and I obviously don't need to rent a computer. I'm going to just run it on mine. So that's what I mean by like I'm going to run this locally.

And it speeds up the development process by a lot.

And it's super easy to use because it'll give you a little address that you paste into your web browser, like, you know, if you use Google Chrome, it'll work, and it'll just open it up right there.

Yeah.

Which is nice. So, it's writing some code. I've built a beautiful modern landing page. And so, now it's running the command to run it locally. Let me run it locally for you. Excellent. What I've created. So, running it locally. Once again, we haven't been doing a good job of reading it. It gives you a rundown on what it's created and it tells you that it is now running locally, which means my computer has it and I can access it here.

So, you copy that address, go to your browser.

So, let's see. I can go and paste in the address that Cursor gave me.

Sometimes that happens. You know, I have a good idea why, but let's let's learn and ask it. This doesn't show anything.

This is great.

Help.

This is great. And this is one of the, one of the pros to using some of those other tools is like it kind of just naturally does this. But again, this, this is something that happens every once in a while, and you just ask it why it's the case, and then it will likely just fix it. I think the best part is actually to highlight that a lot of the other tools will naturally make it work for you, but when it doesn't work, you have no community support. Asking the website or the tool itself is going to lead to varying results because something broke, and you don't have as much control of it, and it also doesn't have as much control in the system because it's not your system, it's the company's system or whatever product you're using system. So now that everything's kind of in my hand, I can truly just ask it like why, and it can tell me, and I can take why and make it work, which isn't necessarily true for a lot of other tools. But it'll ask you permission every once in a while to run some things. And I see it's trying to run the server right now on my computer so that I can see it. It's just verified that the web page is running. And it once again tells me to access it at localhost 8000. So, oh, right here. Perfect.

Amazing. And so, ooh, that nice little like fade when you scroll.

Good animation. Yeah, honestly, very cool. We like to joke that this is AI's favorite color theme. Like blue, purple, like, yeah, everywhere AI makes it. We'll actually get into this later. We'll make a rule that says don't use this color. I do want to point out that it did like scroll up for a sec. Like we just released pinch to build, um, which is the new feature of the Vibe Code app. And so, uh, it found that on the internet and then included it in the landing page. So, it makes it super easy to create quick landing pages. Um, which is really great.

Yeah, you know, I'm, I'm reading these and everything is real. So, it did pull a lot of useful things from the internet and it did write us code for a landing page. Obviously, we can continue iterating and we can deploy it later too, but just wanted to show that, you know, we've unlocked the box that we can talk to and be like, ask it to build things. So, this was a little bit of a sneak peek into what Cursor can do, some of the basics. We're going to go and dive in a little bit deeper, uh, and go and actually build an MVP of a product that is a little more complicated than a landing page, and we're going to continue iterating it as I show you guys the full feature set of Cursor 2.0. So, I guess to reiterate, to reiterate here, we we've talked about what Cursor is. Then, we went over all the basics, right? We talked about all of the things that you need to get started. We downloaded it. Now, we're going to build something that you can actually put on the internet that is an app that has utility that you can use either for entertainment or for work, etc. Is that right?

Yeah. Yeah. Basically, the, you know, landing page, I feel like it's a, it's been beaten a lot of times already. You know, a lot of people claim that they do it, you know, it's a, it's kind of boring. Let's build something that's, you know, fun and useful.

I like it.

A little more complicated as well.

I love it. And then we're going to learn in this process, we're going to learn Cursor 2.0, which are their like brand new features. Yeah. Amazing. So, back here, I am going to go ahead and switch back to the editor because I want to see what is in the directory. These are the files that it just wrote me. Once again, I'm going to just clean up all these things because I want to use this to create a meme generator. That's what I'm going to be working on. So, you know, these chats closed. I don't, you know, we're not writing poems or making a landing page. We're going to make a meme generator. So, first thing I want to talk about, there are three modes. You can actually use Shift Tab to switch through them. Pretty nice. All of them are very useful. In the previous example, I was asking it questions. If I purely wanted it to answer and not run the code for me and edit files, I can use Ask mode kind of for that's what I mean by like it is a great product for you to learn and upskill alongside of it. Agent obviously is what we were using. It has full control over all the tools. It can write things. It can edit things. It can, you know, run the server on your computer.

But if you also ask it, if you say like, don't write any code, just tell me blah blah blah, it'll still just answer you and it won't actually create any code.

Yeah. And then Plan mode also, we we can use this now actually. So we'll go ahead and try Composer 1.0, Cursor's new model. And we're going to say, I want to create a meme generator. Can you make me one? I want there to be able to select an image as a template and put text onto the image. Afterwards, I should be able to download the meme. Uh, allow users to resize the text, and the text should be white with a black border. Pretty basic. Clicking enter, and it's going to plan. This means it will not actually write any code or create any files for me. And one key thing about Plan is that it will ask you a lot of questions. So, that's actually really good because I did skip over a lot of these things, such as technology preference, text positioning, and additional features. If I had no idea what this meant, I could ask it, "Please break down options for question one." And so, it'll go ahead and tell me. And I could have used Ask mode as well. I think basically the point is you can ask it questions, and it will answer it really well. So, it's recommend. It gives me like a little bit of details about React and Vite or Vite and vanilla and Vue and other. It's recommending that I use React or vanilla JavaScript. I'm just going to say go with vanilla. And I'm going to answer the additional questions. Unlimited text boxes. I want unlimited text boxes. So question two is B. And additional features. Question three is A and B. So perfect. It did catch a few things that I forgot to specify, which is really good. I definitely winged this prompt. You might want to do some prompt engineering, but if you're too lazy to do that, go ahead and try the Plan mode. So perfect. Now, I've kind of filled in all the blanks for it, and it'll generate me a plan. And this plan exists as a markdown file, which we kind of briefly mentioned earlier. It's a better way to cleanly display text. And it actually exists as a file. So, oh, maybe not.

I don't think it's added it yet. Maybe it just created it. Or you have to hit build.

Yeah. Well, it has a temporary file. This is a file that kind of walks you through its plan to create a meme generator. And so it'll tell you things like single page web application. And this is great to kind of jam with Cursor. So I can go to Ask and continue asking questions about the plan, being like, oh, like tell me about like what script.js is for, and it'll answer my questions.

Amazing.

Yeah. And so obviously you can go as detailed as you want, ping pong back and forth. And, uh, basically when you're ready and you're happy with the plan and you kind of understand what's going on, you can go ahead and click Build, and it will go ahead and start printing code. And so one thing I really like about Composer 1 is that it is insanely fast. It is a lot more fast. [laughter]

It is so much faster than Sonnet 4.5 and GPT's models. And that's one of the main reasons to use it. I do think, you know, on their internal benchmarks, it outperforms them. I think there's a lot of jokes being made about internal benchmarks not meaning anything. So for the more heavy lifting, I actually still prefer using Sonnet 4.5 as my go-to. But, you know, for example, like this done already. Amazing. So we'll go ahead. If you click on these three, like click on this thing, you can kind of see the files. Uh, if you want to read over some code and like get a grip of like what is going on. Similarly, we can kind of see that these three files now do exist in the directory. And I'm going just go up to trust Cursor and keep all. So, one thing I actually didn't realize that Plan.md file, that wasn't in the codebase. They created that as like a little temporary file that the agent has access to kind of.

Yeah. Yeah.

Oh, okay. Very interesting.

Yeah.

That's pretty cool.

Yeah, this plan is fed into context when you click build, and it will operate with this plan in mind. Also, another nice tip and trick, you can actually edit these things, and it will be fed into the agent. So, I could say like, function to redraw the entire canvas. Honestly, I should have read the plan a little bit more, cuz I have no idea what this is. But I could have said like, you know, I want text to be, I want the default, I want default color to be blue, and it will actually build it when I click build. So, I forgot to mention that and showcase that, but that is a really nice feature that allows you to kind of both view the text in a nicely displayed way, but also modify it and feed it real-time. So, you know, while you're asking questions about the plan, you can, you know, find out that you don't like, you want to change something about the plan. And it is really annoying sometimes to regenerate the plan over and over again, cuz the AI has to spit the whole plan out again. But you can just edit it in line here. So, that's a really nice feature by Cursor. Continuing on though, apparently we have a meme generator. I really want to play with it. So, I'm just going to go and ask it, can you run this locally for me? Going to close the plan now. And these are the files. The same way that you ran the landing page, you now want this meme generator that you created and planned with AI. You want this to run on your computer.

Yes, exactly. And, you know, it's asking for permissions again. If this gets annoying, you can go ahead and allow. This way, next time it won't ask again. So that'll be good for when we continue working and asking it to run things locally. But now, great. We have a meme generator.

And look at what color it is again.

Oh, it's AI's favorite color. Now, I actually did go ahead and, uh, collect some memes while I was running through this. So, meme run through. There are some memes and public. No, wait. What? Where am I? Yes, there we go. Uh, sure. Great. Text. Oh, what? Enter text here. Uh, WD. Add text. Okay. WD or arrow keys. Amazing. So, we have our first meme generator. Let's see. Oh, both the text. I see we found an error. WD was rewritten. Oh, what? Hm. That was weird. I'm not sure if I did something wrong or the code is broken. Either way, let's see if I can download it. Oh, well, let's see. We do have the meme now.

You can download it. Um, and and it's good. So, this is a fun thing. Like, he created a project on Cursor, he ran it locally, and now he's testing it locally. And like while you're using it, you should just keep track of the things you want to change about it, right? The first thing that I notice is you notice that the contrast is not very good. Like, it's white on that white background. We should definitely be able to change the color of the text. You know, that's one thing that I would like to fix.

Yeah.

Along with the background.

For sure. For sure. The background is heinous. Absolutely. So sick of this color. As I agree with Riley, the bordering on the, you know, white text is not very well. Normally on the memes that you read, they got the thick black border. So whatever background it's on, you can either see the white or you can see the black. That will be something I asked Cursor. And now that we're back to editing it, we can actually do that. But before that, I want to showcase a few things. The first being there's like, if you click Control Shift P, you can create a new Cursor rule. For this example, I'm going to say styling, and I'm going to say this is going to open it. This does exist as a file. I can show you guys how to find it. And there are multiple ways to make rules. This is just what I'm most comfortable with. I'll show you guys other ways right after this. But there's a few options. I can apply it intelligently, apply it to specific files, and manually apply it. I'm going to keep this one as auto-apply. Do not use purple/blue gradient or colors as like the primary color. I'm just going to keep that there. And next time I.

Run a command. I don't need to mention it, but it should take this piece of feedback or this rule and apply it. So that's really cool to show you guys how I can add rules or see rules later.

There's a section here. Let's just make this a little bigger. Rules, memories, and commands. Here you can see that, uh, oops, project rules always applied styling.mmp. This is exactly what we just made. We can similarly make rules right here as well, like add another rule.

And there's two sets of rules. User rules means they follow you regardless of what project you're in. You know, all the folders, whatever folder you're in, that rule exists. Project rules means, you know, while I'm inside of this cursor video folder, these rules will be applied. So, I can actually create another rule. Let's just say something like emoji ban, right? Like AI also loves adding emojis everywhere. Never add emojis anywhere, including in your text response unless explicitly requested.

>> I like it.

>> Yeah.

So, great, you know, two ways to add rules and you can obviously always see them here. For those who are a little bit more technical and like to truly get a grip of like all the rules and stuff, 'cause you can actually do a lot with rules. You can put them within folders within folders. So you can put them in subdirectories. If you do in your terminal, `ls -a`, you can see that there is now a new folder called cursor. If you go and so `ls -all` means show me everything in this folder. And so this is the same folder as this. As you can see, you will be seeing the same things as, let me do some space management here. You'll be seeing the same things as like `script.js`, `styles.css`, and `index.html`, and also this cursor with the rules. So these are the rules that I just specified. It only applies for this project.

What I was saying is that if I create a new folder, I'm just going to name this assets because I will be putting more meme templates in here. I can actually similarly have something inside of the assets folder and basically these rules will apply only within this folder. So that's a little cool. You can start nesting rules. This once again, uh, goes back to, you know, if I had different folders for front end and back end and I wanted to have different rules. It allows for that. So it's really good. Cursor rules, definitely use them when you can. But I'm just going to restore them to its original rule settings. So, cursor rules, we have the emoji ban and the styling that bans the purple blue gradient thing. So, that was a little bit of a rundown on rules.

Now, back to making it better. If I just say anything right now, it'll probably redesign it to get rid of the purple colors. And let's see what, what, what problems do we have? Oh, we wanted the border to be thicker, right?

>> Um

>> for the text.

>> Border to be thicker. And then also change the color of the text. I think would be cool.

>> Okay. Gotcha. Please allow users to change the color of the text.

>> I think that would just solve the problem in full. Um, 'cause I could have made it black.

>> I would like to, or we can do both. Also make the black border thicker, 'cause I think the normal, the standard meme is like white text with black borders. So I'm trying to recreate something similar to that.

So let's see. It's, uh, here. And do I need to refresh this? Yes. As you can see here, now we do have text color. So I do think the change went through. It is still using that color. So let me see if that rule is applied properly. Let's see. Rules, D styling. Do not use primary gradients or colors.

>> I think since it's already created it, if this exists,

>> this exists already.

>> Please fix it.

>> Fix it wherever you find it.

>> Personally, I don't think this is how I would use rules. I wouldn't make rules on like proactively going back. I would just create this rule. I would just tell the agent right now to fix it now and then, yeah, then in the future it won't happen again. You know,

>> I think, I think a good part is probably a better example would probably be if I said redesign the app. This will refer to the rule and never like use it.

Similarly, you can also see down here active rules and the context used. And the context used is actually really important. You probably want to stay, you know, as low as possible, which is why a lot of people recommend you whenever you move to a different task, start a new chat. I'm going to go and create a new chat because redesigning it is kind of a different feature. So, if I tell it now to redesign the app, I'm pretty confident that it will not use no purple and no blue. So, if I just say redesign the app, it will go ahead and start spitting out new code. And we can see here that, yep, active rules, emoji ban, and styling. So, I expect to see no emojis and I expect to see something that is not blue or purple.

[laughter]

>> Hopefully, they don't choose like green and red or something.

>> Oh, goodness. Yeah.

>> What's their second favorite? I know their favorite color is like a purple blue gradient. I don't know what their second favorite color is.

>> I don't know. But, you know, normally we just kind of give it direction for what we want.

Cool. So, it just told me that it's done. I am going to accept the changes and let's check it out. Oh.

>> Oh, it's nice. It's nice orange. I like it. This is very much, um, kind of almost like teenage engineering. If they, if they didn't have like rounded edges, it would kind of look like teenage engineering a little bit.

>> I see it. Yeah.

>> It's kind of a vibe.

>> Yeah. Yeah.

And before I forget, I did promise to continue going through all of these features.

>> Let's do it.

>> This I wanted to showcase. The new cursor 2.0 allows you to open a browser inside of cursor itself. So if I click this, I just want a browser tab. Boom. Now I can actually just view this localhost meme generator directly in cursor.

>> And now this is starting to look a lot like the other VIP coding tools where it's all self-contained within cursor.

>> Yeah. And it has the same benefits as if I had any errors on the website. I could go ahead and, you know, reference to it here in the chat. Since we haven't had any errors yet, we'll just go along and continue. These are, you know, similar features that you see across the board of a lot of vibe coding tools. We have like select element kind of like lovable. I can say like, oh, like I want you to change this or that. And this is the terminal. This is a terminal for the website that's being run. So logs will come out. Pretty cool features. This came with cursor 2.0. I really like it. Um, I do think it streamlines a lot of things.

But let's see. Let's just play with it. So that's another thing because we are starting from the fundamentals. This is the folder structure. I've created this asset folder. We can directly just use Finder and put the photos that I had directly drag and drop into the assets folder here.

>> Yeah, because it's not just markdown or text files or JavaScript. You can also literally put MP3s, MP4s, you can put any type of file in your codebase because remember this is just a folder on your computer that all of this is in.

>> Um, and so now we're going to load it up with some good memes.

>> So yeah, these are like some memes that I compiled before the video, you know, quick, uh, seven memes. I'm going to go ahead and drag and drop them straight into the assets folder. Now, we can cursor, you can also open photos, uh, sorry, photos. So, you can see the collection of images that I have, but yeah, I'm going to add these as base templates for the meme generator next.

So, you know, that's great. I'm going to close this chat to give myself some more space. So, this is the website we're working on. Oh, yeah. This is the website I'm working on. This is the agent that I can talk to. And we have our rules. Let's see. Let's actually go ahead and edit a rule. So, I'm going to go ahead just to show you guys rules in practice. I want, I want a clean minimalist design. We'll see what it does with that because we will be adding more features and I don't want to spend too much time like

>> messing with the design.

>> Messing with the design. So, I'm going to go ahead as promised and say now that we can see we have an assets subfolder and it has a bunch of photos that I want to use as templates. So, I added, uh, create a new chat for this 'cause this is a new feature. So, oh, this is a new chat. Okay. I added a folder named assets and it has some photos that I would like to use as templates for memes. I would also like to still have the ability to upload my own image though. So, basically, I'm just asking for a feature request.

Gonna go ahead and send it and it will start making changes.

>> Amazing.

>> So yeah, let's see.

>> Dude, it is really fast. This composer one.

>> Composer is really fast. All right, cursor just added the feature. Let's accept these changes and then, uh, Oh, give me the browser back. Where did it go? Great. Now I can upload an image. Okay, where's my? Oh, here it is. All right, templates. So, I just clicked the refresh button. When files are uploaded, sometimes they lag a little before being rendered. Clicking refresh. Now I can go ahead and make a meme. Add text. Let's see. I use cursor. Add text. I use cursor. Add text.

>> I think it, it when you pressed enter the text left.

>> Oh, wait. What?

>> I use cursor. I use cursor. I use lovable claw codeex and v 0ero. Okay. Well, okay. There was something wrong. So there, there, there are a few things broken, you know, with the meme that I'm trying to make. So obviously it replaced this text with something else and, uh, it's not like spacing it properly. So we can ask it to fix these features. Now, this is good. This is good when you, if you're, if you're not running into any errors, you're not making something, uh, fun enough. And so all you need to do is literally express to the agent what went wrong and it should fix it. And I think actually I want to do showcase this as a new, like one of cursor's new features. If I say like, I use cloud code cur codeex, uh, v 0 and replet and I add this to canvas and it's just overflowing here. I'm pretty sure I can just tell the composer to go and look at the website and make spacing, like adjust automatically. So look at the browser. So this is the at feature. It allows you to specifically point to things to look at. So it's basically the same thing. Oh man. So I just installed cursor so I don't even have Chrome right now. So let me go and use Chrome. Okay. For the video, we'll probably

>> I like it. Okay. So in order to use the browser, right, it sounds like you actually have to use Google Chrome for the browser.

>> Yeah.

>> Okay. So in order to use the browser and cursor, you need, you need to use Chrome. We are just now finding that out and that's okay.

>> Yeah.

So, what I was saying is like, look at the browser is basically the same as typing `app browser`. So, no, I think I need to restart my cursor. So, just so we're back. I just installed Google Chrome, but I was going to say, look at the browser is basically the same as saying `@browser`. Oops, not branch. `@browser`, look at the overflowing text example. I want to be able to split lines. Great.

>> So, yep. Let's see if it will fix this. And so, this is, it's going to go look. Uh oh. Check the browser and it captured a screenshot. Yep. Yep. So, oops. Sorry. Yeah, it is looking at it. The text rendered in a single line causing overflow. Yep. It found that out. Adding support for multi text line. Great. Cool. So,

>> so you can literally tell the agent that builds your code to go look at the browser as you use it, which is something that like a year ago, which like was not possible at all or even like three months ago.

>> Wow. It's done with the change already. I do have to say though that when you use this feature, it eats a lot of context. So, I mean, I literally asked it to do one thing and it's 20%, 25% done. Just keep that in mind when you are using this feature. I don't actually prefer to use `@browser` for that really reason, but I just wanted to showcase that this is something you can do. So, let's accept these changes or close the browser too. Anyways, I like this browser anyways. So, let's check this out. Trying to make my same meme again. Um, text. Oh, so now lets me do new line. I use Claude codeex new line lovable replet and bold. Add text. Oh, amazing. Now it fits.

>> There we go. That's cool. Yeah, I can actually finally finish this meme. Oh, maybe let's see. Um, I use cursor. Nope, it replaced this text again. So, that's interesting. We're going to go and tell it that issue specifically. So, I feel like this issue is a little more complicated. There must be something wrong with the code, uh, on a fundamental level. So I think it's a great opportunity to showcase another feature that is if I go and create this agent and oh, yeah, so cursor 2 lets you run multiple agents concurrently, but it requires a Git repository. So a Git repository, if you don't know what it is, is basically how coders version control their code. If you don't know what it is, it's not that complicated because you can ask cursor how it works. This is, I can say like, I want to set up Git for this project. It will go ahead and do it for me. Um, if you don't know what it is, I'll probably ask it to tell me a little bit more about Git. You do need to download a few things, but I already have it downloaded. If you want a separate video on how to get started with Git, I'd be happy to make one with you, Riley.

>> Let's do it. Um, basically, he's setting up a way to save your code in checkpoints. That's kind of how I, as a vibe coder, I think about it. It might not be technically, but like it's just like basically you're creating little saves of your project. So if you were to completely torch your project, especially as it gets more complex, you can always go back to a checkpoint.

>> Yeah. No, no, you're absolutely right. It basically is just checkpointing and it's telling me that it's initialized my Git repository for me. So now, you know, if I go to a new chat, I should be able to run multiple concurrent agents. So yeah, just a warning, you do need, you know, cursor's max plan to have this feature available. I didn't know that so I had to upgrade yesterday. But I can go ahead and now select multiple agents. So I can say I want set GPT and composer to give this a try. Perfect. When I add the second text to a meme, it overwrites the first text. Please make sure this does not happen. I want to be able to have different text on the image.

So yeah, now as you can see this view, there are three agents thinking concurrently how to solve this problem.

>> That is actually insane.

>> Yeah.

>> And you can see that they, they conveniently made it so composer one is going to get done so much faster than the other two.

>> Yeah. That's probably why they were optimizing speed so much. Yep. Composer's one's done already. It's telling me, let's see, here's what I've changed. After adding the text box, it's immediately deselected. Okay, that makes sense. So, it's, it's telling me the issue is that when I was editing the text, it still had it selecting, you know, it was still selected. So, that's, that's a, you know, I could believe that. Let's try this solution. We're going to go and try to say like, I like cursor at the canvas. I like code. Nope, it still replaced it. So, this solution failed. Good thing we have two more running.

[laughter]

>> Wait. So, okay. Talk to slow down there for a Go back to that what composer one, no, the, the composer one view when you said, okay, let's try that one, what you were, you were trying the version that composer one tried to fix. How would I then switch? Like, once Sonnet 4.5 is done, which, wow, it's taking a lot longer than composer one, how would I switch to the version that it does? Interesting. They're not doing anything but planning. Um, but yes, to answer your question, how to do switches, you can undo apply. But basically, when all of them are done, they'll, you know, prompt your FE.

>> Oh, you just select which ones you want to apply.

>> Yeah. Okay.

>> It'll give you a warning like, oh, you're going to overwrite the other agent's work. No, you know, normally that's fine 'cause I'm doing one feature at a time. That's another benefit of having new chats often. If I was like continually prompting with multiple agents, that would get really messy. But that's why every time you can start a new chat.

>> Okay. So, this one's still thinking. All right. Or exploring. Oh,

>> okay.

>> Okay. So, now it's writing code.

>> It's found the issue. It's writing code. Let's see. What are you doing? Get to work. All right, let's see. Codeex. So, I don't know. This might be an issue on cursors. And this feature did just come out, like I don't know, this week. It does seem like Codeex is kind of stalling. Uh, this one, it looks like it is the same update on deselecting after adding a new text field. This is what Riley was saying, but like, how do you switch from each agent? I just apply all here. It's going to ask me, oh, local, do you want to overwrite it?

>> Wait, wait, slow down here. I, I want to, I want to understand this. I want to make sure I understand this. Let's say you were just using one agent, right? If you were just using one agent, you hit apply to apply the code changes because not only can it generate code, it can also change the code, right? And you, when you apply, you're basically applying all of those changes.

>> When you use three at a time, you can apply just one of the agent's changes or you can unapply them. So you could apply test, if it doesn't work, unapply them, go to Sonnet 4.5, apply their changes, and, and kind of sequentially test.

>> Yeah. Okay. Absolutely correct. So, you know, I can undo apply here. I think the reason I didn't undo apply was so now it won't complain because what you just saw was I did not unapply. So now if I try to apply this, it'll give me this warning again. Basically, it's the same thing as what I just did. So I currently have Sonnet 4's changes applied. If I undo the apply and then apply composer, won't it, it won't complain to me. It's kind of just a friendly way to tell you that like, hey, you're going to overwrite everything that the other agent wrote. And, you know, I don't really care.

>> Um, stash changes and overwrite.

>> So if you press overwrite, it's equivalent to undoing the other one and reapplying this one.

>> Yep.

>> Okay.

>> Yep. So that's a really good call. Um, so overwrite basically just does the exact same thing. So now I have Sonnet 4's changes, I believe, right? Four, overwrite, yes. Well, I should have said four changed currently. And let's see if Sonnet was able to fix the problem. First text is hi. I like no cursor.

>> Still wrong.

>> Still wrong. Yeah.

>> Yeah. And I think the more descriptive you are, the better to do this. And I think, yeah, I think I know what the problem is, sort of not in code, but I think I know how I would fix it.

>> Oh, yeah. You want to give me a prompt?

>> All right, well, just hold the whisper flow button, which is, I think is something we should talk about.

>> I don't have that.

>> Oh, but you can press the voice button. I'm pretty sure it's down there. I think they have it built in now.

>> Oh, you're right. They have the voice feature. So, I'm going to start a new agent and I'm going to let Riley go and Oh, so currently right now when I select a meme and add it to the canvas or whatever you want to call it. And then I add the first text onto the screen. And then I move it around. And then I go to create another text to add to it. Once I start typing the second one, it automatically starts typing into the first one. What I want to have happen instead is new text be added to the screen as soon as I start typing the next one. And I want to be able to do this for an unlimited amount of text boxes or fields, uh, so that they do not get overwritten and replace the writing I've already done on previous text fields.

>> I think that was really descriptive. Once again, we're going to try running this. You can run composer multiple times. I could run it three times with just composer, honestly. Let's give it a try. Four times composer. Maybe one of them will get it right. So, since it's so fast, we'll, we'll see if it's smarter than itself.

>> Yeah. And then this is one thing that makes cursor so fun and vibe coding so fun is just using voice, you know, like being able to just like speak out your thoughts as they're happening. And, um, I just think it's super useful. I basically just over, I kind of overexplained a little bit. You can see here the different versions of Composer are doing different amounts of work.

>> Yeah. Um, which is a good thing, I, I think, because you get a varying degree of

>> results. You get different results. So you can truly test four different, you know, approaches to solving the problem. Yeah. So they're working. Oh, I think composer one is done. Uh, so composer one is done both on the fourth run and the first run. I'll go ahead and apply this one to test this one for now. There's a, let's see, got to manually test this. Hi. And let's try it again. Bye. Ooh, this is promising. This one works. Good job, number four. So, now that we, number four has immediately fixed it, you know, just for the kicks, we can see if this one fixed it. This one obviously gave me 100 lines of code and deleted three lines of code. This is what these like colored numbers mean. So, this one only gave me 24 extra lines of code. This one gave me 100 lines of extra code. So,

>> which is probably better. You probably want to choose the one that has the least amount of like the one that's the most successful with the least amount of code change. Yes, that is genuinely probably generally probably like a good rule of thumb. Uh, because you don't want ex, that's actually a really good tip because you don't want code bloat. Like more code doesn't necessarily mean better. In fact, it means worse AI context. So that's actually a great tip. But

>> it's the same with like writing an essay. Like if you can make a point in one sentence, you should do it in one sentence, not three paragraphs.

>> Exactly. Exactly. But just for the kicks, we'll be applying this one. And I'll just fully overwrite it. I still remember that number four is the one that's working as intended. So if I try this now, add text. Hi. Okay. Move this around. And then bye. Oh, okay. Well,

>> see, I actually like this one better.

>> Because the difference is the other one waited until you pressed enter to add it to the canvas. Click. Click, uh, text content. Type something.

>> It adds it in real time, which is what I asked for. So the reason there was more code is it's actually doing something more. If you go test the other one, you'll realize it doesn't do that. I, I

>> That's a great catch. Let's try this now. Reapply full override.

>> Full override. This is cool.

>> Yeah. No, that's a huge catch. So now I can say like, you know, look full overwrite.

>> So if you, yeah, if you put that there, notice nothing's going to happen.

>> See?

>> Add to canvas.

>> Don't you think it's a way better experience to have it on the screen like it show up on the actual meme?

>> Yeah.

>> Yeah. Let me finish my meme. Revert plus apply again. All right. Yeah, full overwrite. Basically, applicable meme. Um, yeah, I think this is really good. So, we're in favor of keeping this one.

>> Yep.

>> Sure. Let's do.

>> I mean, that's what I asked for. I did ask for, I said when you start typing, it should be created on the thing.

>> Yeah. Yeah. No, that is great. So, real attention to detail and these things matter. That is great. Um, I do think there's one, I do think that, you know, there are quite a few things wrong with this. Obviously, I don't want this. I want more of an interactive. I can tap and then text is created there. Yeah.

>> And then I can click like an X or something up here. So, I'm going to just give it another prompt to try and get that state. So, or do you want to try?

>> Yeah, sure. I, I actually know how I would want to set up this.

>> Oh, yeah, sure.

>> But I, I don't want to interfere with your vision. No, dude. Videos are ours. Let's do it.

>> Okay. Okay. Um, I want you to condense the meme selection thing [snorts] that is at the very top. I want you to put that instead in a left sidebar that goes vertical. If you're familiar with how Canva works, they have this kind of utility bar on the left. I kind of want that to be the case. And then immediately to the right of that, I want this to be the canvas, which is where the meme goes. And so here, once I select a meme in the left panel, it'll populate there. And most of the screen should be this canvas that shows the meme. And then I want you to put everything else in this little rounded rectangle bar at the bottom of the screen centered so that I can add things in like a little utility so it's not so jarring to have all these things on the screen. And I think something like TL Draw has, yeah, or Excaladraw has these little bars that you can select to do different things. I want you to take that philosophy in kind of redesigning the user experience.

>> Yeah.

>> What do you think of that? Yeah.

>> I think you, you are amazing at providing detail. I think it's great. I think you know, yeah, the little like floating menu.

>> A little floating menu like, like, uh, it's almost like FigJam if you've ever used it.

>> Yeah.

>> Um, yeah, I think, I think just keeping it minimalistic because the focus should be on the meme. Like after you add the meme, it should just be the meme. If, and then you look at the meme and then you want to add something, you go to the little utility and you add it. I do think this one will take longer. Khan, it looks like it's done.

>> Oh, yeah. No, for real. Okay, four runs of it. Let's see. Um, I do want to say definitely read through the responses. You can skim through the code if it doesn't really make sense, but the core value of learning and why I'm such a big fan of composer is that, oh, sorry, of cursor is that it allows you to learn with it. And when you get more and more in the hang of things technically, you can kind of see if it went down the wrong path or not. And for example, if I were to spot something that I didn't like, I could just immediately abandon it and not try this. But, you know, it look, I was reading through this, it looked like it was like pretty good. It promises me that it's done it. It always does. So, take the last part with a grain of salt. But, normally during the trajectory, you'll be able to see if they were like doing the right things or not. So, let's just apply this and see. Full overwrite. And it now it looks even more like teenage engineering in my opinion. Yeah, I think it did give you everything you asked for.

>> Yeah.

>> Oh, okay. Okay. Very neat. Now I can make the meme that I've been trying to make this whole video. I like cursor. Okay.

>> Okay. I already know what I want to change.

>> What?

>> This this part of like

>> No, the text boxes little component there is heinous.

>> Oh, yeah.

>> Yeah.

>> Yeah.

>> You can do a new line. Remember?

>> Yeah. Oh my god.

>> There it is. Download. Hit download.

>> We finally made the meme that I've

>> Well, we don't know. Have we even tested the download feature yet?

>> I mean, let's see. Nah, it's here.

>> Okay. Okay.

[laughter]

>> Yeah. No, I think this is a pretty real graph. Yeah, but I like that the functionality and the UI/UX is coming along. I think it did technically implement everything you wanted it to. We could definitely spend another prompt on fixing the text boxes. Would you like to do that?

>> Um, yeah. Why don't we like move it in, like, it make it expandable, you know, like, um, or how would you, what do you think the best UI is here? Like definitely not text boxes written in a a list that goes vertical. Let's go back to Excal. What happens when I open a text? Ah, we get another like text panel. Okay, but I think Excal is actually really nice because I like the, I think all we need is the resizable text box and maybe like an X here. So, we can spend a prompt on that. I'll, I'll do this prompt this time. So, let's see. I want to run this three times. So, currently the way we add text is when you enter it into the text input field, it'll add it to the right near the bottom in the like menu bar. Instead, I would like you to make it such that when I click on the canvas, it will create a text box where I click. And this text box is resizable. Like it should have like the four dots on the corner of it and I should be able to adjust how big the text is that way. And you know when I click on it, I should be able to delete it. Maybe give it an X on the top right or something. But make sure I'm allowed to click off of it and, you know, the like selected text no longer is selected. Cool. Let's run this for three times and we'll be back with the results. All right, we are back. All three runs have finished and let's just start testing them. So obviously reminder to read, I won't, but let's apply this and let's go back to localhost. Oh, that is not localhost. What is localhost? There we go. Refresh this. That's weird. I still see this text here. Oh well, I can add text with the click of my mouse and I can delete it, but I cannot edit the text. That is not good. Can I resize it? Yeah, I see some duplicated text and I am not able to edit text on this version. Bummer. Let's try the next one.

[laughter]

>> Overwrite. And let's see. Oh, what is going on here? Okay, some, okay, this is, this is a hot mess. All right. No, we're going to this one. Apply all full overwrite. All right, let's try again. This just doesn't do anything. Okay. Okay, this is working, but not like to create. I see. So, all three kind of failed. Uh, when this happens, I like to bust out the multiple and give it a try again. So, I can go ahead and grab this prompt. Go here. Oh, obviously make sure to undo apply.

>> Yeah, that was going to say you want to make sure if you're going to do this strategy to go to a new agent to make sure you unapply all of the the previous ones.

>> Yep. And so, that kind of does show you that it failed. Let's do a little bit of iterating on why it failed. Uh, I think when you are moving the text, that's when the is that's when the agent had the most problems. So I'll probably just stick in something like, uh, four dots in the corner should be able to adjust. When I click on it, I should be able to delete it, move it. Okay, cool. Um, create a text box where I click and the text box is resizable and movable. You know, honestly, I just think if I run it again, it'll probably work. So, let's run, run it with the big boys.

>> Yep.

>> Yep.

>> That's what I would do.

>> Rip it.

>> We'll be back.

>> This one will take a little bit longer because again, we're using two of the slower models. GPT5 Codeex is the slowest model right now, but it is the smartest. So, I, I, I actually, I would put my money on GPT5 codecs here. But this is a lot more fun way. You can like directly test them all together here, which is pretty cool.

>> Yeah. All right, so all of the models have completed. So let's see which model made this work because this is a pretty complicated feature request. So let's try composer's. All right. And refresh this. Okay. Some, some. Okay. I mean,

>> are you typing right now? Okay.

>> Yeah. Um,

>> uh,

>> Oh. Uh, let's not work with this one.

>> Okay. Let's try Sonnet. So, let's see. Sonnet.

>> I'm telling you, I told you my money's on Sonnet. I mean, my money's on, uh, GPT5 codecs.

>> Okay. Sonnet does not allow me to click to make text. Let's see. Do you work? Okay.

>> Can you resize?

>> Oh, okay.

>> This is actually pretty, pretty good. Or

>> you just can't do it directly on there.

>> I just can't tap to create. Yeah.

>> Which is probably the ideal experience, right? Oh, is it?

>> To type? Yeah. I

>> Enter text. Yeah. Yeah. Yeah. Maybe. Yeah. Edit text here.

>> No. No. I think the ideal experience is doing it directly on the canvas for sure.

>> Oh, yeah.

>> Yeah.

>> Howdy. How? Yeah. Okay. Okay. We're getting there. GPT5 full overwrite. Okay. Okay. Not type the text though.

>> Okay. You can add it there.

>> Okay, this.

>> Can you resize?

>> Wow. So, all sorts of combinations of half working. But, you know, that is just the state of, uh, AI currently. You got to kind of fiddle with it and play with it. Take the best of your ability. I think there's another skill gap to kind of distinguish which features like you should pick to build from, especially because Sonnet and GPT ended up in both half working states. Uh, I think that that's actually really hard. Uh, I think I'll probably stick with GPT5.

>> I think so, too. I think you can add it. Then you have to like edit down there. I think it's one away from being fixed because basically all you need to do is change.

>> Um, all you need to do is just be able to type into it after you add.

>> Yeah.

>> Yeah.

>> But this is all in all pretty good. Um, actually sets might be easier to do a one shot. Let's see where Sonnet was again. Oh, okay. It just cannot create. H They're both kind of difficult problems.

>> Well, yeah. I mean, but here you can press like, you could press add new text box. Then you can move it and scale it. Maybe this one is better.

>> Yeah, they, they, they both [snorts] have their their issues, but yeah.

>> Cool.

>> Um, we'll stick with GPT5. Feels a little clean, but great. And so now that we're here, um, I do want to transition onto the next step, which is we're going to go ahead and actually turn this into a website with backend and O and databases. And to do that, we're going to need to get a little bit more into the technicalities and we don't need to strictly use the editor, but I think this is a great opportunity to kind of showcase the editor along with a few other features that cursor really has. So going forward, I'll be sticking with this and, uh, we'll be exploring this view and this framework as well. So the first thing I want to do is I want to show you guys that, um, there is a thing called commands that you can do with cursor. And, oh, by the way, these shortcuts that I'm using are like Control, uh, L brings up this side on the right. You can also obviously like, um, bring it up from like, Oops.

>> You can search it. Just search cursor shortcuts as you learn more and more.

>> You'll get used to them. I recommend just don't focus on them too early. You can find them in the interface.

>> Yes, I think that, uh, the shortcuts really come in handy definitely in the editor or maybe I'm just more used to it. But what I was going to say is that you can actually create commands for basically shortcuts and, you know, Riley mentioned that Git was kind of how you like set checkpoints. I'm going to go ahead and set a checkpoint here and I could tell it to, I could do it the traditional coding way where I would come in here and you'd `git add` and then `git commit` and then `git push` or I could, you know, be lazy and tell AI to do it. Uh, and I could say like, hey, commit my changes, but I'm going to go ahead and create that as a command. So every time I can just do `/commit` and it'll commit. So I'm going to create a commit command and, and commit just means pushing the changes that you've made to your code, right? We've made changes to this meme app because remember we created a GitHub repository earlier, right?

>> Yeah.

>> And we created a version. Now you want to basically make a version two where you're committing your changes to make version two.

>> Yeah. Okay.

>> Thanks for slowing me down. So a little bit more about Git is that it is used for versioning controlling. In the beginning, we set up Git so that we could run multiple agents at once. I'm going to actually use it for its intended use case, which is, you know, to put a checkpoint where I am right now. And normally it takes a few commands in the terminal or obviously the agent can do it for you as well. And I'm going to take a shortcut and making the agent do it for me. So, I'm just going to say commit my changes to get, uh, reference, uh, code changes to write a short but meaningful commit message. So, yeah, that's about it. I'm going to save that. And now I can do `/commit` and boom. So, it's going to go ahead and make me a commit for me.

>> Yeah.

>> That's really cool. And this would actually be come in handy for deploying your website or web app to, um, to the internet when you, if you want to use like the Vercel CLI, you could have your, uh, one that you always use to commit. So, it's cool. I'm trying to think of all the useful, uh, commands that I might want to do.

>> Yeah, I mean, I think there's a lot of different use cases for this. Uh, it's really flexible and it kind of allows you to customize your interactions with the agent, which is obviously case dependent as you become more and more, uh, in the flow of using cursor. You can add your own customizations. I'm starting from an empty slate because I just downloaded cursor today, but yeah, there's a lot you can do with this as well. It's telling me that it committed my changes. I'm just going to go ahead and verify that right now. And I do see that this giant text that it, you know, created. Yep. Yep. Okay. The commit did go through. So this `/commit` message does work. So that was an example of using a command. Once again, there's another way to create commands obviously, which is going to be through the settings tab. Uh, you can create commands down here. Project commands, add command, and user commands. They're same, same difference, uh, as in like one follows you across all of the folders and one is only for this folder.

>> Amazing.

>> All right. So before we leave the settings screen, I want to show you guys one more feature that is probably one of my favorite features of cursor and that is indexing and docs. As I mentioned before, cursor has this powerful agent that uses all sorts of tools and it uses the context that it's given to kind of code for you and build out what you want. Going forward, we're going to be adding database O and a backend. And all these kind of really hinge on having a database provider. But that, what a database is, is basically just, you know, tables and you can read from it, you can write from it, and it helps orchestrate what happens and store data when certain events happen. So why am I talking about this? Well, we're going to be using a product called Instant DB and the docs for it, you know, it's very new. I've been using it since the beta. It's evolving constantly and sometimes AI will make mistakes. I will add the docs. When he says docs, it's just think instruction manual, right? He's using Instant DB as a database. If you've been vibe coding a little bit, maybe you've heard of Firebase, maybe you've heard of Supabase. It's the same thing. Personally, as someone who just vibe codes, I'm not technical. I find Instant DB the easiest because you need one single key to make it work and it's very easy. The only thing is it needs cursor needs the instruction manual on how to use Instant DB because there's specific language and specific types of code it has to write in order for it to work.

>> Yeah. Yeah. Riley does a great job explaining it and I'll go ahead and show you how to make all this work. So, you know, I'm in my, uh, arc over here. I'm going to search up Instant DB docs. I'm going to go ahead and find, yep, the modern Firebase documentation. Perfect. I'm just going to grab this link right here and I'm going to go ahead and add doc. And so it's going to ask for a link. I'm going to give it the link and it'll start reading and combing and indexing, which means, you know, it's just teaching its AI what Instant DB is. So perfect. It's done already. Now we're going to go to Instant DB and grab that key that Riley was talking about, that one secret that we really need so that we can start using a database in our app. So yeah, when you go into Instant DB's dashboard, you'll be able to create a new app on the right. It'll look something just like this. And I'm going to go ahead and create a new app called Meme Generator. By the way, this is free. Um, they give, they have a really generous like free plan. Like you can just create a database right when you come in. You don't need to pay anything, um, until you have like a certain amount of entries or something like that.

>> Yeah, I think they're really friendly. I, I know the founders. They've been working really hard on this product. Highly recommend you try it out. Although this is not sponsored, but this is why it's really useful. It's so easy. I just create a new app and it gives me my public app ID. Go ahead and copy this. I will go ahead and feed it to my AI and I'll tell it to add me a DB. And yes, and before, just to make sure you guys understand, authentication means sign in.

>> DB means database. And so we're creating an app, right? If you go to the meme generator real quick, like the, the actual application, right? If you click on meme generator, right? This obviously you can download it, which is great, but what if you actually wanted to save

Your memes somewhere or uh, what if you wanted to create an account and eventually maybe you want to charge? Like if I use your meme generator, you might want to charge me $5 per month. You can't really do that unless you have users, right? Right? And when a user signs in, there's authentication. And then you maybe you want to limit them to only 10 generations per month. You need a database that keeps track of basically all of the data that's happening within your app. That's what Khan's adding right now is a DB.

Yes. Yes. Thank you for breaking it down. I'm sorry I'm I'm like rushing a little, but yeah, I think my goal for the next part is to probably turn this into a little bit of a social app where you can post the memes you generate and people can upvote them. And obviously you're going to need people to be signed in to upvote and things like that. So I think that'll be a really good demonstration of building a full stack application. And full stack just means it has both what you see and all the functionality behind it like signing in and upvoting and posting. So we're going to be adding features like posting and upvoting and signing in. And that's kind of you know this next section on what using the editor is going to be about.

Amazing.

All right. So, the first thing I'm going to do is I'm going to go ahead and put the agent into plan mode. And this way, oh actually, sorry, I'm going to create a new agent because we want the full context of it. And then I'm going to put this agent using shift tab into plan mode. I'm going to go ahead and ask it, I want to make this into a full stack app. I want instant DB to be my database. And here is my public app ID. And uh walk me through a plan. I want the end result to allow users to post their oops post their memes and for people to be able to upvote them. Cool. Go ahead and tell the agent to start planning. And because we've given it the docs, right, it's going to basically read how to do this, right? Without that, if it couldn't search the internet and if it couldn't see the docs, it would almost certainly fail. But now it's going to take a lot of time searching the web, instant DV JavaScript setup. Um, and the way that documentation set up nowadays, there's almost like a um, a standardized format which makes them easy to index, which is part of the index feature, which is basically like it knows how to go through the full thing and find the relevant parts. And so it can basically like find the relevant instruction, go build some code, run into [snorts] a roadblock, and then it can be like, wait, I need to go back and search it again. And then it will come back and finish writing the code. And so AI agents are getting smarter and smarter that like you just need to feed it a bunch of instructions and it's usually we'll figure it out.

For sure. Yeah. Um so it's asking me a few questions about authentication. Should users be required to sign in?

One. Yes.

Two. Uh should the meme remain as a creation tool with a separate gallery feed view or integrate into the posting?

I think it should happen in the Well, no. Oh, let's make it a separate for the sake of this.

Separate.

But I think while you're on the feed. Ah, no. That would be really hard for like remixing almost like I think let's keep it as a separate tool.

Yeah, I want a creation flow and a browse slashupvote flow like screen.

There we go. And then three, use instant DB. Um, and then this is good. I think I'm going to also we're going to publish this at the end. So I'm going to go ahead and tell it to use Nex.js which is a framework of JavaScript. Currently we've been using vanilla. You know as uh when we began the video it asked us what did you want to do? It gave us a few options. I'm going to tell it to refactor it to be next.js so that we can easily publish it. I think Nex.js allows us to publish websites the easiest. There are a few other options. We could use GitHub to have a GitHub page. To keep it simple, we're going to be also asking it to refactor into Next.js, the code base to be NextJS.

And so Next.js was created by Versell. And we're going to be using Versel uh to actually um deploy or get our app on the internet. And um Nex.js to my understanding is probably the best for styling like creating websites that are that look the best. I would say most people use Nex.js. Uh maybe

I think that's a common misunderstanding. I think Nex.js is just a framework that combines like the client side and back end uh on like the way they structure their folders in their directories. There's a lot of different patterns. And when I say frameworks, it's kind of like how you group these files. Although Nex.js is the same company as Vzero, which was very famous for being able to design good websites with AI.

But yeah, so I think I think you're kind of like you got you're on the right track. Yeah.

Nice. Um, so it's given me a plan. I do want to read it. And so I can full screen it here. So now I can read it. Overview. I'm going to skim this real fast. And this is one of the ones that you can edit, right? Because it's yellow.

Yep. So if I see anything wrong, I'll go ahead and tell it to like do something else. Uh, yep. Yep. Yep. React. Yep. Find the schema. Image URL text box. create it at great. I'm going to go ahead and add here that I want you to use the magic link feature uh that requires a sixdigit verification code for the O. So, this is going to sub point just kind of point it to the correct direction again. And so, this is kind of giving me its plan. Um, I like it. It's a it's pretty neat. um app create browse API components. Okay. Yeah. Um skim skim and I think it looks good. So I'm going to go ahead and let it build now. So you know looking at it, it's actually very similar to uh you know the agents view. Oh, it's asking me for permission. As in like the layouts are the agents view is definitely more spacious, but you know, I think we're going to be seeing a lot of changes. Yep. Come over on the left and I kind of want to keep track of what's going on because it's a pretty big change. So, this is why I'm sticking over here. Later you'll also be able to see that if we are debugging any issues I can directly reference the files and I can use like the at this command and you can point to files here which is really important and when you're pointing to files to add the context to your agent you're kind of telling the agent hey look specifically at this file there's something wrong or I think this is the problem obviously this is a little more technical leaning um and I did want to dive into a little bit about how like you know as you upskill you can use cursor and all of its features a bit more. So when you're attaching files, it's obviously very important to be able to see kind of what the file is, the directory, and all its relations.

Makes sense.

And it is still checking. Cool. Yeah. Oh, I probably should not have used composer. That's probably maybe I should have ran this on agents for three. Maybe you should have.

Yeah. Well, we'll see if this fails. Um,

so this is a really good test. So, um, yeah. And I think one thing you could do is you could just stop it and then re not saying you should do this right now. Um, and then just use the agents and you could have used, you know, what you did earlier, GBT5, um, Claude and Composer at the same time.

Um,

but I think that's a good backup option if this fails. But this is a really good test to see how composer is.

Yeah, you know, we'll see. All right, we're back and wow, we've got, you know, a lot of things going on. 18 files edited. As you can see, there are a lot more files in my folder directory now. And the app is ready to use. Test the flow. Oh, next steps. Okay, so it's telling me to do a few things. Once again, these are implied that I need to open the terminal. So, I'm going to go ahead and clear the terminal. Oops. clear and push the schema. I'm going to go ahead and do that. Oh, install. Yep. Go ahead and cool. Oh, I have to log in. Okay. Instant CLI login. So, and by the way, you could literally ask cursor to do this stuff for you, right? Like,

yeah, you could. You want to talk about command K in the terminal? I don't know if you've ever used that.

Oh. Um, it is taking a second to come up.

Oh, weird.

Command K was pressed waiting for second key of chord.

Ah.

Huh. What is that?

It's waiting for something from you.

I don't know. I don't know if command K exists anymore. I haven't used it in so long.

It literally says command K to generate command.

Oh, yeah.

Anyway,

command K. Well,

ignore.

Yeah. Um, honestly, we'll be back after I figure out. All right, so we're back. It did give us a lot of file changes. As you can see, there are a lot of files and the project directory got a lot more complicated. And uh, let's just see if it works. It's telling me to um do this. But let me just try out the Okay, let me just try out Let me just run the dev server locally and check out the website first to kind of see if it's able to load. And okay, I see a lot of issues already with the website. First of all, Nex.js is out of date. Uh, I should have caught that from the plan. So this goes back to reference, you know, if you read the plan, um, it actually said it was going to use Next 14. We're actually on next 16 right now. So that is just wrong in general. And obviously there was um an error that we saw with uh what is this? Instant DV and Webpack module. So I think you know composer uh, it's a fast model but just wasn't really like you know, aware of what was going on this time. So I'm going to actually run this prompt with sonnet 4. And to do that uh sonnet 4.5 I'm going to go head over to agents. The good thing is I can take this whole plan basically and feed it to Sonnet 4. Oh, and this is their to-dos. So, I'm not going to grab the to-dos. I'm going to just grab the plan. I'm going to go to agents, create a new agent. This time I'm going to be using set 4.5 and I will be telling it this is the plan and I'm going to go and change next to be next 16, which is the current next. So, we're still passing in this key and we're telling it that we want it to uh new files or honestly this is maybe a little more too detailed. I'm just going to give it a plan mode again. Let it plan on the plan and uh let's see. Yeah, this stuff looks good. I'm going to delete this new files because I don't want it to be too specific since the old plan definitely had some problems. This way it'll kind of generate a new plan. And so, uh, I see here I want to use Tailwind. Uh, so I am just editing the plan before I send it off. And, uh, let's see. Yeah, I think everything else here looks pretty decent or I'm just skimming through it as well. Um, I don't think we need to give it a specific file structure. So, I'm going to delete this as well. And the file structure is what we were looking at over here. It was kind of like planning what files to make. Uh, just delete that. And let's see, uh, these are kind of some key features. Yep, I like that. Uh, creation flow, post meme, converts canvas to blob, uploads to instant DB storage. Yep. Yep. This all looks pretty good. Um, technical implementations. It's talking about some React stuff and the migration strategy. Okay, cool. Um, this looks good. I'm going to tell it to think about this plan. I might actually run it two times and we'll see what Sonnet 4 cooks up and we'll probably build with Sonnet 4.5.

Wait, so is it it's going to plan?

We're getting a plan right now or are we get it's going to generate code?

No, it's planning. So, we're on plan mode. I just fed it the plan of composer one. I think composer one was a little out of date and it tried to use next 14 which is going to cause a lot of problems. So

I just told it no like

let's just use sonnet and if this gives me another plan I don't like I will

uh I don't know tell it like to directly use next 14.

Gotcha.

All right. So it's asking me some questions. Uh okay. So oh yeah there's a current this is a great point. I didn't undo the other plan. So um so it actually was asking me like oh and I caught this because it was saying your package already is using next 14. So obviously we still have all of this code that composer wrote for us that doesn't work. We want to get rid of it and that's why we use git to make a commit. So we dropped the checkpoint last time we did the slash commit command. Right? So remember this. We can just go right back to it and it'll discard all of this stuff. So, I'm going to go ahead and do that. Uh,

do you want to just use the git tree? I think it's cleaner if you wanted to show them up there. Like, you could probably just remove the changes.

Uh, yeah, the changes. 27 changes. Um, I don't know.

Okay, that's just how I understand it versus going in the terminal.

No, no, no. You're right. Here are all the 27 changes. Um, these are all the files that composer wrote and you know, they are not working obviously. So if we want to get rid of all this code and let sonnet 4.5 start on kind of like a fresh point of the last checkpoint that we left. So you can go ahead and you know like delete these if it makes it more intuitive. Um, but the same thing is just heading over here and get stash. And so now that'll also Oh, actually deleting might actually be faster. Um, cuz new

Don't you just go to the top and go to changes and there's like a little button there that like lets you delete. Oh, discard.

Discard all. Yeah. Okay. No, that's great. Um, what is going on here? Okay. So, now if we look into our folders, ah, there's just a lot of folders. Okay, that's the problem. There's a lot of empty folders now. [snorts] Um, we're back with our original three files from before any of this mess happened. Um, but the next JS left us with a lot of folders that we're just going to go ahead and delete as well. And this is why being able to see the folder view is pretty nice. So, I can just, you know, delete all of these and clean up my working directory, which is the repo that we had. Do not delete the dot cursor one. This is where your commands and rules live. And obviously, I'm trying to reestablish my next app. So, I'm going to delete these as well. And boom. We're kind of back to where we were before this whole mess. So, this is the prompt that we want to do. And I realized that this is actually a very complicated prompt because we're asking it to refactor into the whole codebase. And generally, that means like, you know, it gets pretty messy. And so, actually, I'm going to bring this back to agent, but we will be exploring editor. uh after we run this kind of big prompt. So

amazing.

I want to go into editor. Uh oh, okay. Well, it's here. And I don't want composer for this because um I do want to trust the frontier models on this or I guess yeah, we'll run sonnet and gpd5. Uh, you know what? Sure. Like twice. Um

just go two and two. I like it.

Yeah, I like it. And so great. uh you know, let's do a plan mode and let's kind of see or I guess okay

I think we just rip it yeah I think we can just rip it since we have so many agents running and we'll just take the best one so that's another way to use this new this is what I mean by like I feel like the cursor 2.0 is like one of the most

powerful like ways to use AI like I don't even

I could do a plan is probably the best practice but I I have I have faith so

I have faith as well

yeah, let's just run this So, now we have four agents going, and this will take a bit of time. This might take five minutes. Uh, Sonnet 4.5, Sonnet 4.5, GBT5, and GPT5. We'll see how it does. Boom. We're back. And interestingly enough, I mean, this Sonnet one just kind of died, but we have three that completed and all of them gave us plans. And so, this is kind of the agent saying, "Hold on, hold on. This is a really big change. I need to take some time and propose a plan anyways." is even though we weren't on plan mode, all of them gave me a plan and it's asking me for permission. So, off camera, I went off and I read a few plans. Um, I think the Sonnet 4 definitely is the most detailed plan, but it also has way too many features that I didn't ask for, so it's too complicated. I'm going to discard the Sonnet 4.5 plan. So, I'm really focusing on these two plans. And I kind of like the first plan more, although it had a few things or like questions that it was kind of asking. So it was saying like oh you know go and explore o providers or like a storage system. I'm just going to go ahead and say this plan looks good but I want you to use instant DB storage and instant DB off with magic link. It will send me a sixdigit signin code. So, I think with this it'll go ahead and use this plan and what I told it to make the transition. And uh, let's see. I'm going to go ahead and use 4.5. Yeah, let's give it a try.

Let's do it.

No, it's just updating the plan now. Build it. Is this because I switched to 4.5? So, this is probably like something that I didn't know until now, but I have a feeling that it gave me this plan because I switched to 4.5 from chat GBT and so it's kind of like updating the plan. I have the feeling that if I just ran it on um codeex, it would have just started coding, but I think it's just, you know, asking for permission. I'm going to give it a little skim through again to make sure everything's right because this is a pretty big refactor. Um, all these things look pretty good. Yep. minimal. Yep. I like it because the real difference is that once again, this is a lot more minimal. Um, and this this is just like too much. I think I think we don't want it to, you know, it's already a big task. We don't want it to over complicate things, which is why I chose to stick with this plan. It's just echoing me the plan back. I'm just going to go ahead and say go ahead. And now it'll start writing me some code. All right, we are back. And wow, was that a big change. It took a while. We took a break. We're back though. 2400 lines of code written. So, um I want to hop right into it and test it, but I do want to skim this a little bit. And it probably has a few things that we need to do. So, let's see. Okay, it's telling me about what it did. Okay, how to use. Okay, so

what file is this? Is this some

It's a file that it wrote. It's a markdown. A lot of times when you ask for a big change, it'll often update the readme and write you a little markdown document. implementation summary.mmd.

Yeah. So, basically, yeah, and it has a lot of helpful tips at the end. So I highly recommend reading it or at least definitely skim through it. Um, it looks mostly like correct in terms of uh what like I'm looking for. So it's mentioning everything that I kind of asked it for. Um, and so what I'm really looking for is kind of like how to get started and Yeah. Okay. Yeah. Here how to use. So it says that we need to do the database and I think our server is already running. So, um, all we really needed, oh, it has instructions to publishing as well. But, uh, before we hop right into it, let me just make sure we are going to have to push some things for Instant DB because in order for a database to work, you kind of have to define the tables and it's asking us to do that. So, I'm going to go ahead and do that. Um, it's gave us the permissions. Once again, I'm just going to be copying it. Bash genuinely means put this into a terminal. So, I will do just that. Uh, I have this terminal here. Let's clean this up. And I'm going to just paste the first command in. And so it's it's instant DB asking to log me into the terminal, which makes sense because we're using instant DB and uh we kind of need the terminal to make sure the whole setup is logged in for the app that we have hosted. So, um just going to proceed and okay, so I'm already logged in on the website. Um, and it's just asking if I can log in. So, I will go ahead and log in. Um, close. Cool. And then we needed to run the push. So, let's just follow some instructions. Uh, it's asking if it can push these table changes. This is exactly what I wanted. And some permissions. So, it's actually really good that it wrote permissions because this way, you know, our app is more secure. Um, going to just say yes to everything. Everything worked. Okay, that's good. Uh, probably because it had some documentation. This part sometimes get tricky. If you do get caught up in it, I would just, you know, ask the AI like what's going on. And if it's like continuously making errors, I would try different models like GPD5 cursor uh uh not composer and uh sonnet 4.5 as well as always telling it to do research online because these things do change a lot. Whatever they're trained on might be wrong and they might default to something incorrect.

Yeah. Can I add something? Can you pull up the terminal just a little bit so we can see it?

Oh yeah.

I want to talk about one thing real quick. Uh, because I've been, you know, I vibe code a lot. I use I've used like four or five of the different like uh database softwares. Superbase, Firebase, um, and now I use Instant DB. Um, I just want to go over this rules or permissions

folder. And so what this is um basically and you can if even if you don't code, you can kind of like reason your way through it. What all this does is if you think about like Twitter and when you sign into Twitter, you have certain rules and permissions on like what you're allowed to view as a user, right? And so that's all this is is basically saying like what user can see what is that effectively what the rules and permissions are.

Yeah, exactly. So as you can see here just through skimming we can kind of see that is defining for the memes anyone can view it but only the owner can uh update or delete it and you can only create it if you're authenticated.

Right. So

so like in the feed of memes everyone can see them, right? But only the person who posted the meme can edit it or make changes or delete it. Yeah, exactly. And you can reason through a lot of things. Um, I like Instant DB because it automatically has something called files, which if you're more technical, this means you can use it as file storage. So for memes, they're images and databases don't actually store images in the table. Um, but that's why I like instant DB. That was basically automatic. And you can see something similar like, you know, you're only allowed to vote uh, you can see all the votes u but you're only allowed to create votes if you're authenticated. So, that makes sense. And you're only allowed to like delete your vote if you're the one who voted. So, all of this stuff looks really good. Um, I'm excited to test it out. Uh, let's just hop over to Okay. Yeah, I think this is this is it. And, uh, I do see a sign-in page. Let's see if the permissions are working. Um, so if I just try to post this, I see that I see like we have some good stuff. We have um the two. Okay. Nothing.

Okay. So, created there's a create page and then a feed page.

Yeah.

Cool.

Yeah. And uh I see the signin button, but I do want to test if the permissions are working. So, let's just try to post this photo. And yeah, it says please sign in to post memes. So,

okay.

Oh, wow. It it automatically links me to the sign-in page. Uh, I'm going to go ahead and sign in. So, this is my email. Um, maybe blur this. I don't know.

Uh, okay, cool. We are shown enter six-digit code sent to your email. I will check my phone right now.

So, when you use Instant DB, it's by default uses this like six-digit verification code. So, you get an email from Instant DB, right? Is that what it is?

Yeah. Um, I can actually show the email on uh I guess here. So, I did just get an email. Um, so you know, this is the code I got. It does come from something called, you know, meme generator, which is the project name. So, that's kind of nice. I do think there's a way to customize this, but Instant DB kind of does this out of the box. You can also do sign in with Google, sign in with Apple, all the fancy stuff. Uh, that's a little more complicated. You have to give it some more API keys, but it is possible with Instant DB and you could probably do it vi coding as well. Yeah. So, it's it's a lot easier to get started not using signin with Google. um like you should just test it and this is the simplest way to test and then once you have everything like created and it looks good then you I then you add that after that's how I usually do it.

Yeah. Yeah. I think that's a great suggestion. Um, to not to get too into the details, but when you do start, you know, signing in with Google, you need their like OOTH and their they have tokens that you have to feed the AI and then finding that token is really like difficult because you have to go through like Google, you know, like technical like dashboard and all that stuff. Um, and AI can't really do that for you. So that is a current limitation of Vive coding. that stuff. You will have to go dig through Google's OOTH documentation and figure out how to create one. Um, but okay. Yeah, this is the Yeah, cool. This is the project. Um, I'm going to go and enter this code in and we are in. And

And notice how his emails up at the top right.

Yeah.

Um, and so you're signed in, it looks like.

Cool. Um, I do think I will be able to post something now. So, let's actually make a meme. Uh, the little girl or whatever and just say like you like coding question mark or something.

I don't even know what is this meme template usually.

You don't vive code with cursor.

I like it. Emily, what do you think of this meme?

Okay, it's funny.

Okay. Um, post the feed meme posted posted successfully. Okay. Oh,

and yeah,

didn't nail the aspect ratio, but that's okay.

The aspect ratio is a little weird. It has the only text in it as the title. Um, I can't click on it to full screen it. So, these are all features that we can add. But

question, do you want to show what it looks like in the actual database?

Oh, yeah, that's a great suggestion. Um, so in the database, I'm expecting So, these are the tables.

Wait, let's let's hop back. Let's go to explorer. So, so yeah, I think so. There's the public app ID, which Kihan will probably either rotate or delete after this video because you definitely want to keep that safe. As you see, we could set up this database with that public app ID. So, if you give someone your public app ID, they literally can uh just edit your database, uh, which is not good.

Um, the explorer, what the explorer does,

the explorer kind of lets you oh, flip through like the data that you have. So, you know, over here we have the one meme that I just made. Uh, and then it has the link to the image. Uh, this is the one user, which is me, Riley. You can actually Oh, I guess you can't really check this out until I publish it. But

that's true. We can do that in a sec.

Um, so yeah, we have one user, which is myself, and we have one meme, which is the meme that I just posted. Pretty cool. Uh, and so I guess like I want to test the upvoting feature. And I can upvote it. Let's see if we see a vote come through. Yeah, we do. And the good part is you can you can link it to the meme. That's the same meme that I posted. And you could link it probably to me. Yeah. So, that is me. So, that's a little bit about

a little brief intro to databases. Uh, it really is just a collection of tables that your app uses. So, it's good. Uh, pretty impressed that everything works. Um, you can create more memes. This is all really fine and dandy. Yeah. So, I did say we were going to go talk about the editor view. This is the editor view. Um, you know, terminals live down here. You can also collapse them. Uh, but the key point is um the agent does exist here. This is the same chat. I'm going to make a new one. And we can actually ask it to um Oh, nice. It only lets me upload it once to like open the meme. Since this aspect ratio is cutting off some of the meme, I would like to ideally like tap and see the full meme. And so I guess we can kind of just add ask that as a feature. Um, and you know, if you're technical, you can kind of like look through and see how all of this like looks. Um, and let's see. I think like app feed page. This is probably where we're rendering. Yeah, this is where we're rendering this. So, I can actually do this. So, it actually says plan at for context or slash for commands. I'm just going to go ahead and add page. Oh, uh, slashfeed/page. Yep. Next.js is interesting. It likes to name everything page. But we can go ahead and attach this specific file. And if you are a little confused here, this is all called page.tsx. This is telling me that inside of the app folder itself, there's a page.tsx tsx specifically. It's looking at this one right here. Um, you can tell because it kind of points you down this way and uh, there's there's quite a few. There's one inside of app feed. So, this is a subfolder. Uh, inside of here, there's a page. Inside of login, there's a page. So, I want to point it to the code file that I know that I want it to kind of work on. So, page inside of feed, I'm going to say when I tap on a meme, I want it to full screen. Um, yeah, that's kind of like the only feature. I think it'll work just fine. Uh, I think we can go back to composer. This should be a pretty quick fix. Um, and so yeah, I guess the first feature we wanted to highlight was the add context. There's actually quite a few things you can add. You could add like uh specific docs, you know, you could add whole files and folders. Like I just showed you adding one file, but you can actually append like the whole folder. So I could literally do like slash app. Um, there's a caveat here though when you do append slash app and I guess it makes sense to kind of do it for this. Um, so when just a little bit of how cursor works technically when you do add a file it'll append the whole file. So all of this stuff I'm basically just, you know, crl +ving this whole file in here right. Um, when you do at app like a folder it will actually give you like it'll condense that into like a summary of all of the subfolders and the files inside of it and a little bit of a highlevel like abstraction of what exists in the file. So it won't append like every single line while if you do append a page it will basically append every line or try to. So just wanted to point that out. Um, if you are asking for big requests and you just add the folder the result won't be as good if you pinpoint like specific pages that you want to be updating which is what I'm doing here. I kind of gave it app to kind of you know tell it since this is a new conversation give it a little more of an idea of what's going on. And uh let's just run it. Okay. Wow. It is. It does work fast.

Imagine if it got as good as like Sonnet 4.5 and it was this speed.

That would be insane.

Probably will happen

sometime. Yeah. Um, so it's telling me it added a full screen meme. Uh, and then you know, let's just accept these or I'm pretty sure without accepting you can test if it works. So, okay. Yeah.

I love it.

Yeah, pretty pretty pretty quick. Yeah, it works.

Wait, can you do one thing for me? Can you post another meme? And you don't even need to add text to it. I just want to see what it looks like with multiple fe memes in the feed.

Yeah, sure. Uh, post this.

Maybe you have to. Oh, no.

Okay.

Okay. So, it shows up in like a grid type deal. Okay.

Okay. Yeah. Yeah. Yeah. I can I can keep posting memes, you know, like easy.

Yeah. [snorts] Okay. Okay. Yeah. Okay. So, it is a little scuffed. We can play with the aspect ratio. Um, I do think that that will actually be a little bit challenging. uh just from my experience. But

well, yeah, I mean like how would it do it in a grid unless you literally just did it in a vertical grid like Twitter, you know?

Yeah. But like honestly, I think this is fine.

Yeah, I think this is good. I think I think tapping to like see the full meme is like a good middle fix. Um

and as you begin like playing with code and vibe coding, you'll be able to tell like, oh, AI really messes up at this one thing or like so it kind of takes a little bit of experience to know like what is hard, what is not hard. And we kind of mentioned this earlier when we were like, "Oh yeah, this like change to Nex.js is going to be a pretty big change." Um, a change like this is, you know, as you can see, super small, but pretty impressed. I'm going to go ahead and accept. You can also, you know, keep it shows you line by line where certain things are inserted or deleted or changed. And so these are pretty useful. Let's say like if this one was like terrible and wrong, I could actually reject it um and then only accept like the ones that I like. But for this, I'm just going to keep everything. Um, and uh, there's a few more files. Yep. Styling. Okay, great. And so now we have full screen mode. Cool. Yeah. So, just to make like this lesson go on, why don't I try and deploy this? So, Riley, you can come on and start upvoting my memes cuz, you know, I spend a lot of time on the memes. They're really good. I think this one truly speaks to me. Uh, so, you know, I don't know how to deploy things, but it's good that you can grow with cursor. So I can create a new chat and I can say I'm going to put this on ask mode. I'm going to learn with it. How can I deploy this? Let's do it. Yeah.

This is literally how I first deployed on cursor. I asked it and it said to use Verscell CLI.

Um, it it suggested railway but I think on Oh yeah, Versell

it has yeah, it gives you a few options. Versel is easiest for Nex.js which is why I asked it to refactor to Nex.js. I personally think it's the easiest. I like it a lot. Um, and you know, there's a lot of alternatives, but it'll kind of like tell you a little bit about each what you need to do. Uh, and so, you know, it has some important notes and, uh, it'll give you a suggestion, right? Yeah, it says recommended for cell. Okay. So, tells you to sign in. I mean, honestly, we can just follow this step by step. Push your code to GitHub. So, uh, we have been using Git, but GitHub is like the cloud version of Git. So, you can actually have Git locally, which is what we've been doing so far, and you can actually have it associated and pushed onto GitHub. So, I'm going to go ahead and do that. I will be showing every step along the way. So, I'm just going to go to my GitHub account. This is my GitHub account. Uh, and you know, let's see. I'm going to have to create a new repository. And this repository is going to just be called meme generator. And if you don't know how to like walk through these steps of using GitHub, you can also ask cursor. Um, but if you're a developer, I'm sure you know how to use GitHub. It's

have to choose an owner, my guy.

Oh, you're right. I'm part of not just myself anymore. [laughter] Um, so yeah. Uh, I mean this actually tells you what to do. So push an existing repo. We have a repo. I'm just going to do this and, uh, stick this into here. Cool.

One, two, three.

Wait, also literally,

can I Wait, have you entered that in yet?

Uh, not the last part. Yes. What's up?

Can I show you how I do it? Cuz you can oneshot this to Verscell.

Oh, yeah.

I'm not even kidding. If you go to GitHub,

go to GitHub,

copy the Git repository link. Just the repository link at the Yeah, that one.

Ah, yeah.

Copy it.

Paste it in a cursor.

Okay.

Um, I would change it to Sonnet. I know Sonic can do But I don't know about composer.

Okay.

I would say um have you you've already signed into the CLI on Verscell. Have you done that before?

This is a new computer so I don't think so. But maybe that's good. Maybe that's

okay. I think it'll actually take you through that. So can you whisper flow or uh do the voice thing isn't available. Okay. It's not long. Just say I just created this GitHub repo. I want you to commit my code here and then I want you to to deploy to the to Verscell and use the Verscell CLI to do so. That's it.

Cool. Do you want to talk about what a CLI is and what Versell CLI is?

Yeah. So, honestly, I could not give you I've used a lot of CLIs in the last year as I've learned how to use AI coding. I command line interface, I believe, is what it it stands for. Um, and it is um I don't know. Anything else? I just know that it has to do something with the terminal. Is Claude code a CLI

or is it a

kind kind of kind of

it's a TUI? Yeah.

Or which I don't know the difference. I just hear everyone talking about it, but I use them all the time. So I just know it is an interface you can use in the terminal.

Yeah. It's basically like um you know like this is like git is a CLI technically because you know any commands that you can run inside of a terminal that aren't like pre-built to your Mac is a CLI. So it's basically saying can I use Verscell which is you know the owner of next to deploy this uh project using like commands using like terminal commands.

But you were on ask mode. Yeah, I was. But I kind of wanted to read a little bit, but I just forgot I was on ad mode. Okay. So, it tells me how to commit. It tells me to log in. Okay. And then it tells me to run d-prod. Okay. Um or if I I don't want to do it manually, so I'm going to just tell it to go go. Yep. So, yeah, you have to make sure it's on agent mode and it should just do it. At least cursor six months ago can do this. I haven't pushed to Verscell in a long time. I used to make web apps a lot more. Um,

cool. So it is running. Okay. Yeah. Perfect.

And the CLI is the same as what you were using to set up uh Instant DB.

Yes. Yes. That's a great example. I was using Instant DB CLI to log in. You know, you saw them ask me to log in. I think for sale will do something similar

and update the permissions too.

Yep. Yep. And to update the permissions and schemas. So, yeah, I think uh

and yeah, and then the one thing you do have to do manually, if you add any APIs um to your app, uh you have to place those manually in Verscell, I believe. I don't think it can add environment variables um through this.

So yeah, here I see this is probably the line that is going to ask me to sign in or something.

Um, let's see.

But I believe it's already pushed your code to uh GitHub, right? So, if you go to the arc and refresh.

Yeah, here's your code there. Perfect.

Yeah. And uh here's the read me that AI wrote. Pretty neat, honestly. Okay, it's telling me to log in. Okay, I expected that. Um, let's see. Okay, so this is actually a very good thing to point out because the cursor's agent can use the terminal. Uh, it can run commands for you, but you know, these commands expect humans to kind of follow up. So, for example, it's telling me to press enter to open the browser. If I press enter, nothing really happens here. So, I can actually pop this out into an external one. And uh this basically just gives me some more space to hopefully interact with the command. And uh okay, so that one actually failed. Um, I'm going to have to copy this line or I can I can just tell it like not working. give me the command to run because obviously this command is kind of waiting for me to do something and

so it wants you to press enter so that you can sign into versel on the web right is that kind of what's

exactly and you know the AI isn't able to like press enter for me or sign in for me which makes sense so uh it's telling me to just go and run the login command myself fair enough oh paste this in oh okay so this is another thing cursor has their own like weird terminal Gen, you probably don't want

To be in this most of the time. Uh, it's more so for the agent to use. So, I'm actually going to kill this and create a new one. So, I'm going to go run the login command. And it's telling me to visit a website or press enter. Okay. I can actually press enter. So, enter the code from your device. Okay. Okay. >> Authorization successful. I think >> you can close this tab. Okay. Congrats. I'm signed in. Great. Um, and now it's telling me to deploy to Versell. Uh >> oh. I would just say I've signed in. Continue. >> That's what I would do. [laughter] It might be it's a shortcut to you, but to me it's the only way because I I I don't know how to do it otherwise.

>> No, I mean this is great. You're teaching me about Vive coding. So, um it's running something. Let's see. Searching for existing project. It looks like it's doing something. >> And then it it can fail. But the thing is is when it fails, it'll give you a project link that you can click on and then the errors will pop up in Verscell that you can copy and give it back to cursor quad. >> Yeah. >> You know, with the new browser, you could probably even just open [laughter] it in cursor. Yeah. >> Oh wow. Definitely this screen does get a little crowded though. >> I don't like the browser. I'd much rather use the the swipe back and forth. >> Oh yeah, like the full screen. >> Yeah. >> Yeah. Yeah. Yeah. Uh, I think there's a lot of potential. You know, if you got a big monitor, I'm out here with my laptop. I would personally use the browser inside of the app if I was ever doing anything. Um, but let's see. The development is trying to build but needs an environmental variable, which is that secret key that we were talking about.

>> Like I said, you need the >> I need your in what is your instant? Okay, so it's just asking me for it. Um, I would just give it. So, >> can you just give it to the >> I mean, it's asking me for it. So a lot of the times um these keys will be placed in kind of a important and secret file called env.local or env sometimes the local isn't there. Um here's my key uh just to kind of like connect some dots. Eenv literally means environment. So it says is asking for my environment variable. So that's kind of it checks out. Um these are meant to be secret. Do not share these anywhere. Do not push them to GitHub because people can find them on GitHub. This is very important, but I'll go ahead and pass it to the AI and see if it can actually finish deploying.

>> I don't Let me add that environment variable. Okay. I was wrong. I didn't know that it could add them through the CLI. >> Yeah, that's really neat. >> Excellent. Okay. Redeploy. Yeah, deploy it for me. >> Let's go. And see, you have a >> a link >> project link. Yeah. Is this link going to be active? >> It does take some time to build. >> Yeah. Okay. No, that's really cool. I've never actually just told, you know, the cursor agent to deploy it for me, so I'm looking forward to it. I'm looking forward to you liking my memes. It's giving me a few follow-up commands. I'm just going to go ahead and allow everything. Uh, okay. I do see one deployment was ready and one failed. I think the first one that failed was probably the one without the environment variables. And okay, great. It's done. While I'm here, I just remembered another secret little tip for you guys. If you guys don't like clicking all the like allows and stuff, you guys can configure in the settings. I'm pretty sure it's Let's see. Where was it? Probably in general. Um Oh, yeah. You guys can have a completion sound. Uh system notifications. H editor settings. Keyboard shortcuts. Don't ask again. Wow. agent. Okay. Autocle clear chat. Here it is. Um Oh, you can actually turn off the web search tool. Auto accept on commit. Jump to next diff. Allow get to rewrite. So, there's a lot of ways you can kind of customize how autonomous your agent is. A lot of it will be in the settings. I highly recommend checking it out. Um I think I remembered I turned off like it would ask me every time if it Oh, yeah. This one auto accept web search. I turn this on because every single time it tries to read a website, it asks you and this is one of the settings that I instantly turn on because that was really annoying. But let's hop back into this. Um, it's live. I don't know. What's the link?

>> Was there nothing? It didn't give you a link if you scroll up. >> Oh, no. It gave me the link. I was just too lazy to read. >> Ah, >> cool. Um, you want me to text this to Just just go to it first. Let's see if it's live. I just want to see what what it looks like if you go to that link. So this link >> Oh, >> so there's two links it gives you. One is like the project link and then the other one because it looks like you signed in in Safari, but go to the other link. There's two. There should be two links >> in cursor. Scroll up. >> Is there two links? Yeah. Yeah. Uh maybe not. Go to versel. Oh, >> huh. I know what you're talking about, though. I think the I was on different Versel accounts in Safari and Arc. So, if I just put it in here, it should just let me in. Yeah. Okay. >> Yeah. But I won't be allowed in if you send it to me. So, you're go to Verscell. I think it's really useful to go to Verscell, actually. >> Okay. Yeah. Why why not? Let's do a little section on Verscell. So, here I see my meme generator project.

>> Can we talk about what it is? So, okay. So, what we just did is we deployed to Versaille. And if you're brand new, right, if you're if you're technical, you know exactly what we mean by deployed. um in which case this may be a little below you but that's okay for if those of you who are brand new to coding what we just did is we created all the files on cursor right uh we used AI to create the app and then we tested it locally then we deployed it to Verscell which means put it on the internet um it's not free to have something on the internet right you need to host it somewhere right is that what's happening here correct me if I'm using the wrong language but we're using Verscell to host it and now it's public on the internet and it doesn't just give you a fun cool domain. It would be nice if it did. It gives you this random long domain like meme generator-1/psl.verell.app and that is the domain that you can access to use the app. If you were to go to that domain actually we need to find the domain that's public. >> That is the public one. >> Okay, >> perfect. >> So that domain is literally on the internet. We'll put it in the description below. You'll be able to go and generate a meme, right? It is on the internet and I can use it. So Khan can actually send it to me. >> I can um we are not responsible for anything crazy that gets posted on that website. >> Yes. >> But this website is live. You guys can post things on it and make memes. >> And so if you go to the feed real quick, I'm signing in.

>> Oh yeah, you can. >> And I'm going to go ahead and say um >> yeah. So Riley was saying hosting and deploying basically remember that we were running this project locally on our computer and I mentioned before that all the websites all run on a server. It's just somewhere in the middle of nowhere. This is basically renting one of those servers in the middle of nowhere to run our website but forever and to put it on the internet. So really neat stuff. >> Oh, I didn't sign in. I have to sign in. Um >> you got authenticated. your authentication blocked. >> It's all good. I can sign in here. This is fun. Um, entering the code. >> I'm gonna make a meme, too. >> Verify code. All right. You should see mine on the feed, actually. Yeah, I see all of them. Oh god, I got signed in, too. Oh my god. Okay. Well, I'll just check out your meme. Um, >> I don't even I think you're going to have to sign in, bucko. >> Nope, I'm not signing in. >> Ah, I just posted the you deploy to Versel meme. >> Why? Why is she confused? Why is the side eye you deploy? >> Oh, okay. Well, I'm glad it works. Riley has came on and >> and look, I can like stuff. And what I love about Instant DB is it's real time. Everything in in Instant DB, at least to my knowledge when I use it, is very real time. So things happen. In fact, Vashall and I made a video where I used Instant DB to make a video game and the position of all the characters in the game were updated real time, which was a lot of fun. Yeah. >> Um, so yeah, I like Instant DB. It's great. >> No, me too. I'm a big fan. I like how it bundles storage as well. It's pretty good. >> Definitely try them out. >> Yeah. Okay. So, so far we've talked about what cursor was. We talked about the basics. Uh, then we dove into cursor 2.0, know, which was super fun for me because I learned about how you can run multiple agents at once. You could and it just completely new interface. It looks more like chat GPT. Um, and then we had a lot of fun in these two sections, three and four, where we built an app, right? We built the the the front end of the app. And then in section four, we built the database, which stores the data and how you showed us how you used the instant DB CLI to uh make permissions so that I can post to the feed. I can view the feed, but I can't edit your post in the feed. and we're kind of seeing how the data works in the background and then also we put it on the internet and then I signed into it and I posted to it and you could see it and we're creating an application and we could send it to everyone on our team and we could uh if you're viewing this video right now you can log in and make a meme and so yeah, we've covered a lot so far and um yeah, that's kind of what we've covered so far. I thought I thought it was a really good idea you mentioned we could compare these tools. Why don't we do that now?

>> Perfect. Yeah, let's hop in. So, these are the competitors we're comparing in the vibe coding space. We got Replet, Vzero, Lovable, and Cursor. And so, we have a few things on the left such as backend support, speed, model, effort to share, experience building with it, personal anecdotes, and the price. So, um, honestly, I think we can start with cursor since we just did a very in detailed rundown. Obviously backend support it's possible but you do have to kind of tinker explore you have the freedom to pick your own stack. You can kind of choose to do you know instant DB or superbase or firebase or you know like MongoDB. You can kind of pick whatever you want and you can learn your way across you know basically whatever you chose and figure it out and have the AI help you along the way. So, I think there is moderate support. Probably you'll see that the competitors actually have a lot better support and they hold your hand throughout the way a lot more, but I would say that this is like pretty moderate and uh pick your own adventure style like pick your own adventure. You can definitely get stuck and caught in some pretty uncomfortable places when like you just don't know what you're go doing with. And I think it's good to take a step back and do a little bit more learning before you hop back into the code. But I do think it has the highest skill cap, too. So, I think I'd say a solid moderate for, you know, backend support. I think for speed. Oh, thank you, Riley. I think for speed, you know, as you saw, Composer was super fast, you know, and then like, you know, all the other models are pretty much the similar speeds. So, like similar. It's comparable or better than anything else.

>> I definitely think Cursor is the fastest from my knowledge. I would argue lovable might be um the second fastest or even as fast, but I think there's a huge uh drop off in um >> quality of apps that you can create. Um Lovable's made for more uh simpler apps, I would say. >> Yeah, I agree. We can move on to Lovable, too. We'll be covering everything. Um but just wanted to run through cursor since we just spent so long on it. models as you saw. You can pick basically any Frontier model, their own model, and you can actually add models to the cursor, I believe. >> Yep. >> Um, so yeah. >> Yeah. Like you could you could literally run like llama locally. Um, like if you have the GPU. >> Wow. >> Like you can use local models on cursor. I'm pretty sure >> that's crazy. Yeah. U effort to share. You did see that we had to go ahead and deploy it on Versell and then only after that could I share the link. I had to set up GitHub. I had to set up Versell. I have to log in to the CLI tools. I'm going set this as like pretty high actually, like higher than most. Um, but obviously that's the price you pay for the flexibility you get. Experience building with it. I would definitely say um this is for people who have technical background or want to become more familiar with the vibe coding space in general. If you want to be one and done, you know, probably look into something else. If you're here to stay and you really want to upskill and truly find exactly like the peak of your creativity and where that can bring you, I would definitely go with >> proumer plus for this. That's what I would say. >> This is like you're you're not just trying to play with a toy, not a toy. Yeah. >> Yeah. And the fun part about cursor and we've talked about this um when making product decisions for our company is like you want it to feel like a skill. And cursor makes it feel like it is a skill that you can learn and you're always learning new things when you use cursor which is very fun. >> It's a skill diff if you don't know how to use cursor. And we're here to help. We can probably do a little bit more you know in detailed maybe basics of fundamentals or like technical vibe coding intro. I don't know. But uh price I'm going to have to I think this one's you know a topic of discussion. I think it can get pretty pricey, especially as I mentioned, in order for you to use multiple s models concurrently, you do need the highest plan, which starts at $200 a month. And I think that covers a lot of your token costs, honestly. But they can add up. You do they do have a pay as you go feature. And there have been months, you know, before when I've spent $100 on it, just pay as you go uh on top of like the the price that you pay just to use their service. So yeah, you know, it can get up there, but once again, it's kind of like >> how much you're playing with it. So, I genuinely think their price is, you know, they've had an influx throughout their history of being super cheap and then being super expensive. I think they're at a pretty fair point right now. I do think the value that I get for the money I spend on Cursor is not outrageous. And I think it's actually like, you know, now that like Composer is out and it's a very valid way to save money and it's so fast, I think it's honestly a pretty good time to hop in and start subscribing for the price. It's not outrageous. It's pretty good. It's the tool that gives you the like the the most um toggles to lower your cost. In my opinion, I would say it's probably the best. >> Yeah, it's very like price price flexible. Uh flexible good time to invest now. So yeah, that's currently kind of like our thoughts on cursor. Um, we have definitely spent a lot of time with all these competitors as well.

>> I would go horizontally for the rest of them and just kind of compare them to cursor. >> Yeah, sure. I think that's a great idea. Yeah. And so like um for backend support um for Lovable, let's put Lovable Cloud. >> So like Lovable added Lovable Cloud >> um which I've heard mixed reviews. It's basically a Superbase wrapper. Um >> and it allows you it creates a kind of backend for you and it also gives you like AI features kind of. So yeah, I do want to highlight the fact that you do not have the optionality to pick where your cloud is. And you know, that's pros and cons is it's a lot easier. So like easier, but you know, if you run into issues, you can't really use Google to like fix it. You have to like, you know, go search on lovable forums or join their discord or something. And also, if you're building something on Lovable and you want to like upgrade or like leave, like it'll get kind of tricky because, you know, your code really only works on Lovable's platform. So, as soon as you want to leave, you're kind of stuck. Um, leaving is not very easy. So, you know, there are some pros, there's some cons. You know, these are some cons and some pros. Like, this is pretty middle. Like, the pros are up top and the cons are down below. Um it's kind of like pretty good if definitely like if you want some more support and uh you want to just build one thing and be done and you probably won't reach mass mass scale like this is a good option >> for V v0ero I don't think has a backend feature. >> Um I think they do have a partnership with Superbase though. >> Okay. So you do a partnership with Superbase. So it's just not branded. >> Yeah they they just admit straight out it's Superbase and I'm pretty sure you have to sign in link your account. Uh so that does get a little bit like you know annoying because the good thing about lovable cloud being a superbased wrapper is it automatically links your account for you none of that stuff. So you have to do the linking yourself manually with Vzero which isn't hard you know not hard at all it's just like you know in the case something happens you have to deal with it yourself and the good part is you do you're not as stuck because like you know the whole database is exposed to you. You can kind of comb through the data whenever you want. You can export it. You can play with it. So it's not as bad as >> you could export your code and then uh like use Superbase with another um coding tool basically. >> Yeah. >> Yeah. And you know there's database migrations happens lots of times sometimes people directly move off of superbase to another database and that's pretty po that's like super possible with vzero not very possible with lovable. So that's another thing by being stuck. Um so yeah I think >> and then replet has one that's inhouse right? Yeah, they also have like an in-house uh like I don't know if it's called like replet cloud or something, but they they they offer in-house solutions and you can it's kind of basically the same as >> but I will say you it's a lot replet's the easiest one to also do external. So like replet you can pretty easily do external um d backend database and use their in-house one. >> Yeah. So they also do give Yeah, that's a great point. They give you the optionality but they have the in-house solution. So honestly, you're not very stuck, but uh at the same time, if you want something that's like very easy and holds your hand as you like kind of get it set up, that is a thing. Honestly, I think Replet is a there's a great solution in this uh in this category of backend support. >> Yeah, >> obviously it does fall behind. All three of these fall behind in terms of cursor as in the like online presence. How do I start presence? >> There you go. >> Yeah. So like you know for and I'm talking like okay I have an air and I'm trying to build a database with MongoDB what do I do right like cursor you just you know ask the AI go on Google you know you can kind of do something similar with replet but with vzero and lovable you're kind of constrained to digging through super basis docs digging through lovable's docs in that case lovable is you know the worst in that regard and replet's the best outside of cursor so yeah um speed.

>> Oh god. >> I would say >> what does it say? I would say V0ero and Lovable are are very similar. >> Yeah. >> Um and say like fast. I think Replet uh Replet kind of is trying to move away from vibe coding. Uh Omjad doesn't really like vi the idea of vibe coding and they famously recently came out with that new thing which was like um >> you know it thought for two hours. I don't know if you saw that. It thought for two hours. It was a super agent 2.0 0 and it was still worse than cloud code. But like that's neither here nor there. Um but like I would just put slower and more powerful in quotes I would say. >> Yeah. Slower um but definitely like it pays off, right? Slower but worth. >> Um >> slower but worth. And it gives you like questions too. Like it'll it definitely asks like clarifying questions more than v 0ero and lovable. >> Yeah. you know, replet is kind of like cursor plan mode plus like agent mode. Uh, so if you notice in plan mode, you know, cursor will ask you some questions. And also in agent mode, we saw that while we were asking it to like do the huge refactor, it asks us some questions. So it almost replic kind of defaults to that type of experience where it'll ask you clarifying questions, take a long time, but when you come back, it'll probably work. And I can't really say that about Vzero and Lovable. Um, these people, they like to kind of give you like little steps, you know, along the way and and a lot of the times like one of the middle steps will not work. Honestly, I find that really uncomfortable because it's like, wow, I don't know. I'm in like a bad spot. I don't know if I should go back or if I should continue like pushing through it, you know? So, these are kind of like step functions. >> What's the the next the next thing? Oh, model >> model. Yeah, model selections. So, yeah, I think Vzero and Lovable are very similar here. Um I think uh like yeah like they turn on something really quickly and you know it may or may not work while replet turns out something a little slower but it probably works and cursor if it works it's on you. If it doesn't work it's on you. >> That's a really Yeah, that's a good way to put it. >> Yeah. Um so honestly that bleeds a little with experience building it but I did want to touch on models. So I do know that uh Replet and lovable use anthropic under the hood. So you know you're you're basically committing to anthropic. Um and that you know you don't really like pick. Uh I think like >> Vzero has their own model that it uses by default. It's they've trained their own model. It's like v 0ero >> model. It's called v 0. >> Yeah. Oh, >> you can actually use V 0ero in cursor. Fun fact. >> Oh, I did not know that. >> Like the they have a model that's made specifically for Nex.js. >> Wow. [snorts] >> Yeah. And it's fast. >> So I think obviously their model is really good at writing Nex.js better than most other better than all other models. Um I think lovable you can actually switch to like GPT5 if you ask it like oh use GPT which is you know they don't have like that model. >> You can select you can select GPT5 now. Yeah, you can in in anthropic and I think Yeah, I think you do in Replet too. >> Oh, really? >> Yeah. >> Okay. Um, yeah, >> but yeah, you don't get like extra customizability. Uh, I don't think you can use anything beyond those. >> Not the full freedom of cursor and Versel is the most locked in as in they're kind of like stick with us. We're using Vzero. I mean, we're using our own model. Yeah. So, um, that that kind of matters because most of the times these players will be passing off the costs of these models down to the end user. And that's why we kind of said that you know with the pricing um price flexible is this directly correlated with how the models are like free freely selectable in cursor um effort to share uh let's see versell I think is vzero is the easiest to share they have like a one-click deploy so does replet's pretty easy too I would just rank these I would literally just go one versel two uh replet, three lovable, and then four cursor. Cursor is very much harder. And like you should, to be realistic, I would put like a seven for cursor just because it's significantly harder to share. And that's my that's the annoyance is if you're, >> you know, learning to code or you just want to vibe code, cursor is very hard to share. Like you have to literally deploy it to Verscell to share it with someone. Whereas I mean you have to deploy it to Vzero but Vzero is made by Versel and it automatically deploys it to Verscell and now they have a custom domain thing so you can select a domain and change the domain like you can literally buy it on Vzero. So, like I would just include that like Vzero is the best for like landing pages slash if you got to create like a a landing page where you want to gather info and you got to do it in 30 minutes, use Versell because it's quick, easy to distribute. Um, and you can add your own custom domain. >> Yeah, I think this is great. Custom domain. I'm sure like the other competitors have similar things, but none of it >> I actually think they're the only one who has custom domain. Oh, really? Um but you can deploy straight to replet. Um but I personally like verscel more than the replet uh deployments. >> Yeah. Yeah. I do know that um oftent times they will host you at a random link. I do believe lovable and replet automatically host you a public link which is you know why >> there's probably an argument to say that these three are very similar. Um, if you want to go it all the way to production level, I do think Vzero is faster. But if you want to get a link, you don't really care what the link like looks like. It's kind of like a bunch of fuzzy characters. You know, Lovable and Replet also can get the foot out the door really quickly. Um, I do think that, you know, all of them are going to require you to sign in. They're going to require your friend to sign in. And on that front, actually, V0ero will require if you have a backend, uh, you to fully integrate that with Superbase. And if you don't like signin will not work for the other person cuz I was playing with that recently and it was like oh wow this kind of feels like the worst of both worlds where you know I got to spend the time to get it configured and it's not as fast as the other two which is like level one replet just directly have a link. So that's something sometimes you know there there's a lot of caveats throughout here but um basically uh fast like random link and uh the same can be said here >> for replet. Yep. >> Yeah. So, >> what's what's the next one? Oh, experience. >> Yeah. >> Yeah. Ranking. So, just go cursor four. >> Just put a four there. >> What do you mean? >> Like rank like you need the most experience. >> Oh, >> yeah. Yeah. Yeah. And then uh I would go replet three. >> I don't know. Actually, I might I might challenge you on that. Who would be three? Uh, nah, you're right. It's probably Replet. >> Replet 3 and then V 02 Lovable One. I would I would say just and and maybe partially this is branding. Lovable is like kind of cute for kids. They're literally targeting kids. >> You can tell a lot about what Lovable's doing because they are literally like they just announced a partnership today with like some program that's like going to get Lovable into schools, which I think is incredibly smart on their part like to just get people used to using Lovable. It has a brand that's super approachable. like they in their last announcement video, they're like, "This 12-year-old just made a SAS and made money." Like they're they're really targeting young people. And so I think it's safe to assume it's just going to get easier and easier to use Lovable. >> Yeah. Yeah. And I do have to continue to emphasize that easier and easier is great, but it always comes at a cost for, you know, freedom, flexibility, and normally skill ceiling. So >> usually it's like graduation. Like with cursor, if you start on cursor, you'll never you're never going to graduate because like, you know, like you're never going to hit the ceiling where you're like, I need a more powerful tool. You'll just never hit that with cursor because like you can always make it more powerful. Um whereas, you know, if you choose any of these other three, uh especially VZ and lovable, like you might just hit that ceiling and you're like all it takes is you to like get angry about one project and switch to cursor, you might never go back. >> Yeah. >> Is kind of how I say it. Like once again you know most the lovable and vzero can only make websites replet you know it can make some like mobile configurations I don't know mainly a website developer as well cursor I can make a keyboard on this thing I could program a car on this thing I could program a drone I could program a mobile app you know I could do anything that code powers on cursor so that's really amazing um it's definitely like as I mentioned before you're using the Photoshop and these people are like canvas lovable is definitely going down the super canvas a route. Um but yeah, and I kind of like just ranking these >> [laughter] >> um like uh even for like I'm already thinking about pricing, but I guess I'll let you finish. >> Yeah. So, just to kind of highlight some key points that we made here, Vzero and Replet, they're honestly very similar. I guess this is more like step like you get more like a you know, more interactability like more. This is definitely more interactive than the replet. Replate is kind of like you give it a command, you like iron out what the command is and you come back in like five 10 minutes to like see if it worked. So this is definitely like a send prompt and check back type of type of software. But yeah, you know, honestly, pick whichever one you like if you want some something more handholdy. Um obviously we're here to convince you that cursor is where you probably want to start. Yeah. And then for price, um I would put four for well cursor is flexible actually. I I don't think we need to rank F. It belongs in its own category. >> That's true. And then I think the most expensive out of these three is the Replet. Um um someone posted a bill. So their new agent mode that runs forever, someone said it's costed $70 and it ran for six hours when building a product. >> Um which like in in uh in defense of Replet, you could compare that to hiring a developer for six hours. Um, >> it would cost you more than $70. >> It would cost you a lot more than $70, but like is it really as productive? Did it just get stuck in a loop? Like, who knows? Yeah. Um, you the risk of running a higher bill on replets probably the highest out of these. >> Um, and then I think [clears throat] Vzero and Lovable are probably comparable. >> Yeah, I think they're very comparable. I do think that um they both take a premium on top of hosting. Yes. Which is another thing. If you're sticking with cursor obviously you have price flexibility in using the model and when you go and you have to pay for a database you have to pay for like a server you do these things out of your own pocket so you can actually pick like the cheapest one. These people you kind of have to play with whatever they give you. So just you should count on it getting more expensive over time because these companies are operating at a loss and um >> they're going to be looking for ways to make profits later and so having all of your apps on their cloud there are there are some risks for that. >> Yeah. And so they being stuck on them you know it might come back to bite you later but these are pretty pretty much tied for number two. Um and they're not outrageous. I actually think Lovable's uh I think Lovable's price might be the one that I'm like I think I think Lovable is like slightly more expensive than VZO when iterating on. Um all in all though, I don't think like you know oftent times I'll send a prompt and I'm just not impressed with the output, especially with Vzero and Lovable and I'll have to spend more prompts on getting something to work and they have like the most complicated credit system, but then they also charge you for things like lovable cloud like hosting on Versell and all that stuff. So it does get a little convoluted. Um but yeah, I think this is pretty much a little chart about the players in the space.

>> Yeah. And um yeah, so if you feel like you're a proumer, if you feel highly motivated right now after watching this video, um I would recommend going with cursor just because I I mean I I have been vibe coding for the last year and a half. I still don't know how to write a line of code. I've never done it, but I use cursor all the time. You've seen me use cursor all the time. It's just fun. And then when new updates come out to like uh Claude Code or Codeex, I know that I can just use it within Cursor. It's like my safe little place. And we didn't really talk about using extensions. I've made videos in the past uh with Muhammad on using the cloud code extension, which is a whole video of its own. Um and fits more in the cloud code category, but I just love the flexibility of cursor for sure. Yeah, I remember when Riley and I began working on Vive Code, he actually made the weight listing website for Vive uh for Vive Code's first app launch. That was actually really amazing because we already had a database and we were like, "Hey, if you're going to make the landing page, we need you to add a weight list and we need you to connect it to our existing database." We totally did not expect him to do all of that, but he did because he used cursor. That would have been impossible on any other platform because of the limitations of like, oh, we need to use to our database clerk, I think, is what I had. We already had a user, you know, we had to like merge our users, we had to merge our data and that would have been very difficult if you were using any other provider. >> Yeah, but then just to say they did look over the code and they did make sure that it was good. I don't know. I hope so. [laughter] I hope so at least. >> No, no, no, we did. >> And so, yeah, we've covered a lot today. Why don't you scroll like zoom out for a sec? Oh, yeah. >> Let's take a look here. Yeah. And let's >> Why just in in a final review if you go up to the top for a cursor review. Yeah, we covered a lot today. We covered literally everything and we then compared all of the tools, right? You now know how to use cursor. And so my final challenge to you is this. Uh make an app and if you can deploy it to Verscell, share the link in the comments below. Um and just start with a project, right? The best way to learn how to vibe code in my opinion is just to pick a project and do it rather than learning like this as if it was like a textbook. Just pick a project and do it and then after you're done look at it and be like, "Okay, what topics did I learn in the process of doing a project?" >> Everyone who I've talked to who's like learned to code by themselves, even like manually coding, they learned through doing a project. Whether it was to make money or it was out of their own intellectual curiosity. do a project, look back at it, be like, "Okay, what did I learn?" >> Yes. >> And now you're equipped to do that. There's no more excuses. He just taught you basically everything about cursor. >> Yeah. I think definitely cannot echo enough that doing, doing, doing is way more productive than spending your time watching videos like these. I think if you reach the end of this video from start to finish, you're done. You're ready. Go hop out there and start using ask mode on cursor to learn about everything you don't know because >> and with that said with that said like and subscribe and watch every single one of my videos in the future but like any other videos no need to watch it. Um just go do stuff because we talk about doing. >> Yep. >> Anyway, um >> good luck out there. Good luck out there, everybody.