-: So Cursor has its suggestions completions mode,
it has this inline edit mode, this inline chat, so to say,
and it has this external chat here.
You saw all these in action
and you can play around with them
and you'll see them in action again later in the course.
Cursor also has one other pretty interesting mode,
and that's the composer mode which you can open
by pressing command or Ctrl+I by default.
Now by default, in newer versions of Cursor,
this composer mode will not open up as an overlay
as you see it in this video,
but instead as a sidebar, it is the same feature though,
and works in the same way as described.
It will just open up here
and it will also allow you, at least at the point of time
where I'm recording this, to switch between different modes,
Ask, and Agent, and Edit mode.
Now, the short version is that you should use Agent mode.
It is the most powerful version of Composer,
which is not just capable of understanding your code
and making suggestions regarding code changes,
but it's also capable of running commands, creating files,
and doing all these kinds of things.
Though don't worry, for all the commands
it wants to execute, it always asks you first,
so it will not randomly delete your hard drive.
Ask is essentially the chat mode,
so if you just have questions
but you don't want Composer to do anything,
you just want it to suggest changes basically,
or answer questions, that would be the mode you wanna use,
and Edit is the old composer mode,
which is able to edit code but not really run commands.
So Agent mode is what you should use.
You also might have another dropdown here,
which allows you to choose how it selects models
and whether it should use reasoning models
and try to think before actually making changes.
Though I will also say that the exact settings you have here
will change over time.
For now, the important part is that you use this agent mode.
Now here in this video, I'll switch back
to the old recording where this was still an overlay,
but again, what I'll explain is exactly the same
and it will work in exactly the same way
with the newer version of Cursor.
Now, this composer mode is a feature that exists
to simplify the process of making multi-file edits,
or in general, more complex edits, you could say.
You could do it all with just Chat
or with just Auto Completion,
but Composer tries to make it a bit easier
to make more complex edits
that possibly affect multiple files.
Now, you can also expand this composer window a little bit
by clicking open Control Panel
or using the shortcut you see there, to get this screen,
which I personally prefer
because there's a bit more space here.
Now, it's just an overlay to the project, just to be clear,
but it's a nice way of working with Composer.
Now, how does Composer work?
Well, Composer has a chat interface here.
You can write your instructions here
and just as before, you should write good prompts here,
meaningful prompts, to describe what you want.
But let's say we now wanna add
authentication to this application,
which in this application structure,
will affect multiple files.
I need to add routes, controllers, models.
It's a edit that affects multiple files.
Well, what I can do is I can add my code base
as context, to make sure
that the entire code base is evaluated,
though it should also work without doing that.
So let's maybe try it without it,
but you could add it to be safe,
and then here I'll say, "I want to add user authentication.
User signup should happen
via POST requests to /users/signup,
login via POST to /users/login."
So again, using my developer knowledge about the web
and how it works, to be pretty specific
regarding what I want, to save time, I would otherwise maybe
have to spend on unnecessary iterations.
I rather be clear about what I want
and write it down like this.
"User data is stored in a SQLite database.
Use JWT," so JSON web tokens, "for authentication."
So these could be my instructions.
We could try to add more context,
try to be a bit more specific,
or possibly try to split this up into multiple problems,
but I'll try these instructions.
Now, what should happen here is that Cursor
now goes ahead and actually creates the files it needs
to fulfill this request.
That could be one file, could be multiple files,
and it's not just about creating files,
it's also about editing existing files.
So here you see, for example,
it wants to create a user's JS file, src/routes/users.js.
It wants to create this file
which contains all the code for the routes
and for hashing the passwords,
for inserting the data into the database.
Yeah, all that is in here.
In app.js, it then loads configuration,
it adds a utility function for authenticating a token,
an authentication token that might be attached
to an incoming request,
and by the way, if this doesn't tell you anything,
it's not about the app here.
The app very likely won't work at the end here
because we won't finish it.
It's just about understanding what Cursor can do,
and here it's building parts of this web app for us,
and it's adding token-based authentication.
At least it's trying to.
So it added this code here,
registers the user routes, imports the user routes,
and in tables.js, it makes sure
that requests must be authenticated
in order to reach these routes.
So that's the composer mode.
It's a nice way of making multi-file edits
in a structured way that's not overwhelming,
because you can see the files that are edited,
you get an overview of which edits are made,
and you can also go into Diff view
to see a difference compared to the previous code.
The green parts are new, red parts would be removed,
so that you can see in detail
where exactly code's about to be inserted or removed,
and which code it will be.
And then you can save this for future use,
reapply your prompt, reject it, or accept it,
or write follow-up instructions.
For example, here, I don't want
to have the database created in the users routes file.
I want to have a separate file or a place for that,
so I'll send a follow-up instruction.
"The database should not be initialized
in the users.js file.
It should happen in a separate file and function."
And I can hit Submit,
and it did now not accept these changes.
Instead, it changes the changes, so to say.
It changes the code it generated before.
The code in the project,
so behind this popup here, has not been touched
at this point of time.
Instead, it now tries to come up
with new changes it wants to apply,
and only once we accept those,
the actual code base will be hit with those changes.
So for example, now it created a database.js file,
which contains the initialization code,
and it uses the database from that file here in users.js,
and now when I'm happy, I can click Accept, close this,
and now back in my code base, I got these files added,
and the files contained the code I saw in Composer before.
Again, we could have achieved the same thing here in Chat.
I could have passed the same instructions to Composer here
and it probably would've suggested the same changes
and additions to this project.
Composer just is a more convenient way of doing that
because it's all in one place,
it's easy to manage these changes, tweak them,
and then apply them in one go once you're ready to go.
So, it's a nice extra tool to be aware of.
Of course, like all these tools, it's up to you
if you wanna use it or if you maybe prefer using Chat,
or if you wanna start writing the code on your own
and you rather use
the Auto Completion and Suggestions feature,
or a combination of all.
It's a tool set you can use,
and it comes down to personal preference
what you wanna use,
but it's important to know about all these tools.