Cursor AI: complete gids voor beginners

Cursor AI: De Complete Gids voor Developers (2025)

Wat is Cursor en Waarom is het Zo Populair?

De Opkomst van Cursor

• Een AI die code suggereert op basis van de huidige file
• Een AI die code suggereert op basis van je architectuur, coding style, naming conventions, en volledige projectcontext

Waarom Kiezen Developers voor Cursor?

Installatie: Mac, Windows en Linux

Mac Installatie

1. Ga naar cursor.sh
2. Klik op "Download for Mac"
3. Open het gedownloade .dmg bestand
4. Sleep Cursor naar je Applications folder
5. Open Cursor vanuit Applications of Spotlight (Cmd+Space, type "Cursor")
6. Mac kan vragen om bevestiging voor apps van onbekende developers - ga naar System Preferences > Security & Privacy om te accepteren

Windows Installatie

1. Download de Windows installer van cursor.sh
2. Run het .exe bestand (mogelijk moet je bevestigen in Windows Security)
3. Volg de installatie wizard - accepteer de defaults tenzij je een specifieke reden hebt
4. Cursor verschijnt in je Start menu en Desktop (optioneel)

• Voeg Cursor toe aan je PATH zodat je cursor . kunt typen in de terminal om een project te openen
• Windows Defender kan de eerste keer scannen - dit is normaal
• Run als administrator als je problemen hebt met file permissions

Linux Installatie

# Download de AppImage
wget https://downloader.cursor.sh/linux/appImage/x64 -O cursor.AppImage

# Maak executable
chmod +x cursor.AppImage

# Run direct
./cursor.AppImage

# Of verplaats naar een permanente locatie
sudo mv cursor.AppImage /usr/local/bin/cursor

sudo dpkg -i cursor_*.deb
# Bij dependency errors:
sudo apt-get install -f

Eerste Setup: VS Code Settings Importeren

• Extensions: Al je geïnstalleerde VS Code extensions
• Themes: Je color themes en icon packs
• Keybindings: Custom keyboard shortcuts
• User settings: Alle settings in settings.json
• Snippets: Je custom code snippets

Account Aanmaken en Model Kiezen

1. Klik op "Sign Up" of "Log In" in de welkomstscreen
2. Maak een account met email, GitHub, of Google
3. Bevestig je email indien nodig
4. Ga naar Settings (Cmd/Ctrl + ,) > AI
5. Kies je preferred AI model:

• Claude 3.5 Sonnet - Beste voor code, zeer nauwkeurig
• GPT-4 - Goed all-round, bekende OpenAI kwaliteit
• GPT-4 Turbo - Sneller dan GPT-4, iets minder nauwkeurig

Interface en Belangrijke Features

De Cursor Interface Begrijpen

• AI Status Bar (rechtsonder): Toont actieve model en je quota verbruik
• Composer Button (linksboven): Opent de multi-file editing interface
• Chat Sidebar (rechterkant): Vraag vragen over je code met volledige context
• Inline Suggestion Overlay: Ghost text met AI suggesties tijdens het typen

Feature 1: Cmd+K / Ctrl+K (Inline Editing)

1. Selecteer code (of zet je cursor op een regel voor de hele regel)
2. Druk Cmd+K (Mac) of Ctrl+K (Windows/Linux)
3. Type je instructie in natuurlijke taal
4. Druk Enter om te genereren
5. Review de diff (rood = verwijderd, groen = toegevoegd)
6. Accepteer met Cmd+Enter of reject met Escape

// Selecteer deze functie
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

// Cmd+K prompt: "Voeg try-catch toe met proper error handling en logging"

// Resultaat:
async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    console.log(`Successfully fetched user ${id}`);
    return data;
  } catch (error) {
    console.error(`Failed to fetch user ${id}:`, error.message);
    throw error;
  }
}

• "Converteer naar TypeScript met proper types"
• "Voeg JSDoc comments toe met parameter beschrijvingen"
• "Maak async met await in plaats van .then()"
• "Refactor naar arrow function met implicit return"
• "Voeg input validatie toe voor alle parameters"
• "Voeg unit test toe voor deze functie"
• "Optimaliseer voor performance"

Feature 2: Composer (Multi-File Changes)

