Claude Code GUI

A desktop GUI for Claude Code — the CLI tool from Anthropic. Built with Tauri 2 (Rust) and React 19 (TypeScript).

The app spawns Claude Code as a subprocess, communicates via the stream-json protocol over stdin/stdout, and provides a multi-tab chat interface with live streaming, tool call visualization, file browsing, and session persistence.

Features

• Multi-tab sessions — run multiple Claude Code sessions in parallel, each with its own working directory
• Live streaming — real-time token-by-token output as Claude responds
• Tool call visualization — collapsible blocks showing tool name, input, and output for Read, Write, Bash, Edit, Grep, Glob, and others
• File tree sidebar — browse the working directory with live file-watching updates
• Session persistence — save and resume previous sessions
• Interactive prompts — respond to Claude's questions (AskUserQuestion) directly in the GUI
• Dark mode — toggle between light and dark themes
• Markdown rendering — GitHub Flavored Markdown with syntax-highlighted code blocks

Prerequisites

• Node.js (v18+)
• Rust (1.77.2+)
• Claude Code CLI installed and authenticated (npm install -g @anthropic-ai/claude-code)
• Tauri prerequisites for your platform

Getting Started

# Clone the repo
git clone https://github.com/SunnyDark/claude-code-gui.git
cd claude-code-gui

# Install frontend dependencies
npm install

# Run in development mode (starts Vite dev server + Tauri window)
npm run tauri dev

Building

# Production build — outputs a native installer for your platform
npm run tauri build

Build artifacts are placed in src-tauri/target/release/bundle/.

Project Structure

claude-code-gui/
├── src/                     # React frontend
│   ├── components/          # UI components (ChatInput, MessageList, Sidebar, etc.)
│   ├── hooks/               # Custom hooks (useClaudeEvents, useFileTreeWatcher)
│   ├── stores/              # Zustand state management
│   ├── types/               # TypeScript interfaces
│   └── lib/                 # Utilities
├── src-tauri/               # Rust backend
│   └── src/
│       ├── claude.rs        # Claude CLI process management
│       ├── filetree.rs      # File tree building + directory watching
│       ├── sessions.rs      # Session persistence
│       └── lib.rs           # App state + Tauri setup
├── package.json
├── vite.config.ts
└── agent.md                 # Detailed architecture reference for AI agents

Tech Stack

Layer	Technology
Frontend	React 19, TypeScript 5.9, Tailwind CSS 4, Zustand 5
Backend	Tauri 2.10, Rust, Tokio
Build	Vite 7.3
Markdown	react-markdown, remark-gfm, rehype-highlight

How It Works

1. Each tab spawns a Claude Code subprocess with --output-format stream-json
2. User messages are sent as JSON lines to the subprocess's stdin
3. The Rust backend reads stdout line-by-line and emits Tauri events to the frontend
4. The Zustand store parses stream-json events and updates the UI in real time
5. Tool calls, text deltas, and results are all rendered as they arrive

For a detailed architecture reference (data models, IPC commands, event flow, streaming protocol), see agent.md.

Scripts

Command	Description
npm run dev	Start Vite dev server only (port 5173)
npm run tauri dev	Full dev mode — Vite + Tauri window
npm run build	TypeScript check + Vite production build
npm run tauri build	Full native app build
npm run lint	Run ESLint

Contributing

Contributions are welcome. Please open an issue first to discuss what you'd like to change.

License

This project is open source. See the repository for license details.