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 parallel tasks, an in-app terminal, and a live preview — without opening a separate terminal window.

The app at a glance

The mockup below shows a typical Code session. The three panels — sessions sidebar, chat, and diff — are the ones you will use most.

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

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

Sessions sidebar, chat pane, and diff panel

Tab	What it does
Chat	General conversation with Claude, similar to claude.ai. No local file access.
Cowork	Background worker that runs tasks in a cloud VM while you do other work.
Code	Interactive coding assistant with direct access to your project folder. Focus of this course.

Three places to run a session

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

Environment	Summary
Local	Claude reads and edits files in your project folder. Changes go to disk when you accept. Default for day-to-day work. Git for Windows recommended on Windows.
Remote	Session runs on Anthropic's cloud VM. Keeps going when your laptop sleeps. Same engine as Claude Code on the web.
SSH	Connects to a remote machine over SSH — server, cloud VM, or dev container. Desktop app installs Claude Code on the remote host on first connect.

Your first session

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

Click Code, then Local → Select folder

Pick a small project you already know. A familiar codebase lets you judge whether Claude's changes make sense right away.

Pick a model from the dropdown

Claude Sonnet is a solid default for speed and quality. Switch to Opus for harder architectural problems. You can change mid-session.

Type a focused, concrete task

Good first prompts are specific and bounded:

Find any TODO comments and fix them
Add input validation to the sign-up form
Create a CLAUDE.md describing this codebase

Review the diff, then Accept or Reject

Files are not touched until you click Accept. Accept file by file, hunk by hunk, or Accept all. Click Reject and Claude asks what to try instead.

You can interrupt Claude mid-task. Click stop or type a correction and press Enter — Claude abandons the current direction and follows your new instruction.

The diff view

When Claude proposes a change, a +N -N badge appears in the chat. Click it to open the diff panel:

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>;

}

Red lines removed, green lines added

Inline comments — click a diff line to leave a note; Claude revises the change.
Auto-review — click Review code to have Claude evaluate its own diff.
File-by-file navigation — multi-file changes list each file in a tab.
Safe to reject — rejecting never corrupts files; Claude restores the previous state.

Features you will use every day

@ to pull in a file

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

/ for skills and commands

Type / to browse built-in commands, custom skills, and plugin skills — review checklists, release notes, runbooks.

Parallel sessions

Open multiple sessions from the sidebar. Each gets its own Git worktree so changes do not interfere.

Side chat

Ask a quick question without creating a new session or cluttering the main thread.

Integrated terminal

Press Ctrl+` to open a terminal pane. Run your dev server, check logs, or run tests alongside chat.

App preview

Run your dev server inside the desktop. Claude can see the app, inspect logs, and iterate on what it observes.

The status bar shows the current permission mode (Ask permissions, Auto accept edits, or Plan mode). Click it or press Shift+Tab to cycle — same as the CLI.

Desktop vs CLI — same engine

The desktop app and CLI are two interfaces to the same Claude Code engine. Run both on the same project at the same time. They share:

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

The desktop adds a visual diff panel, parallel session sidebar, PR monitor, and app preview. The CLI offers raw terminal flexibility and scripting with flags like -p for non-interactive runs.

Before you continue

Three tabs: Chat, Cowork, and Code. This course focuses on Code.
Sessions run Locally, Remotely, or over SSH to your own server.
Files are not 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.

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.

← PREVIOUS

Claude Code in Slack

Building Apps