• Klik op "Composer" button (linksboven in de toolbar)
• Of druk Cmd+I (Mac) / Ctrl+I (Windows/Linux)

1. Beschrijf je doel in natuurlijke taal - wees zo specifiek mogelijk
2. Composer analyseert je codebase en bestaande patterns
3. Het genereert een plan met alle affected files
4. Review elke wijziging via een intuïtieve diff view
5. Accept individuele files, selecteer meerdere, of accepteer alles tegelijk
6. Wijzigingen worden direct toegepast op je filesystem

Maak een complete contact formulier feature voor mijn React app:
- React component met email, naam, en bericht velden
- Form validatie met react-hook-form en zod schema
- API route in Next.js voor form submission
- Success en error toast notifications met sonner
- Responsive styling met Tailwind CSS
- Loading state tijdens submission

• src/components/ContactForm.tsx - De volledige form component
• src/lib/validations/contact.ts - Zod validation schema
• src/app/api/contact/route.ts - API endpoint
• src/hooks/useContactForm.ts - Custom hook voor form logic
• Updates aan relevante imports en exports

1. Wees specifiek over je technologie stack

1. Verwijs naar bestaande patterns in je codebase

1. Breek grote taken op in kleinere stappen

1. Review altijd de gegenereerde diff

1. Itereer na de eerste generatie

Feature 3: Chat Sidebar

• @file.ts - Voeg een specifieke file toe aan de context
• @folder/ - Voeg een hele folder toe (handig voor componenten of modules)
• @codebase - Zoek in je hele geïndexeerde project
• @docs - Zoek in externe documentatie
• @web - Zoek op het web voor actuele informatie

Jij: @src/auth/ Leg uit hoe de authenticatie flow werkt in dit project

Cursor: De authenticatie in dit project is opgebouwd uit drie hoofdcomponenten:

1. **AuthContext.tsx** beheert de global auth state via React Context.
   Het slaat de user object en tokens op, en biedt een Provider component.

2. **useAuth.ts** is een custom hook die access geeft tot login, logout, 
   en register functies. Het handelt ook token refresh af.

3. **ProtectedRoute.tsx** is een wrapper component die routes beschermt.
   Het redirect naar /login als de user niet authenticated is.

De flow werkt als volgt:
1. User submitted credentials via LoginForm
2. useAuth.login() called API endpoint
3. Bij success worden tokens opgeslagen in AuthContext
4. ProtectedRoute components herkennen de authenticated state
5. Token refresh gebeurt automatisch via een interceptor

• "Waarom krijg ik deze TypeScript error? [plak error]"
• "Wat zijn de security risks in deze authenticatie code?"
• "Hoe kan ik de performance van deze database query verbeteren?"
• "Waar moet ik beginnen om feature X toe te voegen aan dit project?"
• "Leg de data flow uit van dit component naar de API"
• "Welke tests moet ik schrijven voor deze functie?"

Feature 4: Codebase Indexing

1. Bij het openen van een project scant Cursor alle relevante files
2. Het bouwt een semantische index van je code, functies, types, en relaties
3. Deze index wordt gebruikt voor context bij completion, chat, en composer
4. De index wordt automatisch geupdate wanneer je files wijzigt

• Ga naar Settings > AI > Codebase Indexing
• Check "Index Status" om voortgang en laatst geupdate tijd te zien
• Large projects (100k+ lines) kunnen enkele minuten duren bij eerste indexering

• Voeg irrelevante folders toe aan .cursorignore (vergelijkbaar met .gitignore)
• Index node_modules niet - dit staat default uit en zou je index vervuilen
• Herindex na grote refactors via het command palette
• Houd je project georganiseerd voor betere context

Feature 5: Tab Completion

• Tijdens het typen analyseert Cursor continu je code context
• Ghost text (grijze tekst) verschijnt met AI suggesties
• Tab om de hele suggestie te accepteren
• Escape om te negeren en door te typen
• Ctrl+Right voor partial accept (accepteer woord voor woord)

// Type: "function calc"
// Cursor suggereert automatisch de volledige implementatie:
function calculateTotalPrice(items: CartItem[]): number {
  return items.reduce((total, item) => total + item.price * item.quantity, 0);
}

