Chat & Composer Intermediate

Chat and Composer are Cursor's two most powerful AI features. Chat is your conversational assistant for understanding code, while Composer is an agentic editor that makes coordinated changes across your project. Mastering both will transform your development workflow.

Chat (Cmd/Ctrl + L)

Chat opens a sidebar panel where you can have a conversation with an AI that understands your codebase. It can read files, explain code, answer questions, and generate snippets.

Effective Chat Prompts

Task Example Prompt
Explain code "Explain how the authentication middleware works in @auth.ts"
Find bugs "Are there any potential race conditions in @database.ts?"
Architecture Q&A "How does data flow from the API route to the database in this project?"
Generate code "Write a unit test for the validateEmail function in @utils.ts"
Refactoring ideas "How can I refactor @UserService.ts to follow the repository pattern?"

@-Mentions: Giving AI Context

The @ symbol in Chat and Composer lets you reference specific context:

@-Mention What It Does Example
@filename Include a specific file's contents @src/api/users.ts
@folder Include all files in a folder @src/components/
@codebase Search the entire indexed codebase "Where is auth handled? @codebase"
@docs Reference documentation URLs @docs https://docs.example.com/api
@web Search the web for information "What's new in React 19? @web"
@git Reference git history and diffs "What changed in the last 3 commits? @git"
Context Matters: The quality of AI responses depends heavily on the context you provide. Always @-mention the relevant files rather than hoping the AI will find them. Be specific: "@src/auth/login.ts" is better than "the login file."

Composer (Cmd/Ctrl + I)

Composer is Cursor's agentic multi-file editor. Unlike Chat (which outputs code blocks you copy manually), Composer directly edits your files and shows you diffs to accept or reject.

Composer Workflow

  1. Open Composer

    Press Cmd/Ctrl + I to open the Composer panel. You can toggle between inline and sidebar modes.

  2. Describe what you want

    Write a natural language description of the change. Use @-mentions to point to relevant files.

  3. Review proposed changes

    Composer shows diffs for each file it wants to modify. Green lines are additions, red lines are deletions.

  4. Accept or reject

    Click "Accept All" to apply all changes, or review file by file. You can also edit the diffs before accepting.

  5. Iterate

    If the result is not perfect, continue the conversation to refine the changes.

Example Composer Prompts

Composer Prompts 
# Add a new feature
Add a dark mode toggle to the navbar. Store the preference
in localStorage and apply it to the <body> class.
Update @components/Navbar.tsx and @styles/globals.css

# Fix a bug across files
The user profile page crashes when the bio field is null.
Add null checks in @pages/profile.tsx and @api/users.ts

# Refactor
Extract the email validation logic from @pages/signup.tsx
and @pages/settings.tsx into a shared @utils/validation.ts module

Chat vs. Composer: When to Use Which

Use Chat When... Use Composer When...
You need to understand code You need to change code
You want explanations or Q&A You want edits applied directly
You are exploring / investigating You know what change you want
You need a quick snippet You need multi-file changes

Try It Yourself

Open a project in Cursor, use Chat to ask "What are the main components in this project? @codebase", then use Composer to add a small feature. Practice using @-mentions to provide precise context.

Next: Code Generation →
← Setup Code Generation →