Files
claudecodeui/README.ja.md
2026-06-10 16:57:40 +03:00

15 KiB
Raw Blame History

CloudCLI UI

Cloud CLI別名 Claude Code UI

Claude CodeCursor CLICodexGemini-CLI のためのデスクトップ/モバイル UI。
ローカルでもリモートでも使え、アクティブなプロジェクトとセッションをどこからでも閲覧できます。

CloudCLI Cloud · ドキュメント · Discord · バグ報告 · コントリビュート

CloudCLI Cloud Discord コミュニティに参加

siteboon%2Fclaudecodeui | Trendshift


スクリーンショット

デスクトップビュー

デスクトップインターフェース
プロジェクト概要とチャットを表示するメイン画面

モバイル体験

モバイルインターフェース
タッチ操作に対応したレスポンシブなモバイルデザイン

CLI 選択

CLI 選択
Claude Code、Gemini、Cursor CLI、Codex から選択

機能

  • レスポンシブデザイン - デスクトップ/タブレット/モバイルでシームレスに動作し、モバイルからも Agents を利用可能
  • インタラクティブチャット UI - Agents とスムーズにやり取りできる内蔵チャット UI
  • 統合シェルターミナル - 内蔵シェル機能で Agents の CLI に直接アクセス
  • ファイルエクスプローラー - シンタックスハイライトとライブ編集に対応したインタラクティブなファイルツリー
  • Git エクスプローラー - 変更の表示、ステージ、コミット。ブランチ切り替えも可能
  • セッション管理 - 会話の再開、複数セッションの管理、履歴の追跡
  • プラグインシステム - カスタムプラグインで CloudCLI を拡張 — 新しいタブ、バックエンドサービス、連携を追加できます。自分で構築する →

クイックスタート

CloudCLI Cloud推奨

最速で始める方法 — ローカルのセットアップは不要です。Web、モバイルアプリ、API、またはお気に入りの IDE からアクセスできる、フルマネージドでコンテナ化された開発環境を利用できます。

CloudCLI Cloud を始める

セルフホスト(オープンソース)

npm

npx で今すぐ CloudCLI UI を試せます(Node.js v22+ が必要):

npx @cloudcli-ai/cloudcli

または、普段使いするなら グローバル にインストール:

npm install -g @cloudcli-ai/cloudcli
cloudcli

http://localhost:3001 を開いてください — 既存のセッションは自動的に検出されます。

より詳細な設定オプション、PM2、リモートサーバー設定などについては ドキュメントはこちら → を参照してください。

Docker Sandboxes実験的

ハイパーバイザーレベルの分離でエージェントをサンドボックスで実行します。デフォルトでは Claude Code が起動します。sbx CLI が必要です。

npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project

Claude Code、Codex、Gemini CLI に対応。詳細はサンドボックスのドキュメントをご覧ください。


どちらの選択肢が適していますか?

CloudCLI UI は、CloudCLI Cloud を支えるオープンソースの UI レイヤーです。自分のマシンにセルフホストすることも、フルマネージドのクラウド環境、チーム機能、より深い統合を備えた CloudCLI Cloud を使うこともできます。

CloudCLI UIセルフホスト CloudCLI Cloud
対象ユーザー 自分のマシン上でローカルの agent セッションに対してフル UI を使いたい開発者 クラウド上で動く agents をどこからでも利用したいチーム/開発者
アクセス方法 ブラウザ([yourip]:port ブラウザ、任意の IDE、REST API、n8n
セットアップ npx @cloudcli-ai/cloudcli セットアップ不要
マシンの稼働継続 はい いいえ
モバイルアクセス 同一ネットワーク内の任意のブラウザ 任意のデバイス(ネイティブアプリも準備中)
利用可能なセッション ~/.claude から全セッションを自動検出 クラウド環境内の全セッション
対応エージェント Claude Code、Cursor CLI、Codex、Gemini CLI Claude Code、Cursor CLI、Codex、Gemini CLI
ファイルエクスプローラとGit はいUI に内蔵) はいUI に内蔵)
MCP設定 UI で管理し、ローカルの ~/.claude 設定と同期 UI で管理
IDEアクセス ローカル IDE クラウド環境に接続された任意の IDE
REST API はい はい
n8n ノード いいえ はい
チーム共有 いいえ はい
料金プラン 無料(オープンソース) 月 $7〜

どちらの選択肢でも、AI のサブスクリプションClaude、Cursor など)はご自身のものを使用します — CloudCLI が提供するのは環境であり、AI そのものではありません。


セキュリティとツール設定

🔒 重要なお知らせ すべての Claude Code ツールは デフォルトで無効 です。これにより、潜在的に有害な操作が自動的に実行されることを防ぎます。

ツールの有効化

  1. ツール設定を開く - サイドバーの歯車アイコンをクリック
  2. 必要なツールだけを選んで有効化 - 本当に使うものだけをオンにする
  3. 設定を適用 - 設定内容はローカルに保存されます

ツール設定モーダル Tools 設定画面 - 必要なものだけを有効にしてください