// Type: "// TODO: add email validation"
// Cursor suggereert de implementatie direct onder je comment:
function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

// Type de start van een test:
// test("should
// Cursor vult aan met een volledige test case gebaseerd op de functie

Stap-voor-Stap Tutorial: Van Idee naar Werkende Feature

Stap 1: Planning met Chat

Ik wil een todo list feature toevoegen aan dit React project. 
Analyseer de bestaande structuur en geef me een plan:
- Welke bestanden moet ik maken?
- Waar passen ze in de huidige architectuur?
- Welke bestaande patterns moet ik volgen?

Stap 2: Components Maken met Composer

Maak een todo list feature met de volgende specificaties:
- TodoList component met add, remove, en toggle complete functionality
- TodoItem subcomponent voor individuele items
- Todo type definition in types/index.ts
- useTodos custom hook voor state management
- Persistentie naar localStorage met automatische sync
- Styling consistent met bestaande Tailwind classes in dit project
- Keyboard shortcuts: Enter om toe te voegen, Delete om te verwijderen

Stap 3: Review en Accept

• TodoList.tsx - Check de component logic, state management, event handlers
• TodoItem.tsx - Verify de props interface en rendering
• useTodos.ts - Confirm de hook implementatie en localStorage sync
• types/index.ts - Check of de Todo type correct en compleet is

Stap 4: Itereren met Cmd+K

Verbeter de styling van deze todo list:
- Voeg hover states toe aan todo items
- Maak completed todos grijs met een doorhaling
- Voeg een smooth transition toe voor alle state changes
- Voeg een subtle shadow toe aan de container

Stap 5: Bug Fixen met Chat

Ik krijg deze error wanneer ik een todo probeer te verwijderen:
"Cannot read property 'filter' of undefined"

@src/components/TodoList.tsx
@src/hooks/useTodos.ts

Help me dit te debuggen.

Stap 6: Testen en Documentatie

Genereer uitgebreide unit tests voor de useTodos hook.
Test alle scenarios: add, remove, toggle, localStorage persistence, edge cases.
Gebruik de testing patterns die al in dit project bestaan.

Voeg JSDoc comments toe aan alle exported functions en components in de todo feature.
Inclusief parameter beschrijvingen, return types, en usage voorbeelden.

Cursor vs VS Code + GitHub Copilot: Gedetailleerde Vergelijking

• Je hebt een beperkt budget en $10/maand verschil telt
• Je werkt voornamelijk in single files zonder veel cross-file dependencies
• Je hebt een zeer complex VS Code setup met specifieke extensions
• Je organisatie heeft al GitHub Enterprise met Copilot included

• Je bouwt features die meerdere files tegelijk raken
• Je wilt een AI die je hele codebase begrijpt en ervan leert
• Productiviteitswinst is belangrijker dan de extra kosten
• Je waardeert de naadloze, out-of-box ervaring

Cursor vs Windsurf: De Directe Concurrent

• De meer generous gratis tier met meer completions per maand
• De Cascade interface die sommigen intuïtiever vinden
• Nieuwere experimentele features die sneller worden uitgerold
• De lagere Pro prijs

• Meer maturiteit en stabiliteit door langer op de markt
• Grotere community betekent meer tutorials, tips, en troubleshooting resources
• Bredere model ondersteuning inclusief de nieuwste Claude versies
• Meer bewezen track record bij enterprise gebruikers

Pricing: Free, Pro en Business Tiers

Free Tier - Ideaal om te Starten

• 200 premium completions per maand (GPT-4 niveau kwaliteit)
• Onbeperkte basis completions (sneller, minder nauwkeurig model)
• Chat functionaliteit met beperkte context window
• Basis Composer gebruik voor kleine taken
• Geen credit card nodig

Pro ($20/maand) - Voor Serieuze Developers

• Onbeperkte premium completions - geen limiet meer
• Volledige Chat met grote context window
• Volledige Composer voor complexe multi-file editing
• Keuze uit meerdere AI models (Claude, GPT-4, etc.)
• Priority support met snellere response times
• Early access tot nieuwe features en betas
• Usage analytics dashboard

Business ($40/user/maand) - Voor Teams

