siteboon/claudecodeui

Claude Code・Cursor CLI・Codex用のデスクトップ・モバイル対応UIで、どこからでもプロジェクトとセッションを管理できます。

完成アプリ条件つき · AGPL-3.0デザイン・UI コンポーネントTypeScript難易度
13,9010 保存
2,002フォーク121Issue
デモ・公式サイトをひらくcloudcli.ai

中辛 の解説

TypeScript・React・Viteで構築されたレスポンシブUIです。npm でサクッと起動(Node.js v22以上)するか、Docker サンドボックスで隔離実行、または CloudCLI Cloud のマネージド版を利用できます。チャットインターフェース、ファイルエクスプローラー、Git 統合、シェルターミナル、ブラウザセッション管理が組み込まれており、プラグインシステムで機能拡張も可能です。デモは https://cloudcli.ai で試用可能。

こんなリポジトリです

こんなときに便利です

  • Claude Code・Cursor CLI セッションをモバイルやリモートブラウザから監視・操作したい場合
  • 複数のエージェントセッションをファイル・Git 統合で一元管理する場合
  • プラグインでカスタムタブ(タスク管理・Web ターミナル・トークンコスト計算など)を追加して AI ワークフローを拡張したい場合

主な機能

デスクトップ・タブレット・モバイル対応レスポンシブデザインチャットインターフェース・ファイルエクスプローラー・Git 統合・シェルターミナル・ブラウザセッション管理を組み込みオープンソース UI × CloudCLI Cloud マネージド版で自由度と利便性を両立

ほかとの違い

Claude Code 標準設定(~/.claude)と双方向同期され、MCP・権限・セッションがネイティブクライアントと完全に統一管理される点で、リモート制御型の既存ツールと異なります。

このリポジトリの作り方

はじめてですか? むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。

準備するもの

  • Node.js v22 以上(npm 実行時)
  • Docker(サンドボックス実行時・オプション)
  • Claude・Cursor・OpenAI Codex のいずれかのサブスクリプション(AI実行用)

すぐに始める

  1. Node.js v22以上がインストールされていることを確認します。
node --version
  1. npx で CloudCLI をインストール・実行します。
npx @cloudcli-ai/cloudcli
  1. ブラウザで http://localhost:3001 を開きます。

  2. グローバルインストールする場合(将来の再利用)。

npm install -g @cloudcli-ai/cloudcli
cloudcli
  1. Docker サンドボックスで隔離実行する場合(実験段階・sbx CLI 必須)。
npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project
  1. 詳細な設定・リモートサーバー構築は https://cloudcli.ai/docs を参照します。

ギット飯トライで味見

入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。

ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。

npx gitbap-try siteboon/claudecodeui

Node.js さえあれば、インストールなしで動きます · ギット飯トライとは? →

スター推移 · 7日

13,9017日間の増加数を計算するための比較データが不足しています

確認日時

使いやすさ · まねしやすいか

サンプル評点 26/100
  • ゆるいライセンス
  • テストあり
  • サンプル集
  • 最近の更新
  • AGENTS.md
  • llms.txt
  • テンプレート

最近の更新あり · 2025 年に作成

「デザイン・UI コンポーネント」 こういうリポジトリを毎週受け取りませんか?

毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。

自分のリポジトリですか? README にギット飯バッジを貼る
[![깃밥](https://www.gitbap.com/badge/siteboon/claudecodeui.svg)](https://www.gitbap.com/r/siteboon/claudecodeui)
Claude からそのまま使う — ギット飯のつなぎ方

ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。

方法 ① コネクタ URL

Claude の設定 → コネクタにこのアドレスを貼り付け。

https://www.gitbap.com/api/mcp
方法 ② プラグイン(試用まで)

プラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。

/plugin marketplace add jakeparkcolde/gitbap-cowork
/plugin install gitbap-cowork@gitbap
つなぎ方をくわしく →

AI が README をもとに要約しました · 原文を見る