PAILPq1AImY
Let's learn how to use Cursor AI
Transcript
[00:00] The workflow I'm about to show you right now in cursor AI, if I would have associated this to a junior engineer, would have taken them around two weeks to do. Let me show you how to do it under 30 minutes. For anyone that develops frontends knows that one of the most important things that you need to do is ensure responsiveness on all devices, tablet, mobile, desktop. And the way we would approach this is we would right click here, you'd hit inspect for context. This is on Chrome. You'd come up here to devices, click it, and this would allow you to move this bar to go back and forth the different screen sizes. In addition, we can call you to dimensions and we get very specific metrics on the different
[00:31] devices you can put this on. Eg iPad Pro Surface Duo. In the old way of coding, I would have needed to manually review the entire responsiveness of my app. But now with Cursor 2.0 and this new agent workflow, this is probably one of the most impressive things I've seen specific to front-end development. Let's check it out. So, as we know on mobile, iPad, and desktop, we need to change how our underlying UI looks like to look better. a desktop version of your app can't be your mobile version of the app. That's why a very simple way typically to do this is to do columns
[01:03] alternatively to rows in the code. And if you know this, then to prompt the AI model to do it for you is a lot simpler than you think. And it requires this browser feature and specifically Google Chrome to be selected. Now, what I want you to understand real quick is that the browser tab is hit or miss right now. Cursy 2.0 just came out. So by the time you use the browser tab feature, it might be absolutely perfect. But in the short term, this feature is a little bit buggy. So it's not a U thing. It's a cursor AI 2.0 thing. Chrome though is just going to open up the relevant browser into a separate tab. So I'm
[01:33] going to be looking for this localhost 3000 to be open. And I'm going to first identify with my little agent here that you can see it. So typically what I like to do is start the workflow with ask. I don't want it to just shoot off and start working. The typical terminology you want to use is navigate to localhost 3000. Ensure that the browser feature is on with Google Chrome and hit enter. This should open up a Google Chrome in incognito on your desktop. Here's the first thing that it does that's extremely annoying where it says it can't use the browsing feature. So what I typically do is hit new agent here and I show I show all these errors in my
[02:05] videos y'all. So you as a developer can see that it's not all just perfect and cookie cutting. I show how to troubleshoot on this channel. So make sure to subscribe here. Make sure leave a like. I'm going do the exact same prompt. Navigate to enter. And it worked this time. So, here we go. As you'll notice, it is in incognito mode. Uh, one thing to take note is that because it's in incognito mode, uh, this requires you if you want to sign into an account for your software, like you have to resign in. It's a little frustrating, but they do this on purpose for security reasons because they don't want to basically give Cursor AI the ability to have a
[02:36] logged in browser. They can go to your Gmail, go to your bank, and everything of that nature. That's why up here as well, Chrome is being controlled by an automated test software. So, with this open though, I can go ahead and just expand it. Now that we've identified that it's open and as you can see from the text, lead the llama, the workflow, leads wardrobe. These are different components found behind me here. It sees it. Watch this prompt. This prompt took me 20 seconds to type. If I were to have to explain the processes and labor associated for responsiveness, this would have taken me a 20-minute call with a junior engineer. And then on top of that, this would have taken two to
[03:06] three weeks for that junior engineer to confirm the labor. But watch this. Okay. Okay, I want you to navigate through my entire website, click buttons, and see all pages. Make sure it looks good on mobile, tablet, and desktop, and come back to me for report. Don't stop looking until it's done. Now, typically with these kind of prompts, I would suggest using ask, but due the fact that in order for this to take screenshots and navigate through your local host 3000, it actually requires agent. I'm going to hit enter here. And I don't care how long this takes. I don't care if this takes 30 minutes. I don't care if this takes 40 minutes because I know conceptually if I were to request the same exact thing to someone else or I do
[03:37] it myself, this would have taken way longer. Look at this y'all. It's going off. It's clicking through. I come over here. It's no joke. Cursor AI is quite literally going through my entire application right now in desktop. Then it's going to switch to tablet and then it's going to switch to mobile. And it's going to do this all automatically. Just switch to tablet. It's checking again. It's going to do this all automatically. When I say we're in a new era of coding, I'm not joking. The reason why a lot of people don't understand how this is the new age of coding is either they have been so laser tuned into a specific tech
[04:07] stack. They don't realize the implications of what this means or alternatively they didn't take the time to realize how big of a deal these kind of workflows really are in software development. Your next question might be this is super cool. I want to learn more. What I'm showing you right now is probably 2% not even 2% I would say under a percent of the value I provide in another series I'm doing on this channel. Let me show you that series. And if you actually want to take this stuff seriously, I encourage you to watch every single video. These are long, meaty videos, 30 minutes, 50
[04:37] minutes. Because in reality, for me to show you how to really create an application for production and make money, it's going to take hours for you to learn. But those hours for you to learn took me years to understand. So check out this playlist description down below. All free. What you'll notice as well is that these agents are extremely advanced. They're able to do very specific types of commands within literally typing on your keyboard. And look at this cursor. Cursor is absolutely beautiful. It wants to give you another update. Not right now. We're doing a video. Okay, I'm going to let this run and then I'll tell you how long it took. So, I'll be back. It went ahead
[05:08] and compiled a report and it took around 6 minutes with this report. I can scroll all the way up. Responsive layout. All sections render as expected. Layout responsiveness inside bar behavior consistent. Hamburger menu works. Layout responsive. What does it mean? Hamburger menu. Now, we're not talking about McDonald's, but if you love hamburgers, oh, take me to In-N-Out. I love those banana peppers. Uh, hamburger menu means when you go into here and then you see these three little lines and then it will dive in further depending on the page. One thing I want to make fundamentally extremely clear here is that when it gives you an
[05:38] output like that and it says everything is perfect and everything is like beautiful. It might not be perfect and beautiful but that is your role now as an AI coder. You are the senior engineer. I have had situations where junior engineers gave me code that they thought was good and it was not good. Therefore, I had to review the code. So, yes, this does require a little bit of you to go through the front end, you to find that little nuance of stuff that maybe doesn't functionally work on a review on this. But what I want you to understand is sooner or later, these agents are going to be just as good as a senior engineer. Right now, they're at
[06:10] the mindset and mental capability of a junior engineer. I'm not saying this stuff to be disrespectful. I'm just trying to say this stuff. I'm trying to give you context of where we're at right now when it comes to skill. Right now, these are like junior engineers. which is really good skill, but you still need the ability to review the code. And don't worry, you check out that series if you want to know how to review the code. Because one thing I found right off the bat, if a junior engineer had given this to me, and I went ahead and zoomed in a little bit, is I noticed it says the hamburger menu worked effectively, but in reality, if I click it, nothing happened. I'm not here to
[06:40] try to clickbait you. I'm not here to try to sell you a dream. That's an error. That's a mess up. So, what would I do in this context? In this context, what I would do is I would talk to the agent like I would a junior engineer and simply put out, hey, yeah, it shrink down to a hamburger menu, but the drop down doesn't work. Therefore, I would put, okay, after reviewing the hamburger menu shows, but the drop down doesn't work. Now, where does this translate to the old way of handling this kind of logic? I did a whole 46-minute video dumbing down GitHub to its absolute barebones. You can check that out if you need to understand what GitHub is and
[07:11] why it's fundamental to software engineering. But the way this would translate in traditional software engineering is first, let me just pull this PR. So we got front end done. Um, essentially for the series I'm doing, I want to finish the entire front end before I jump into the back end. And there's reasons behind that. If you want to know the reasons, check out the series. All right, front end done. And what I usually like to do is like take a real quick screenshot just for the front end. Nice. Drag it in there. Create pull request. So typically what would have occurred here if let's say I'm the junior engineer, I would have created the PR here. I would have hit reviewers here and then select the senior engineer to check the code. Obviously, if you're a team alone, if you're numa, you're
[07:42] just ins then it's just going to be you. You're the junior and you're the senior. Uh that sounded like a quote. But in typical software engineering, what would have occurred if this was a human-touman situation is that request of, hey, it worked on hamburger, but it didn't actually do the drop down motion. I would have put in as a comment here for the engineer to look at. In addition to this, I would have DM the engineer directly on Slack to let them know that most of the PR is correct. But here is a glitch that I found. For everyone that's already watching the series, I'm sorry
[08:12] for keep shouting it out, but y'all got to understand that not a lot of people even know this is happening right now. But in this series that I keep harping on in the description down below, Google AI studio to vibe code your entire software. We're going over everything, y'all. The tech stack, app UI, app value, sign up, database functions, and I'm showing this from a real perspective. I'm going to go ahead and link another video at the end of this one that goes over the power of the multi- aent feature and running them in parallel as yeah, right now this is fixing the hamburger situation, but there's no reason I can't shoot off another additional three to four agents
[08:43] to handle other issues or adding other UI elements found within your software. So, I'm going to let this keep generating here and we'll see the final product. Right now, we're coming to the finish line for that hamburger request and making sure mobile navigation works correctly. One thing I want you to look at is how intuitive this is. This is doing testing that a real engineer would have done anyways. So, for example, testing a few more drop down items than verifying the final implementation. What I want you to notice is that it navigates to click the menu button and then it is clicking the pricing on the navigation button in order to ensure that on the UI behind me, it is shot
[09:15] down to pricing. These are kind of tests that we used to have to do personally. The AI is so smart now that it's able to get the image context to know whether or not if I click pricing, it goes to the pricing section on the landing page. And when it's done doing its work, awaiting review, and then what I need to do is as the role of the senior engineer is simply review its work. So I scroll this down here. You know, maybe on tablet I'll make this look a little bit better. Maybe I'll hide one of these. But let's see what it looks like on mobile. And there we go. So yeah, it's a little bit too transparent for my liking, but all
[09:46] you would need to do is simply put in a request that, hey, make it so I can see the text better. That just about does it in today's video on something that fundamentally would have taken so much longer in the past. So make sure leave a like. It is completely free. And as you already know, these style videos, I'll see you in the next cursor. AI just made front end engineering extremely easy when it comes to mobile responsiveness where something that would have taken a couple of hours before now only takes a agent to run for 8 minutes and then you can review the code and get the best code type of video. Now, we're not talking about McDonald's, but if you love hamburgers, oh, take me to In-N-Out. I love those banana peppers.