d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-03-17 11:57:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(README): update translations with CloudCLI branding and feature restructuring (#544)

Browse Source 
* docs: standardize hero badges and language order across README translations

* fix: label README command blocks as bash

* docs: translate remaining sections to Japanese

* fix(readme): remove sponsor duplicate in Japanese readme

* fix(readme): japanese translation fixes

* fix(readme): remove duplicate sections

---------

Co-authored-by: Haile <118998054+blackmammoth@users.noreply.github.com>
This commit is contained in:
Igor Zarubin
2026-03-16 19:04:49 +08:00
committed by GitHub
parent 72ff134b31
commit 14aef73cc6
6 changed files with 496 additions and 744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.de.md
View File

@@ -9,13 +9,13 @@
</p> </p>
<p align="center"> <p align="center">
<a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Jetzt_testen-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a> <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
<a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Community_beitreten-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Discord beitreten"></a> <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join_Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Join Community"></a>
<br><br> <br><br>
<a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a> <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
</p> </p>
<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a> · <b>Deutsch</b></i></div> <div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <b>Deutsch</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
--- ---

409
README.ja.md
View File

@@ -1,12 +1,23 @@
<div align="center"> <div align="center">
<img src="public/logo.svg" alt="Claude Code UI" width="64" height="64"> <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
<h1>Cloud CLI (別名 Claude Code UI)</h1> <h1>Cloud CLI（別名 Claude Code UI）</h1>
<p><a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>、<a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>、<a href="https://developers.openai.com/codex">Codex</a>、<a href="https://geminicli.com/">Gemini-CLI</a> のためのデスクトップ／モバイル UI。<br>ローカルでもリモートでも使え、アクティブなプロジェクトとセッションをどこからでも閲覧できます。</p>
</div> </div>
<p align="center">
<a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">ドキュメント</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">バグ報告</a> · <a href="CONTRIBUTING.md">コントリビュート</a>
</p>
[Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Cursor CLI](https://docs.cursor.com/en/cli/overview)、[Codex](https://developers.openai.com/codex) 向けのデスクトップ・モバイル UI です。ローカルまたはリモートで使用して、Claude Code、Cursor、Codex のアクティブなプロジェクトやセッションを確認し、どこからでも（モバイルやデスクトップから）変更を加えることができます。どこでも使える適切なインターフェースを提供します。 <p align="center">
<a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
<a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Join our Discord"></a>
<br><br>
<a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
</p>
<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <b>日本語</b> · <a href="./README.de.md">Deutsch</a></i></div> <div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <b>日本語</b></i></div>
---
## スクリーンショット ## スクリーンショット
@@ -18,13 +29,13 @@
<h3>デスクトップビュー</h3> <h3>デスクトップビュー</h3>
<img src="public/screenshots/desktop-main.png" alt="Desktop Interface" width="400"> <img src="public/screenshots/desktop-main.png" alt="Desktop Interface" width="400">
<br> <br>
<em>プロジェクト概要とチャットを表示するメインインターフェース</em> <em>プロジェクト概要とチャットを表示するメイン画面</em>
</td> </td>
<td align="center"> <td align="center">
<h3>モバイル体験</h3> <h3>モバイル体験</h3>
<img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250"> <img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250">
<br> <br>
<em>タッチナビゲーション対応のレスポンシブモバイルデザイン</em> <em>タッチ操作に対応したレスポンシブなモバイルデザイン</em>
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -32,7 +43,7 @@
<h3>CLI 選択</h3> <h3>CLI 選択</h3>
<img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400"> <img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400">
<br> <br>
<em>Claude Code、Cursor CLI、Codex から選択</em> <em>Claude Code、Gemini、Cursor CLI、Codex から選択</em>
</td> </td>
</tr> </tr>
</table> </table>
@@ -43,299 +54,184 @@
## 機能 ## 機能
- **レスポンシブデザイン** - デスクトップ、タブレット、モバイルでシームレスに動作し、モバイルからも Claude Code、Cursor、Codex を使用可能 - **レスポンシブデザイン** - デスクトップ／タブレット／モバイルでシームレスに動作し、モバイルからも Agents を利用可能
- **インタラクティブチャットインターフェース** - Claude Code、Cursor、Codex とシームレスに通信する組み込みチャットインターフェース - **インタラクティブチャット UI** - Agents とスムーズにやり取りできる内蔵チャット UI
- **統合シェルターミナル** - 組み込みシェル機能による Claude Code、Cursor CLI、Codex への直接アクセス - **統合シェルターミナル** - 内蔵シェル機能で Agents の CLI に直接アクセス
- **ファイルエクスプローラー** - シンタックスハイライトとライブ編集対応のインタラクティブファイルツリー - **ファイルエクスプローラー** - シンタックスハイライトとライブ編集に対応したインタラクティブなファイルツリー
- **Git エクスプローラー** - 変更の確認、ステージング、コミット。ブランチの切り替えも可能 - **Git エクスプローラー** - 変更の表示、ステージ、コミット。ブランチ切り替えも可能
- **セッション管理** - 会話の再開、複数セッションの管理、履歴の追跡 - **セッション管理** - 会話の再開、複数セッションの管理、履歴の追跡
- **TaskMaster AI 統合** *（オプション）* - AI 駆動のタスク計画、PRD 解析、ワークフロー自動化による高度なプロジェクト管理 - **プラグインシステム** - カスタムプラグインで CloudCLI を拡張 — 新しいタブ、バックエンドサービス、連携を追加できます。[自分で構築する →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
- **モデル互換性** - Claude Sonnet 4.5、Opus 4.5、GPT-5.2 に対応
- **TaskMaster AI 連携** *(オプション)* - AI によるタスク計画、PRD 解析、ワークフロー自動化を備えた高度なプロジェクト管理
- **モデル互換性** - Claude、GPT、Gemini の各モデルファミリーに対応（対応モデルの全リストは [`shared/modelConstants.js`](shared/modelConstants.js) を参照）
## クイックスタート ## クイックスタート
### 前提条件 ### CloudCLI Cloud（推奨）
- [Node.js](https://nodejs.org/) v22 以上 最速で始める方法 — ローカルのセットアップは不要です。Web、モバイルアプリ、API、またはお気に入りの IDE からアクセスできる、フルマネージドでコンテナ化された開発環境を利用できます。
- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) のインストールと設定、および/または
- [Cursor CLI](https://docs.cursor.com/en/cli/overview) のインストールと設定、および/または
- [Codex](https://developers.openai.com/codex) のインストールと設定
### ワンクリック実行（推奨） **[CloudCLI Cloud を始める](https://cloudcli.ai)**
インストール不要、直接実行：
### セルフホスト（オープンソース）
**npx** で今すぐ CloudCLI UI を試せます（**Node.js** v22+ が必要）：
```bash ```bash
npx @siteboon/claude-code-ui npx @siteboon/claude-code-ui
``` ```
サーバーが起動し、`http://localhost:3001`（または設定した PORT）でアクセスできます。 または、普段使いするなら **グローバル** にインストール：
**再起動**: サーバーを停止した後、同じ `npx` コマンドを再度実行するだけです
### グローバルインストール（定期的に使用する場合）
頻繁に使用する場合は、一度だけグローバルインストール：
```bash ```bash
npm install -g @siteboon/claude-code-ui npm install -g @siteboon/claude-code-ui
cloudcli
``` ```
シンプルなコマンドで起動： `http://localhost:3001` を開いてください — 既存のセッションは自動的に検出されます。
```bash より詳細な設定オプション、PM2、リモートサーバー設定などについては **[ドキュメントはこちら →](https://cloudcli.ai/docs)** を参照してください。
claude-code-ui
```
**再起動**: Ctrl+C で停止し、`claude-code-ui` を再度実行します。 ---
**アップデート**: ## どちらの選択肢が適していますか？
```bash
cloudcli update
```
### CLI の使い方 CloudCLI UI は、CloudCLI Cloud を支えるオープンソースの UI レイヤーです。自分のマシンにセルフホストすることも、フルマネージドのクラウド環境、チーム機能、より深い統合を備えた CloudCLI Cloud を使うこともできます。
グローバルインストール後、`claude-code-ui` と `cloudcli` コマンドが使用できます： | | CloudCLI UI (Self-hosted) | CloudCLI Cloud |
|---|---|---|
| **対象ユーザー** | 自分のマシン上でローカルの agent セッションに対してフル UI を使いたい開発者 | クラウド上で動く agents をどこからでも利用したいチーム／開発者 |
| **アクセス方法** | ブラウザ（`[yourip]:port`） | ブラウザ、任意の IDE、REST API、n8n |
| **セットアップ** | `npx @siteboon/claude-code-ui` | セットアップ不要 |
| **マシンの稼働継続** | はい | いいえ |
| **モバイルアクセス** | 同一ネットワーク内の任意のブラウザ | 任意のデバイス（ネイティブアプリも準備中） |
| **利用可能なセッション** | `~/.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 そのものではありません。
|------------------|-------|-------------|
| `cloudcli` または `claude-code-ui` | | サーバーを起動（デフォルト） |
| `cloudcli start` | | サーバーを明示的に起動 |
| `cloudcli status` | | 設定とデータの場所を表示 |
| `cloudcli update` | | 最新バージョンに更新 |
| `cloudcli help` | | ヘルプ情報を表示 |
| `cloudcli version` | | バージョン情報を表示 |
| `--port <port>` | `-p` | サーバーポートを設定（デフォルト: 3001） |
| `--database-path <path>` | | カスタムデータベースの場所を設定 |
**例:** ---
```bash
cloudcli # デフォルト設定で起動
cloudcli -p 8080 # カスタムポートで起動
cloudcli status # 現在の設定を表示
```
### バックグラウンドサービスとして実行（本番環境推奨）
本番環境では、PM2（Process Manager 2）を使用して Claude Code UI をバックグラウンドサービスとして実行します：
#### PM2 のインストール
```bash
npm install -g pm2
```
#### バックグラウンドサービスとして起動
```bash
# バックグラウンドでサーバーを起動
pm2 start claude-code-ui --name "claude-code-ui"
# または短いエイリアスを使用
pm2 start cloudcli --name "claude-code-ui"
# カスタムポートで起動
pm2 start cloudcli --name "claude-code-ui" -- --port 8080
```
#### システム起動時の自動起動
システム起動時に Claude Code UI を自動的に起動するには：
```bash
# プラットフォーム用の起動スクリプトを生成
pm2 startup
# 現在のプロセスリストを保存
pm2 save
```
### ローカル開発インストール
1. **リポジトリをクローン:**
```bash
git clone https://github.com/siteboon/claudecodeui.git
cd claudecodeui
```
2. **依存関係をインストール:**
```bash
npm install
```
3. **環境を設定:**
```bash
cp .env.example .env
# お好みの設定で .env を編集
```
4. **アプリケーションを起動:**
```bash
# 開発モード（ホットリロード付き）
npm run dev
```
アプリケーションは .env で指定したポートで起動します
5. **ブラウザを開く:**
- 開発: `http://localhost:3001`
## セキュリティとツール設定 ## セキュリティとツール設定
**重要なお知らせ**: すべての Claude Code ツールは**デフォルトで無効**になっています。これにより、潜在的に有害な操作が自動的に実行されることを防ぎます。 **🔒 重要なお知らせ** すべての Claude Code ツールは **デフォルトで無効** です。これにより、潜在的に有害な操作が自動的に実行されることを防ぎます。
### ツールの有効化 ### ツールの有効化
Claude Code の全機能を使用するには、手動でツールを有効にする必要があります： Claude Code の全機能を使うには、手動でツールを有効化する必要があります：
1. **ツール設定を開く** - サイドバーの歯車アイコンをクリック 1. **ツール設定を開く** - サイドバーの歯車アイコンをクリック
2. **選択的に有効化** - 必要なツールのみを有効にする 2. **必要なツールだけを選んで有効化** - 本当に使うものだけをオンにする
3. **設定を適用** - 環境設定はローカルに保存されます 3. **設定を適用** - 設定内容はローカルに保存されます
<div align="center"> <div align="center">
![ツール設定モーダル](public/screenshots/tools-modal.png) ![Tools Settings Modal](public/screenshots/tools-modal.png)
*ツール設定インターフェース - 必要なものだけを有効にしましょう* *Tools 設定画面 - 必要なものだけを有効にしてください*
</div> </div>
**推奨アプローチ**: 基本的なツールから有効にし、必要に応じて追加してください。これらの設定はいつでも調整できます。 **推奨アプローチ**: まずは基本ツールだけを有効にし、必要に応じて追加してください。これらの設定は後からいつでも調整できます。
## TaskMaster AI 統合 *（オプション）* ---
Claude Code UI は、高度なプロジェクト管理と AI 駆動のタスク計画のための **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)**（別名 claude-task-master）統合をサポートしています。 ## プラグイン
提供機能 CloudCLI にはプラグインシステムがあり、独自のフロントエンド UI と（必要に応じて）Node.js バックエンドを持つカスタムタブを追加できます。プラグインは **Settings > Plugins** から git リポジトリを直接指定してインストールするか、自作できます。
- PRD（製品要件ドキュメント）からの AI 駆動タスク生成
- スマートなタスク分解と依存関係管理
- ビジュアルタスクボードと進捗追跡
**セットアップとドキュメント**: インストール手順、設定ガイド、使用例は [TaskMaster AI GitHub リポジトリ](https://github.com/eyaltoledano/claude-task-master)をご覧ください。 ### 利用可能なプラグイン
インストール後、設定から有効にできます
| プラグイン | 説明 |
|---|---|
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | 現在のプロジェクトについて、ファイル数、コード行数、ファイル種別の内訳、最大ファイル、最近変更されたファイルを表示 |
## 使用ガイド > 他のプラグインを確認するには Settings > Plugins から git リポジトリを指定してインストールできます。より多くのオプションを試すには、このリストを参考にしてください。
### 主要機能 ### 自作する
#### プロジェクト管理 **[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — このリポジトリを fork して独自プラグインを作れます。フロントエンド描画、ライブコンテキスト更新、バックエンドサーバーへの RPC 通信を含む動作例が入っています。
Claude Code、Cursor、Codex のセッションが利用可能な場合、自動的に検出しプロジェクトとしてグループ化します
- **プロジェクト操作** - プロジェクトの名前変更、削除、整理
- **スマートナビゲーション** - 最近のプロジェクトやセッションへのクイックアクセス
- **MCP サポート** - UI から独自の MCP サーバーを追加
#### チャットインターフェース **[プラグインのドキュメント →](https://cloudcli.ai/docs/plugin-overview)** — プラグイン API、manifest 形式、セキュリティモデルなどの完全ガイド。
- **レスポンシブチャットまたは Claude Code/Cursor CLI/Codex CLI を使用** - アダプティブチャットインターフェースを使用するか、シェルボタンで選択した CLI に接続できます
- **リアルタイム通信** - WebSocket 接続で選択した CLI（Claude Code/Cursor/Codex）からレスポンスをストリーミング
- **セッション管理** - 以前の会話を再開、または新しいセッションを開始
- **メッセージ履歴** - タイムスタンプとメタデータ付きの完全な会話履歴
- **マルチフォーマット対応** - テキスト、コードブロック、ファイル参照
#### ファイルエクスプローラーとエディター ---
- **インタラクティブファイルツリー** - 展開/折りたたみナビゲーションでプロジェクト構造を閲覧 ## FAQ
- **ライブファイル編集** - インターフェースで直接ファイルの読み取り、変更、保存
- **シンタックスハイライト** - 複数のプログラミング言語に対応
- **ファイル操作** - ファイルやディレクトリの作成、名前変更、削除
#### Git エクスプローラー <details>
<summary>Claude Code Remote Control とはどう違いますか？</summary>
Claude Code Remote Control は、ローカル端末で既に動作しているセッションへメッセージを送れる仕組みです。マシンを起動したままにし、端末も開いたままにする必要があり、ネットワーク接続がない状態が約 10 分続くとセッションがタイムアウトします。
#### TaskMaster AI 統合 *（オプション）* CloudCLI UI と CloudCLI Cloud は、Claude Code の横に別物として存在するのではなく、Claude Code を拡張します — MCP サーバー、権限、設定、セッションは Claude Code がネイティブに使うものと完全に同一です。複製したり、別系統で管理したりしません。
- **ビジュアルタスクボード** - 開発タスク管理のためのカンバンスタイルインターフェース
- **PRD パーサー** - 製品要件ドキュメントを作成し、構造化されたタスクに変換
- **進捗追跡** - リアルタイムのステータス更新と完了追跡
#### セッション管理 実際の意味合いは次のとおりです：
- **セッション永続化** - すべての会話を自動保存
- **セッション整理** - プロジェクトとタイムスタンプでセッションをグループ化
- **セッション操作** - 会話履歴の名前変更、削除、エクスポート
- **クロスデバイス同期** - どのデバイスからでもセッションにアクセス
### モバイルアプリ - **すべてのセッションにアクセス** — 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 はクラウド上で稼働** — ノートパソコンを閉じてもエージェントは動き続けます。監視が要る端末も、スリープ防止も不要です。
- **ホーム画面にショートカットを追加** - ホーム画面にショートカットを追加すると、アプリが PWA のように動作します
## アーキテクチャ </details>
### システム概要 <details>
<summary>AI のサブスクリプションは別途支払いが必要ですか？</summary>
``` はい。CloudCLI は環境を提供するものであり、AI は含まれません。Claude、Cursor、Codex、または Gemini のサブスクリプションはご自身でご用意ください。CloudCLI Cloud のホスティング環境はそれに加えて月額 $7 から提供されます。
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ Backend │ │ Agent │
│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ Integration │
│ │ │ │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
```
### バックエンド (Node.js + Express) </details>
- **Express サーバー** - 静的ファイル配信付きの RESTful API
- **WebSocket サーバー** - チャットとプロジェクト更新のための通信
- **エージェント統合 (Claude Code / Cursor CLI / Codex)** - プロセスの生成と管理
- **ファイルシステム API** - プロジェクト向けファイルブラウザの公開
### フロントエンド (React + Vite) <details>
- **React 18** - hooks を使用したモダンなコンポーネントアーキテクチャ <summary>CloudCLI UI をスマホで使えますか？</summary>
- **CodeMirror** - シンタックスハイライト対応の高度なコードエディター
はい。セルフホストの場合は、自身のマシンでサーバーを起動し、ネットワーク内のブラウザで `[yourip]:port` を開いてください。CloudCLI Cloud を使う場合は、任意のデバイスからアクセスできます。VPN もポートフォワーディングも不要で、セットアップも不要です。ネイティブアプリも開発中です。
</details>
<details>
<summary>UI で加えた変更はローカルの Claude Code 設定に影響しますか？</summary>
### コントリビューション はい、セルフホストの場合です。CloudCLI UI は Claude Code がネイティブに使う `~/.claude` 設定を読み書きします。UI から追加した MCP サーバーは即座に Claude Code に反映され、その逆も同様です。
コントリビューションを歓迎します！コミット規約、開発ワークフロー、リリースプロセスの詳細は [Contributing Guide](CONTRIBUTING.md) をご覧ください。 </details>
## トラブルシューティング ---
### よくある問題と解決方法 ## コミュニティとサポート
#### 「Claude プロジェクトが見つかりません」
**問題**: UI にプロジェクトが表示されない、またはプロジェクトリストが空
**解決方法**:
- [Claude Code](https://docs.anthropic.com/en/docs/claude-code) が正しくインストールされていることを確認
- 少なくとも1つのプロジェクトディレクトリで `claude` コマンドを実行して初期化
- `~/.claude/projects/` ディレクトリが存在し、適切な権限があることを確認
#### ファイルエクスプローラーの問題
**問題**: ファイルが読み込まれない、権限エラー、空のディレクトリ
**解決方法**:
- プロジェクトディレクトリの権限を確認（ターミナルで `ls -la`）
- プロジェクトパスが存在しアクセス可能であることを確認
- 詳細なエラーメッセージについてはサーバーコンソールログを確認
- プロジェクト範囲外のシステムディレクトリにアクセスしていないことを確認
- **[Documentation](https://cloudcli.ai/docs)** — インストール、設定、機能、トラブルシューティング
- **[Discord](https://discord.gg/buxwujPNRE)** — ヘルプを得たり、ユーザー同士で交流したりできます
- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — バグ報告と機能要望
- **[Contributing Guide](CONTRIBUTING.md)** — プロジェクトへの貢献方法
## ライセンス ## ライセンス
GNU General Public License v3.0 - 詳細は [LICENSE](LICENSE) ファイルをご覧ください。 GNU General Public License v3.0 - 詳細は [LICENSE](LICENSE) ファイルを参照してください。
このプロジェクトはオープンソースであり、GPL v3 ライセンスの下で自由に使用、変更、配布できます。 このプロジェクトはオープンソースであり、GPL v3 ライセンスの下で無料で使用、修正、再配布できます。
## 謝辞 ## 謝辞
### 使用技術 ### 使用技術
- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic の公式 CLI
- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor の公式 CLI - **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic's official CLI
- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor's official CLI
- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex - **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
- **[React](https://react.dev/)** - ユーザーインターフェースライブラリ - **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
- **[Vite](https://vitejs.dev/)** - 高速ビルドツールと開発サーバー - **[React](https://react.dev/)** - User interface library
- **[Tailwind CSS](https://tailwindcss.com/)** - ユーティリティファースト CSS フレームワーク - **[Vite](https://vitejs.dev/)** - Fast build tool and dev server
- **[CodeMirror](https://codemirror.net/)** - 高度なコードエディター - **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *（オプション）* - AI 駆動のプロジェクト管理とタスク計画 - **[CodeMirror](https://codemirror.net/)** - Advanced code editor
- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Optional)* - AI-powered project management and task planning
## サポートとコミュニティ
### 最新情報を入手
- このリポジトリに **Star** をつけてサポートを表明
- **Watch** で更新や新リリースを確認
- プロジェクトを **Follow** してお知らせを受け取る
### スポンサー ### スポンサー
- [Siteboon - AI powered website builder](https://siteboon.ai) - [Siteboon - AI powered website builder](https://siteboon.ai)
@@ -344,3 +240,70 @@ GNU General Public License v3.0 - 詳細は [LICENSE](LICENSE) ファイルを
<div align="center"> <div align="center">
<strong>Claude Code、Cursor、Codex コミュニティのために心を込めて作りました。</strong> <strong>Claude Code、Cursor、Codex コミュニティのために心を込めて作りました。</strong>
</div> </div>
---
### スポンサー
- [Siteboon - AI powered website builder](https://siteboon.ai)
---
<div align="center">
<strong>Claude Code、Cursor、Codex コミュニティのために心を込めて作りました。</strong>
</div>
### スポンサー
- [Siteboon - AI powered website builder](https://siteboon.ai)
---
<div align="center">
<strong>Claude Code、Cursor、Codex コミュニティのために心を込めて作りました。</strong>
</div>
## ライセンス
GNU General Public License v3.0 - 詳細は [LICENSE](LICENSE) ファイルを参照してください。
このプロジェクトはオープンソースであり、GPL v3 ライセンスの下で無料で使用、修正、再配布できます。
## 謝辞
### 使用技術
- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic's official CLI
- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor's official CLI
- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
- **[React](https://react.dev/)** - User interface library
- **[Vite](https://vitejs.dev/)** - Fast build tool and dev server
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
- **[CodeMirror](https://codemirror.net/)** - Advanced code editor
- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Optional)* - AI-powered project management and task planning
## ライセンス
GNU General Public License v3.0 - 詳細は [LICENSE](LICENSE) ファイルを参照してください。
このプロジェクトはオープンソースであり、GPL v3 ライセンスの下で無料で使用、修正、再配布できます。
## 謝辞
### 使用技術
- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic's official CLI
- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor's official CLI
- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
- **[React](https://react.dev/)** - User interface library
- **[Vite](https://vitejs.dev/)** - Fast build tool and dev server
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
- **[CodeMirror](https://codemirror.net/)** - Advanced code editor
- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Optional)* - AI-powered project management and task planning
### スポンサー
- [Siteboon - AI powered website builder](https://siteboon.ai)
---
<div align="center">
<strong>Claude Code、Cursor、Codex コミュニティのために心を込めて作りました。</strong>
</div>

341
README.ko.md
View File

@@ -1,12 +1,23 @@
<div align="center"> <div align="center">
<img src="public/logo.svg" alt="Claude Code UI" width="64" height="64"> <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
<h1>Cloud CLI (일명 Claude Code UI)</h1> <h1>Cloud CLI (일명 Claude Code UI)</h1>
<p><a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>, <a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>, <a href="https://developers.openai.com/codex">Codex</a>, <a href="https://geminicli.com/">Gemini-CLI</a> 용 데스크톱 및 모바일 UI입니다.<br>로컬 또는 원격에서 실행하여 어디서나 활성 프로젝트와 세션을 확인하세요.</p>
</div> </div>
<p align="center">
<a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">문서</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">버그 신고</a> · <a href="CONTRIBUTING.md">기여 안내</a>
</p>
[Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor CLI](https://docs.cursor.com/en/cli/overview) 및 [Codex](https://developers.openai.com/codex)를 위한 데스크톱 및 모바일 UI입니다. 로컬 또는 원격으로 사용하여 Claude Code, Cursor 또는 Codex의 활성 프로젝트와 세션을 확인하고, 어디서든(모바일 또는 데스크톱) 변경할 수 있습니다. 어디서든 작동하는 적절한 인터페이스를 제공합니다. <p align="center">
<a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
<a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Discord 커뮤니티"></a>
<br><br>
<a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
</p>
<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <b>한국어</b> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.de.md">Deutsch</a></i></div> <div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.de.md">Deutsch</a> · <b>한국어</b> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
---
## 스크린샷 ## 스크린샷
@@ -15,14 +26,14 @@
<table> <table>
<tr> <tr>
<td align="center"> <td align="center">
<h3>데스크톱 뷰</h3> <h3>데스크톱 보기</h3>
<img src="public/screenshots/desktop-main.png" alt="Desktop Interface" width="400"> <img src="public/screenshots/desktop-main.png" alt="데스크톱 인터페이스" width="400">
<br> <br>
<em>프로젝트 개요와 채팅을 보여주는 메인 인터페이스</em> <em>프로젝트 개요와 채팅을 보여주는 메인 인터페이스</em>
</td> </td>
<td align="center"> <td align="center">
<h3>모바일 경험</h3> <h3>모바일 경험</h3>
<img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250"> <img src="public/screenshots/mobile-chat.png" alt="모바일 인터페이스" width="250">
<br> <br>
<em>터치 내비게이션이 포함된 반응형 모바일 디자인</em> <em>터치 내비게이션이 포함된 반응형 모바일 디자인</em>
</td> </td>
@@ -30,316 +41,190 @@
<tr> <tr>
<td align="center" colspan="2"> <td align="center" colspan="2">
<h3>CLI 선택</h3> <h3>CLI 선택</h3>
<img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400"> <img src="public/screenshots/cli-selection.png" alt="CLI 선택" width="400">
<br> <br>
<em>Claude Code, Cursor CLI, Codex 중 선택</em> <em>Claude Code, Gemini, Cursor CLI 및 Codex 중 선택</em>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
## 기능 ## 기능
- **반응형 디자인** - 데스크톱, 태블릿, 모바일에서 원활하게 작동하여 모바일에서도 Claude Code, Cursor 또는 Codex를 사용할 수 있습니다 - **반응형 디자인** - 데스크톱, 태블릿, 모바일을 아우르는 매끄러운 경험으로 어디서든 Agents를 사용할 수 있습니다
- **대화형 채팅 인터페이스** - Claude Code, Cursor 또는 Codex와 원활하게 소통하는 내장 채팅 인터페이스 - **대화형 채팅 인터페이스** - 내장된 채팅 UI를 통해 에이전트와 자연스럽게 소통
- **통합 셸 터미널** - 내장 셸 기능을 통한 Claude Code, Cursor CLI 또는 Codex 직접 접근 - **통합 셸 터미널** - 셸 기능을 통해 Agents CLI에 직접 접근
- **파일 탐색기** - 구문 강조 및 실시간 편집이 가능한 대화형 파일 트리 - **파일 탐색기** - 구문 강조 및 실시간 편집을 갖춘 인터랙티브 파일 트리
- **Git 탐색기** - 변경사항 보기, 스테이징 및 커밋. 브랜치 전환도 가능 - **Git 탐색기** - 변경 사항 보기, 스테이징 및 커밋. 브랜치 전환 기능 포함
- **세션 관리** - 대화 재개, 여러 세션 관리 및 기록 추적 - **세션 관리** - 대화를 재개하고, 여러 세션을 관리하며 기록을 추적
- **TaskMaster AI 통합** *(선택사항)* - AI 기반 작업 계획, PRD 분석 및 워크플로우 자동화를 통한 고급 프로젝트 관리 - **플러그인 시스템** - 커스텀 탭, 백엔드 서비스, 통합을 추가하여 CloudCLI 확장. [직접 빌드 →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
- **모델 호환성** - Claude Sonnet 4.5, Opus 4.5 및 GPT-5.2 지원 - **TaskMaster AI 통합** *(선택사항)* - AI 중심의 작업 계획, PRD 파싱, 워크플로 자동화를 통한 고급 프로젝트 관리
- **모델 호환성** - Claude, GPT, Gemini 모델 계열에서 작동 (`shared/modelConstants.js`에서 전체 지원 모델 확인)
## 빠른 시작 ## 빠른 시작
### 사전 요구사항 ### CloudCLI Cloud (추천)
- [Node.js](https://nodejs.org/) v22 이상 가장 빠르게 시작하는 방법 — 로컬 설정 없이도 가능합니다. 웹, 모바일 앱, API 또는 선호하는 IDE에서 이용할 수 있는 완전 관리형 컨테이너화된 개발 환경을 제공합니다.
- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) 설치 및 구성, 그리고/또는
- [Cursor CLI](https://docs.cursor.com/en/cli/overview) 설치 및 구성, 그리고/또는
- [Codex](https://developers.openai.com/codex) 설치 및 구성
### 원클릭 실행 (권장) **[CloudCLI Cloud 시작하기](https://cloudcli.ai)**
설치 없이 바로 실행: ### 셀프 호스트 (오픈 소스)
**npx**로 즉시 CloudCLI UI를 실행하세요 (Node.js v22+ 필요):
```bash ```bash
npx @siteboon/claude-code-ui npx @siteboon/claude-code-ui
``` ```
서버가 시작되면 `http://localhost:3001` (또는 설정한 PORT)에서 접근할 수 있습니다. **정기적으로 사용한다면 전역 설치:**
**재시작**: 서버를 중지한 후 동일한 `npx` 명령을 다시 실행하면 됩니다
### 전역 설치 (정기적 사용 시)
자주 사용하는 경우 한 번만 전역 설치:
```bash ```bash
npm install -g @siteboon/claude-code-ui npm install -g @siteboon/claude-code-ui
cloudcli
``` ```
간단한 명령으로 시작: `http://localhost:3001`을 열면 기존 세션이 자동으로 발견됩니다.
```bash 자세한 구성 옵션, PM2, 원격 서버 설정 등은 **[문서 →](https://cloudcli.ai/docs)**를 참고하세요
claude-code-ui
```
---
**재시작**: Ctrl+C로 중지한 후 `claude-code-ui`를 다시 실행합니다. ## 어느 옵션이 적합한가요?
**업데이트**: CloudCLI UI는 CloudCLI Cloud를 구동하는 오픈 소스 UI 계층입니다. 로컬 머신에서 직접 셀프 호스트하거나, CloudCLI Cloud(완전 관리형 클라우드 환경, 팀 기능, 심화 통합 제공)를 사용할 수 있습니다.
```bash
cloudcli update
```
### CLI 사용법 | | CloudCLI UI (셀프 호스트) | CloudCLI Cloud |
|---|---|---|
| **적합한 대상** | 로컬 에이전트 세션을 위한 전체 UI가 필요한 개발자 | 어디서든 접근 가능한 클라우드에서 에이전트를 운영하고자 하는 팀 및 개발자 |
| **접근 방법** | `[yourip]:port`를 통해 브라우저 접속 | 브라우저, IDE, REST API, n8n |
| **설정** | `npx @siteboon/claude-code-ui` | 설정 불필요 |
| **기기 유지 필요 여부** | 예 (머신 켜둬야 함) | 아니오 |
| **모바일 접근** | 네트워크 내 브라우저 | 모든 기기 (네이티브 앱 예정) |
| **세션 접근** | `~/.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부터 |
전역 설치 후 `claude-code-ui`와 `cloudcli` 명령을 사용할 수 있습니다: > 둘 다 자체 AI 구독(Claude, Cursor 등)을 그대로 사용합니다 — CloudCLI는 환경만 제공합니다.
| 명령 / 옵션 | 약어 | 설명 | ---
|------------------|-------|-------------|
| `cloudcli` 또는 `claude-code-ui` | | 서버 시작 (기본값) |
| `cloudcli start` | | 서버 명시적 시작 |
| `cloudcli status` | | 구성 및 데이터 위치 표시 |
| `cloudcli update` | | 최신 버전으로 업데이트 |
| `cloudcli help` | | 도움말 정보 표시 |
| `cloudcli version` | | 버전 정보 표시 |
| `--port <port>` | `-p` | 서버 포트 설정 (기본값: 3001) |
| `--database-path <path>` | | 사용자 지정 데이터베이스 위치 설정 |
**예시:** ## 보안 및 도구 구성
```bash
cloudcli # 기본 설정으로 시작
cloudcli -p 8080 # 사용자 지정 포트로 시작
cloudcli status # 현재 구성 표시
```
### 백그라운드 서비스로 실행 (프로덕션 권장) **🔒 중요 공지**: 모든 Claude Code 도구는 **기본적으로 비활성화**되어 있습니다. 이는 잠재적인 유해 작업이 자동 실행되는 것을 방지하기 위한 조치입니다.
프로덕션 환경에서는 PM2(Process Manager 2)를 사용하여 Claude Code UI를 백그라운드 서비스로 실행하세요:
#### PM2 설치
```bash
npm install -g pm2
```
#### 백그라운드 서비스로 시작
```bash
# 백그라운드에서 서버 시작
pm2 start claude-code-ui --name "claude-code-ui"
# 또는 짧은 별칭 사용
pm2 start cloudcli --name "claude-code-ui"
# 사용자 지정 포트로 시작
pm2 start cloudcli --name "claude-code-ui" -- --port 8080
```
#### 시스템 부팅 시 자동 시작
시스템 부팅 시 Claude Code UI를 자동으로 시작하려면:
```bash
# 플랫폼에 맞는 시작 스크립트 생성
pm2 startup
# 현재 프로세스 목록 저장
pm2 save
```
### 로컬 개발 설치
1. **리포지토리 클론:**
```bash
git clone https://github.com/siteboon/claudecodeui.git
cd claudecodeui
```
2. **의존성 설치:**
```bash
npm install
```
3. **환경 구성:**
```bash
cp .env.example .env
# 원하는 설정으로 .env 파일 편집
```
4. **애플리케이션 시작:**
```bash
# 개발 모드 (핫 리로드 포함)
npm run dev
```
애플리케이션은 .env에서 지정한 포트에서 시작됩니다
5. **브라우저 열기:**
- 개발: `http://localhost:3001`
## 보안 및 도구 설정
**🔒 중요 공지**: 모든 Claude Code 도구는 **기본적으로 비활성화**되어 있습니다. 이는 잠재적으로 유해한 작업이 자동으로 실행되는 것을 방지합니다.
### 도구 활성화 ### 도구 활성화
Claude Code의 전체 기능을 사용하려면 수동으로 도구를 활성화해야 합니다: 1. **도구 설정 열기** - 사이드바의 톱니바퀴 아이콘 클릭
2. **선택적으로 활성화** - 필요한 도구만 켜기
1. **도구 설정 열기** - 사이드바의 톱니바퀴 아이콘을 클릭 3. **설정 적용** - 선호도는 로컬에 저장됨
2. **선택적으로 활성화** - 필요한 도구만 활성화
3. **설정 적용** - 환경설정은 로컬에 저장됩니다
<div align="center"> <div align="center">
![도구 설정 모달](public/screenshots/tools-modal.png) ![도구 설정 모달](public/screenshots/tools-modal.png)
*도구 설정 인터페이스 - 필요한 것만 활성화하세요* *도구 설정 인터페이스 - 필요한 것만 켜세요*
</div> </div>
**권장 접근법**: 기본 도구부터 활성화하고 필요에 따라 추가하세요. 언제든지 이 설정을 조정할 수 있습니다. **권장 방법**: 기본 도구를 먼저 켜고 필요할 때 추가하세요. 언제든지 조정 가능합니다.
## TaskMaster AI 통합 *(선택사항)* ---
Claude Code UI는 고급 프로젝트 관리 및 AI 기반 작업 계획을 위한 **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)**(일명 claude-task-master) 통합을 지원합니다. ## 플러그인
제공 기능 CloudCLI는 커스텀 탭과 선택적 Node.js 백엔드가 포함된 플러그인 시스템을 제공합니다. Settings > Plugins에서 Git 저장소에서 플러그인을 설치하거나 직접 빌드할 수 있습니다.
- PRD(제품 요구사항 문서)에서 AI 기반 작업 생성
- 스마트 작업 분해 및 의존성 관리
- 시각적 작업 보드 및 진행 상황 추적
**설정 및 문서**: 설치 지침, 구성 가이드 및 사용 예시는 [TaskMaster AI GitHub 리포지토리](https://github.com/eyaltoledano/claude-task-master)를 방문하세요. ### 이용 가능한 플러그인
설치 후 설정에서 활성화할 수 있습니다
| 플러그인 | 설명 |
|---|---|
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | 현재 프로젝트의 파일 수, 코드 줄 수, 파일 유형 분포, 가장 큰 파일, 최근 수정 파일을 표시 |
## 사용 가이드 ### 직접 만들기
### 핵심 기능 **[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — 이 저장소를 포크하여 플러그인 구축. 프런트엔드 렌더링, 실시간 컨텍스트 업데이트, RPC 통신 예제 포함.
#### 프로젝트 관리 **[플러그인 문서 →](https://cloudcli.ai/docs/plugin-overview)** — 플러그인 API, 매니페스트 포맷, 보안 모델 등을 설명.
Claude Code, Cursor 또는 Codex 세션을 사용할 수 있을 때 자동으로 발견하고 프로젝트로 그룹화합니다
- **프로젝트 작업** - 프로젝트 이름 변경, 삭제 및 정리
- **스마트 내비게이션** - 최근 프로젝트 및 세션에 빠르게 접근
- **MCP 지원** - UI를 통해 자체 MCP 서버 추가
#### 채팅 인터페이스 ---
- **반응형 채팅 또는 Claude Code/Cursor CLI/Codex CLI 사용** - 적응형 채팅 인터페이스를 사용하거나 셸 버튼을 사용하여 선택한 CLI에 연결할 수 있습니다
- **실시간 통신** - WebSocket 연결을 통해 선택한 CLI(Claude Code/Cursor/Codex)에서 응답 스트리밍
- **세션 관리** - 이전 대화 재개 또는 새 세션 시작
- **메시지 기록** - 타임스탬프 및 메타데이터가 포함된 전체 대화 기록
- **다중 형식 지원** - 텍스트, 코드 블록 및 파일 참조
#### 파일 탐색기 및 편집기 ## FAQ
- **대화형 파일 트리** - 확장/축소 내비게이션으로 프로젝트 구조 탐색
- **실시간 파일 편집** - 인터페이스에서 직접 파일 읽기, 수정 및 저장
- **구문 강조** - 다양한 프로그래밍 언어 지원
- **파일 작업** - 파일 및 디렉토리 생성, 이름 변경, 삭제
#### Git 탐색기 <details>
<summary>Claude Code Remote Control과 어떻게 다른가요?</summary>
Claude Code Remote Control은 이미 로컬 터미널에서 실행 중인 세션으로 메시지를 전송합니다. 이 경우 기계가 켜져 있어야 하고 터미널을 열어 둬야 하며, 네트워크 연결 없이 약 10분 후 타임아웃됩니다.
#### TaskMaster AI 통합 *(선택사항)* CloudCLI UI와 CloudCLI Cloud는 Claude Code를 확장하며 별도로 존재하지 않습니다 — MCP 서버, 권한, 설정, 세션은 Claude Code에서 그대로 사용됩니다.
- **시각적 작업 보드** - 개발 작업 관리를 위한 칸반 스타일 인터페이스
- **PRD 파서** - 제품 요구사항 문서를 생성하고 구조화된 작업으로 변환
- **진행 상황 추적** - 실시간 상태 업데이트 및 완료 추적
#### 세션 관리 - **모든 세션을 다룬다** — CloudCLI UI는 `~/.claude` 폴더에서 모든 세션을 자동 발견합니다. Remote Control은 단일 활성 세션만 노출합니다.
- **세션 지속성** - 모든 대화 자동 저장 - **설정은 그대로** — CloudCLI UI에서 변경한 MCP, 도구 권한, 프로젝트 설정은 Claude Code에 즉시 반영됩니다.
- **세션 정리** - 프로젝트 및 타임스탬프별 세션 그룹화 - **지원 에이전트가 더 많음** — Claude Code, Cursor CLI, Codex, Gemini CLI 지원.
- **세션 작업** - 대화 기록 이름 변경, 삭제 및 내보내기 - **전체 UI 제공** — 단일 채팅 창이 아닌 파일 탐색기, Git 통합, MCP 관리 및 셸 터미널 포함.
- **크로스 디바이스 동기화** - 모든 기기에서 세션 접근 - **CloudCLI Cloud는 클라우드에서 실행** — 노트북을 닫아도 에이전트가 실행됩니다. 터미널을 계속 확인할 필요 없음.
### 모바일 앱 </details>
- **반응형 디자인** - 모든 화면 크기에 최적화
- **터치 친화적 인터페이스** - 스와이프 제스처 및 터치 내비게이션
- **모바일 내비게이션** - 엄지 내비게이션을 위한 하단 탭 바
- **적응형 레이아웃** - 접을 수 있는 사이드바 및 스마트 콘텐츠 우선순위
- **홈 화면 바로가기 추가** - 홈 화면에 바로가기를 추가하면 앱이 PWA처럼 작동합니다
## 아키텍처 <details>
<summary>AI 구독을 별도로 결제해야 하나요?</summary>
### 시스템 개요 네. CloudCLI는 환경만 제공합니다. Claude, Cursor, Codex, Gemini 구독 비용은 별도로 부과됩니다. CloudCLI Cloud는 관리형 환경을 월 $7부터 제공합니다.
``` </details>
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ Backend │ │ Agent │
│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ Integration │
│ │ │ │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
```
### 백엔드 (Node.js + Express) <details>
- **Express 서버** - 정적 파일 제공이 포함된 RESTful API <summary>CloudCLI UI를 휴대폰에서 사용할 수 있나요?</summary>
- **WebSocket 서버** - 채팅 및 프로젝트 새로고침을 위한 통신
- **에이전트 통합 (Claude Code / Cursor CLI / Codex)** - 프로세스 생성 및 관리
- **파일 시스템 API** - 프로젝트를 위한 파일 브라우저 노출
### 프론트엔드 (React + Vite) 네. 셀프 호스트인 경우 기계에서 서버를 실행하고 네트워크의 아무 브라우저에서 `[yourip]:port`를 열면 됩니다. CloudCLI Cloud는 어떤 기기에서도 열 수 있으며, 네이티브 앱도 준비 중입니다.
- **React 18** - hooks를 사용한 현대적 컴포넌트 아키텍처
- **CodeMirror** - 구문 강조를 지원하는 고급 코드 편집기
</details>
<details>
<summary>UI에서 변경하면 로컬 Claude Code 설정에 영향을 주나요?</summary>
### 기여하기 네, 셀프 호스트에서는 그렇습니다. CloudCLI UI는 Claude Code가 사용하는 동일한 `~/.claude` 설정을 읽고 씁니다. UI에서 추가한 MCP 서버가 Claude Code에 즉시 나타납니다.
기여를 환영합니다! 커밋 규칙, 개발 워크플로우, 릴리스 프로세스에 대한 자세한 내용은 [Contributing Guide](CONTRIBUTING.md)를 참조해주세요. </details>
## 문제 해결 ---
### 일반적인 문제 및 해결 방법 ## 커뮤니티 및 지원
#### "Claude 프로젝트를 찾을 수 없음"
**문제**: UI에 프로젝트가 없거나 프로젝트 목록이 비어 있음
**해결 방법**:
- [Claude Code](https://docs.anthropic.com/en/docs/claude-code)가 올바르게 설치되었는지 확인
- 초기화를 위해 최소 하나의 프로젝트 디렉토리에서 `claude` 명령 실행
- `~/.claude/projects/` 디렉토리가 존재하고 적절한 권한이 있는지 확인
#### 파일 탐색기 문제
**문제**: 파일이 로드되지 않음, 권한 오류, 빈 디렉토리
**해결 방법**:
- 프로젝트 디렉토리 권한 확인 (터미널에서 `ls -la`)
- 프로젝트 경로가 존재하고 접근 가능한지 확인
- 자세한 오류 메시지는 서버 콘솔 로그 검토
- 프로젝트 범위 밖의 시스템 디렉토리에 접근하지 않는지 확인
- **[문서](https://cloudcli.ai/docs)** — 설치, 구성, 기능, 문제 해결 안내
- **[Discord](https://discord.gg/buxwujPNRE)** — 도움 및 커뮤니티 참여
- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — 버그 보고 및 기능 요청
- **[기여 안내](CONTRIBUTING.md)** — 프로젝트 참여 방법
## 라이선스 ## 라이선스
GNU General Public License v3.0 - 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세요. GNU General Public License v3.0 - 자세한 내용은 [LICENSE](LICENSE) 파일 참조.
이 프로젝트는 오픈 소스이며 GPL v3 라이선스에 따라 자유롭게 사용, 수정 및 배포할 수 있습니다. 이 프로젝트는 GPL v3 라이선스 하에 오픈 소스로 공개되어 있으며 자유롭게 사용, 수정, 배포할 수 있습니다.
## 감사의 말 ## 감사의 말
### 사용 기술 ### 사용 기술
- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic의 공식 CLI - **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic 공식 CLI
- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor의 공식 CLI - **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor 공식 CLI
- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex - **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
- **[React](https://react.dev/)** - 사용자 인터페이스 라이브러리 - **[React](https://react.dev/)** - 사용자 인터페이스 라이브러리
- **[Vite](https://vitejs.dev/)** - 빠른 빌드 도구 및 개발 서버 - **[Vite](https://vitejs.dev/)** - 빠른 빌드 도구 및 개발 서버
- **[Tailwind CSS](https://tailwindcss.com/)** - 유틸리티 우선 CSS 프레임워크 - **[Tailwind CSS](https://tailwindcss.com/)** - 유틸리티 우선 CSS 프레임워크
- **[CodeMirror](https://codemirror.net/)** - 고급 코드 편집기 - **[CodeMirror](https://codemirror.net/)** - 고급 코드 에디터
- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(선택사항)* - AI 기반 프로젝트 관리 및 작업 계획 - **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(선택사항)* - AI 기반 프로젝트 관리 및 작업 계획
## 지원 및 커뮤니티
### 최신 정보 받기
- 이 리포지토리에 **Star**를 눌러 지지를 표시하세요
- **Watch**로 업데이트 및 새 릴리스를 확인하세요
- 프로젝트를 **Follow**하여 공지사항을 받으세요
### 스폰서 ### 스폰서
- [Siteboon - AI powered website builder](https://siteboon.ai) - [Siteboon - AI powered website builder](https://siteboon.ai)
--- ---
<div align="center"> <div align="center">
<strong>Claude Code, Cursor 및 Codex 커뮤니티를 위해 정성껏 만들었습니다.</strong> <strong>Claude Code, Cursor, Codex 커뮤니티를 위해 정성껏 제작되었습니다.</strong>
</div> </div>

2
README.md
View File

@@ -15,7 +15,7 @@
<a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a> <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
</p> </p>
<div align="right"><i><b>English</b> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.de.md">Deutsch</a></i></div> <div align="right"><i><b>English</b> · <a href="./README.ru.md">Русский</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
--- ---

129
README.ru.md
View File

@@ -1,26 +1,28 @@
<div align="center"> <div align="center">
<img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64"> <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
<h1>Cloud CLI (aka Claude Code UI)</h1> <h1>Cloud CLI (aka Claude Code UI)</h1>
<p>Десктопный и мобильный UI для <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>, <a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>, <a href="https://developers.openai.com/codex">Codex</a> и <a href="https://geminicli.com/">Gemini-CLI</a>.<br>Используйте локально или удалённо, чтобы просматривать активные проекты и сессии отовсюду.</p>
</div> </div>
Десктопный и мобильный UI для [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor CLI](https://docs.cursor.com/en/cli/overview), [Codex](https://developers.openai.com/codex) и [Gemini-CLI](https://geminicli.com/). Его можно использовать локально или удаленно, чтобы просматривать активные проекты и сессии и вносить изменения откуда угодно, с мобильного или десктопа. Это дает полноценный интерфейс, который работает везде.
<p align="center"> <p align="center">
<a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Сообщить об ошибке</a> · <a href="CONTRIBUTING.md">Участие в разработке</a> <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">Документация</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Сообщить об ошибке</a> · <a href="CONTRIBUTING.md">Участие в разработке</a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?logo=discord&logoColor=white" alt="Join our Discord"></a> <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
<a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Join our Discord"></a>
<br><br>
<a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a> <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
</p> </p>
<div align="right"><i><a href="./README.md">English</a> · <b>Русский</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.de.md">Deutsch</a></i></div> <div align="right"><i><a href="./README.md">English</a> · <b>Русский</b> · <a href="./README.de.md">Deutsch</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>
---
## Скриншоты ## Скриншоты
<div align="center"> <div align="center">
<table> <table>
<tr> <tr>
<td align="center"> <td align="center">
@@ -33,7 +35,7 @@
<h3>Мобильный режим</h3> <h3>Мобильный режим</h3>
<img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250"> <img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250">
<br> <br>
<em>Адаптивный мобильный интерфейс с сенсорной навигацией</em> <em>Адаптивный мобильный дизайн с сенсорной навигацией</em>
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -41,7 +43,7 @@
<h3>Выбор CLI</h3> <h3>Выбор CLI</h3>
<img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400"> <img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400">
<br> <br>
<em>Выбор между Claude Code, Cursor CLI, Codex и Gemini CLI</em> <em>Выбирайте между Claude Code, Gemini, Cursor CLI и Codex</em>
</td> </td>
</tr> </tr>
</table> </table>
@@ -52,92 +54,111 @@
## Возможности ## Возможности
- **Адаптивный дизайн** - одинаково хорошо работает на десктопе, планшете и телефоне, поэтому пользоваться агентами можно и с мобильных устройств - **Адаптивный дизайн** - одинаково хорошо работает на десктопе, планшете и телефоне, поэтому можно пользоваться агентами и с мобильных устройств
- **Интерактивный чат-интерфейс** - встроенный чат для удобного взаимодействия с агентами - **Интерактивный чат-интерфейс** - встроенный чат для бесшовного общения с агентами
- **Встроенный shell-терминал** - прямой доступ к CLI агентов через встроенную оболочку - **Интегрированный shell-терминал** - прямой доступ к CLI агентов через встроенную оболочку
- **Файловый менеджер** - интерактивное дерево файлов с подсветкой синтаксиса и live-редактированием - **Проводник файлов** - интерактивное дерево файлов с подсветкой синтаксиса и редактированием в реальном времени
- **Git Explorer** - просмотр, stage и commit изменений, а также переключение веток - **Git Explorer** - просмотр, stage и commit изменений. Также можно переключать ветки
- **Управление сессиями** - возобновление диалогов, работа с несколькими сессиями и история - **Управление сессиями** - возобновляйте диалоги, управляйте несколькими сессиями и отслеживайте историю
- **Интеграция с TaskMaster AI** *(опционально)* - расширенное управление проектами с AI-планированием задач, разбором PRD и автоматизацией workflows - **Система плагинов** - расширяйте CloudCLI кастомными плагинами — добавляйте новые вкладки, бэкенд-сервисы и интеграции. [Создать свой →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
- **Совместимость с моделями** - работает с Claude Sonnet 4.5, Opus 4.5, GPT-5.2 и Gemini. - **Интеграция с TaskMaster AI** *(опционально)* - продвинутое управление проектами с планированием задач на базе AI, разбором PRD и автоматизацией workflow
- **Совместимость с моделями** - работает с семействами моделей Claude, GPT и Gemini (см. [`shared/modelConstants.js`](shared/modelConstants.js) для полного списка поддерживаемых моделей)
## Быстрый старт ## Быстрый старт
### CloudCLI Cloud (рекомендуется) ### CloudCLI Cloud (рекомендуется)
Самый быстрый способ начать работу: локальная настройка не требуется. Вы получаете полностью управляемую контейнеризированную среду разработки с доступом из браузера, мобильного приложения, API или любимой IDE. Самый быстрый способ начать — локальная настройка не требуется. Получите полностью управляемую контейнеризированную среду разработки с доступом из веба, мобильного приложения, API или вашей любимой IDE.
**[Начать с CloudCLI Cloud](https://cloudcli.ai)** **[Начать с CloudCLI Cloud](https://cloudcli.ai)**
### Self-Hosted (open source) ### Self-Hosted (Open source)
Попробовать CloudCLI UI можно сразу через **npx** (нужен **Node.js** v22+): Попробовать CloudCLI UI можно сразу через **npx** (требуется **Node.js** v22+):
```bash ```bash
npx @siteboon/claude-code-ui npx @siteboon/claude-code-ui
``` ```
Или установить **глобально** для постоянного использования: Или установить **глобально** для регулярного использования:
```bash ```bash
npm install -g @siteboon/claude-code-ui npm install -g @siteboon/claude-code-ui
cloudcli cloudcli
``` ```
Откройте `http://localhost:3001` — все существующие сессии будут обнаружены автоматически. Откройте `http://localhost:3001` — все ваши существующие сессии будут обнаружены автоматически.
Больше вариантов настройки, PM2, удаленный сервер и остальное описаны в **[документации →](https://cloudcli.ai/docs)** Посетите **[документацию →](https://cloudcli.ai/docs)**, чтобы узнать про дополнительные варианты конфигурации, PM2, настройку удалённого сервера и многое другое
--- ---
## Какой вариант подойдет вам? ## Какой вариант подходит вам?
CloudCLI UI - это open source UI-слой, на котором построен CloudCLI Cloud. Вы можете развернуть его у себя на машине или использовать CloudCLI Cloud, который добавляет полностью управляемую облачную среду, командные функции и более глубокие интеграции. CloudCLI UI — это open source UI-слой, на котором построен CloudCLI Cloud. Вы можете развернуть его на своей машине или использовать CloudCLI Cloud, который добавляет полностью управляемую облачную среду, командные функции и более глубокие интеграции.
| | CloudCLI UI (self-hosted) | CloudCLI Cloud | | | CloudCLI UI (Self-hosted) | CloudCLI Cloud |
|---|---|---| |---|---|---|
| **Лучше всего подходит для** | Разработчиков, которым нужен полноценный UI для локальных агентских сессий на своей машине | Команд и разработчиков, которым нужны агенты в облаке с доступом откуда угодно | | **Лучше всего подходит для** | Разработчиков, которым нужен полноценный UI для локальных агентских сессий на своей машине | Команд и разработчиков, которым нужны агенты в облаке с доступом откуда угодно |
| **Способ доступа** | Браузер через `[yourip]:port` | Браузер, любая IDE, REST API, n8n | | **Как вы получаете доступ** | Браузер через `[yourip]:port` | Браузер, любая IDE, REST API, n8n |
| **Настройка** | `npx @siteboon/claude-code-ui` | Настройка не требуется | | **Настройка** | `npx @siteboon/claude-code-ui` | Настройка не требуется |
| **Машина должна оставаться включенной** | Да | Нет | | **Машина должна оставаться включённой** | Да | Нет |
| **Доступ с мобильных устройств** | Любой браузер в вашей сети | Любое устройство, нативное приложение в разработке | | **Доступ с мобильных устройств** | Любой браузер в вашей сети | Любое устройство, нативное приложение в разработке |
| **Доступные сессии** | Все сессии автоматически обнаруживаются в `~/.claude` | Все сессии внутри вашей облачной среды | | **Доступные сессии** | Все сессии автоматически обнаруживаются из `~/.claude` | Все сессии внутри вашей облачной среды |
| **Поддерживаемые агенты** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI | | **Поддерживаемые агенты** | Claude Code, Cursor CLI, Codex, Gemini CLI | Claude Code, Cursor CLI, Codex, Gemini CLI |
| **Файловый менеджер и Git** | Да, встроены в UI | Да, встроены в UI | | **Проводник файлов и Git** | Да, встроены в UI | Да, встроены в UI |
| **Конфигурация MCP** | Управляется через UI, синхронизируется с локальным `~/.claude` | Управляется через UI | | **Конфигурация MCP** | Управляется через UI, синхронизируется с вашим локальным конфигом `~/.claude` | Управляется через UI |
| **Доступ из IDE** | Ваша локальная IDE | Любая IDE, подключенная к облачной среде | | **Доступ из IDE** | Ваша локальная IDE | Любая IDE, подключенная к вашей облачной среде |
| **REST API** | Да | Да | | **REST API** | Да | Да |
| **Узел n8n** | Нет | Да | | **n8n node** | Нет | Да |
| **Совместная работа в команде** | Нет | Да | | **Совместная работа** | Нет | Да |
| **Стоимость платформы** | Бесплатно, open source | От $7/месяц | | **Стоимость платформы** | Бесплатно, open source | От $7/месяц |
> В обоих вариантах используются ваши собственные AI-подписки (Claude, Cursor и т.д.) — CloudCLI предоставляет среду, а не сам AI. > В обоих вариантах используются ваши собственные AI-подписки (Claude, Cursor и т.д.) — CloudCLI предоставляет среду, а не сам AI.
--- ---
## Безопасность и настройка инструментов ## Безопасность и конфигурация инструментов
**🔒 Важно**: все инструменты Claude Code **по умолчанию отключены**. Это предотвращает автоматический запуск потенциально опасных операций. **🔒 Важное примечание**: все инструменты Claude Code **по умолчанию отключены**. Это предотвращает автоматический запуск потенциально опасных операций.
### Включение инструментов ### Включение инструментов
Чтобы использовать всю функциональность Claude Code, инструменты нужно включить вручную: Чтобы использовать всю функциональность Claude Code, вам нужно вручную включить инструменты:
1. **Откройте настройки инструментов** - нажмите на иконку шестеренки в боковой панели 1. **Откройте настройки инструментов** - нажмите на иконку шестерёнки в боковой панели
2. **Включайте выборочно** - активируйте только те инструменты, которые действительно нужны 2. **Включайте выборочно** - активируйте только те инструменты, которые вам нужны
3. **Примените настройки** - предпочтения сохраняются локально 3. **Примените настройки** - ваши предпочтения сохраняются локально
<div align="center"> <div align="center">
![Tools Settings Modal](public/screenshots/tools-modal.png) ![Tools Settings Modal](public/screenshots/tools-modal.png)
*Окно настройки инструментов - включайте только то, что вам нужно* *Интерфейс настройки инструментов — включайте только то, что вам нужно*
</div> </div>
**Рекомендуемый подход**: начните с базовых инструментов и добавляйте остальные по мере необходимости. Эти настройки всегда можно поменять позже. **Рекомендуемый подход**: начните с базовых инструментов и добавляйте остальные по мере необходимости. Эти настройки всегда можно изменить позже.
---
## Плагины
У CloudCLI есть система плагинов, которая позволяет добавлять кастомные вкладки со своим frontend UI и (опционально) Node.js бэкендом. Устанавливайте плагины напрямую из git-репозиториев в **Settings > Plugins** или создавайте свои.
### Доступные плагины
| Плагин | Описание |
|---|---|
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Показывает количество файлов, строки кода, разбивку по типам файлов, самые большие файлы и недавно изменённые файлы для текущего проекта |
### Создать свой
**[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — сделайте форк этого репозитория, чтобы создать свой плагин. В шаблоне есть рабочий пример с рендерингом на фронтенде, live-обновлением контекста и RPC-коммуникацией с бэкенд-сервером.
**[Plugin Documentation →](https://cloudcli.ai/docs/plugin-overview)** — полный гайд по plugin API, формату манифеста, модели безопасности и другому.
--- ---
## FAQ ## FAQ
@@ -145,38 +166,38 @@ CloudCLI UI - это open source UI-слой, на котором построе
<details> <details>
<summary>Чем это отличается от Claude Code Remote Control?</summary> <summary>Чем это отличается от Claude Code Remote Control?</summary>
Claude Code Remote Control позволяет отправлять сообщения в сессию, уже запущенную в локальном терминале. При этом ваша машина должна оставаться включенной, терминал должен быть открыт, а сессии завершаются примерно через 10 минут без сетевого соединения. Claude Code Remote Control позволяет отправлять сообщения в сессию, которая уже запущена в вашем локальном терминале. Ваша машина должна оставаться включённой, терминал — открытым, а сессии завершаются примерно через 10 минут без сетевого соединения.
CloudCLI UI и CloudCLI Cloud расширяют Claude Code, а не работают рядом с ним — ваши MCP-серверы, разрешения, настройки и сессии остаются теми же самыми, что и в нативном Claude Code. Ничего не дублируется и не управляется отдельно. CloudCLI UI и CloudCLI Cloud расширяют Claude Code, а не работают рядом с ним — ваши MCP-серверы, разрешения, настройки и сессии остаются теми же самыми, что и в нативном Claude Code. Ничего не дублируется и не управляется отдельно.
Вот что это означает на практике: Вот что это означает на практике:
- **Все ваши сессии, а не одна** — CloudCLI UI автоматически находит каждую сессию из папки `~/.claude`. Remote Control предоставляет только одну активную сессию, чтобы сделать ее доступной в мобильном приложении Claude. - **Все ваши сессии, а не одна** — CloudCLI UI автоматически находит каждую сессию из папки `~/.claude`. Remote Control предоставляет только одну активную сессию, чтобы сделать её доступной в мобильном приложении Claude.
- **Ваши настройки остаются вашими** — MCP-серверы, права инструментов и конфигурация проекта, измененные в CloudCLI UI, записываются напрямую в конфиг Claude Code и вступают в силу сразу же, и наоборот. - **Ваши настройки — это ваши настройки** — MCP-серверы, права инструментов и конфигурация проекта, изменённые в CloudCLI UI, записываются напрямую в конфиг Claude Code и вступают в силу сразу же, и наоборот.
- **Поддержка большего числа агентов** — Claude Code, Cursor CLI, Codex и Gemini CLI, а не только Claude Code. - **Работает с большим числом агентов** — Claude Code, Cursor CLI, Codex и Gemini CLI, а не только Claude Code.
- **Полноценный UI, а не просто окно чата** — встроены файловый менеджер, Git-интеграция, управление MCP и shell-терминал. - **Полноценный UI, а не просто окно чата** — проводник файлов, Git-интеграция, управление MCP и shell-терминал — всё встроено.
- **CloudCLI Cloud работает в облаке** — можно закрыть ноутбук, а агент продолжит работу. Не нужно держать терминал открытым и машину в активном состоянии. - **CloudCLI Cloud работает в облаке** — закройте ноутбук, и агент продолжит работать. Не нужно следить за терминалом и держать машину постоянно активной.
</details> </details>
<details> <details>
<summary>Нужно ли отдельно платить за AI-подписку?</summary> <summary>Нужно ли отдельно платить за AI-подписку?</summary>
Да. CloudCLI предоставляет среду, а не сам AI. Вы используете собственную подписку Claude, Cursor, Codex или Gemini. CloudCLI Cloud стоит от $7/месяц за хостируемую среду сверх этого. Да. CloudCLI предоставляет среду, а не сам AI. Вы приносите свою подписку Claude, Cursor, Codex или Gemini. CloudCLI Cloud начинается от $7/месяц за хостируемую среду поверх этого.
</details> </details>
<details> <details>
<summary>Можно ли пользоваться CloudCLI UI с телефона?</summary> <summary>Можно ли пользоваться CloudCLI UI с телефона?</summary>
Да. Для self-hosted запустите сервер на своей машине и откройте `[yourip]:port` в любом браузере внутри вашей сети. Для CloudCLI Cloud откройте сервис с любого устройства — без VPN, проброса портов и дополнительной настройки. Нативное приложение тоже разрабатывается. Да. Для self-hosted запустите сервер на своей машине и откройте `[yourip]:port` в любом браузере в вашей сети. Для CloudCLI Cloud откройте сервис с любого устройства — без VPN, проброса портов и дополнительной настройки. Нативное приложение тоже в разработке.
</details> </details>
<details> <details>
<summary>Повлияют ли изменения, сделанные в UI, на мой локальный Claude Code?</summary> <summary>Повлияют ли изменения, сделанные в UI, на мой локальный Claude Code?</summary>
Да, в self-hosted режиме. CloudCLI UI читает и записывает тот же конфиг `~/.claude`, который нативно использует Claude Code. MCP-серверы, добавленные через UI, сразу появляются в Claude Code, и наоборот. Да, в self-hosted режиме. CloudCLI UI читает и записывает тот же конфиг `~/.claude`, который Claude Code использует нативно. MCP-серверы, добавленные через UI, сразу появляются в Claude Code, и наоборот.
</details> </details>
@@ -186,14 +207,14 @@ CloudCLI UI и CloudCLI Cloud расширяют Claude Code, а не работ
- **[Документация](https://cloudcli.ai/docs)** — установка, настройка, возможности и устранение неполадок - **[Документация](https://cloudcli.ai/docs)** — установка, настройка, возможности и устранение неполадок
- **[Discord](https://discord.gg/buxwujPNRE)** — помощь и общение с другими пользователями - **[Discord](https://discord.gg/buxwujPNRE)** — помощь и общение с другими пользователями
- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — баг-репорты и запросы новых функций - **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — сообщения об ошибках и запросы новых функций
- **[Руководство для контрибьюторов](CONTRIBUTING.md)** — как участвовать в развитии проекта - **[Руководство для контрибьюторов](CONTRIBUTING.md)** — как участвовать в развитии проекта
## Лицензия ## Лицензия
GNU General Public License v3.0 - подробности в файле [LICENSE](LICENSE). GNU General Public License v3.0 - подробности в файле [LICENSE](LICENSE).
Этот проект открыт и может свободно использоваться, изменяться и распространяться по лицензии GPL v3. Этот проект open source и бесплатен для использования, модификации и распространения в рамках лицензии GPL v3.
## Благодарности ## Благодарности
@@ -214,5 +235,5 @@ GNU General Public License v3.0 - подробности в файле [LICENSE]
--- ---
<div align="center"> <div align="center">
<strong>Сделано с любовью к сообществу Claude Code, Cursor и Codex.</strong> <strong>Сделано с заботой для сообщества Claude Code, Cursor и Codex.</strong>
</div> </div>

353
README.zh-CN.md
View File

@@ -1,12 +1,23 @@
<div align="center"> <div align="center">
<img src="public/logo.svg" alt="Claude Code UI" width="64" height="64"> <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
<h1>Cloud CLI (又名 Claude Code UI)</h1> <h1>Cloud CLI（又名 Claude Code UI）</h1>
<p><a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>、<a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>、<a href="https://developers.openai.com/codex">Codex</a> 和 <a href="https://geminicli.com/">Gemini-CLI</a> 的桌面和移动端 UI。可在本地或远程使用，从任何地方查看激活的项目与会话。</p>
</div> </div>
<p align="center">
<a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">文档</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Bug 报告</a> · <a href="CONTRIBUTING.md">贡献指南</a>
</p>
[Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Cursor CLI](https://docs.cursor.com/en/cli/overview) 和 [Codex](https://developers.openai.com/codex) 的桌面端和移动端界面。您可以在本地或远程使用它来查看 Claude Code、Cursor 或 Codex 中的活跃项目和会话,并从任何地方(移动端或桌面端)对它们进行修改。这为您提供了一个在任何地方都能正常使用的合适界面。 <p align="center">
<a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
<a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="加入 Discord 社区"></a>
<br><br>
<a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
</p>
<div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.ko.md">한국어</a> · <b>中文</b> · <a href="./README.ja.md">日本語</a> · <a href="./README.de.md">Deutsch</a></i></div> <div align="right"><i><a href="./README.md">English</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.ko.md">한국어</a> · <b>中文</b> · <a href="./README.ja.md">日本語</a></i></div>
---
## 截图 ## 截图
@@ -16,327 +27,199 @@
<tr> <tr>
<td align="center"> <td align="center">
<h3>桌面视图</h3> <h3>桌面视图</h3>
<img src="public/screenshots/desktop-main.png" alt="Desktop Interface" width="400"> <img src="public/screenshots/desktop-main.png" alt="桌面界面" width="400">
<br> <br>
<em>显示项目概览和聊天界面的主界面</em> <em>显示项目概览和聊天的主界面</em>
</td> </td>
<td align="center"> <td align="center">
<h3>移动端体验</h3> <h3>移动体验</h3>
<img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250"> <img src="public/screenshots/mobile-chat.png" alt="移动界面" width="250">
<br> <br>
<em>具有触摸导航的响应式移动设计</em> <em>具有触控导航的响应式移动设计</em>
</td> </td>
</tr> </tr>
<tr> <tr>
<td align="center" colspan="2"> <td align="center" colspan="2">
<h3>CLI 选择</h3> <h3>CLI 选择</h3>
<img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400"> <img src="public/screenshots/cli-selection.png" alt="CLI 选择" width="400">
<br> <br>
<em>在 Claude Code、Cursor CLI 和 Codex 之间选择</em> <em>在 Claude Code、Gemini、Cursor CLI 与 Codex 之间进行选择</em>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
## 功能特性 ## 功能
- **响应式设计** - 在桌面、平板和移动设备上无缝运行,您也可以在移动端使用 Claude Code、Cursor 或 Codex - **响应式设计** - 在桌面、平板和移动设备上无缝运行，让您随时随地使用 Agents
- **交互式聊天界面** - 内置聊天界面,与 Claude Code、Cursor 或 Codex 无缝通信 - **交互聊天界面** - 内置聊天 UI，轻松与 Agents 交流
- **集成 Shell 终端** - 通过内置 shell 功能直接访问 Claude Code、Cursor CLI 或 Codex - **集成 Shell 终端** - 通过内置 shell 功能直接访问 Agents CLI
- **文件浏览器** - 交互式文件树,支持语法高亮和实时编辑 - **文件浏览器** - 交互式文件树，支持语法高亮与实时编辑
- **Git 浏览器** - 查看、暂存和提交您的更改。您还可以切换分支 - **Git 浏览器** - 查看、暂存并提交更改，还可切换分支
- **会话管理** - 恢复对话、管理多个会话并跟踪历史记录 - **会话管理** - 恢复对话、管理多个会话并跟踪历史记录
- **TaskMaster AI 集成** *(可选)* - 通过 AI 驱动的任务规划、PRD 解析和工作流自动化实现高级项目管理 - **插件系统** - 通过自定义选项卡、后端服务与集成扩展 CloudCLI。 [开始构建 →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)
- **模型兼容性** - 适用于 Claude Sonnet 4.5、Opus 4.5 和 GPT-5.2 - **TaskMaster AI 集成** *(可选)* - 结合 AI 任务规划、PRD 分析与工作流自动化，实现高级项目管理
- **模型兼容性** - 支持 Claude、GPT、Gemini 模型家族（完整支持列表见 [`shared/modelConstants.js`](shared/modelConstants.js)）
## 快速开始 ## 快速开始
### 前置要求 ### CloudCLI Cloud（推荐）
- [Node.js](https://nodejs.org/) v22 或更高版本 无需本地设置即可快速启动。提供可通过网络浏览器、移动应用、API 或喜欢的 IDE 访问的完全集装式托管开发环境。
- 已安装并配置 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code),和/或
- 已安装并配置 [Cursor CLI](https://docs.cursor.com/en/cli/overview),和/或
- 已安装并配置 [Codex](https://developers.openai.com/codex)
### 一键操作(推荐) **[立即开始 CloudCLI Cloud](https://cloudcli.ai)**
无需安装,直接运行: ### 自托管（开源）
启动 CloudCLI UI，只需一行 `npx`（需要 Node.js v22+）：
```bash ```bash
npx @siteboon/claude-code-ui npx @siteboon/claude-code-ui
``` ```
服务器将启动并可通过 `http://localhost:3001`(或您配置的 PORT)访问。 或进行全局安装，便于日常使用：
**重启**: 停止服务器后只需再次运行相同的 `npx` 命令
### 全局安装(供常规使用)
为了频繁使用,一次性全局安装:
```bash ```bash
npm install -g @siteboon/claude-code-ui npm install -g @siteboon/claude-code-ui
cloudcli
``` ```
然后使用简单命令启动: 打开 `http://localhost:3001`，系统会自动发现所有现有会话。
```bash 更多配置选项、PM2、远程服务器设置等，请参阅 **[文档 →](https://cloudcli.ai/docs)**
claude-code-ui
```
---
**重启**: 使用 Ctrl+C 停止,然后再次运行 `claude-code-ui`。 ## 哪个选项更适合你？
**更新**: CloudCLI UI 是 CloudCLI Cloud 的开源 UI 层。你可以在本地机器上自托管它，也可以使用提供团队功能与深入集成的 CloudCLI Cloud。
```bash
cloudcli update
```
### CLI 使用方法 | | CloudCLI UI（自托管） | CloudCLI Cloud |
|---|---|---|
| **适合对象** | 需要为本地代理会话提供完整 UI 的开发者 | 需要部署在云端，随时从任何地方访问代理的团队与开发者 |
| **访问方式** | 通过 `[yourip]:port` 在浏览器中访问 | 浏览器、任意 IDE、REST API、n8n |
| **设置** | `npx @siteboon/claude-code-ui` | 无需设置 |
| **机器需保持开机吗** | 是 | 否 |
| **移动端访问** | 网络内任意浏览器 | 任意设备（原生应用即将推出） |
| **可用会话** | 自动发现 `~/.claude` 中的所有会话 | 云端环境内的会话 |
| **支持的 Agents** | 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/月 |
全局安装后,您可以访问 `claude-code-ui` 和 `cloudcli` 命令: > 两种方式都使用你自己的 AI 订阅（Claude、Cursor 等）— CloudCLI 提供环境，而非 AI。
| 命令 / 选项 | 简写 | 描述 | ---
|------------------|-------|-------------|
| `cloudcli` 或 `claude-code-ui` | | 启动服务器(默认) |
| `cloudcli start` | | 显式启动服务器 |
| `cloudcli status` | | 显示配置和数据位置 |
| `cloudcli update` | | 更新到最新版本 |
| `cloudcli help` | | 显示帮助信息 |
| `cloudcli version` | | 显示版本信息 |
| `--port <port>` | `-p` | 设置服务器端口(默认: 3001) |
| `--database-path <path>` | | 设置自定义数据库位置 |
**示例:**
```bash
cloudcli # 使用默认设置启动
cloudcli -p 8080 # 在自定义端口启动
cloudcli status # 显示当前配置
```
### 作为后台服务运行(推荐用于生产环境)
在生产环境中,使用 PM2(Process Manager 2)将 Claude Code UI 作为后台服务运行:
#### 安装 PM2
```bash
npm install -g pm2
```
#### 作为后台服务启动
```bash
# 在后台启动服务器
pm2 start claude-code-ui --name "claude-code-ui"
# 或使用更短的别名
pm2 start cloudcli --name "claude-code-ui"
# 在自定义端口启动
pm2 start cloudcli --name "claude-code-ui" -- --port 8080
```
#### 系统启动时自动启动
要使 Claude Code UI 在系统启动时自动启动:
```bash
# 为您的平台生成启动脚本
pm2 startup
# 保存当前进程列表
pm2 save
```
### 本地开发安装
1. **克隆仓库:**
```bash
git clone https://github.com/siteboon/claudecodeui.git
cd claudecodeui
```
2. **安装依赖:**
```bash
npm install
```
3. **配置环境:**
```bash
cp .env.example .env
# 使用您喜欢的设置编辑 .env
```
4. **启动应用程序:**
```bash
# 开发模式(支持热重载)
npm run dev
```
应用程序将在您在 .env 中指定的端口启动
5. **打开浏览器:**
- 开发环境: `http://localhost:3001`
## 安全与工具配置 ## 安全与工具配置
**🔒 重要提示**: 所有 Claude Code 工具**默认禁用**。这可以防止潜在的有害操作自动运行。 **🔒 重要提示**: 所有 Claude Code 工具默认**禁用**，可防止潜在的有害操作自动运行。
### 启用工具 ### 启用工具
要使用 Claude Code 的完整功能,您需要手动启用工具: 1. **打开工具设置** - 点击侧边栏齿轮图标
2. **选择性启用** - 仅启用所需工具
1. **打开工具设置** - 点击侧边栏中的齿轮图标 3. **应用设置** - 偏好设置保存在本地
2. **选择性启用** - 仅打开您需要的工具
3. **应用设置** - 您的偏好设置将保存在本地
<div align="center"> <div align="center">
![工具设置模态框](public/screenshots/tools-modal.png) ![工具设置弹窗](public/screenshots/tools-modal.png)
*工具设置界面 - 仅启用您需要的内容* *工具设置界面 - 只启用你需要的内容*
</div> </div>
**推荐方法**: 首先启用基本工具,然后根据需要添加更多。您可以随时调整这些设置。 **推荐做法**: 先启用基础工具，再根据需要添加其他工具。随时可以调整。
## TaskMaster AI 集成 *(可选)* ---
Claude Code UI 支持 **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)**(aka claude-task-master)集成,用于高级项目管理和 AI 驱动的任务规划。 ## 插件
它提供 CloudCLI 配备插件系统，允许你添加带自定义前端 UI 和可选 Node.js 后端的选项卡。在 Settings > Plugins 中直接从 Git 仓库安装插件，或自行开发。
- 从 PRD(产品需求文档)生成 AI 驱动的任务
- 智能任务分解和依赖管理
- 可视化任务板和进度跟踪
**设置与文档**: 访问 [TaskMaster AI GitHub 仓库](https://github.com/eyaltoledano/claude-task-master)获取安装说明、配置指南和使用示例。 ### 可用插件
安装后,您应该能够从设置中启用它
| 插件 | 描述 |
|---|---|
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | 展示当前项目的文件数、代码行数、文件类型分布、最大文件以及最近修改的文件 |
## 使用指南 ### 自行构建
### 核心功能 **[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — Fork 该仓库以构建自己的插件。示例包括前端渲染、实时上下文更新和 RPC 通信。
#### 项目管理 **[插件文档 →](https://cloudcli.ai/docs/plugin-overview)** — 提供插件 API、清单格式、安全模型等完整指南。
当可用时,它会自动发现 Claude Code、Cursor 或 Codex 会话并将它们分组到项目中
- **项目操作** - 重命名、删除和组织项目
- **智能导航** - 快速访问最近的项目和会话
- **MCP 支持** - 通过 UI 添加您自己的 MCP 服务器
#### 聊天界面 ---
- **使用响应式聊天或 Claude Code/Cursor CLI/Codex CLI** - 您可以使用自适应聊天界面或使用 shell 按钮连接到您选择的 CLI
- **实时通信** - 通过 WebSocket 连接从您选择的 CLI(Claude Code/Cursor/Codex)流式传输响应
- **会话管理** - 恢复之前的对话或启动新会话
- **消息历史** - 带有时间戳和元数据的完整对话历史
- **多格式支持** - 文本、代码块和文件引用
#### 文件浏览器与编辑器 ## 常见问题
- **交互式文件树** - 使用展开/折叠导航浏览项目结构
- **实时文件编辑** - 直接在界面中读取、修改和保存文件
- **语法高亮** - 支持多种编程语言
- **文件操作** - 创建、重命名、删除文件和目录
#### Git 浏览器 <details>
<summary>与 Claude Code Remote Control 有何不同？</summary>
Claude Code Remote Control 让你发送消息到本地终端中已经运行的会话。该方式要求你的机器保持开机，终端保持开启，断开网络后约 10 分钟会话会超时。
#### TaskMaster AI 集成 *(可选)* CloudCLI UI 与 CloudCLI Cloud 是对 Claude Code 的扩展，而非旁观 — MCP 服务器、权限、设置、会话与 Claude Code 完全一致。
- **可视化任务板** - 用于管理开发任务的看板风格界面
- **PRD 解析器** - 创建产品需求文档并将其解析为结构化任务
- **进度跟踪** - 实时状态更新和完成跟踪
#### 会话管理 - **覆盖全部会话** — CloudCLI UI 会自动扫描 `~/.claude` 文件夹中的每个会话。Remote Control 只暴露当前活动的会话。
- **会话持久化** - 所有对话自动保存 - **设置统一** — 在 CloudCLI UI 中修改的 MCP、工具权限等设置会立即写入 Claude Code。
- **会话组织** - 按项目和 timestamp 分组会话 - **支持更多 Agents** — Claude Code、Cursor CLI、Codex、Gemini CLI。
- **会话操作** - 重命名、删除和导出对话历史 - **完整 UI** — 除了聊天界面，还包括文件浏览器、Git 集成、MCP 管理和 Shell 终端。
- **跨设备同步** - 从任何设备访问会话 - **CloudCLI Cloud 保持运行于云端** — 关闭本地设备也不会中断代理运行，无需监控终端。
### 移动应用 </details>
- **响应式设计** - 针对所有屏幕尺寸进行优化
- **触摸友好界面** - 滑动手势和触摸导航
- **移动导航** - 底部选项卡栏,方便拇指导航
- **自适应布局** - 可折叠侧边栏和智能内容优先级
- **添加到主屏幕快捷方式** - 添加快捷方式到主屏幕,应用程序将像 PWA 一样运行
## 架构 <details>
<summary>需要额外购买 AI 订阅吗？</summary>
### 系统概览 需要。CloudCLI 只提供环境。你仍需自行获取 Claude、Cursor、Codex 或 Gemini 订阅。CloudCLI Cloud 从 $7/月起提供托管环境。
``` </details>
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ Backend │ │ Agent │
│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ Integration │
│ │ │ │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
```
### 后端 (Node.js + Express) <details>
- **Express 服务器** - 具有静态文件服务的 RESTful API <summary>能在手机上使用 CloudCLI UI 吗？</summary>
- **WebSocket 服务器** - 用于聊天和项目刷新的通信
- **Agent 集成 (Claude Code / Cursor CLI / Codex)** - 进程生成和管理
- **文件系统 API** - 为项目公开文件浏览器
### 前端 (React + Vite) 可以。自托管时，在你的设备上运行服务器，然后在网络中的任意浏览器打开 `[yourip]:port`。CloudCLI Cloud 可从任意设备访问，内置原生应用也在开发中。
- **React 18** - 带有 hooks 的现代组件架构
- **CodeMirror** - 具有语法高亮的高级代码编辑器
</details>
<details>
<summary>UI 中的更改会影响本地 Claude Code 配置吗？</summary>
会的。自托管模式下，CloudCLI UI 读取并写入 Claude Code 使用的 `~/.claude` 配置。通过 UI 添加的 MCP 服务器会立即在 Claude Code 中可见。
### 贡献 </details>
我们欢迎贡献！有关提交规范、开发流程和发布流程的详细信息,请参阅 [Contributing Guide](CONTRIBUTING.md)。 ---
## 故障排除 ## 社区与支持
### 常见问题与解决方案
#### "未找到 Claude 项目"
**问题**: UI 显示没有项目或项目列表为空
**解决方案**:
- 确保已正确安装 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)
- 至少在一个项目目录中运行 `claude` 命令以进行初始化
- 验证 `~/.claude/projects/` 目录存在并具有适当的权限
#### 文件浏览器问题
**问题**: 文件无法加载、权限错误、空目录
**解决方案**:
- 检查项目目录权限(在终端中使用 `ls -la`)
- 验证项目路径存在且可访问
- 查看服务器控制台日志以获取详细错误消息
- 确保您未尝试访问项目范围之外的系统目录
- **[文档](https://cloudcli.ai/docs)** — 安装、配置、功能与故障排除指南
- **[Discord](https://discord.gg/buxwujPNRE)** — 获取帮助并与社区交流
- **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — 报告 Bug 与建议功能
- **[贡献指南](CONTRIBUTING.md)** — 如何参与项目贡献
## 许可证 ## 许可证
GNU General Public License v3.0 - 详见 [LICENSE](LICENSE) 文件。 GNU 通用公共许可证 v3.0 - 详见 [LICENSE](LICENSE) 文件。
本项目是开源的,在 GPL v3 许可下可自由使用、修改和分发。 该项目为开源软件，在 GPL v3 许可证下可自由使用、修改与分发。
## 致谢 ## 致谢
### 构建工具 ### 使用技术
- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic 的官方 CLI - **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic 官方 CLI
- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor 的官方 CLI - **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor 官方 CLI
- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex - **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
- **[Gemini-CLI](https://geminicli.com/)** - Google Gemini CLI
- **[React](https://react.dev/)** - 用户界面库 - **[React](https://react.dev/)** - 用户界面库
- **[Vite](https://vitejs.dev/)** - 快速构建工具和开发服务器 - **[Vite](https://vitejs.dev/)** - 快速构建工具与开发服务器
- **[Tailwind CSS](https://tailwindcss.com/)** - 实用优先的 CSS 框架 - **[Tailwind CSS](https://tailwindcss.com/)** - 实用先行 CSS 框架
- **[CodeMirror](https://codemirror.net/)** - 高级代码编辑器 - **[CodeMirror](https://codemirror.net/)** - 高级代码编辑器
- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(可选)* - AI 驱动的项目管理和任务规划 - **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(可选)* - AI 驱动的项目管理与任务规划
## 支持与社区
### 保持更新
- **Star** 此仓库以表示支持
- **Watch** 以获取更新和新版本
- **Follow** 项目以获取公告
### 赞助商 ### 赞助商
- [Siteboon - AI powered website builder](https://siteboon.ai) - [Siteboon - AI powered website builder](https://siteboon.ai)