Skip to content

A native desktop GUI for Claude Code — chat, code, and manage projects visually. Built with Electron + Next.js.

Notifications You must be signed in to change notification settings

liuxiaopai-ai/CodePilot

 
 

Repository files navigation

CodePilot CodePilot

A native desktop GUI for Claude Code -- chat, code, and manage projects through a polished visual interface instead of the terminal.

GitHub release Platform License

中文文档


Features

  • 💬 Conversational coding -- Stream responses from Claude in real time with full Markdown rendering, syntax-highlighted code blocks, and tool-call visualization.
  • 📂 Session management -- Create, rename, archive, and resume chat sessions. Conversations are persisted locally in SQLite so nothing is lost between restarts.
  • 🎯 Project-aware context -- Pick a working directory per session. The right panel shows a live file tree and file previews so you always know what Claude is looking at.
  • 🔒 Permission controls -- Approve, deny, or auto-allow tool use on a per-action basis. Choose between permission modes to match your comfort level.
  • 🎭 Multiple interaction modes -- Switch between Code, Plan, and Ask modes to control how Claude behaves in each session.
  • 🤖 Model selector -- Switch between Claude models (Opus, Sonnet, Haiku) mid-conversation.
  • 🔌 MCP server management -- Add, configure, and remove Model Context Protocol servers directly from the Extensions page. Supports stdio, sse, and http transport types.
  • ⚡ Custom skills -- Define reusable prompt-based skills (global or per-project) that can be invoked as slash commands during chat.
  • ⚙️ Settings editor -- Visual and JSON editors for your ~/.claude/settings.json, including permissions and environment variables.
  • 📊 Token usage tracking -- See input/output token counts and estimated cost after every assistant response.
  • 🌗 Dark / Light theme -- One-click theme toggle in the navigation rail.
  • ⌨️ Slash commands -- Built-in commands like /help, /clear, /cost, /compact, /doctor, /review, and more.
  • 🖥️ Electron packaging -- Ships as a native desktop app with a hidden title bar, bundled Next.js server, and automatic port allocation.

Screenshots

CodePilot


Prerequisites

Important: CodePilot calls the Claude Code Agent SDK under the hood. Make sure claude is available on your PATH and that you have authenticated (claude login) before launching the app.

Requirement Minimum version
Node.js 18+
Claude Code CLI Installed and authenticated (claude --version should work)
npm 9+ (ships with Node 18)

Download

Pre-built releases are available on the Releases page.

Supported Platforms

  • macOS: Universal binary (arm64 + x64) distributed as .dmg
  • Windows: x64 distributed as .zip
  • Linux: x64 and arm64 distributed as .AppImage, .deb, and .rpm

Quick Start

# Clone the repository
git clone https://github.com/op7418/CodePilot.git
cd codepilot

# Install dependencies
npm install

# Start in development mode (browser)
npm run dev

# -- or start the full Electron app in dev mode --
npm run electron:dev

Then open http://localhost:3000 (browser mode) or wait for the Electron window to appear.


Installation Troubleshooting

CodePilot is not code-signed yet, so your operating system will display a security warning the first time you open it.

macOS

You will see a dialog that says "Apple cannot check it for malicious software".

Option 1 -- Right-click to open

  1. Right-click (or Control-click) CodePilot.app in Finder.
  2. Select Open from the context menu.
  3. Click Open in the confirmation dialog.

Option 2 -- System Settings

  1. Open System Settings > Privacy & Security.
  2. Scroll down to the Security section.
  3. You will see a message about CodePilot being blocked. Click Open Anyway.
  4. Authenticate if prompted, then launch the app.

Option 3 -- Terminal command

xattr -cr /Applications/CodePilot.app

This strips the quarantine attribute so macOS will no longer block the app.

Windows

Windows SmartScreen will block the installer or executable.

Option 1 -- Run anyway

  1. On the SmartScreen dialog, click More info.
  2. Click Run anyway.

