Cursor - Introduction

Overview

Estimated time: 35–45 minutes

Cursor is an AI-first code editor built on VS Code that integrates advanced AI capabilities directly into the development experience. This tutorial covers installation, key features, and effective workflows.

Learning Objectives

• Install and configure Cursor for optimal AI-assisted development
• Master the AI chat interface and codebase conversation features
• Use Composer for multi-file editing and complex refactoring
• Apply best practices for AI-first development workflows

Prerequisites

• AI Agents - Introduction
• Basic familiarity with VS Code or similar editors
• Understanding of software development workflows

What is Cursor?

Cursor is a code editor designed from the ground up for AI-assisted development. Built on VS Code, it adds powerful AI features while maintaining compatibility with VS Code extensions and settings.

Installation & Setup

Download and Install

# Download from cursor.com
# Available for Windows, macOS, and Linux

# macOS
curl -L https://cursor.sh/download/mac -o cursor.dmg
open cursor.dmg

# Windows - Download installer from website
# Linux - Download AppImage or use package manager

First Launch Setup

1. Import VS Code settings (optional)
   ✅ Extensions
   ✅ Keybindings  
   ✅ Settings
   ✅ Themes

2. Choose AI model
   • GPT-4 (recommended)
   • GPT-3.5-turbo (faster)
   • Claude-3
   • Local models (advanced)

3. Configure privacy settings
   • Data retention preferences
   • Model fine-tuning opt-out
   • Privacy mode options

Authentication

# Sign in options
1. GitHub account (recommended)
2. Google account  
3. Email/password
4. Enterprise SSO (for teams)

# Subscription plans
- Free: 2000 completions/month
- Pro: $20/month - unlimited usage
- Business: $40/user/month - team features

Core Features

AI Chat Interface

The chat panel is accessible via Ctrl+L and provides several conversation modes:

Chat Modes:
🗨️  Normal Chat - General AI assistance
📁 Codebase Chat - Context-aware with full project
🎯 Composer - Multi-file editing agent
🔧 Apply - Direct code modifications

Codebase Chat Example

User: "How does user authentication work in this project?"

Cursor AI: "Looking at your codebase, I can see you're using JWT-based 
authentication. Here's how it works:

1. **Login endpoint** (auth/login.js:15-32):
   - Validates email/password against database
   - Generates JWT token with user data
   - Returns token and user info

2. **Middleware** (middleware/auth.js:8-25):
   - Extracts token from Authorization header
   - Verifies JWT signature and expiration
   - Attaches user object to request

3. **Protected routes** use the authenticateToken middleware:
   - /api/profile (routes/user.js:12)
   - /api/posts (routes/posts.js:8)

Would you like me to explain any specific part or suggest improvements?"

Composer for Multi-File Editing

Composer is Cursor's most powerful feature - an AI agent that can modify multiple files simultaneously:

Example Composer Request:
"Add user profile pictures to the app. I need:
1. Database migration to add avatar_url to users table
2. Upload endpoint in the API
3. Update the Profile component to show/edit avatar  
4. Add image optimization and validation"

Composer Response:
📝 I'll help you add profile pictures. Here are the files I'll modify:

🔄 migrations/add_avatar_to_users.sql
🔄 routes/upload.js  
🔄 components/Profile.jsx
🔄 utils/imageProcessor.js
🆕 middleware/uploadMiddleware.js

[Shows preview of all changes]
✅ Apply all changes  ❌ Reject  📝 Edit individual files

Key Keyboard Shortcuts

Practical Workflows

New Feature Development

Workflow: Adding a "Comments" feature to a blog

1. 💬 Codebase Chat: "I want to add comments to blog posts. 
   What's the best approach given my current architecture?"

2. 🎯 Composer: "Implement a complete comments system:
   - Database schema for comments
   - API endpoints (CRUD)
   - React components for display/form
   - Real-time updates with WebSocket"

3. 🔧 Apply: Review each file change individually
4. 🧪 Test: Ask AI to generate test cases
5. 📚 Document: Generate README updates

