Claude Code UI プロジェクト詳細

プロジェクト概要

Claude Code UIは、Anthropic公式のClaude Code CLI向けに設計された、オープンソースのWebおよびモバイルフレンドリーなユーザーインターフェースです。このプロジェクトにより、ユーザーはローカルまたはリモートで全てのClaude Codeセッションとプロジェクトを表示し、CLIと同じ方法で管理できます。これにより、ユーザーはどこからでも作業できる完全なインターフェースが提供されます。

プロジェクト特色

🎨 レスポンシブデザイン

• クロスプラットフォーム互換性: デスクトップ、タブレット、モバイルデバイスをシームレスにサポート
• 適応型レイアウト: 折りたたみ可能なサイドバーとスマートなコンテンツ優先順位付け
• タッチフレンドリー: スワイプジェスチャーとタッチナビゲーション
• モバイルナビゲーション: 親指で操作しやすい下部タブバー

💬 インタラクティブなチャットインターフェース

• 組み込みチャット: Claude Codeとシームレスに通信するための組み込みチャットインターフェース
• リアルタイム通信: WebSocket接続を介したClaudeの応答のストリーミング
• セッション管理: 以前の会話を再開したり、新しいセッションを開始したりする
• メッセージ履歴: タイムスタンプとメタデータを含む完全な会話履歴
• 複数フォーマット対応: テキスト、コードブロック、ファイル参照

🖥️ 統合されたターミナル機能

• 直接CLIアクセス: 組み込みシェル機能によるClaude Code CLIへの直接アクセス
• プロセス管理: Claude CLIと統合されたプロセス生成と管理
• コマンド実行: 全てのClaude Code CLIコマンドをサポート

📁 ファイルエクスプローラー

• インタラクティブなファイルツリー: 構文ハイライトとリアルタイム編集を備えたインタラクティブなファイルツリー
• リアルタイムファイル編集: インターフェース内でファイルを直接読み込み、変更し、保存する
• 構文ハイライト: 複数のプログラミング言語をサポート
• ファイル操作: ファイルとディレクトリの作成、名前変更、削除

💾 セッションの永続化

• 自動保存: 全ての会話が自動的に保存される
• セッション整理: プロジェクトとタイムスタンプごとにセッションをグループ化
• セッション操作: 会話履歴の名前変更、削除、エクスポート
• デバイス間同期: どのデバイスからでもセッションにアクセス

技術アーキテクチャ

システムアーキテクチャ図

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ フロントエンド │ │ バックエンド │ │ Claude CLI │
│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ 統合 │
└─────────────────┘ └─────────────────┘ └─────────────────┘

バックエンド技術スタック

• Expressサーバー: RESTful APIと静的ファイルサービスを提供
• WebSocketサーバー: チャットとプロジェクト更新のための通信に使用
• Claude CLI統合: プロセス生成と管理
• セッション管理: JSONL解析と会話の永続化
• ファイルシステムAPI: プロジェクトにファイルブラウザを提供

フロントエンド技術スタック

• React 18: Hooksを使用したモダンなコンポーネントアーキテクチャ
• CodeMirror: 構文ハイライトを備えた高度なコードエディタ
• Vite: 高速なビルドツールと開発サーバー
• Tailwind CSS: ユーティリティファーストのCSSフレームワーク

インストールと設定

システム要件

• Node.js v16以上
• Claude Code CLIがインストールされ、設定済みであること

インストール手順

1. リポジトリをクローン:

   git clone https://github.com/siteboon/claudecodeui.git
   cd claudecodeui
   

2. 依存関係をインストール:

   npm install
   

3. 環境を設定:

   cp .env.example .env
   # 必要に応じて.envファイルを編集してください
   

4. アプリケーションを起動:

   # 開発モード（ホットリロード付き）
   npm run dev
   

5. ブラウザを開く:

   • 開発環境: http://localhost:3001

セキュリティ設定

🔒 重要なセキュリティに関する注意

全てのClaude Codeツールはデフォルトで無効になっています。これにより、潜在的に有害な操作が自動的に実行されるのを防ぎます。

Claude Codeの全機能を使用するには、ツールを手動で有効にする必要があります。

1. ツール設定を開く: サイドバーの歯車アイコンをクリック
2. 選択的に有効化: 必要なツールのみをオンにする
3. 設定を適用: 設定はローカルに保存されます

推奨される方法: 基本的なツールを有効にすることから始め、必要に応じて徐々に機能を追加してください。

主要機能

プロジェクト管理

• プロジェクトの自動検出: UIは~/.claude/projects/からClaude Codeプロジェクトを自動的に検出します
• 視覚的なプロジェクトブラウザ: 利用可能な全てのプロジェクトとそのメタデータ、セッション数を表示します
• プロジェクト操作: プロジェクトの名前変更、削除、整理
• スマートナビゲーション: 最近のプロジェクトやセッションに素早くアクセス

ファイル管理

• プロジェクト構造の閲覧: 展開/折りたたみナビゲーション機能付き
• リアルタイム編集: インターフェース内でファイルを直接変更
• ファイル操作: 完全なファイルおよびディレクトリ管理機能

セッション管理

• 永続的なストレージ: 全てのセッションが自動的に保存される
• 履歴: 完全な会話履歴の追跡
• 複数セッション対応: 複数のプロジェクトセッションを同時に管理

トラブルシューティング

よくある問題1：UIにプロジェクトが表示されない、またはプロジェクトリストが空

解決策:

• Claude CLIが正しくインストールされていることを確認してください
• 少なくとも1つのプロジェクトディレクトリでclaudeコマンドを実行して初期化してください
• ~/.claude/projects/ディレクトリが存在し、適切な権限があることを確認してください

よくある問題2：ファイルがロードされない、権限エラー、空のディレクトリ

解決策:

• プロジェクトディレクトリの権限を確認してください（ターミナルでls -laを使用）
• プロジェクトパスが存在し、アクセス可能であることを確認してください
• 詳細なエラー情報については、サーバーコンソールログを確認してください
• プロジェクト範囲外のシステムディレクトリにアクセスしようとしていないことを確認してください