The Cursor Interface

30 min beginner Lesson 1

Learning Outcomes

  • Identify what makes the Cursor interface different from VS Code
  • Open and navigate the AI side pane (Agent, Ask, Manual modes)
  • Trigger inline edits with Cmd+K / Ctrl+K
  • Understand the three interaction modes and when to use each
  • Configure core AI settings for your workflow
NOTE
Tool Version
This lesson reflects Cursor v3.x (mid-2026). Cursor updates frequently — if the UI doesn't match, check cursor.com/changelog.

Lesson Plan

Segment Duration Topic
Intro 3 min What we'll cover, Cursor vs VS Code at a glance
Demo 1 7 min Opening Cursor, touring the sidebar and panels
Explain 5 min The AI side pane — Agent, Ask, and Manual modes
Demo 2 6 min Inline edit with Cmd+K, accepting and rejecting
Demo 3 4 min Using Agent mode for a multi-step task
Explain 3 min Settings walkthrough for AI behaviour
Wrap-up 2 min Key takeaways and next lesson preview

Before You Begin

Pre-work:

  • Complete the Installation guide
  • Open Cursor with any project folder (even a single-file project)

Shopping List:

  • Cursor installed and signed in
  • A project folder open in Cursor
  • Familiarity with basic code editor concepts (tabs, sidebar, terminal)
1 Cursor vs VS Code — What's Different

Cursor is a fork of VS Code, so the core layout feels familiar: a sidebar on the left, an editor area in the centre, a terminal at the bottom, and a status bar along the bottom edge. However, several things are new:

Key differences you'll notice immediately:

Element VS Code Cursor
Right sidebar Extensions panel AI side pane (Agent/Ask/Manual)
Inline trigger No equivalent Cmd+K prompt bar
Status bar Language, branch, errors + AI model indicator, usage counter
Tab completions Copilot ghost text Cursor Prediction (multi-line, context-aware)
Command Palette Editor commands only + AI commands (Ask, Edit, Generate)

When you open Cursor for the first time with a project, you'll see your file explorer on the left and (usually) a welcome tab in the editor. The AI side pane may be collapsed on the right — we'll open it in the next step.

TIP
Tip
If you previously used VS Code, your muscle memory still works. All standard VS Code keybindings remain — Cursor adds AI shortcuts on top of them.
2 The AI Side Pane

The AI side pane is your primary interface for AI interactions. It lives in the right sidebar and supports three modes.

Toggle the AI side pane with Cmd+L. To open directly in Agent mode, use Cmd+I.

Toggle the AI side pane with Ctrl+L. To open directly in Agent mode, use Ctrl+I.

The three modes:

Mode Purpose When to Use
Agent (default) Autonomous multi-step execution — reads files, writes code, runs commands Complex tasks, multi-file changes
Ask Read-only Q&A — answers questions without making changes Understanding code, exploring options
Manual Direct edits — you control exactly what changes Precise modifications, specific refactors

Switch between modes using the tabs at the top of the side pane.

What you see in the AI side pane:

  1. Mode tabs — Agent / Ask / Manual at the top
  2. Model selector — shows the current model (e.g., Claude Sonnet). Click to switch.
  3. Context indicators — shows attached files or selections
  4. Message history — your messages and AI responses, scrollable
  5. Input box — at the bottom, where you type your prompts
  6. New conversation button — starts a fresh session

Try it now:

  1. Press Cmd+L (Mac) or Ctrl+L (Windows) to open the side pane
  2. Ensure you're in Ask mode (read-only, safe to explore)
  3. Type: "What files are in this project?"
  4. Press Enter

Cursor will scan your workspace and answer. It has full visibility into your open project folder without you needing to manually attach anything.

NOTE
How It Works
In Agent mode, Cursor automatically gathers context from your codebase using semantic search — you don't need to manually attach files with @-mentions. It reads what it needs to answer your question.
3 Inline Edit with Cmd+K

Inline editing is Cursor's fastest AI interaction. Instead of opening the side pane, you trigger a prompt bar right in the editor.

  1. Place your cursor on a line (or select some code)
  2. Press Cmd+K
  3. A prompt bar appears inline — type your instruction
  4. Press Enter to generate
  1. Place your cursor on a line (or select some code)
  2. Press Ctrl+K
  3. A prompt bar appears inline — type your instruction
  4. Press Enter to generate

What happens next:

  • Cursor shows a diff of the proposed change directly in the editor
  • Green highlights = new code to be added
  • Red highlights = code to be removed
  • Press Tab or click Accept to apply the change
  • Press Escape to reject and close the prompt

Example — adding a docstring:

  1. Place your cursor on a function definition line
  2. Press Cmd+K / Ctrl+K
  3. Type: "Add a docstring explaining parameters and return value"
  4. Press Enter
  5. Review the diff, then press Tab to accept

Example — refactoring a variable name:

  1. Select a variable name
  2. Press Cmd+K / Ctrl+K
  3. Type: "Rename this to a more descriptive name and update all references in this function"
  4. Press Enter
  5. Review and accept
TIP
Tip
The more code you select before pressing Cmd+K, the more context the AI has. For small changes, select just the relevant lines. For larger refactors, select the entire function.
WARNING
Watch Out
Inline edit only modifies the current file. If you need changes across multiple files, use Agent mode instead.
4 Agent Mode — Autonomous Multi-Step Tasks

Agent mode is Cursor's most powerful interaction style. It can plan and execute multi-step tasks: reading files, creating new ones, editing existing code, and running terminal commands.

Open Agent mode with Cmd+I, or switch to the Agent tab in the side pane.

Open Agent mode with Ctrl+I, or switch to the Agent tab in the side pane.

Try a multi-step task:

Create a utility function in src/utils/format.ts that formats dates 
as "Jan 5, 2026" and add a test file for it

