Back to Features

Composer - Multi-File AI Editing

Build features across multiple files with AI assistance

OverviewBasicsAdvancedFeaturesExamples

💡 What You'll Learn

  • Use Composer for multi-file features and refactors
  • When to use Composer vs. Chat vs. Cmd+K
  • Write effective Composer prompts
  • Review and accept changes across files

🎼 What is Composer?

Composer is Cursor's most powerful feature. It can create, modify, and delete files across your entire codebase in a single command.

🎯 Perfect For:

  • ✨ Creating new features that span multiple files
  • 🔄 Large refactors across the codebase
  • 📦 Generating boilerplate (components, tests, configs)
  • 🏗️ Scaffolding entire features or modules
  • 🔗 Creating files that need to work together

⌨️ Opening Composer

MethodShortcut
Open ComposerCmd+I (Mac) / Ctrl+I (Win)
Or click iconTop-right toolbar (Composer icon)

🎯 Real-World Examples

Example 1: Create a Complete Feature

// Composer prompt:
Create a user authentication system with:
- Login component (src/components/Login.tsx)
- Auth context (src/context/AuthContext.tsx)
- API routes (src/app/api/auth/route.ts)
- Types (src/types/auth.ts)

Use NextAuth.js and follow our project conventions
// Composer will:
✅ Create all 4 files
✅ Add proper imports between them
✅ Follow your codebase patterns
✅ Add TypeScript types

Example 2: Refactor Across Files

// Composer prompt:
Rename UserService to AccountService across the entire codebase.
Update all imports, usages, and file names.
// Composer will:
✅ Rename UserService.ts → AccountService.ts
✅ Update class name and exports
✅ Fix all imports in other files
✅ Update all usages

Example 3: Generate Test Suite

// Composer prompt:
Generate comprehensive tests for @src/lib/api.ts
Create tests/ directory with unit tests, integration tests, and mocks

Example 4: Add Feature to Existing Code

// Composer prompt:
Add dark mode support to our app.
Update @src/app/layout.tsx, create @src/components/ThemeToggle.tsx,
and add theme context in @src/context/ThemeContext.tsx

✍️ Writing Great Composer Prompts

✅ Good Composer Prompts

  • Specific file paths and names
  • "Create X in src/path/to/file.ts"
  • "Refactor X to use pattern Y"
  • "Add feature Z to @existing/file.ts"
  • Clear requirements and constraints
  • Reference existing patterns with @

❌ Bad Composer Prompts

  • "Make it better" (too vague)
  • "Fix everything" (unclear scope)
  • No file paths specified
  • Asking questions (use Chat)
  • Small single-file edits (use Cmd+K)

📋 The Composer Workflow

1

Open Composer (Cmd+I)

Press Cmd+I or click the Composer icon

2

Write Your Prompt

Be specific about files, features, and requirements

3

Add Context with @

Reference existing files, folders, or docs

4

Review Changes

Cursor shows a diff of all proposed changes

5

Accept or Modify

Accept all, accept some, or refine your prompt

🔄 Composer vs. Other Tools

TaskBest Tool
Create multiple new filesComposer ⭐
Refactor across filesComposer ⭐
Edit single fileCmd+K
Quick code completionTab
Ask questionsChat (Cmd+L)
Scaffold entire featureComposer ⭐

⚡ Pro Tips

💡 Tip 1: Start with small Composer tasks to understand how it works

💡 Tip 2: Always review diffs carefully before accepting changes

💡 Tip 3: Use @ to reference existing files/patterns you want to follow

💡 Tip 4: Break huge tasks into smaller Composer prompts

💡 Tip 5: You can iterate - accept changes, then run Composer again to refine

🎓 Practice Exercise

Try This Challenge:

  1. Open Composer (Cmd+I)
  2. Type: "Create a simple TODO feature with:
    • TodoList component in src/components/TodoList.tsx
    • TodoItem component in src/components/TodoItem.tsx
    • useTodos hook in src/hooks/useTodos.ts
    • Type definitions in src/types/todo.ts
  3. Review the generated files
  4. Accept the changes and test them

⚠️ Common Pitfalls

Composer creates too many files

Be more specific about scope. Say "only create" or "modify existing files only"

Changes don't match my coding style

Add @ references to existing files with your style, or add a .cursorrules file

Composer is too slow

Break large tasks into smaller prompts. Wait for codebase indexing to complete.

🎬 Composer Best Practices

  • ✅ Be Explicit: Name files and paths clearly
  • ✅ Provide Examples: Use @ to reference similar code
  • ✅ Review Everything: Never blindly accept all changes
  • ✅ Use Git: Commit before big Composer changes
  • ✅ Iterate: Run Composer multiple times to refine
  • ✅ Test: Always test generated code thoroughly

🔗 Next Steps

Master advanced context with the @ symbols deep dive: @ Symbols Tutorial →

OverviewBasicsAdvancedFeaturesExamples