CodePilot

Claude Code デスクトップ GUI クライアント — Electron + Next.js + マルチプロバイダー

1 — 概要
CodePilot とは

CodePilot は Claude Code CLI をバックエンドとして活用する統合デスクトップ GUI クライアント。Electron + Next.js（App Router）で構築されており、CLI だけでは難しい「マルチプロバイダー切り替え・IM リモート制御・スキル管理・使用量可視化」を提供する。全データは ~/.codepilot/codepilot.db（SQLite）にローカル保存し、プライバシーを担保。

5AI プロバイダー
4IM Bridge
12DB テーブル
v0.38バージョン
対象ユーザー: Claude Code を日常業務で使うエンジニア・個人開発者。claude login 済みの環境があれば、リリース版をダウンロードするだけで即使える。
2 — アーキテクチャ
システム全体図
graph TD U["ユーザー (GUI)"] -->|POST /api/chat| API["Next.js\nAPI Routes"] IM["IM\nTelegram / Discord / 飛書"] -->|Webhook / Poll| BR["Bridge\nAdapter"] BR --> API API --> CC["claude-client.ts\nAgent SDK ラッパー"] CC --> SDK["Claude Agent SDK\nSSE Stream"] SDK --> SSM["stream-session-manager.ts\nライフサイクル管理"] SSM --> HOOK["useSSEStream Hook\nブラウザ購読"] SSM --> DB["SQLite DB\nbetter-sqlite3"] HOOK --> UI["MessageList\nリアルタイム描画"] style U fill:#f5f0eb,stroke:#c2410c,color:#1a1a1a style IM fill:#e8f4f8,stroke:#0891b2,color:#1a1a1a style SDK fill:#fef9e7,stroke:#d97706,color:#1a1a1a style DB fill:#f0fdf4,stroke:#059669,color:#1a1a1a style UI fill:#f5f0eb,stroke:#c2410c,color:#1a1a1a

Electron の main.ts が 127.0.0.1 上で Next.js スタンドアロンサーバーをフォーク（ランダムポート）。フロントエンドはそのサーバーへ接続する。

フロントエンド層
  • Next.js 16 App Router + React 19
  • ページ: chat / settings / plugins / skills / bridge / gallery / cli-tools
  • 20 種類以上の REST API エンドポイント
  • SSE でリアルタイムストリーミング受信
コアビジネスロジック
  • claude-client.ts — Agent SDK ラッパー
  • stream-session-manager.ts — SSE ライフサイクル
  • conversation-registry.ts — アクティブセッション登録
  • error-classifier.ts — 16 種類のエラー分類
  • provider-doctor.ts — 診断 5 プローブ + 修復
Electron 層
  • main.ts — IPC・ウィンドウ管理・Next.js フォーク
  • preload.ts — contextBridge でインストール / アップデーター API 露出
  • terminal-manager.ts — ターミナルセッション管理
  • updater.ts — 自動アップデーター
Bridge サブシステム
  • Telegram Bot API / 飛書 SDK / Discord.js / QQ
  • 長ポーリング / WebSocket でメッセージ受信
  • channelRouter — IM → セッションマッピング
  • deliveryLayer — フォーマット + 分片 + レート制限
3 — 主要機能
会話・コーディング
  • 3 モード: Code / Plan / Ask
  • 推論レベル: Low / Medium / High / Max + Thinking
  • 権限制御: Default / Full Access・アクション単位承認
  • セッション制御: 一時停止・再開・チェックポイント巻き戻し・アーカイブ
  • スプリットスクリーン: 2 会話を並列表示
  • スラッシュコマンド: /help /cost /compact /doctor
  • マルチモーダルビジョン: 画像添付対応
マルチプロバイダー
  • Anthropic (Claude) / OpenRouter
  • Amazon Bedrock / Google Vertex AI
  • カスタムエンドポイント対応
  • provider-doctor.ts で接続診断・自動修復
MCP・スキル拡張
  • MCP サーバー: stdio / sse / http 対応
  • ランタイム状態監視
  • スキル: カスタム / プロジェクト / グローバル
  • skills.sh マーケットプレイス連携
データ・ワークスペース
  • Assistant Workspace: soul.md・user.md・claude.md・memory.md
  • インクリメンタルインデックス・検索・分類
  • ファイルブラウザ + シンタックスハイライト（Shiki 3）
  • 使用量分析: トークン数・コスト見積もり・日次チャート
  • 全データ SQLite にローカル保存
IM リモート制御 (Bridge)
  • Telegram / 飛書 / Discord / QQ からリモート操作
  • チャンネル単位でセッションマッピング
  • メッセージの分片送信・レート制限制御
画像生成・CLI 連携
  • Gemini / Anthropic で画像バッチ生成
  • 生成画像のギャラリー管理
  • Claude Code CLI .jsonl 履歴インポート
  • CLI セッション管理 UI
4 — 技術スタック
レイヤー技術備考
デスクトップシェルElectron 40DMG / NSIS / AppImage でマルチプラットフォーム配布
フロントエンドNext.js 16 + React 19App Router、スタンドアロンサーバーモード
スタイルTailwind CSS 4 + Radix UIカラー直書き禁止（lint:colors で CI 検出）
データベースbetter-sqlite3WAL モード・12 テーブル・~/.codepilot/codepilot.db
AI 統合@ai-sdk/*Anthropic / OpenRouter / Bedrock / Vertex / Google
IM 統合Telegram / 飛書 / discord.jsBridge サブシステム経由
コード高亮Shiki 3ファイルブラウザ・コードブロック表示
アニメーションMotion (Framer Motion v12)UI トランジション
チャートRecharts使用量分析ページ
テストPlaywright + node:testE2E / スモーク / 単体
言語TypeScript 5strict モード
5 — セットアップ
リリース版（推奨）
  1. 1
    Claude Code CLI をインストールし、認証する 
    npm install -g @anthropic-ai/claude-code
claude login
  2. 2
    GitHub Releases から対応プラットフォームのインストーラーをダウンロードして起動する（macOS: .dmg / Windows: .exe / Linux: .AppImage）
ソースビルド（開発者向け） 
git clone https://github.com/op7418/CodePilot.git
cd CodePilot
npm install

npm run dev              # ブラウザモード (http://localhost:3000)
npm run electron:dev     # フル Electron デスクトップアプリ
コマンド用途
npm run testtypecheck + 単体テスト（約 4 秒）
npm run test:smokeスモークテスト（約 15 秒、dev server 必要）
npm run test:e2eフル E2E（60 秒超、dev server 必要）
npm run electron:pack:macmacOS DMG（arm64 + x64）
npm run electron:pack:winWindows NSIS インストーラー
npm run electron:pack:linuxLinux AppImage / deb / rpm
開発時の注意（CLAUDE.md より）: 複数 Worktree での開発時はポート隔離（PORT=3001 等）が必要。UI 変更は CDP でスクリーンショット検証必須。i18n 更新は en.ts と zh.ts の両方を必ず同期すること。DB スキーマ変更時はマイグレーションロジックの追記が必要。
公式・関連