4.3 The Claude Code UI

Course: Claude Code - Essentials Section: Claude Desktop App Video Length: 2-5 minutes Presenter: Daniel Treasure

Opening Hook

Now that Claude Code is installed, let's learn your way around the interface. The UI is divided into clear panels: a file browser on the left, a conversation panel in the center, and context/output areas on the right. Understanding these panels will make your workflow faster and more intuitive. This video maps out the landscape.

Key Talking Points

1. The Three Main Panels (Layout Overview)

Break down the interface into its core components: - Left Panel (File Browser): Directory tree of your project; shows all files and folders - Center Panel (Conversation): Where you type prompts and Claude responds; the main interaction area - Right Panel (Context/Output): Shows file previews, code diffs, output from bash commands, or results

What to say: "Think of it like a three-column layout. Left is 'what's in my project,' center is 'what I'm talking about with Claude,' and right is 'what Claude is showing me.' All three work together."

What to show on screen: Open the Claude Code app with a project loaded. Use your mouse or arrow to highlight each panel as you describe it. Keep annotations light—just visual highlighting.

2. The Conversation Panel (The Heart of It)

Explain the central conversation interface: - Input area at bottom: Type your prompts or questions here - Conversation history above: Scrolls through all previous messages - Claude's responses: Appear with clear formatting and syntax highlighting for code - Action buttons: Approve/deny code changes, rerun operations, etc.

What to say: "The center is where the magic happens. You type a prompt, Claude responds, and you can approve changes, ask follow-up questions, or start something new. It's conversational—just like talking to Claude in the web app, but with more power."

What to show on screen: Show the input field at the bottom. Type a simple prompt (or show it pre-typed to save time). Show a response appearing with formatting. Highlight any visible buttons (like "Approve" or "Cancel" if there's a code change pending). Total: 30-45 seconds.

Explain the left-side file browser: - Project structure: All folders and files visible in a tree view - Expand/collapse: Click arrows to navigate nested directories - File selection: Click a file to open it for reference or editing - Search: Most file browsers have a search box to find files quickly (if available in the desktop app)

What to say: "The left panel is your project map. You can navigate folders, click files to view them, and understand your codebase structure at a glance. It's much faster than typing file paths or searching through the terminal."

What to show on screen: Show the file browser with a sample project. Expand a few folders to show nesting. Click a file (like a .js or .py file) and show it opening or previewing in the right panel. Total: 45-60 seconds.

4. The Context Panel (What Claude Sees)

Explain how context is displayed and managed: - File previews: Click a file in the browser to preview its contents - Inline diffs: When Claude suggests changes, diffs are shown side-by-side - Code syntax highlighting: All code is color-coded for readability - Copy/reference buttons: Copy code snippets or reference files easily

What to say: "The right side shows you what Claude is looking at—file contents, code changes, command output. When Claude suggests an edit, you see the before-and-after side by side. Much cleaner than terminal diffs."

What to show on screen: Show a file open in the context panel. If you have a code change suggestion, show the diff view (or explain how diffs work). Highlight the syntax coloring. Total: 45-60 seconds.

Identify the main UI controls: - Mode toggle (Chat ↔ Code): Switch between modes without losing your conversation history - Plan Mode toggle: Turn on Plan Mode to have Claude analyze without making changes - Approval/Action buttons: Approve code changes, re-run, cancel, etc. - Settings or menu: Access preferences, permissions, session management - Session selector or new session button: Create new sessions or resume old ones

What to say: "Across the top and sides, you'll see controls. The mode toggle lets you switch between Chat and Code. Plan Mode is a toggle to see what Claude would do before approving. And approval buttons let you control what Claude actually executes."

What to show on screen: Point out the mode toggle (usually at top). Show the Plan Mode toggle (may be a button or switch). Highlight any approval buttons visible in a conversation. Show a settings icon or menu. Total: 30-45 seconds.

Demo Plan

Use a real or sample project loaded in Claude Code. Narrate as you click through the interface:

Open Claude Code with a project (use the same one from Section 2, or a simple sample project)
Identify and name each panel: File browser (left), conversation (center), context (right)
Expand a folder in the file browser to show the project structure
Click a file to preview it in the context panel
Type a simple prompt in the conversation area ("Explain this file" or similar)
Show Claude's response and where it appears
Point out the mode toggle and other top-level controls
Optional: Show switching between Chat and Code mode to demonstrate the toggle

Total screen time: 3-4 minutes. This is a walkthrough, not a coding demo.

Code Examples & Commands

N/A for this video. No CLI commands—this is purely UI exploration.

Gotchas & Tips

The file browser respects .gitignore: Files listed in .gitignore won't appear in the file browser by default (matches CLI behavior). You can override this in settings if needed.
Syntax highlighting depends on file type: Python files are highlighted differently from JavaScript. Claude recognizes the language and colors accordingly.
Preview ≠ Edit: Clicking a file in the browser shows a preview, but you don't edit in the preview. Claude edits through the approval system.
Context panel size is adjustable: Most UIs allow you to resize panels by dragging dividers. You can make the file browser wider if you have deep nesting.
Response formatting is smart: Claude uses markdown, code blocks, and formatting automatically. You don't need to request it.

Lead-out

"Now that you know the layout, you're ready to open a project and start using Claude Code. In the next video, we'll show you how to load a local project and explore its codebase visually."

Reference URLs

Claude Code Desktop App Docs
VS Code Extension Guide (similar UI concepts)
Common Workflows (how to use the UI in practice)

Prep Reading

Official Claude Code documentation on the Desktop App interface
VS Code extension documentation (UI concepts are similar)
Community posts on using the Desktop App effectively

Notes for Daniel: This video should feel like a guided tour. Move slowly, point at each area, and explain its purpose. Viewers are seeing this for the first time, so clarity matters more than speed. Don't assume they know what a "context panel" or "file browser" means—name things explicitly.