How Cursor shaped AI coding UX: 5 patterns to steal

In 2023 every IDE bolted on AI. Copilot owned autocomplete. VS Code got Copilot Chat. JetBrains shipped AI Assistant.

Cursor showed up and made those add-ons feel bolted on. The model was fine. The difference was how deep it sat in the edit loop: chat next to code, apply with a diff, tools that search and edit files.

Five patterns that carry most of that feeling:

1. Chat artifacts

Most assistants keep chat and the editor apart. Ask in one panel, copy, paste into another.

Artifacts put generated code in a panel beside the thread so you can read, edit, and apply without leaving the conversation.

Interactive Demo: Chat Artifacts

Build a simple calculator I can use in the browser.

Here is an interactive calculator. Open the artifact to try it, or ask me to add history, keyboard support, or a different layout.

Developers do not want to read code inside chat bubbles. They want to work on it in a code-shaped surface.

→ Explore the Chat Artifacts pattern

2. Smart code blocks with Apply

When Cursor generates code, it offers to apply it. Apply merges into the right file, shows the diff, and respects existing structure. The person reviews. The tool does the merge work.

Interactive Demo: Smart Code Blocks

Add a typed sum helper.

Here is a small util you can drop into the project:

src/utils/math.ts

export function sum(a: number, b: number) {
  return a + b;
}

→ Explore the Smart Code Blocks pattern

3. Thread branching

Debugging is messy. You try a fix, hit a wall, want another path without losing the first trail.

Thread branching lets you edit an earlier message and fork. Original branch stays. New branch explores.

Interactive Demo: Thread Branching

How do I center a div?

1/2

Use flex items-center justify-center.

→ Explore the Thread Branching pattern

4. Streaming with context

Cursor streams tokens and shows what it is reading: files, functions, decisions. That shortens perceived wait time, makes the work inspectable, and teaches what context to attach next time.

Interactive Demo: Streaming

Why does streaming feel faster?

Thinking…

→ Explore the Streaming pattern

5. Tool use

The quieter leap: the agent can search the repo, read files, run terminal commands, and edit several files in sequence. It is doing work in the environment, not only answering in text.

Interactive Demo: Tool Use

How much is 10 ounces of gold?

→ Explore the Tool Use pattern

Beyond coding tools

The same shapes show up anywhere people work on generated content:

Document editors: artifacts for generated sections
Design tools: one-click apply with a visible diff
Research tools: branches for alternate hypotheses
Any AI product: stream with visible context while work runs

Better models help. Cursor's lesson is that the interface around the model is where people feel the upgrade.