The Cursor.AI agent cannot just follow rules, it can
also use tools. And to show you how it
can use tools, I'll switch to Agents Mode,
actually, and in that mode, I have a new
task for the AI. And my task here is that I wanna
add some animations to this to-do list using the
Motion library, which is a library I'll
therefore first install by running npm install motion.
It's a React library that helps with animating React
components. I'll restart the dev server thereafter.
Now, this may work as is, but
I wanna increase my chances a bit. And one way of increasing the
chances is to do some web search to find the Motion
library documentation. So, I could
trust that the AI determines that it wants to search the web,
but to increase the likelihood of it doing so, I'll
say, "Search the web to get
the latest Motion
documentation." By the way, there also are
some docs built into Cursor, you can add them as context,
but Motion is not amongst them. But if you, for example, wanted to pull
in the React documentation, that would be included.
So, that can also be some useful context, but not for this case here.
Now, if I submit this, the AI will go
ahead, and indeed, it searches the web now.
It might have done that without my extra instruction as well,
if you know that a certain tool should be used, it is a good idea
to explicitly tell the AI. And web search is one
particularly useful tool. So, I'll stop that here though, which you can
always do by pressing the stop button, because there's more I wanna show you.
I don't just want the AI to search the web, I also want
it to use the browser to see whether everything works.
Because, by default, it can't just write code,
see how the app looks and feels. So, that's why we have this
browser button here. If you click this, you can connect it to a
browser, either to your actual browser
using browser tab to a browser built into
this application. So, here, again, therefore I'll add
an extra instruction and I'll tell it that it should use the browser
or visit this URL in the browser, uh, to see whether everything
works and that, uh, the app looks the way it
should. So, now I'll resubmit this
and it will start again, and it will hopefully again do a web
search. It does. And then once it wrote some code, it
will hopefully also use the browser to take a
look at the application and see whether it works the way it
should. Which, by the way, just to be
clear, for animations will be a bit trickier
because it will typically just take a snapshot of the app and, of
course, an animation is something that happens over time.
Still, it might be useful to have it take a look
built. Now, you see here, I'm also getting asked about
something it wants to do. It wants to install the Motion library
here. I already did that, so I know that it doesn't need to do that,
good that this pops up because that's yet another tool the AI can
use, or Cursor can use. This is the command line tool
which allows it to execute commands.
And by default, it asks for your confirmation, it will not
just go ahead and execute a command, which is good because it could delete all
files on the machine if it were the wrong command.
So, you can always choose to skip a command
execution. You can add certain commands to the allow
will not be asked for permission again for these commands.
In this case, for the CD command paired with this npm
command. You can just accept and run it, but you will be asked for
permission again the next time, even if it's the same command.
That's the difference to the allow list.
And you also see where the command is being executed.
And Cursor has a built-in sandbox, which is a
protected environment that actually, for example, does not allow
the AI to delete files outside of this project so that you are
safe that it won't start deleting files all over your
computer. You could switch to run
everything, though, which would be outside of the
sandbox without asking for permission, which might not be
what you want. That could be more dangerous.
So, here I'll click run, and this actually failed
because it was in the sandbox and, um, installing
wouldn't work there. The sandbox is meant to execute files or
execute code. But it still recognized that
Motion was already installed, which is why it didn't try again.
And normally, if it would need to try this command
run it outside of the sandbox. Now, you see it loaded the app here
on the right, so that it can see it, so to say.
And now it can interact with this application and, uh, for
example, it entered some text here.
It took a snapshot to see what's on the page to see whether everything
works. It can take a look at the logs of this
can interact with that application.
So, here it did now complete, and if I take a look at this in my
browser, I can see that indeed now we got some
animations here which animate as we add or remove these
items. And we could still tweak them, but of course, this example
using tools like web search, like executing commands or like
previewing the app in the browser.
And all that are powerful capabilities that allow you to offload
more work to Cursor and trust that it hopefully gets
things right.