Bug Fixing

Workflow: Fixing a performance issue

1. 📁 Select slow code section
2. 💬 Chat: "This function is slow with large datasets. 
   How can I optimize it?"
3. 🔧 Apply suggested optimizations
4. 🧪 Ask for performance tests
5. 📊 Request benchmarking code

Code Review & Refactoring

// Select problematic code
function processUsers(users) {
    let result = [];
    for (let i = 0; i < users.length; i++) {
        if (users[i].active == true) {
            if (users[i].role !== 'admin') {
                result.push({
                    id: users[i].id,
                    name: users[i].name,
                    email: users[i].email
                });
            }
        }
    }
    return result;
}

// Chat: "Refactor this function to be more functional and readable"
// AI suggests:
const processUsers = (users) => 
    users
        .filter(user => user.active && user.role !== 'admin')
        .map(({ id, name, email }) => ({ id, name, email }));

Context Management

File References

Chat with specific files:
"@api/users.js @components/UserList.jsx 
The UserList component isn't displaying data from the API correctly. 
Can you identify the issue?"

Include documentation:
"@docs How do I implement pagination in this framework?"

Web search context:
"@web What are the latest React performance best practices?"

Project-Wide Context

Codebase questions:
• "What dependencies does this project use?"
• "Show me all the API endpoints"
• "Where is error handling implemented?"
• "What testing strategy is used?"
• "How is authentication handled across components?"

Advanced Features

Custom Instructions

Set project-specific guidelines:

Code Style:
- Use TypeScript with strict mode
- Prefer functional components with hooks
- Use Tailwind CSS for styling
- Follow REST API conventions

Architecture:
- Keep components under 100 lines
- Separate business logic into custom hooks
- Use React Query for data fetching
- Implement proper error boundaries

Model Selection

Choose the right model for your task:

GPT-4: 
✅ Complex reasoning
✅ Architecture decisions  
✅ Code review
❌ Slower response

GPT-3.5-Turbo:
✅ Fast responses
✅ Simple completions
✅ Routine tasks
❌ Less sophisticated reasoning

Claude-3:
✅ Long context windows
✅ Document analysis
✅ Complex refactoring
❌ Limited code generation

Privacy Controls

Privacy Options:
🔐 Privacy Mode - No data sent to AI providers
🏠 Local Models - Run AI on your machine
📝 Data Retention - Control how long chats are stored
🚫 Opt-out - Exclude your code from model training
🔒 SOC 2 Compliance - Enterprise security standards

Best Practices

Effective Prompting

Code Quality

Team Collaboration

• Share settings: Export/import Cursor configurations
• Document AI usage: Note when AI assisted in commits
• Code review: Extra scrutiny for AI-generated code
• Train teammates: Share effective prompting patterns

Common Use Cases

Learning New Technologies

Chat: "I'm new to GraphQL. Can you:
1. Explain the key concepts
2. Show me how to set up a basic schema
3. Create a resolver example
4. Write a simple client query"

AI provides step-by-step learning with code examples

API Integration

Composer: "Integrate Stripe payments into this checkout flow:
- Add Stripe SDK to the project
- Create payment intent endpoint
- Build checkout form component  
- Handle success/error states
- Add webhook for payment confirmation"

Modifies multiple files with complete integration

Testing & Documentation

// Select function to test
function calculateShipping(weight, distance, priority) {
    // Complex shipping calculation logic
}

// Chat: "Generate comprehensive tests for this function"
// AI creates test cases covering edge cases, error conditions
// Also generates JSDoc documentation automatically

Common Issues & Solutions

Checks for Understanding

1. What's the difference between regular chat and codebase chat in Cursor?
2. How do you reference specific files in a Cursor conversation?
3. What is Composer and when should you use it?

Exercises

1. Install Cursor and import your VS Code settings
2. Use codebase chat to ask about an existing project's architecture
3. Try Composer to add a simple feature across multiple files
4. Practice using @ references to include specific context in conversations