推奨アプローチ: まずは基本ツールだけを有効にし、必要に応じて追加してください。これらの設定は後からいつでも調整できます。


プラグイン

CloudCLI にはプラグインシステムがあり、独自のフロントエンド UI と必要に応じてNode.js バックエンドを持つカスタムタブを追加できます。プラグインは Settings > Plugins から git リポジトリを直接指定してインストールするか、自作できます。

利用可能なプラグイン

プラグイン 説明
Project Stats 現在のプロジェクトについて、ファイル数、コード行数、ファイル種別の内訳、最大ファイル、最近変更されたファイルを表示
Web Terminal 複数タブに対応した本格的な xterm.js ターミナル
Claude Watch 長時間実行中の Claude Code セッションのハングを監視し、プロセス操作を提供
CloudCLI Scheduler ワークスペース単位のスケジュール済みプロンプトを作成し、Codex、Claude Code、Gemini CLI などのローカル CLI で実行
PRISM CloudCLI CloudCLI 内で Claude Code のセッション分析を行い、トークン消費の可視化も提供
Sessions アクティブな Claude Code セッションを表示、管理、終了
Token Cost Calculator モデル価格とトークン使用量から API コストを計算し、モデル価格プリセットにも対応
Task Queue エージェントタスクを表示、フィルタリング、起動するためのタスクキューダッシュボード

自作する

Plugin Starter Template → — このリポジトリを fork して独自プラグインを作れます。フロントエンド描画、ライブコンテキスト更新、バックエンドサーバーへの RPC 通信を含む動作例が入っています。

プラグインのドキュメント → — プラグイン API、manifest 形式、セキュリティモデルなどの完全ガイド。


FAQ

Claude Code Remote Control とはどう違いますか?

Claude Code Remote Control は、ローカル端末で既に動作しているセッションへメッセージを送れる仕組みです。マシンを起動したままにし、端末も開いたままにする必要があり、ネットワーク接続がない状態が約 10 分続くとセッションがタイムアウトします。

CloudCLI UI と CloudCLI Cloud は、Claude Code の横に別物として存在するのではなく、Claude Code を拡張します — MCP サーバー、権限、設定、セッションは Claude Code がネイティブに使うものと完全に同一です。複製したり、別系統で管理したりしません。

  • すべてのセッションにアクセス — CloudCLI UI は ~/.claude フォルダのすべてのセッションを自動検出します。Remote Control は、Claude モバイルアプリで利用可能にするため、1つのアクティブセッションだけを公開します。
  • 設定はあなたの設定 — CloudCLI UI で変更した MCP サーバー、ツール権限、プロジェクト構成は、Claude Code の設定に直接書き込まれて即座に反映され、その逆Claude Code での変更が UI に反映)も同様です。
  • 対応エージェントがさらに充実 — Claude Code に加えて Cursor CLI、Codex、Gemini CLI にも対応しています。
  • チャット窓だけではない完全な UI — ファイルエクスプローラー、Git 統合、MCP 管理、シェル端末などがすべて組み込まれています。
  • CloudCLI Cloud はクラウド上で稼働 — ノートパソコンを閉じてもエージェントは動き続けます。監視が要る端末も、スリープ防止も不要です。
AI のサブスクリプションは別途支払いが必要ですか?

はい。CloudCLI は環境を提供するものであり、AI は含まれません。Claude、Cursor、Codex、または Gemini のサブスクリプションはご自身でご用意ください。CloudCLI Cloud のホスティング環境はそれに加えて月額 $7 から提供されます。

CloudCLI UI をスマホで使えますか?

はい。セルフホストの場合は、自身のマシンでサーバーを起動し、ネットワーク内のブラウザで [yourip]:port を開いてください。CloudCLI Cloud を使う場合は、任意のデバイスからアクセスできます。VPN もポートフォワーディングも不要で、セットアップも不要です。ネイティブアプリも開発中です。

UI で加えた変更はローカルの Claude Code 設定に影響しますか?

はい、セルフホストの場合です。CloudCLI UI は Claude Code がネイティブに使う ~/.claude 設定を読み書きします。UI から追加した MCP サーバーは即座に Claude Code に反映され、その逆も同様です。


コミュニティとサポート

ライセンス

GNU General Public License v3.0 - 詳細は LICENSE ファイルを参照してください。

このプロジェクトはオープンソースであり、GPL v3 ライセンスの下で無料で使用、修正、再配布できます。

謝辞

使用技術

  • Claude Code - Anthropic の公式 CLI
  • Cursor CLI - Cursor の公式 CLI
  • Codex - OpenAI Codex
  • Gemini-CLI - Google Gemini CLI
  • React - ユーザーインターフェースライブラリ
  • Vite - 高速ビルドツールと開発サーバー
  • Tailwind CSS - ユーティリティファーストの CSS フレームワーク
  • CodeMirror - 高度なコードエディタ
  • TaskMaster AI (オプション) - AI を活用したプロジェクト管理とタスク計画

スポンサー


Claude Code、Cursor、Codex コミュニティのために心を込めて作りました。