WEBVTT 00:00:00.080 --> 00:00:04.050 The Cursor.AI agent cannot just follow rules, it can 00:00:04.100 --> 00:00:07.910 also use tools. And to show you how it 00:00:07.960 --> 00:00:11.220 can use tools, I'll switch to Agents Mode, 00:00:11.360 --> 00:00:14.920 actually, and in that mode, I have a new 00:00:15.000 --> 00:00:18.780 task for the AI. And my task here is that I wanna 00:00:18.860 --> 00:00:22.500 add some animations to this to-do list using the 00:00:22.540 --> 00:00:26.120 Motion library, which is a library I'll 00:00:26.160 --> 00:00:29.460 therefore first install by running npm install motion. 00:00:29.520 --> 00:00:32.720 It's a React library that helps with animating React 00:00:32.729 --> 00:00:36.290 components. I'll restart the dev server thereafter. 00:00:36.340 --> 00:00:40.240 Now, this may work as is, but 00:00:40.400 --> 00:00:44.160 I wanna increase my chances a bit. And one way of increasing the 00:00:44.200 --> 00:00:48.100 chances is to do some web search to find the Motion 00:00:48.200 --> 00:00:52.100 library documentation. So, I could 00:00:52.260 --> 00:00:56.160 trust that the AI determines that it wants to search the web, 00:00:56.200 --> 00:00:59.010 but to increase the likelihood of it doing so, I'll 00:00:59.040 --> 00:01:02.820 say, "Search the web to get 00:01:03.000 --> 00:01:04.569 the latest Motion 00:01:05.019 --> 00:01:08.900 documentation." By the way, there also are 00:01:08.980 --> 00:01:12.840 some docs built into Cursor, you can add them as context, 00:01:13.100 --> 00:01:16.880 but Motion is not amongst them. But if you, for example, wanted to pull 00:01:17.020 --> 00:01:20.860 in the React documentation, that would be included. 00:01:20.900 --> 00:01:24.340 So, that can also be some useful context, but not for this case here. 00:01:24.380 --> 00:01:28.160 Now, if I submit this, the AI will go 00:01:28.240 --> 00:01:30.890 ahead, and indeed, it searches the web now. 00:01:30.940 --> 00:01:34.540 It might have done that without my extra instruction as well, 00:01:34.980 --> 00:01:38.780 if you know that a certain tool should be used, it is a good idea 00:01:38.860 --> 00:01:42.160 to explicitly tell the AI. And web search is one 00:01:42.200 --> 00:01:46.130 particularly useful tool. So, I'll stop that here though, which you can 00:01:46.160 --> 00:01:50.100 always do by pressing the stop button, because there's more I wanna show you. 00:01:50.360 --> 00:01:54.120 I don't just want the AI to search the web, I also want 00:01:54.160 --> 00:01:58.040 it to use the browser to see whether everything works. 00:01:58.060 --> 00:02:01.940 Because, by default, it can't just write code, 00:02:02.060 --> 00:02:05.920 see how the app looks and feels. So, that's why we have this 00:02:05.960 --> 00:02:09.750 browser button here. If you click this, you can connect it to a 00:02:09.758 --> 00:02:13.600 browser, either to your actual browser 00:02:13.680 --> 00:02:17.500 using browser tab to a browser built into 00:02:17.560 --> 00:02:21.500 this application. So, here, again, therefore I'll add 00:02:21.520 --> 00:02:25.400 an extra instruction and I'll tell it that it should use the browser 00:02:25.460 --> 00:02:29.200 or visit this URL in the browser, uh, to see whether everything 00:02:29.240 --> 00:02:32.620 works and that, uh, the app looks the way it 00:02:32.640 --> 00:02:35.170 should. So, now I'll resubmit this 00:02:36.600 --> 00:02:39.520 and it will start again, and it will hopefully again do a web 00:02:39.560 --> 00:02:43.500 search. It does. And then once it wrote some code, it 00:02:43.540 --> 00:02:47.220 will hopefully also use the browser to take a 00:02:47.280 --> 00:02:50.580 look at the application and see whether it works the way it 00:02:50.600 --> 00:02:54.500 should. Which, by the way, just to be 00:02:54.560 --> 00:02:57.440 clear, for animations will be a bit trickier 00:02:57.940 --> 00:03:01.640 because it will typically just take a snapshot of the app and, of 00:03:01.680 --> 00:03:04.840 course, an animation is something that happens over time. 00:03:04.920 --> 00:03:08.240 Still, it might be useful to have it take a look 00:03:08.280 --> 00:03:12.140 built. Now, you see here, I'm also getting asked about 00:03:12.180 --> 00:03:15.640 something it wants to do. It wants to install the Motion library 00:03:15.650 --> 00:03:19.570 here. I already did that, so I know that it doesn't need to do that, 00:03:19.580 --> 00:03:23.520 good that this pops up because that's yet another tool the AI can 00:03:23.640 --> 00:03:27.600 use, or Cursor can use. This is the command line tool 00:03:27.680 --> 00:03:29.340 which allows it to execute commands. 00:03:29.360 --> 00:03:33.140 And by default, it asks for your confirmation, it will not 00:03:33.180 --> 00:03:36.920 just go ahead and execute a command, which is good because it could delete all 00:03:36.940 --> 00:03:39.520 files on the machine if it were the wrong command. 00:03:39.560 --> 00:03:43.160 So, you can always choose to skip a command 00:03:43.200 --> 00:03:47.120 execution. You can add certain commands to the allow 00:03:47.140 --> 00:03:50.910 will not be asked for permission again for these commands. 00:03:50.940 --> 00:03:54.320 In this case, for the CD command paired with this npm 00:03:54.400 --> 00:03:58.109 command. You can just accept and run it, but you will be asked for 00:03:58.180 --> 00:04:01.400 permission again the next time, even if it's the same command. 00:04:01.410 --> 00:04:03.600 That's the difference to the allow list. 00:04:03.700 --> 00:04:06.790 And you also see where the command is being executed. 00:04:06.800 --> 00:04:10.240 And Cursor has a built-in sandbox, which is a 00:04:10.260 --> 00:04:14.120 protected environment that actually, for example, does not allow 00:04:14.140 --> 00:04:17.899 the AI to delete files outside of this project so that you are 00:04:18.060 --> 00:04:21.060 safe that it won't start deleting files all over your 00:04:21.079 --> 00:04:25.040 computer. You could switch to run 00:04:25.120 --> 00:04:28.300 everything, though, which would be outside of the 00:04:28.320 --> 00:04:32.240 sandbox without asking for permission, which might not be 00:04:32.280 --> 00:04:34.500 what you want. That could be more dangerous. 00:04:34.540 --> 00:04:37.860 So, here I'll click run, and this actually failed 00:04:38.720 --> 00:04:42.630 because it was in the sandbox and, um, installing 00:04:42.700 --> 00:04:46.430 wouldn't work there. The sandbox is meant to execute files or 00:04:46.500 --> 00:04:50.490 execute code. But it still recognized that 00:04:50.520 --> 00:04:53.840 Motion was already installed, which is why it didn't try again. 00:04:53.860 --> 00:04:57.400 And normally, if it would need to try this command 00:04:57.460 --> 00:05:01.380 run it outside of the sandbox. Now, you see it loaded the app here 00:05:01.420 --> 00:05:04.660 on the right, so that it can see it, so to say. 00:05:04.670 --> 00:05:08.260 And now it can interact with this application and, uh, for 00:05:08.300 --> 00:05:10.340 example, it entered some text here. 00:05:10.420 --> 00:05:14.380 It took a snapshot to see what's on the page to see whether everything 00:05:14.500 --> 00:05:18.140 works. It can take a look at the logs of this 00:05:18.240 --> 00:05:21.100 can interact with that application. 00:05:21.140 --> 00:05:24.320 So, here it did now complete, and if I take a look at this in my 00:05:24.360 --> 00:05:28.080 browser, I can see that indeed now we got some 00:05:28.140 --> 00:05:31.890 animations here which animate as we add or remove these 00:05:31.980 --> 00:05:35.820 items. And we could still tweak them, but of course, this example 00:05:35.880 --> 00:05:39.590 using tools like web search, like executing commands or like 00:05:39.620 --> 00:05:41.040 previewing the app in the browser. 00:05:41.050 --> 00:05:44.980 And all that are powerful capabilities that allow you to offload 00:05:45.020 --> 00:05:48.969 more work to Cursor and trust that it hopefully gets 00:05:49.040 --> 00:05:49.960 things right.