Claude Agent Desktop

Claude Agent Desktop

Electron desktop application for agentic chat with the Claude Agent SDK.

Technology

• Framework: Electron 39 (main / preload / renderer)
• Build: Vite 7 via electron-vite
• UI: React 19 + TypeScript, Tailwind CSS 4
• Runtime: Bun (package manager, scripts, tests)

Layout

src/
├── main/       # Electron main process (app lifecycle + IPC handlers)
├── preload/    # Context bridge exposing safe IPC APIs
├── renderer/   # React UI
└── shared/     # Types shared between processes
.claude/        # Claude Agent SDK skills compiled into the app bundle
resources/      # Bundled runtime binaries (bun, uv, etc.)
scripts/        # Build hooks (preDev, beforeBuild, afterPack, runtime downloads)
static/         # Icons and static assets

Skills integration

• Skills live in .claude/skills// (each contains SKILL.md + scripts/).
• Built-in sample: workspace-tools with a depth-limited list-directory utility.
• scripts/buildSkills.js compiles TypeScript tools in .claude/skills to out/.claude/skills/ using the root dependencies (no separate .claude package) and Bun --compile.
• Skill TypeScript is checked via the root tsconfig.json; there is no package.json or node_modules under .claude.
• scripts/preDev.js runs before bun run dev to download runtime binaries and build skills.
• scripts/beforeBuild.js runs during production builds to download binaries, copy runtime deps to out/node_modules, and build skills.
• scripts/afterPack.js trims unused vendor assets and confirms .claude/skills are present.
• On launch, src/main/lib/config.ts syncs the bundled .claude directory into the workspace so skills are available at runtime.

Adding a skill

1. Create .claude/skills//SKILL.md with name + description.
2. Add TypeScript tools under .claude/skills//scripts/.
3. Run bun run dev (or rerun scripts/buildSkills.js) to compile binaries into out/.claude/skills/.
4. Launch the app; the workspace .claude folder will be refreshed automatically.

Commands

bun install       # Install dependencies
bun run typecheck # TypeScript checks
bun run lint      # ESLint
bun run test      # Bun tests
bun run format    # Prettier

Defaults

• Workspace defaults to ~/Desktop/claude-agent (change in Settings).
• Anthropic API key can be provided via ANTHROPIC_API_KEY or stored locally in Settings.
• Bundled tools: bun + uv for runtime execution, portable Git/MSYS2 for Windows.
• Auto-updates: packaged builds check GitHub releases for updates; set UPDATE_FEED_URL to override the feed if needed (e.g., staging).

Workflow

• After a series of code changes, always run: lint, typecheck, test, and format commands to ensure the code is working as expected.
• When drafting commit messages, always follow Conventional Commits format.