WEBVTT 1 00:00:02.160 --> 00:00:06.720 So Cursor has its suggestions completions mode, 2 00:00:06.720 --> 00:00:10.980 it has this inline edit mode, this inline chat, so to say, 3 00:00:10.980 --> 00:00:14.190 and it has this external chat here. 4 00:00:14.190 --> 00:00:15.900 You saw all these in action 5 00:00:15.900 --> 00:00:17.220 and you can play around with them 6 00:00:17.220 --> 00:00:20.133 and you'll see them in action again later in the course. 7 00:00:21.960 --> 00:00:25.950 Cursor also has one other pretty interesting mode, 8 00:00:25.950 --> 00:00:29.100 and that's the composer mode which you can open 9 00:00:29.100 --> 00:00:32.973 by pressing command or Ctrl+I by default. 10 00:00:33.840 --> 00:00:37.800 Now by default, in newer versions of Cursor, 11 00:00:37.800 --> 00:00:41.010 this composer mode will not open up as an overlay 12 00:00:41.010 --> 00:00:42.510 as you see it in this video, 13 00:00:42.510 --> 00:00:45.630 but instead as a sidebar, it is the same feature though, 14 00:00:45.630 --> 00:00:47.730 and works in the same way as described. 15 00:00:47.730 --> 00:00:49.170 It will just open up here 16 00:00:49.170 --> 00:00:52.920 and it will also allow you, at least at the point of time 17 00:00:52.920 --> 00:00:55.983 where I'm recording this, to switch between different modes, 18 00:00:57.000 --> 00:01:00.630 Ask, and Agent, and Edit mode. 19 00:01:00.630 --> 00:01:04.170 Now, the short version is that you should use Agent mode. 20 00:01:04.170 --> 00:01:06.750 It is the most powerful version of Composer, 21 00:01:06.750 --> 00:01:09.960 which is not just capable of understanding your code 22 00:01:09.960 --> 00:01:13.470 and making suggestions regarding code changes, 23 00:01:13.470 --> 00:01:17.370 but it's also capable of running commands, creating files, 24 00:01:17.370 --> 00:01:19.590 and doing all these kinds of things. 25 00:01:19.590 --> 00:01:22.200 Though don't worry, for all the commands 26 00:01:22.200 --> 00:01:25.650 it wants to execute, it always asks you first, 27 00:01:25.650 --> 00:01:28.923 so it will not randomly delete your hard drive. 28 00:01:29.760 --> 00:01:32.490 Ask is essentially the chat mode, 29 00:01:32.490 --> 00:01:33.810 so if you just have questions 30 00:01:33.810 --> 00:01:36.630 but you don't want Composer to do anything, 31 00:01:36.630 --> 00:01:39.360 you just want it to suggest changes basically, 32 00:01:39.360 --> 00:01:42.600 or answer questions, that would be the mode you wanna use, 33 00:01:42.600 --> 00:01:45.000 and Edit is the old composer mode, 34 00:01:45.000 --> 00:01:48.270 which is able to edit code but not really run commands. 35 00:01:48.270 --> 00:01:51.180 So Agent mode is what you should use. 36 00:01:51.180 --> 00:01:53.190 You also might have another dropdown here, 37 00:01:53.190 --> 00:01:57.150 which allows you to choose how it selects models 38 00:01:57.150 --> 00:01:59.940 and whether it should use reasoning models 39 00:01:59.940 --> 00:02:03.930 and try to think before actually making changes. 40 00:02:03.930 --> 00:02:07.530 Though I will also say that the exact settings you have here 41 00:02:07.530 --> 00:02:09.060 will change over time. 42 00:02:09.060 --> 00:02:13.080 For now, the important part is that you use this agent mode. 43 00:02:13.080 --> 00:02:15.300 Now here in this video, I'll switch back 44 00:02:15.300 --> 00:02:18.330 to the old recording where this was still an overlay, 45 00:02:18.330 --> 00:02:20.940 but again, what I'll explain is exactly the same 46 00:02:20.940 --> 00:02:22.920 and it will work in exactly the same way 47 00:02:22.920 --> 00:02:25.230 with the newer version of Cursor. 48 00:02:25.230 --> 00:02:29.610 Now, this composer mode is a feature that exists 49 00:02:29.610 --> 00:02:34.203 to simplify the process of making multi-file edits, 50 00:02:35.730 --> 00:02:39.150 or in general, more complex edits, you could say. 51 00:02:39.150 --> 00:02:41.250 You could do it all with just Chat 52 00:02:41.250 --> 00:02:43.590 or with just Auto Completion, 53 00:02:43.590 --> 00:02:45.930 but Composer tries to make it a bit easier 54 00:02:45.930 --> 00:02:48.660 to make more complex edits 55 00:02:48.660 --> 00:02:51.273 that possibly affect multiple files. 56 00:02:53.010 --> 00:02:57.070 Now, you can also expand this composer window a little bit 57 00:02:58.350 --> 00:03:01.290 by clicking open Control Panel 58 00:03:01.290 --> 00:03:06.030 or using the shortcut you see there, to get this screen, 59 00:03:06.030 --> 00:03:07.770 which I personally prefer 60 00:03:07.770 --> 00:03:11.223 because there's a bit more space here. 61 00:03:12.210 --> 00:03:15.180 Now, it's just an overlay to the project, just to be clear, 62 00:03:15.180 --> 00:03:17.883 but it's a nice way of working with Composer. 63 00:03:18.720 --> 00:03:20.880 Now, how does Composer work? 64 00:03:20.880 --> 00:03:25.170 Well, Composer has a chat interface here. 65 00:03:25.170 --> 00:03:26.880 You can write your instructions here 66 00:03:26.880 --> 00:03:30.270 and just as before, you should write good prompts here, 67 00:03:30.270 --> 00:03:32.613 meaningful prompts, to describe what you want. 68 00:03:33.750 --> 00:03:36.120 But let's say we now wanna add 69 00:03:36.120 --> 00:03:38.880 authentication to this application, 70 00:03:38.880 --> 00:03:41.340 which in this application structure, 71 00:03:41.340 --> 00:03:43.260 will affect multiple files. 72 00:03:43.260 --> 00:03:45.990 I need to add routes, controllers, models. 73 00:03:45.990 --> 00:03:48.963 It's a edit that affects multiple files. 74 00:03:50.130 --> 00:03:54.090 Well, what I can do is I can add my code base 75 00:03:54.090 --> 00:03:56.430 as context, to make sure 76 00:03:56.430 --> 00:03:58.650 that the entire code base is evaluated, 77 00:03:58.650 --> 00:04:00.963 though it should also work without doing that. 78 00:04:02.190 --> 00:04:03.720 So let's maybe try it without it, 79 00:04:03.720 --> 00:04:05.580 but you could add it to be safe, 80 00:04:05.580 --> 00:04:09.873 and then here I'll say, "I want to add user authentication. 81 00:04:10.920 --> 00:04:14.700 User signup should happen 82 00:04:14.700 --> 00:04:19.700 via POST requests to /users/signup, 83 00:04:22.440 --> 00:04:27.440 login via POST to /users/login." 84 00:04:28.800 --> 00:04:32.940 So again, using my developer knowledge about the web 85 00:04:32.940 --> 00:04:35.730 and how it works, to be pretty specific 86 00:04:35.730 --> 00:04:40.320 regarding what I want, to save time, I would otherwise maybe 87 00:04:40.320 --> 00:04:43.143 have to spend on unnecessary iterations. 88 00:04:44.040 --> 00:04:46.530 I rather be clear about what I want 89 00:04:46.530 --> 00:04:48.183 and write it down like this. 90 00:04:49.357 --> 00:04:54.123 "User data is stored in a SQLite database. 91 00:04:56.640 --> 00:05:01.467 Use JWT," so JSON web tokens, "for authentication." 92 00:05:04.350 --> 00:05:06.270 So these could be my instructions. 93 00:05:06.270 --> 00:05:08.370 We could try to add more context, 94 00:05:08.370 --> 00:05:10.020 try to be a bit more specific, 95 00:05:10.020 --> 00:05:13.470 or possibly try to split this up into multiple problems, 96 00:05:13.470 --> 00:05:15.453 but I'll try these instructions. 97 00:05:17.400 --> 00:05:21.180 Now, what should happen here is that Cursor 98 00:05:21.180 --> 00:05:26.180 now goes ahead and actually creates the files it needs 99 00:05:26.700 --> 00:05:29.400 to fulfill this request. 100 00:05:29.400 --> 00:05:32.550 That could be one file, could be multiple files, 101 00:05:32.550 --> 00:05:34.290 and it's not just about creating files, 102 00:05:34.290 --> 00:05:36.543 it's also about editing existing files. 103 00:05:37.830 --> 00:05:40.020 So here you see, for example, 104 00:05:40.020 --> 00:05:44.280 it wants to create a user's JS file, src/routes/users.js. 105 00:05:44.280 --> 00:05:45.760 It wants to create this file 106 00:05:47.160 --> 00:05:50.010 which contains all the code for the routes 107 00:05:50.010 --> 00:05:52.530 and for hashing the passwords, 108 00:05:52.530 --> 00:05:55.830 for inserting the data into the database. 109 00:05:55.830 --> 00:05:57.783 Yeah, all that is in here. 110 00:05:58.890 --> 00:06:03.890 In app.js, it then loads configuration, 111 00:06:04.050 --> 00:06:07.860 it adds a utility function for authenticating a token, 112 00:06:07.860 --> 00:06:10.290 an authentication token that might be attached 113 00:06:10.290 --> 00:06:11.613 to an incoming request, 114 00:06:12.870 --> 00:06:15.510 and by the way, if this doesn't tell you anything, 115 00:06:15.510 --> 00:06:17.040 it's not about the app here. 116 00:06:17.040 --> 00:06:19.500 The app very likely won't work at the end here 117 00:06:19.500 --> 00:06:20.640 because we won't finish it. 118 00:06:20.640 --> 00:06:23.550 It's just about understanding what Cursor can do, 119 00:06:23.550 --> 00:06:26.250 and here it's building parts of this web app for us, 120 00:06:26.250 --> 00:06:28.980 and it's adding token-based authentication. 121 00:06:28.980 --> 00:06:30.333 At least it's trying to. 122 00:06:31.650 --> 00:06:33.900 So it added this code here, 123 00:06:33.900 --> 00:06:37.653 registers the user routes, imports the user routes, 124 00:06:39.180 --> 00:06:41.880 and in tables.js, it makes sure 125 00:06:41.880 --> 00:06:43.920 that requests must be authenticated 126 00:06:43.920 --> 00:06:47.103 in order to reach these routes. 127 00:06:48.480 --> 00:06:50.400 So that's the composer mode. 128 00:06:50.400 --> 00:06:54.270 It's a nice way of making multi-file edits 129 00:06:54.270 --> 00:06:57.240 in a structured way that's not overwhelming, 130 00:06:57.240 --> 00:06:59.760 because you can see the files that are edited, 131 00:06:59.760 --> 00:07:02.103 you get an overview of which edits are made, 132 00:07:03.270 --> 00:07:06.120 and you can also go into Diff view 133 00:07:06.120 --> 00:07:08.763 to see a difference compared to the previous code. 134 00:07:10.290 --> 00:07:13.713 The green parts are new, red parts would be removed, 135 00:07:15.060 --> 00:07:16.860 so that you can see in detail 136 00:07:16.860 --> 00:07:20.700 where exactly code's about to be inserted or removed, 137 00:07:20.700 --> 00:07:22.563 and which code it will be. 138 00:07:23.850 --> 00:07:28.833 And then you can save this for future use, 139 00:07:29.910 --> 00:07:32.850 reapply your prompt, reject it, or accept it, 140 00:07:32.850 --> 00:07:35.133 or write follow-up instructions. 141 00:07:36.420 --> 00:07:38.250 For example, here, I don't want 142 00:07:38.250 --> 00:07:41.763 to have the database created in the users routes file. 143 00:07:42.600 --> 00:07:45.330 I want to have a separate file or a place for that, 144 00:07:45.330 --> 00:07:47.583 so I'll send a follow-up instruction. 145 00:07:48.697 --> 00:07:52.530 "The database should not be initialized 146 00:07:52.530 --> 00:07:55.323 in the users.js file. 147 00:07:56.460 --> 00:08:01.460 It should happen in a separate file and function." 148 00:08:04.980 --> 00:08:06.750 And I can hit Submit, 149 00:08:06.750 --> 00:08:08.610 and it did now not accept these changes. 150 00:08:08.610 --> 00:08:11.940 Instead, it changes the changes, so to say. 151 00:08:11.940 --> 00:08:15.030 It changes the code it generated before. 152 00:08:15.030 --> 00:08:17.130 The code in the project, 153 00:08:17.130 --> 00:08:20.040 so behind this popup here, has not been touched 154 00:08:20.040 --> 00:08:21.303 at this point of time. 155 00:08:22.230 --> 00:08:24.210 Instead, it now tries to come up 156 00:08:24.210 --> 00:08:26.460 with new changes it wants to apply, 157 00:08:26.460 --> 00:08:28.620 and only once we accept those, 158 00:08:28.620 --> 00:08:32.523 the actual code base will be hit with those changes. 159 00:08:33.990 --> 00:08:37.170 So for example, now it created a database.js file, 160 00:08:37.170 --> 00:08:39.420 which contains the initialization code, 161 00:08:39.420 --> 00:08:43.830 and it uses the database from that file here in users.js, 162 00:08:43.830 --> 00:08:47.473 and now when I'm happy, I can click Accept, close this, 163 00:08:50.940 --> 00:08:55.500 and now back in my code base, I got these files added, 164 00:08:55.500 --> 00:08:59.223 and the files contained the code I saw in Composer before. 165 00:09:00.690 --> 00:09:04.173 Again, we could have achieved the same thing here in Chat. 166 00:09:05.040 --> 00:09:08.310 I could have passed the same instructions to Composer here 167 00:09:08.310 --> 00:09:11.550 and it probably would've suggested the same changes 168 00:09:11.550 --> 00:09:13.953 and additions to this project. 169 00:09:15.360 --> 00:09:18.720 Composer just is a more convenient way of doing that 170 00:09:18.720 --> 00:09:20.280 because it's all in one place, 171 00:09:20.280 --> 00:09:23.370 it's easy to manage these changes, tweak them, 172 00:09:23.370 --> 00:09:26.523 and then apply them in one go once you're ready to go. 173 00:09:27.600 --> 00:09:30.510 So, it's a nice extra tool to be aware of. 174 00:09:30.510 --> 00:09:33.060 Of course, like all these tools, it's up to you 175 00:09:33.060 --> 00:09:36.030 if you wanna use it or if you maybe prefer using Chat, 176 00:09:36.030 --> 00:09:39.060 or if you wanna start writing the code on your own 177 00:09:39.060 --> 00:09:40.440 and you rather use 178 00:09:40.440 --> 00:09:42.873 the Auto Completion and Suggestions feature, 179 00:09:43.830 --> 00:09:45.630 or a combination of all. 180 00:09:45.630 --> 00:09:48.000 It's a tool set you can use, 181 00:09:48.000 --> 00:09:50.340 and it comes down to personal preference 182 00:09:50.340 --> 00:09:51.540 what you wanna use, 183 00:09:51.540 --> 00:09:54.243 but it's important to know about all these tools.