Agent Mode and Tab Completion

Agent mode and Tab completion are Cursor's autopilot features—they anticipate what you need and do it automatically. Master these for maximum flow state.

Tab Completion

Tab completion predicts your next code before you type it.

How It Works

You type:              AI suggests:
─────────────────────────────────────────
function calc          |culateTotal(items: Item[]): number {
const user =           |await prisma.user.findUnique({ where: { id } })
if (error)             |{ console.error(error); return null; }

Press Tab to accept the suggestion.

Configuration

Settings → Features → Tab Completion:
├── Enable: ON
├── Trigger: On keystroke (not just pause)
├── Show inline: ON
├── Multiline suggestions: ON
└── Use context: ON (uses open files for better predictions)

Tab Completion Patterns

1. Completing Function Bodies

// Type this:
function validateEmail(email: string): boolean {

// Tab suggests:
function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

2. Completing Imports

// Type:
import { useState

// Tab suggests:
import { useState, useEffect } from 'react';

3. Completing Patterns

// Start a try block:
try {

// Tab completes the full pattern:
try {
  // ...
} catch (error) {
  console.error('Error:', error);
  throw error;
}

Tab Mastery Tips

Type the start, Tab the rest
- Type function name → Tab completes signature
- Type variable → Tab completes assignment
Context matters
- Open related files for better suggestions
- Tab learns your project's patterns
Reject and re-trigger
- Press Escape to dismiss
- Keep typing for new suggestion

Agent Mode

Agent mode lets Cursor work autonomously on complex tasks.

Enabling Agent Mode

In Composer (⌘I), look for the Agent toggle or type:

/agent Create a complete user settings page with form validation

What Agent Can Do

Agent Capabilities:
├── Read and analyze multiple files
├── Create new files and directories
├── Run terminal commands (with permission)
├── Install dependencies
├── Run tests to verify changes
├── Self-correct based on errors
└── Iterate until task is complete

Agent Workflow

┌─────────────────────────────────────────────────────────────┐
│                    Agent Mode Flow                          │
└─────────────────────────────────────────────────────────────┘
         │
         ▼
┌─────────────────┐
│  Analyze Task   │ ← Understands what you need
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Plan Changes   │ ← Creates step-by-step plan
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│ Execute Changes │ ← Creates/modifies files
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Run Commands   │ ← npm install, tests, etc. (asks permission)
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│ Verify Results  │ ← Checks for errors
└────────┬────────┘
         │
    ┌────┴────┐
    │ Errors? │
    └────┬────┘
    Yes  │  No
    ▼    │  ▼
┌───────┐│┌────────┐
│ Fix   │││ Done!  │
└───┬───┘│└────────┘
    │    │
    └────┘ (loops until success)

Effective Agent Prompts

Task: Add Authentication

/agent Add Google OAuth authentication:
- Use NextAuth.js v5
- Add sign-in button to header
- Protect /dashboard routes
- Store user sessions in database
- Add user profile dropdown when logged in

Agent will:

Install next-auth and dependencies
Create /app/api/auth/[...nextauth]/route.ts
Create auth configuration
Update header component
Add middleware for route protection
Run the app to verify

Task: Database Migration

/agent Add a comments feature to our blog:
- Add Comment model to Prisma schema
- Create migration
- Add API routes for CRUD operations
- Include the necessary relations

Agent will:

Modify schema.prisma
Run npx prisma migrate dev
Create API routes
Update types

Agent Guardrails

Agent asks permission before:

Running terminal commands
Installing packages
Deleting files
Making potentially destructive changes

┌─────────────────────────────────────────────────────────────┐
│ Agent wants to run:                                         │
│ > npm install next-auth @prisma/client                      │
│                                                             │
│ [Allow]  [Allow All This Session]  [Deny]                  │
└─────────────────────────────────────────────────────────────┘

When to Use Agent vs Composer

Use Agent When...	Use Composer When...
Task requires running commands	Just editing code
Multiple steps with dependencies	Changes are independent
Need to verify with tests	You'll test manually
Installing packages	Working within existing deps
Full feature implementation	Partial changes

Combining Features

The Power Workflow

1. Tab completion for quick edits
   └── Writing individual functions
   └── Completing patterns you know

2. Inline edit (⌘K) for focused changes
   └── Modifying selected code
   └── Quick refactors

3. Composer (⌘I) for multi-file edits
   └── Related changes across files
   └── Adding new features

4. Agent for autonomous work
   └── Complete features
   └── Tasks requiring shell commands

Real-World Example

Building a contact form:

Step 1: Tab completion
└── Type: const [formData, setFormData] → Tab completes useState

Step 2: Inline edit (⌘K)
└── Select form, type: "Add email validation"

Step 3: Composer
└── "Create API route for form submission at @src/app/api/contact"

Step 4: Agent
└── "/agent Add email sending with Resend, test the form works"

Performance Tips

For Faster Tab Completion

Keep open files relevant to current work
Close unrelated tabs
Ensure codebase is indexed

For Better Agent Results

Be specific about technologies to use
Reference existing patterns
Break very large tasks into steps

Flow State Insight: The goal is to never break your flow. Tab for micro-completions, ⌘K for quick fixes, Composer for planned changes, Agent for "just do it" tasks. Switch fluidly between all four.

You now have a complete understanding of Cursor. In Module 3, we'll explore Claude Code for terminal-native workflows. :::

Quiz