Ctrl+K - Editing Selected Code with AI

Welcome back! Now I'll show you the most important shortcut in Cursor: Ctrl+K (or Cmd+K on Mac).

What is Ctrl+K?

In Cursor 3, Ctrl+K (just like Ctrl+L) adds the selected code to a new chat with the AI Agent. The old in-place editing (inline edit) has been replaced by exactly this workflow. Instead of writing code by hand, you describe what you want to change, AI changes the code, and you review the changes and accept or reject them.

How to Use Ctrl+K - Step by Step

Method 1: Editing selected code

1. Select the code you want to change
2. Press Ctrl+K (or Cmd+K on Mac)
3. Describe what you want to change in the chat that opens
4. AI will suggest changes
5. Accept or Reject

Method 2: Adding new code

1. Place your cursor where you want to add code (or select the line it should go under)
2. Press Ctrl+K to open the chat
3. Describe what you want to add and where
4. AI will generate code
5. Accept or Reject

Practical Examples

Example 1: Changing color

You have:

<h1>Ahoy Pirates!</h1>

You want: Red text color

What you do:

1. Select <h1>Ahoy Pirates!</h1>
2. Ctrl+K
3. Type: "add red text color"
4. AI will suggest:

<h1 style="color: red;">Ahoy Pirates!</h1>

5. Accept!

Example 2: Adding an image

You have:

<h1>Welcome aboard!</h1>

You want: Add a pirate image below the heading

What you do:

1. Place your cursor at the end of the h1 line
2. Ctrl+K
3. Type: "add a pirate image from unsplash URL"
4. AI will add:

<h1>Welcome aboard!</h1>
<img src="https://images.unsplash.com/photo-pirate" alt="Pirate">

5. Accept!

Example 3: Refactoring

You have:

<p>Ship</p>
<p>Anchor</p>
<p>Map</p>

You want: Change to a list

What you do:

1. Select all 3 paragraphs
2. Ctrl+K
3. Type: "change to ul with li elements"
4. AI will suggest:

<ul>
  <li>Ship</li>
  <li>Anchor</li>
  <li>Map</li>
</ul>

5. Accept!

Selection + Ctrl+K vs a Question in AI Chat - When to Use Which?

Both ways open a chat with AI. The difference is whether you start from a selected piece of code (Ctrl+K) or from a general question in AI Chat (Ctrl+L with nothing selected).

Rule: If you know WHERE in the code you want a change → select that fragment and use Ctrl+K. If you don't know where to start → use AI Chat.

Pro Tips

1. Be specific

"change this" "change background color to black and text to gold"

2. Use technical language (when you know it)

"make a nice button" "add a button with padding 10px and border-radius 5px"

3. Iterate

First Accept → See the result → Ctrl+K again → Refine

4. Experiment

Don't be afraid! You can always:

• Reject - discard the changes
• Ctrl+Z - undo
• Ctrl+K again - improve

Hands-on Exercise

Time for your own experiments! Open Cursor and:

1. Create a new file pirate.html
2. Type: <h1>My Ship</h1>
3. Select that line
4. Ctrl+K → "add black background and white text"
5. Accept
6. Ctrl+K again → "add a 2px red border"
7. Accept

Congratulations! You just used Ctrl+K twice in a row!

FAQ

Q: What if AI doesn't understand my instruction? A: Reject and try describing it more specifically. For example, instead of "make it prettier" write "bigger font and centered".

Q: Can I use Ctrl+K on multiple lines? A: Yes! Select as many lines of code as you want.

Q: What if I want to add something at the beginning of the file? A: Press Ctrl+K and say that the change should go at the beginning of the file.

Q: Does Ctrl+K only work with HTML? A: No! It works with any language: JavaScript, Python, CSS, everything!

Summary

Ctrl+K sends the selected code to a chat with AI Use it for quick changes in code You can edit selected code or add new code You can always Reject and try again The more specific you are, the better the result

This is YOUR MAGIC WAND, pirate!

In the next module we'll start building real ships (applications) with Next.js!

But first you need to complete a few exercises to solidify your skills.

See you on the seas of code!

Captain Redbeard out.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pirate Ship</title>
    <style>
        body {
            background-color: #0f172a;
            color: #fef3c7;
            font-family: 'Courier New', monospace;
            padding: 30px;
        }
        h1 {
            color: #f59e0b;
            text-align: center;
            font-size: 36px;
        }
        .ship {
            border: 3px solid #dc2626;
            background-color: #78350f;
            padding: 20px;
            margin: 20px 0;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <h1>My Pirate Ship</h1>

    <div class="ship">
        <h2>Black Pearl</h2>
        <p><strong>Captain:</strong> Redbeard</p>
        <p><strong>Crew:</strong> 50 pirates</p>
        <p><strong>Treasure:</strong> 1000 gold coins</p>
    </div>

    <p>This is my first ship! Change the name, captain, add more!</p>
</body>
</html>