To dive a bit deeper into Cursor, I'm in a
new project here, which you'll find attached in case you
along. This is not a Python project.
Instead, it's a ReactJS project. In case you don't know,
ReactJS is a web development front-end library that
simplifies the process of building complex web applications, or web
application UIs, I should say. If you want to follow along, you
will need to install Note JS, which you can from
notejs.org. But, of course, following along is totally
optional. With that installed, in that attached project, you would need to
run npm install to download all packages required by this
project, and then npm run dev to start the dev
to preview the website whilst you're working on it.
You then have to visit localhost 5173 to see it.
And at the moment, there's only Hello World on that site.
Of course, that should change though.
And I wanna change it with help of AI again, so with help of
this agent mode again. And the arguably boring
but nonetheless sufficient demo application I wanna build here is a
simple to-do manager which allows users to manage to-dos
in the browser with help of ReactJS, because it's not
primarily about the app here, but instead about learning about
Cursor. So of course, I could send this instruction, but again,
not be very precise. So that's why I added some
clarification here. I tell the AI that in
this App TSX file, providing a clear reference,
to-do list and an input field above the list, very important information, that
allows users to add new to-dos. And the to-dos should have a delete button
that allows for deleting them. And that styling should be added as normal
CSS, so not using some CSS library like
in that index CSS file, which again, uses a clear
reference to which file I want to use.
And therefore, of course, we can again start with plan mode as we
before. And therefore, unsurprisingly, I again got a plan
where it plans to change App TSX,
to add functions to handle the creation of to-dos and the removal of
them, and that it plans to change index CSS to
styling. Generally, that does look good to me,
it do its thing. So now it's done and I can again
review the changes. This time, however, I'll do this in
agents mode, which I could have also used for starting
So I'll switch over to agents mode.
And in there, you can see all your agents here.
And at the moment, I only have one, but of course, I can add new agents.
And clicking new agent here is in the end the same as clicking this
plus here in this mode. And you can browse your sessions
here in this mode by clicking this icon.
In the agent's tab, you instead see all your sessions here,
course be more convenient if you primarily work with agents
wanna see your code. So here I'll switch back to that agent we
had. And in there I see the plan again, I'll close
that. And of course, I also see those files here.
I can click on them and that will open them here on the
right. Alternatively, I can also click this
review button here, and that will open this review mode on the
which looks similar but is different because in that review mode,
all my files. Here's the first one.
I can collapse them, see the next file, so I have a more condensed
way of browsing these different files here, a combined way of browsing
them, I should say. So that allows me to
inspect those files and take a look at that code.
And for example, here I see I got an error that I must add
type in front of that like this. But with
that, that looks all right. In the
browser, if I visit this page with the dev server
can therefore add a to-do.
Click add. See that here, click delete, and that
works. So of course now I can accept individual
files with these buttons here or click keep all
to, well, keep all. If I switch back to editor
mode, I can of course then still tweak these
want. But there's one issue, if you wanna call
it like this, with those files and with the code that was generated.