Home

Use GitHub Desktop with Claude Code

You’re coding with AI assistance. It makes changes to your files. Sometimes the changes work perfectly. Sometimes they don’t. Version control is like an undo button for your entire project. Every time you save a snapshot (called a “commit”), you create a restore point. You can always go back.

When you combine GitHub Desktop with Claude Code, you get AI-speed development with professional version control.

Key Concepts

Git tracks every change to your files on your computer.

GitHub stores your code in the cloud as backup.

GitHub Desktop makes Git visual - you click buttons instead of typing commands.

Claude Code is an AI coding assistant that writes code, fixes bugs, and creates commits for you.

What You’ll Do

Build a simple timer app with Claude Code and track all changes with GitHub Desktop:

• Create project and timer app
• Test and fix errors
• Commit and push changes
• Discard bad changes and try again
• Let Claude automate commits

What You’ll Need

• Finished Installing Claude Code on Windows or Installing Claude Code on Mac
• Finished Get Started with Version Control
• 20 minutes

Step 1: Create Your Project

• Open GitHub Desktop
• Click File → New Repository
• Fill in:
  • Name: test_claude
  • Description: A timer app built with Claude Code
  • Local Path: Click Choose… and pick your Documents folder (the default is a GitHub folder inside Documents, so change it)
  • Check “Initialize this repository with a README”
• If GitHub Desktop says the folder “appears to be a Git repository”, you already have a test_claude folder from the Git tutorial. Rename that old folder (for example to test_claude_old) in File Explorer or Finder, then try again
• Click Create Repository
• Click Publish repository at the top
• Click Publish Repository

You now have a local project and cloud backup on GitHub.

Step 2: Ask Claude to Create the Timer App

• Open your terminal: PowerShell on Windows, Terminal on Mac
• Navigate to your project:

  cd ~/Documents/test_claude
  

  On Windows, if you see Cannot find path, your Documents folder is backed up by OneDrive. Run cd ~/OneDrive/Documents/test_claude instead

• Start Claude Code:

  claude
  

• Copy and paste this whole request (pasting keeps all the lines together; pressing Enter would send it early):

  Create a simple countdown timer app in a single file called timer.html.
  It should have:
  - An input field to set minutes
  - Start and Stop buttons
  - Display showing time remaining in MM:SS format
  - When timer reaches zero, display 'Time's up!'
  Keep it simple with inline CSS and JavaScript.
  

Claude creates the timer.html file (takes 10-30 seconds).

Step 3: Test the Timer

• In GitHub Desktop, click Repository → Show in Finder/Explorer
• Double-click timer.html to open it in your browser
• Try the timer:
  • Type 1 in the input field
  • Click Start
  • Watch the countdown

If it works: Move to Step 5.

If something’s broken: Continue to Step 4.

Step 4: Fix Errors (If Needed)

• Open browser console (right-click on page → Inspect → Console tab)
• Copy any red error messages
• Go back to Claude Code in your terminal
• Paste the error:

  I'm seeing this error: [paste error]. Can you fix it?
  

• Refresh browser (click the reload button or right-click → Reload) and test again

Step 5: Review Changes

• Switch to GitHub Desktop
• Left panel: Shows changed files (timer.html)
• Right panel: Shows the code (green = added)
• Read through to understand what Claude created

Always review AI-generated code before committing.

Step 6: Commit Manually

• At bottom left, in Summary field, type:

  Create initial timer app with start/stop functionality
  

• Click the blue commit button at the bottom (it reads like Commit 1 file to main)

You’ve created a save point!

Good messages: “Create initial timer app”, “Fix start button” Bad messages: “changes”, “update”, “asdf”

Step 7: Push to GitHub

• Click Push origin button at top
• Verify: Repository → View on GitHub to see your code online

Your code is now backed up in the cloud.

Step 8: Add Sound Notification

• In Claude Code terminal:

  Add a sound notification when the timer reaches zero. Use the browser's
  built-in beep sound or create a simple audio alert.
  

• Test: Refresh browser, set timer for 1 minute, click Start

For this tutorial: Pretend the sound doesn’t work well. Don’t commit yet!

Step 9: Discard Bad Changes

Sometimes AI puts us on the wrong path, and we need to start over from our last commit (save point).

• Open GitHub Desktop
• Click Branch menu → Discard All Changes
• Click Discard All Changes to confirm
• Refresh browser - timer works without the sound!

You just threw away broken code and went back to your last save point.

Step 10: Redo from Scratch

• In Claude Code:

  Add a sound notification when the timer reaches zero. This time, use an HTML5
  audio element with a simple beep sound generated by the Web Audio API. Make
  sure it handles browser autoplay restrictions gracefully.
  

• Test immediately (refresh browser, set 1 minute, Start)

If it works: Continue to Step 11.

If not: Paste error to Claude or try again.

Step 11: Let Claude Commit and Push

• In Claude Code:

  commit and push my changes
  

Claude will check changes, write a commit message, commit, and push (10-20 seconds).

If Claude says the push failed (for example could not read Username, or git is not recognized): switch to GitHub Desktop. If it still lists changed files, commit them yourself (as in Step 6). Then click Push origin at the top — GitHub Desktop is already signed in to GitHub.

When to use:

• Manual commits: When learning or want control
• Claude commits: When working fast and want good messages

Step 12: Ask Claude to Summarize Changes

• In Claude Code:

  what did my last commit change?
  

Claude explains your changes in plain English.

Try: explain what the audio code does or show me the last 5 commits

Step 13: View History

• In GitHub Desktop, click History tab

You’ll see (newest at the top):

• Claude’s commit for the sound notification (its wording will vary)
• Create initial timer app with start/stop functionality
• Initial commit

Notice the first failed sound attempt isn’t there - you discarded it! Only working code made it into your commits.

Challenges

• Custom sound: Download a free .mp3 from freesound.org, put in your project folder, ask Claude to use it
• Multiple timers: Allow users to create and run multiple timers simultaneously
• Progress bar: Add a progress bar that visually shows how much time remains

Remember: Test after each feature, commit after each success, discard failures.

View your project on GitHub.com: Click Repository → View on GitHub in GitHub Desktop to see your complete commit history and code online.

Troubleshooting

“Authentication failed”: In GitHub Desktop, open File → Options → Accounts (Windows) or GitHub Desktop → Settings → Accounts (Mac), then sign out and sign in again

Claude says “not a git repository”: Make sure you’re in the right folder (cd ~/Documents/test_claude)

Timer doesn’t work: Open browser console (right-click → Inspect → Console), copy errors, paste to Claude

Need help? GitHub Desktop docs • Claude Code docs

The Complete Workflow

• Ask Claude to make changes
• Test in browser
• If it works → Review and commit
• If it fails → Discard and try again
• Push to GitHub
• Repeat

Manual commits when you want control. Claude commits when you want speed. Discard fearlessly - only commit working code!

Next Steps

Try adding features to your timer:

Quick wins:

• Preset buttons for 5, 10, 15 minutes: Add three preset buttons: "5 min", "10 min", and "15 min"
• Pause button: Add a Pause/Resume button that toggles the timer state
• Better styling: Improve the visual design with a modern color scheme

Created by Steven Ge on December 7, 2025.