WEBVTT 00:00:00.080 --> 00:00:04.019 To dive a bit deeper into Cursor, I'm in a 00:00:04.160 --> 00:00:07.660 new project here, which you'll find attached in case you 00:00:07.720 --> 00:00:10.480 along. This is not a Python project. 00:00:10.540 --> 00:00:14.410 Instead, it's a ReactJS project. In case you don't know, 00:00:14.460 --> 00:00:18.430 ReactJS is a web development front-end library that 00:00:18.460 --> 00:00:22.260 simplifies the process of building complex web applications, or web 00:00:22.320 --> 00:00:26.260 application UIs, I should say. If you want to follow along, you 00:00:26.300 --> 00:00:29.060 will need to install Note JS, which you can from 00:00:29.160 --> 00:00:32.400 notejs.org. But, of course, following along is totally 00:00:32.500 --> 00:00:36.360 optional. With that installed, in that attached project, you would need to 00:00:36.400 --> 00:00:39.760 run npm install to download all packages required by this 00:00:39.769 --> 00:00:43.680 project, and then npm run dev to start the dev 00:00:43.720 --> 00:00:46.900 to preview the website whilst you're working on it. 00:00:46.940 --> 00:00:50.449 You then have to visit localhost 5173 to see it. 00:00:50.500 --> 00:00:53.940 And at the moment, there's only Hello World on that site. 00:00:53.980 --> 00:00:56.380 Of course, that should change though. 00:00:56.460 --> 00:01:00.360 And I wanna change it with help of AI again, so with help of 00:01:00.420 --> 00:01:04.019 this agent mode again. And the arguably boring 00:01:04.160 --> 00:01:07.900 but nonetheless sufficient demo application I wanna build here is a 00:01:07.920 --> 00:01:11.880 simple to-do manager which allows users to manage to-dos 00:01:11.940 --> 00:01:15.690 in the browser with help of ReactJS, because it's not 00:01:15.700 --> 00:01:18.490 primarily about the app here, but instead about learning about 00:01:18.520 --> 00:01:22.360 Cursor. So of course, I could send this instruction, but again, 00:01:22.420 --> 00:01:25.680 not be very precise. So that's why I added some 00:01:25.720 --> 00:01:29.660 clarification here. I tell the AI that in 00:01:29.720 --> 00:01:33.500 this App TSX file, providing a clear reference, 00:01:33.580 --> 00:01:37.340 to-do list and an input field above the list, very important information, that 00:01:37.380 --> 00:01:41.360 allows users to add new to-dos. And the to-dos should have a delete button 00:01:41.420 --> 00:01:45.220 that allows for deleting them. And that styling should be added as normal 00:01:45.420 --> 00:01:49.300 CSS, so not using some CSS library like 00:01:49.800 --> 00:01:53.700 in that index CSS file, which again, uses a clear 00:01:54.020 --> 00:01:56.240 reference to which file I want to use. 00:01:56.980 --> 00:02:00.360 And therefore, of course, we can again start with plan mode as we 00:02:00.370 --> 00:02:04.280 before. And therefore, unsurprisingly, I again got a plan 00:02:04.840 --> 00:02:07.060 where it plans to change App TSX, 00:02:08.780 --> 00:02:12.620 to add functions to handle the creation of to-dos and the removal of 00:02:12.660 --> 00:02:16.310 them, and that it plans to change index CSS to 00:02:16.400 --> 00:02:20.360 styling. Generally, that does look good to me, 00:02:20.380 --> 00:02:24.300 it do its thing. So now it's done and I can again 00:02:24.340 --> 00:02:27.980 review the changes. This time, however, I'll do this in 00:02:28.060 --> 00:02:31.840 agents mode, which I could have also used for starting 00:02:31.880 --> 00:02:33.580 So I'll switch over to agents mode. 00:02:33.600 --> 00:02:36.480 And in there, you can see all your agents here. 00:02:36.520 --> 00:02:40.240 And at the moment, I only have one, but of course, I can add new agents. 00:02:40.260 --> 00:02:44.020 And clicking new agent here is in the end the same as clicking this 00:02:44.060 --> 00:02:47.790 plus here in this mode. And you can browse your sessions 00:02:47.800 --> 00:02:50.590 here in this mode by clicking this icon. 00:02:50.680 --> 00:02:54.470 In the agent's tab, you instead see all your sessions here, 00:02:54.480 --> 00:02:57.920 course be more convenient if you primarily work with agents 00:02:57.930 --> 00:03:01.240 wanna see your code. So here I'll switch back to that agent we 00:03:01.300 --> 00:03:04.400 had. And in there I see the plan again, I'll close 00:03:04.420 --> 00:03:08.150 that. And of course, I also see those files here. 00:03:08.200 --> 00:03:11.720 I can click on them and that will open them here on the 00:03:11.760 --> 00:03:15.450 right. Alternatively, I can also click this 00:03:15.480 --> 00:03:19.380 review button here, and that will open this review mode on the 00:03:19.420 --> 00:03:23.240 which looks similar but is different because in that review mode, 00:03:23.360 --> 00:03:25.800 all my files. Here's the first one. 00:03:25.840 --> 00:03:29.800 I can collapse them, see the next file, so I have a more condensed 00:03:29.840 --> 00:03:33.769 way of browsing these different files here, a combined way of browsing 00:03:33.800 --> 00:03:37.520 them, I should say. So that allows me to 00:03:37.580 --> 00:03:41.350 inspect those files and take a look at that code. 00:03:41.400 --> 00:03:45.060 And for example, here I see I got an error that I must add 00:03:45.120 --> 00:03:48.680 type in front of that like this. But with 00:03:48.740 --> 00:03:52.080 that, that looks all right. In the 00:03:52.100 --> 00:03:56.040 browser, if I visit this page with the dev server 00:03:56.060 --> 00:03:58.820 can therefore add a to-do. 00:04:01.280 --> 00:04:05.140 Click add. See that here, click delete, and that 00:04:05.180 --> 00:04:09.160 works. So of course now I can accept individual 00:04:09.300 --> 00:04:13.100 files with these buttons here or click keep all 00:04:13.180 --> 00:04:16.800 to, well, keep all. If I switch back to editor 00:04:16.899 --> 00:04:20.459 mode, I can of course then still tweak these 00:04:20.540 --> 00:04:24.480 want. But there's one issue, if you wanna call 00:04:24.520 --> 00:04:28.500 it like this, with those files and with the code that was generated.