• Alles van Pro tier
• Team collaboration features voor gedeelde context
• Centralized billing en admin dashboard
• Usage analytics per team member
• Priority enterprise support met SLA
• Optie voor self-hosted AI voor security-gevoelige organisaties
• SSO/SAML integratie
• Custom model fine-tuning opties

Is Pro het Waard? ROI Analyse

• Gemiddelde developer kost organisaties €50-100 per uur
• Cursor Pro bespaart conservatief geschat 30-60 minuten per dag
• Dat is €25-100 per dag aan productiviteitswinst
• €20/maand is terugverdiend in minder dan 1 werkdag

Tips voor Power Users

1. Custom Instructions Instellen

Ik werk in een React 18 + TypeScript codebase met strict mode.
Gebruik altijd:
- Functional components met hooks, geen class components
- TypeScript met explicit return types
- Tailwind CSS voor alle styling
- Nederlandse comments voor business logic
- English voor code (variabelen, functies)
- Error boundaries rond async operations

2. Project-Specifieke .cursorrules File

# Project Coding Standards

## Code Style
- Gebruik altijd async/await, geen callbacks of raw promises
- Voeg error handling toe aan alle API calls
- Volg de existing naming conventions in src/utils/

## Testing
- Tests schrijven in Vitest formaat
- Minimum 80% coverage voor nieuwe features
- Mock external dependencies

## Documentation  
- JSDoc voor alle exported functions
- README updates bij nieuwe features

3. Keyboard Shortcuts Customizen

• Voeg sneltoetsen toe voor veelgebruikte Composer prompts
• Maak macros voor repetitieve taken
• Bind je meest gebruikte actions aan gemakkelijk bereikbare keys

4. Context Management voor Betere Resultaten

• Houd relevante files open in tabs voor betere suggesties
• Gebruik @ mentions strategisch in chat voor precise context
• Sluit irrelevante tabs om ruis te verminderen
• Organiseer je project logisch voor betere codebase indexing

5. Prompt Engineering Best Practices

# Slechte prompt - te vaag
"Fix de bug"

# Goede prompt - specifiek en actionable
"Fix de null pointer exception in de fetchUser functie in src/api/users.ts. 
De userId parameter kan undefined zijn wanneer het component mount voordat 
de authentication state volledig geladen is. Voeg een guard clause toe die 
early return doet met een lege user object als userId undefined is."

Keyboard Shortcuts Cheat Sheet

Best Practices voor Dagelijks Gebruik

1. Start Klein, Bouw Geleidelijk Op

2. Review Alles Wat AI Genereert

• Security: Geen hardcoded secrets, proper input validation, SQL injection preventie
• Logic: Correcte business logic, alle edge cases afgehandeld
• Performance: Geen N+1 queries, memory leaks, of onnodige re-renders
• Style: Consistent met je codebase conventions en best practices

3. Itereer in Kleine, Beheersbare Stappen

"Bouw een complete e-commerce checkout met cart, payment, shipping, en order confirmation"

1. "Maak de CartSummary component met item listing en totalen"
2. "Voeg de ShippingForm toe met adres validatie"
3. "Implementeer de PaymentForm met Stripe integration"
4. "Maak de OrderConfirmation page"
5. "Verbind alle stappen in een checkout flow"

4. Leer van de Gegenereerde Code

5. Combineer Features Strategisch

• Tab completion voor vloeiende typing en quick completions
• Cmd+K voor targeted fixes en kleine refactors
• Chat voor vragen, uitleg, en planning
• Composer voor nieuwe features en grote changes

Conclusie: De Toekomst van Software Development

1. AI-tools effectief leren gebruiken als force multiplier
2. Hun menselijke expertise inzetten voor architectuur, design, en review
3. Sneller kunnen itereren door repetitieve implementatie te automatiseren
4. Kritisch blijven denken en AI-output valideren

1. Download Cursor van cursor.sh
2. Importeer je bestaande VS Code settings
3. Start met Tab completion in je dagelijkse werk
4. Experimenteer met Cmd+K voor kleine refactors
5. Gebruik Chat om vragen te stellen over onbekende code
6. Probeer Composer voor je volgende feature

Volgende Stappen in Je AI-Powered Development Journey