目次
Claude Codeをターミナル操作なしで使いたかったので、Claude Code UIを試してみました。備忘録として残します。
Claude Code UIとは
Claude Code UIは、Claude Code用のブラウザベースGUIを提供するオープンソースプロジェクトです[1]。ターミナルでコマンドを打つ代わりに、Webブラウザから直感的にClaude Codeを操作できます。
以下がClaude Code UIの画面です。左側にファイルエクスプローラー、中央にチャット、右側にコードプレビューが表示されます。
CLI版との違い
Claude Code UIとCLI版の主な違いは以下の通りです。
| 項目 | CLI版 | Claude Code UI |
|---|---|---|
| 操作方法 | ターミナルでコマンド入力 | ブラウザでGUI操作 |
| ファイル操作 | コマンドで確認 | ファイルエクスプローラーで視覚的に確認 |
| Git操作 | git コマンド | ボタンでステージング・コミット |
| 学習コスト | ターミナル操作に慣れが必要 | 直感的に操作可能 |
GUI操作の利点
Claude Code UIを使うメリットは以下の点です。
- ファイルエクスプローラー：ディレクトリ構造を視覚的に把握できる
- 構文ハイライト：コードが色分けされて読みやすい
- Git操作の簡略化：変更ファイルの確認やコミットがボタン操作で完結
- セッション管理：過去の会話を簡単に再開できる
特にスマホやタブレットから使う場合、キーボード入力が難しい環境でもGUI操作なら快適に作業できます。
主な機能
Claude Code UIには以下の機能があります。
- チャットインターフェース：Claude Codeとの対話をチャット形式で表示
- ファイルエクスプローラー：プロジェクト内のファイルを参照・編集
- ターミナル：必要に応じてブラウザ内でコマンド実行も可能
- Git操作：変更の確認、ステージング、コミットをGUIで操作
セットアップ手順
Claude Code UIの起動方法は3つあります。
npxで起動する（推奨）
インストール不要で即座に起動できます。
npx @siteboon/claude-code-ui
起動後、ブラウザで http://localhost:3001 にアクセスすると使用できます。
停止する場合は Ctrl+C を押してください。
グローバルインストールで起動する
一度インストールすれば、以降はコマンドだけで起動できます。
npm install -g @siteboon/claude-code-ui
claude-code-ui
git cloneで起動する
リポジトリをクローンします。
git clone https://github.com/siteboon/claudecodeui.git
クローンしたディレクトリに移動します。
cd claudecodeui
依存パッケージをインストールします。
npm install
開発サーバーを起動します。
npm run dev
起動後、ブラウザで http://localhost:3001 にアクセスすると使用できます。
エラーが発生した場合
npxやグローバルインストールでエラーが発生する場合は、以下を試してください。
- 再起動する：
Ctrl+Cで停止し、再度コマンドを実行する - 別の方法を試す：npx、グローバルインストール、git cloneの中から別の方法を試す
- エラー記事を確認する：下記の記事で具体的なエラーと対処法を紹介しています
スマホからのリモートアクセス
Claude Code UIはローカルPCで動作しますが、Cloudflare Tunnelを使えばスマホからもアクセスできます。スマホはキーボード操作が難しいため、GUI操作できるClaude Code UIとの相性が良いです。
公式Web版との違い
Anthropicが提供する公式のClaude Code Web版もありますが、Claude Code UIとは別物です。
| 項目 | 公式Web版 | Claude Code UI |
|---|---|---|
| 提供元 | Anthropic | コミュニティ（オープンソース） |
| 動作環境 | クラウド | ローカルPC |
| 料金 | Pro/Maxプラン必須 | 無料 |
| ローカルファイル | アクセス不可 | アクセス可能 |
公式Web版はGitHubリポジトリ限定ですが、Claude Code UIならローカルのファイルを直接編集できます。