Agent will:

  1. Read your project structure to understand where to place files
  2. Create src/utils/format.ts with the function
  3. Create a test file alongside it
  4. Show you all proposed changes for review

Reviewing Agent's work:

Agent shows changes as diffs in the editor. You can:

  • Accept all — apply everything at once
  • Accept individually — approve file by file
  • Reject — discard and try a different approach
  • Edit — modify the proposed changes before accepting
NOTE
How It Works
Agent mode automatically searches your codebase for relevant context. It doesn't need you to manually point it at files — it discovers what it needs through semantic search and file exploration.

Plan mode (Shift+Tab):

Before Agent starts writing code, you can ask it to plan first:

  1. Toggle Plan mode with Shift+Tab in the input box
  2. Agent shows a step-by-step plan before executing
  3. Review and approve the plan, then Agent implements it
TIP
Tip
Use Plan mode for complex tasks where you want to validate the approach before any code is written. Skip it for straightforward requests.
5 Command Palette AI Features

The Command Palette in Cursor includes AI-specific commands beyond what VS Code offers.

Open the Command Palette with Cmd+Shift+P.

Open the Command Palette with Ctrl+Shift+P.

Type "Cursor" or "AI" to filter for AI-specific commands. Key entries include:

Command What It Does
Cursor: New Conversation Opens a fresh AI session
Cursor: Toggle AI Panel Show/hide the AI sidebar
Cursor: Inline Edit Same as Cmd+K — trigger inline prompt
Cursor: Explain Explain selected code
Cursor: Fix Attempt to fix selected code or error

Try this workflow:

  1. Select a block of code in your editor
  2. Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
  3. Type "Cursor Explain"
  4. Select the command

The side pane will open with an explanation of the selected code.

NOTE
How It Works
Many Command Palette AI commands are shortcuts to common operations. They automatically attach the selected code as context before sending the prompt to the model.
6 AI Settings Overview

Cursor's AI behaviour is configurable. Open settings to customize your experience:

Open Cursor Settings via the gear icon or Cursor menu → Settings → Cursor Settings.

Open Cursor Settings via the gear icon or File menu → Preferences → Cursor Settings.

Key settings areas:

  1. Models — Choose your default model, enable/disable specific models, add API keys for additional providers.

  2. Features — Toggle specific AI features:

    • Agent mode (always on)
    • Cmd+K inline editing
    • Tab completions (autocomplete)

  3. General — Configure behaviour:

    • Privacy mode (control what's sent to AI)
    • Response language preferences

  4. Rules — Project-level AI rules (covered in depth in Lesson 6)

Recommended starter settings:

  • Default model: Claude Sonnet (fast and capable)
  • Tab completions: Enabled
  • Privacy mode: Review based on your needs
TIP
Tip
You don't need to change any settings to start. The defaults work well. Come back to settings after a few days of usage when you know what you want to adjust.
7 The Status Bar — AI Indicators

The status bar at the bottom of the Cursor window includes AI-specific indicators you won't find in VS Code:

What to look for (left to right):

  1. Branch and sync — standard Git info (same as VS Code)
  2. Errors and warnings — standard diagnostics
  3. AI Model indicator — shows the currently active model (e.g., "claude-sonnet"). Click to switch models quickly.
  4. Usage counter — shows requests used this billing period (Pro plan)

Model switching from the status bar:

Click the model name in the status bar to open a quick-pick menu. You can switch between models without opening settings:

  • Select a different model for the next interaction
  • This affects Agent, Ask, and inline edits
  • The change persists until you switch again
NOTE
How It Works
Unlike older versions of Cursor, the editor no longer shows a separate indexing indicator. Agent mode handles context gathering on-demand rather than pre-indexing your entire codebase.

Questions & Answers

Q: Is Cursor just VS Code with a plugin, or is it a separate application?
Cursor is a separate application — a fork of VS Code. It shares the same foundation (editor, extensions API, settings format) but includes deep AI integrations that aren't possible as a simple extension. You install it independently from VS Code, and they can coexist on the same machine.
Q: Can I use my VS Code extensions in Cursor?
Yes. Cursor supports VS Code extensions from the marketplace. During installation you can import all your existing extensions, or install them manually from the Extensions panel (Cmd+Shift+X / Ctrl+Shift+X). Most extensions work identically.
Q: What's the difference between Agent, Ask, and Manual modes?
Agent is autonomous — it reads files, writes code, and runs commands to complete tasks. Ask is read-only — it answers questions without making changes. Manual gives you direct control over exactly what edits to make. Use Ask when exploring, Agent for tasks, and Manual for precise surgery.
Q: Does Cmd+K overwrite my existing VS Code shortcut?
In VS Code, Cmd+K is a chord prefix (Cmd+K Cmd+C for comment, etc.). In Cursor, pressing Cmd+K alone triggers the inline edit prompt. The chord combos (Cmd+K then another key) still work — you just need to press the second key quickly. If this feels awkward, you can rebind the inline edit trigger in keyboard settings.

Key Takeaways

  1. Familiar foundation: Cursor looks and feels like VS Code — all your muscle memory transfers
  2. AI side pane (Cmd+L / Ctrl+L): Three modes — Agent (autonomous), Ask (read-only), Manual (precise)
  3. Agent mode (Cmd+I / Ctrl+I): Multi-step autonomous execution, auto-gathers context
  4. Inline edit (Cmd+K / Ctrl+K): Fast, focused edits right in the editor with diff preview
  5. Command Palette: Includes AI-specific commands — search for "Cursor" to find them
  6. Status bar: Shows active model and usage at a glance

Next Steps: In Lesson 2 — Chat & Inline Editing, you'll dive deeper into using both interfaces effectively for real coding tasks.