Option 2 -- Disable App Install Control

  1. Open Settings > Apps > Advanced app settings.
  2. Toggle App Install Control (or "Choose where to get apps") to allow apps from anywhere.

Tech Stack

Layer Technology
Framework Next.js 16 (App Router)
Desktop shell Electron 40
UI components Radix UI + shadcn/ui
Styling Tailwind CSS 4
Animation Motion (Framer Motion)
AI integration Claude Agent SDK
Database better-sqlite3 (embedded, per-user)
Markdown react-markdown + remark-gfm + rehype-raw + Shiki
Streaming Vercel AI SDK helpers + Server-Sent Events
Icons Hugeicons + Lucide
Testing Playwright
Build / Pack electron-builder + esbuild

Project Structure

codepilot/
├── electron/                # Electron main process & preload
│   ├── main.ts              # Window creation, embedded server lifecycle
│   └── preload.ts           # Context bridge
├── src/
│   ├── app/                 # Next.js App Router pages & API routes
│   │   ├── chat/            # New-chat page & [id] session page
│   │   ├── extensions/      # Skills + MCP server management
│   │   ├── settings/        # Settings editor
│   │   └── api/             # REST + SSE endpoints
│   │       ├── chat/        # Sessions, messages, streaming, permissions
│   │       ├── files/       # File tree & preview
│   │       ├── plugins/     # Plugin & MCP CRUD
│   │       ├── settings/    # Settings read/write
│   │       ├── skills/      # Skill CRUD
│   │       └── tasks/       # Task tracking
│   ├── components/
│   │   ├── ai-elements/     # Message bubbles, code blocks, tool calls, etc.
│   │   ├── chat/            # ChatView, MessageList, MessageInput, streaming
│   │   ├── layout/          # AppShell, NavRail, Header, RightPanel
│   │   ├── plugins/         # MCP server list & editor
│   │   ├── project/         # FileTree, FilePreview, TaskList
│   │   ├── skills/          # SkillsManager, SkillEditor
│   │   └── ui/              # Radix-based primitives (button, dialog, tabs, ...)
│   ├── hooks/               # Custom React hooks (usePanel, ...)
│   ├── lib/                 # Core logic
│   │   ├── claude-client.ts # Agent SDK streaming wrapper
│   │   ├── db.ts            # SQLite schema, migrations, CRUD
│   │   ├── files.ts         # File system helpers
│   │   ├── permission-registry.ts  # Permission request/response bridge
│   │   └── utils.ts         # Shared utilities
│   └── types/               # TypeScript interfaces & API contracts
├── electron-builder.yml     # Packaging configuration
├── package.json
└── tsconfig.json

Development

# Run Next.js dev server only (opens in browser)
npm run dev

# Run the full Electron app in dev mode
# (starts Next.js + waits for it, then opens Electron)
npm run electron:dev

# Production build (Next.js static export)
npm run build

# Build Electron distributable + Next.js
npm run electron:build

# Package macOS DMG (universal binary)
npm run electron:pack

Notes

  • The Electron main process (electron/main.ts) forks the Next.js standalone server and connects to it over 127.0.0.1 with a random free port.
  • Chat data is stored in ~/.codepilot/codepilot.db (or ./data/codepilot.db in dev mode).
  • The app uses WAL mode for SQLite, so concurrent reads are fast.

Contributing

Contributions are welcome. To get started:

  1. Fork the repository and create a feature branch.
  2. Install dependencies with npm install.
  3. Run npm run electron:dev to test your changes locally.
  4. Make sure npm run lint passes before opening a pull request.
  5. Open a PR against main with a clear description of what changed and why.

Please keep PRs focused -- one feature or fix per pull request.


License

MIT

About

A native desktop GUI for Claude Code — chat, code, and manage projects visually. Built with Electron + Next.js.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 98.1%
  • Other 1.9%