WEBVTT 00:02.000 --> 00:05.320 It is now time to build our first mini project using cursor. 00:05.480 --> 00:07.720 But how can we actually get started? 00:07.840 --> 00:12.600 Well, currently cursor doesn't have a way of starting a new project from scratch. 00:13.040 --> 00:17.120 I'm not sure what's the logic behind it, but I hope it's going to change in the future. 00:17.520 --> 00:21.560 Anyway, for now, the first step is to create an empty folder. 00:21.920 --> 00:28.520 And once you have that empty folder somewhere on your file system, click here on Open Project, even 00:28.520 --> 00:30.240 if there's nothing inside there. 00:31.480 --> 00:37.200 So the folder that I'm going to open is called 2D Space Shooter because yes, you have guessed it, 00:37.240 --> 00:39.520 we're gonna build a simple game. 00:40.480 --> 00:44.040 So this is how the entire project looks like when we're getting started. 00:44.280 --> 00:49.280 Just in case you don't see this chat part here, that's super important. 00:49.280 --> 00:51.360 This is where all the magic is happening. 00:51.680 --> 00:54.560 Make sure that this pane here is enabled. 00:54.560 --> 01:00.000 So you have here on the right hand corner this option of enabling and disable this. 01:00.040 --> 01:05.880 If you need a terminal window you can also enable and disable it from this other panel here that you 01:05.880 --> 01:06.280 have. 01:07.000 --> 01:10.990 And also there's this sidebar which is going to show us all the files, but for now, we're just going 01:10.990 --> 01:14.390 to keep here this chat part and feel free to make it a bit bigger. 01:15.190 --> 01:19.470 Now the next important thing is to have here selected agent. 01:19.710 --> 01:25.630 Now it is possible that initially it's going to be set here to ask, which is pretty much like ChatGPT 01:25.790 --> 01:28.510 asking something, and then it's going to get you a response. 01:28.830 --> 01:31.790 Actually you want to enable this agentic mode. 01:31.790 --> 01:33.110 So what is an agent? 01:33.270 --> 01:34.910 An AI agent is a tool. 01:34.910 --> 01:39.550 And you can think of it like a smart assistant that can read your code, understand what you're trying 01:39.550 --> 01:45.830 to do, and can help you write or fix code automatically, create files, run commands, and so on, 01:45.830 --> 01:47.950 and you want to see it in action in just a second. 01:47.950 --> 01:54.270 But super important, make sure it is set here to agent and here as a prompt. 01:54.270 --> 01:56.270 We're going to provide our instruction. 01:56.430 --> 01:59.590 And what we actually want to do is to build a simple game. 02:00.150 --> 02:02.710 So the instruction is going to be very, very simple. 02:02.750 --> 02:06.990 Build a 2D space shooter game using three.js. 02:07.550 --> 02:09.110 I'm going to click here on send. 02:09.790 --> 02:13.030 And now this code is going to be generated. 02:13.030 --> 02:16.590 So it's going to tell you step by step what needs to be done. 02:16.870 --> 02:18.750 And you're going to see here files appearing. 02:18.750 --> 02:23.430 So this is the package.json file which is storing all the dependencies. 02:23.670 --> 02:27.630 And then it's creating some files for example index.html file. 02:27.670 --> 02:33.630 So you see here things appearing on the screen at the same time code is being generated. 02:34.110 --> 02:37.990 I'm going to leave it for just a few seconds to complete what it is doing. 02:39.870 --> 02:43.630 So at this point the agent has created a bunch of files. 02:43.630 --> 02:48.590 We can go here to the history and understand exactly what is the purpose of every file. 02:48.590 --> 02:53.150 We can also ask follow up questions so we can ask, hey, why do we need that particular file? 02:53.470 --> 02:58.710 And we can also see here in source the various files that have been created in order to get this application 02:58.710 --> 02:59.430 to run. 02:59.430 --> 03:04.550 So if we agree with all the changes that have been added here, we can simply accept all. 03:04.550 --> 03:09.390 So then they're going to be pretty much safe is part of our project. 03:09.950 --> 03:13.990 And now there are also a few things that the agent hasn't done. 03:14.310 --> 03:18.750 So first of all, we're going to take a look here at these instructions that are available here. 03:19.110 --> 03:23.110 It's going to tell us, hey, in order to get this to run you need to do a few things. 03:23.110 --> 03:28.220 First of all you need to run npm install and we get here this run button here. 03:28.220 --> 03:29.380 So we're going to click on it. 03:29.380 --> 03:35.660 So this is something that the agent has not done on its own because from a security perspective is a 03:35.660 --> 03:36.300 bit more tricky. 03:36.340 --> 03:37.580 We can configure that as well. 03:37.580 --> 03:38.700 We're going to see it soon. 03:39.140 --> 03:42.980 And after we have installed all the dependencies we can start the development server. 03:42.980 --> 03:45.540 And this is done using the command npm start. 03:45.540 --> 03:46.940 And we can also click here. 03:47.420 --> 03:49.700 And this is going to be started. 03:49.700 --> 03:55.660 And what we're going to see here in the terminal is actually the address where this application is running. 03:56.100 --> 03:58.300 So all you need to do is click on this. 03:58.340 --> 04:04.460 It's going to be either pressing the control or the command key on your keyboard in order to open this 04:04.500 --> 04:05.220 in a browser. 04:05.900 --> 04:09.740 And this is how the game looks like and figure out what I can do. 04:10.780 --> 04:13.420 It looks like my version doesn't allow me to shoot. 04:13.460 --> 04:15.820 Typically that should be with a space key. 04:16.340 --> 04:21.940 Left and right is working just fine, but if one of the bad guys catches me, then I'm gonna die. 04:22.300 --> 04:24.700 So currently the game still has a few bugs. 04:24.700 --> 04:26.140 Maybe your version is working. 04:26.140 --> 04:30.460 It really depends, but you can go ahead and continue the conversation. 04:30.460 --> 04:30.980 So let's see. 04:31.020 --> 04:33.380 For example, for my use case, how can I shoot? 04:33.900 --> 04:40.700 And we can go ahead and ask, I'm gonna press enter or hit send and it's going to notice, hey, this 04:40.700 --> 04:46.700 guy cannot shoot or there's a problem and it's going to go ahead and directly update the code, going 04:46.700 --> 04:47.820 to make all the changes. 04:47.820 --> 04:51.020 And then all we need to do is restart the game. 04:52.140 --> 04:54.020 So as you can see, the agent is pretty independent. 04:54.020 --> 04:56.420 It's figuring out on its own what needs to be done. 04:56.460 --> 05:01.860 It's going to go again with accept all without really looking into what has happened there. 05:02.580 --> 05:07.900 The application is going to be restarted and I'm going to open the browser and take a look at the game 05:07.900 --> 05:08.260 again. 05:08.700 --> 05:11.220 So now look, I can shoot in. 05:11.220 --> 05:14.940 This particular bug has been fixed by the agent itself. 05:15.180 --> 05:19.180 Well it would have been nice if this would have been done right right from the start. 05:19.580 --> 05:25.260 But this was just a simple demonstration, maybe in a graphical way, that helps you better understand 05:25.260 --> 05:29.620 exactly what coding is all about, how does it work? 05:29.860 --> 05:34.860 And even if this example is simple and childish, I think you're gonna get the main idea out of it. 05:34.860 --> 05:37.540 So enjoy the game and see you in the next one.