Claude CodeLesson 5 of 25

Claude Desktop App Tour

The desktop app wraps the same Claude Code engine in a graphical interface. You get a visual diff panel, a sidebar for juggling parallel tasks, an in-app terminal, and a live preview pane — without ever opening a separate terminal window. This lesson walks you through every part of the screen so nothing catches you off-guard when you open it for the first time.

🖥️

The App at a Glance

The mockup below represents a typical Code session in the desktop app. The three panels — sessions sidebar, chat, and diff — are the ones you will have open most of the time.

ChatCoworkCode
Sessionsï¼<

Add price formatter

Local

Fix login bug

Local

Write unit tests

Remote
Add a helper that formats prices in Indian Rupees using the Intl API
C
I'll create src/utils/currency.ts with a formatINR helper and update the import in ProductCard.tsx.
+14-02 files - Review changes
Ask Claude anything about your code⬦
Diff
src/utils/currency.ts
+ export function formatINR(
+ amount: number
+ ): string {
+ return new Intl
+ .NumberFormat(
+ "en-IN",
+ { style: "currency",
+ currency: "INR" }
+ )
+ .format(amount);
+ }
Local - my-project|claude-sonnet-4-5|Ask permissions

Chat tab

General conversation with Claude, similar to claude.ai. No access to your local files.

Cowork tab

An autonomous agent that runs tasks in a cloud VM in the background while you do other work.

Code tab

Interactive coding assistant with direct access to your project folder. This is what most of this course covers.

🌐

Three Places to Run a Session

When you start a new session you pick where Claude actually runs. Each option suits a different workflow.

💻
Local

Your machine, your files

Claude reads and edits files directly in your project folder. Changes go straight to disk once you accept them. This is the default and what most developers use day-to-day. On Windows, Git must be installed.

☁️
Remote

Anthropic's cloud, keeps going when you close the app

The session runs on Anthropic's infrastructure in a cloud VM. Ideal for long tasks — the job carries on even if your laptop goes to sleep. Uses the same engine as Claude Code on the web.

🔑
SSH

Your server, your dev container

Claude connects to a remote machine over SSH. Useful for work that must happen on a specific server, cloud VM, or dev container. The desktop app installs Claude Code on the remote host automatically the first time.

🚀

Your First Session — Step by Step

Here is exactly what to do the first time you open the Code tab.

1

Click the Code tab, then choose Local → Select folder

Pick a small project you already know well — it is the fastest way to see Claude Code in action. Choosing a familiar codebase means you can immediately judge whether Claude's changes make sense.
2

Pick a model from the dropdown

The dropdown sits next to the send button. For most tasks Claude Sonnet hits the best speed-quality balance. Switch to Opus when you have a hard architectural problem that needs more reasoning depth. You can change mid-session.
3

Type a focused, concrete task

Good first prompts are specific and bounded. Try one of these:
  • »Find any TODO comments and fix them
  • »Add input validation to the sign-up form
  • »Create a CLAUDE.md describing this codebase
4

Review the diff, then click Accept or Reject

Your files are not touched until you click Accept. You can accept file by file, hunk by hunk, or click Accept all to take everything at once. If something looks wrong, click Reject — Claude will ask what to do differently.
Tip: You can interrupt Claude mid-task at any point. Click the stop button or just type your correction and press Enter. Claude abandons the current direction and picks up from your new instruction immediately.
🔀

The Diff View

Whenever Claude proposes a change, a +N -N badge appears in the chat. Click it to open the diff panel. Here is what a real diff looks like — red lines are removed, green lines are added:

ProductCard.tsx
2 files changed
@@ -12,7 +12,7 @@
import React from 'react';
import { Product } from '../types';
- const price = `$${amount}`;
+ import { formatINR } from '../utils/currency';
 
export function ProductCard({ product }: Props) {
- return <span>{product.price}</span>;
+ return <span>{formatINR(product.price)}</span>;
}
✏️

Inline comments

Click any diff line to leave a comment. Claude reads it and revises the change.

🧠

Auto-review

Click Review code to ask Claude to evaluate its own diff and leave suggestions.

📁

File-by-file navigation

Multi-file changes list each file in a tab. Accept or reject them independently.

↩️

Safe to reject

Rejecting a change never corrupts your files. Claude restores the previous state and asks what to try instead.

⚡

Features You Will Use Every Day

Beyond the basics, the desktop app has several time-savers that become second nature within a week.

📂

@ to pull in a file

Type @filename anywhere in the prompt box to attach a specific file to the conversation. Also works with images and PDFs via the attachment button.

/

/ for skills and commands

Type / to browse built-in commands, your custom skills, and plugin skills. Skills are saved prompts you can invoke on demand — code review checklists, release notes templates, deployment runbooks.

🪟

Parallel sessions

Open multiple sessions from the sidebar. Each one gets its own Git worktree, so changes in session A never interfere with session B. Useful for running a refactor alongside a bug-fix.

💬

Side chat

Press the side-chat button to ask a quick question without creating a new session or cluttering the main thread. Claude can answer without touching any files.

🖥️

Integrated terminal

Press Ctrl+` to open a terminal pane right inside the app. Run your dev server, check logs, or run tests alongside the chat without switching windows.

👁️

App preview

Click the Preview dropdown to run your dev server inside the desktop. Claude can see the running app, inspect network requests and logs, and iterate on what it observes — no browser tab needed.

Permission modes in the desktop: The status bar at the bottom shows the current mode (Ask permissions, Auto accept edits, or Plan mode). Click it or press Shift+Tab to cycle through modes — just like in the CLI. Everything you learned in the Permission Modes lesson applies here too.
🔄

Desktop vs CLI — Same Engine

The desktop app and the CLI are two interfaces to the same underlying Claude Code engine. You can run both on the same project at the same time. They share everything:

CLAUDE.md files
MCP servers
Hooks
Skills
settings.json
Permission rules
.claude/ folder
Model selection

The main difference is the desktop gives you the visual diff panel, parallel session sidebar, PR monitor, and app preview. The CLI gives you raw terminal flexibility and scripting options like -p for non-interactive runs.

What You Learned

  • ✅The desktop app has three tabs: Chat, Cowork, and Code. This course focuses on Code.
  • ✅Sessions can run Locally, Remotely on Anthropic's cloud, or over SSH to your own server.
  • ✅Your files are never changed until you click Accept in the diff view.
  • ✅@ pulls files into context, / opens commands and skills, Ctrl+` opens the terminal.
  • ✅Desktop and CLI share the same config — CLAUDE.md, MCP, hooks, and settings all carry over.
  • →Next: using Claude Code directly inside VS Code.

What's Next

Desktop app covered. The next lesson builds a real app end-to-end using Claude Code — from a blank folder to a working product.