CloudCLI UI

Cloud CLI (alias Claude Code UI)

UI desktop dan mobile untuk Claude Code, Cursor CLI, dan Codex.
Gunakan secara lokal atau remote untuk melihat project dan session aktif Anda dari mana saja.

CloudCLI Cloud · Dokumentasi · Discord · Laporan Bug · Kontribusi

CloudCLI Cloud Join our Discord

siteboon%2Fclaudecodeui | Trendshift

English · Русский · Deutsch · 한국어 · 简体中文 · 繁體中文 · 日本語 · Türkçe · Bahasa Indonesia
--- ## Tangkapan Layar

Tampilan Desktop

Antarmuka Desktop
Antarmuka utama yang menampilkan ringkasan project dan chat

Pengalaman Mobile

Antarmuka Mobile
Desain mobile responsif dengan navigasi sentuh

Pemilihan CLI

Pemilihan CLI
Pilih antara Claude Code, Cursor CLI, dan Codex
## Fitur - **Desain Responsif** - Berfungsi mulus di desktop, tablet, dan mobile sehingga Anda juga dapat menggunakan agent dari perangkat mobile - **Antarmuka Chat Interaktif** - Antarmuka chat bawaan untuk berkomunikasi dengan agent secara lancar - **Terminal Shell Terintegrasi** - Akses langsung ke CLI agent melalui fungsi shell bawaan - **File Explorer** - Struktur file interaktif dengan syntax highlighting dan pengeditan langsung - **Git Explorer** - Lihat perubahan, lakukan stage dan commit, serta berpindah branch - **Penggunaan Browser** - Buka session browser untuk riset web, pengujian, dan tugas browser yang dijalankan agent - **Manajemen Session** - Lanjutkan percakapan, kelola beberapa session, dan lacak riwayat - **Sistem Plugin** - Perluas CloudCLI dengan plugin kustom — tambahkan tab baru, layanan backend, dan integrasi. [Buat plugin Anda sendiri →](https://github.com/cloudcli-ai/cloudcli-plugin-starter) - **Integrasi TaskMaster AI** *(Opsional)* - Manajemen project tingkat lanjut dengan perencanaan tugas berbasis AI, parsing PRD, dan otomatisasi workflow - **Kompatibilitas Model** - Mendukung keluarga model Claude dan GPT (daftar lengkap model yang didukung tersedia saat runtime melalui `GET /api/providers/:provider/models`) ## Mulai Cepat ### CloudCLI Cloud (Direkomendasikan) Cara tercepat untuk memulai — tanpa setup lokal. Dapatkan lingkungan pengembangan berbasis container yang dikelola sepenuhnya dan dapat diakses melalui web, aplikasi mobile, API, atau IDE favorit Anda. **[Mulai dengan CloudCLI Cloud](https://cloudcli.ai)** ### Self-Hosted (Open Source) #### npm Coba CloudCLI UI langsung dengan **npx** (memerlukan **Node.js** v22+): ``` npx @cloudcli-ai/cloudcli ``` Atau instal secara **global** untuk penggunaan rutin: ``` npm install -g @cloudcli-ai/cloudcli cloudcli ``` Buka `http://localhost:3001` — semua session Anda yang sudah ada akan ditemukan secara otomatis. Kunjungi **[dokumentasi →](https://cloudcli.ai/docs)** untuk opsi konfigurasi lengkap, PM2, setup server remote, dan lainnya. #### Docker Sandboxes (Eksperimental) Jalankan agent di sandbox terisolasi dengan isolasi tingkat hypervisor. Claude Code dijalankan secara default. Memerlukan [`sbx` CLI](https://docs.docker.com/ai/sandboxes/get-started/). ``` npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project ``` Mendukung Claude Code dan Codex. Lihat [dokumentasi sandbox](../docker/) untuk setup dan opsi tingkat lanjut. ### Aplikasi Pendamping Desktop CloudCLI Desktop adalah aplikasi native pendamping opsional untuk CloudCLI Cloud dan Local CloudCLI. Aplikasi ini dirilis melalui GitHub Releases repository ini dan membuat CloudCLI tetap mudah diakses dari menu bar atau tray Anda. - **[macOS](https://cloudcli.ai/download/macos)** - **[Windows](https://cloudcli.ai/download/windows)** - **[Halaman unduhan](https://cloudcli.ai/download)** · **[GitHub Releases dan checksum](https://github.com/siteboon/claudecodeui/releases)** Gunakan untuk membuka lingkungan CloudCLI Cloud, berpindah antara workspace lokal dan remote, serta menyalin URL mobile/browser. Untuk bekerja secara lokal, pilih **Local CloudCLI** di aplikasi desktop; aplikasi akan menggunakan server lokal yang sedang berjalan atau menjalankannya untuk Anda. --- ## Opsi mana yang tepat untuk Anda? CloudCLI UI adalah lapisan UI open source yang menjadi dasar CloudCLI Cloud. Anda dapat menjalankannya secara self-hosted di mesin sendiri, menjalankannya dalam Docker sandbox untuk isolasi, atau menggunakan CloudCLI Cloud untuk lingkungan yang dikelola sepenuhnya. | | Self-Hosted (npm) | Self-Hosted (Docker Sandbox) *(Eksperimental)* | CloudCLI Cloud | |---|---|---|---| | **Paling cocok untuk** | Session agent lokal di mesin Anda sendiri | Agent terisolasi dengan IDE web/mobile | Tim yang ingin menjalankan agent di cloud | | **Cara mengakses** | Browser melalui `[yourip]:port` | Browser melalui `localhost:port` | Browser, IDE apa pun, REST API, n8n | | **Setup** | `npx @cloudcli-ai/cloudcli` | `npx @cloudcli-ai/cloudcli@latest sandbox ~/project` | Tidak perlu setup | | **Isolasi** | Berjalan di host Anda | Sandbox tingkat hypervisor (microVM) | Isolasi cloud penuh | | **Mesin harus tetap menyala** | Ya | Ya | Tidak | | **Akses mobile** | Browser apa pun di jaringan Anda | Browser apa pun di jaringan Anda | Perangkat apa pun | | **Aplikasi pendamping desktop** | Opsional. Pilih Local CloudCLI | Opsional. Pilih Local CloudCLI | Opsional. Membuka lingkungan cloud | | **Agent yang didukung** | Claude Code, Cursor CLI, Codex | Claude Code, Codex | Claude Code, Cursor CLI, Codex | | **File explorer dan Git** | Ya | Ya | Ya | | **Konfigurasi MCP** | Disinkronkan dengan `~/.claude` | Dikelola melalui UI | Dikelola melalui UI | | **REST API** | Ya | Ya | Ya | | **Berbagi dengan tim** | Tidak | Tidak | Ya | | **Biaya platform** | Gratis, open source | Gratis, open source | Mulai €7/bulan | > Semua opsi menggunakan langganan AI Anda sendiri (Claude, Cursor, dll.) — CloudCLI menyediakan lingkungan, bukan AI. --- ## Konfigurasi Keamanan & Tools **🔒 Pemberitahuan Penting**: Tools Claude Code tersedia secara default. Pengaturan tools dan mode izin menentukan tools yang dapat digunakan serta apakah suatu operasi memerlukan persetujuan atau dibatasi. ### Mengatur Tools dan Izin Gunakan Pengaturan Tools untuk membatasi tools yang dapat digunakan. Permintaan API non-interaktif menggunakan `bypassPermissions`, sehingga tools yang tersedia dapat berjalan tanpa persetujuan interaktif: 1. **Buka Pengaturan Tools** - Klik ikon roda gigi di sidebar 2. **Batasi Secara Selektif** - Izinkan hanya tools yang Anda perlukan 3. **Terapkan Pengaturan** - Preferensi Anda disimpan secara lokal
![Modal Pengaturan Tools](../public/screenshots/tools-modal.png) *Antarmuka Pengaturan Tools - aktifkan hanya yang Anda perlukan*
**Pendekatan yang direkomendasikan**: Batasi tools sesuai kebutuhan dan gunakan mode izin yang sesuai dengan tingkat akses yang Anda inginkan. Anda selalu dapat menyesuaikan pengaturan ini nanti. --- ## Plugin CloudCLI memiliki sistem plugin yang memungkinkan Anda menambahkan tab kustom dengan UI frontend sendiri dan backend Node.js opsional. Instal plugin langsung dari repository Git melalui **Settings > Plugins**, atau buat plugin Anda sendiri. ### Plugin yang Tersedia | Plugin | Deskripsi | |---|---| | **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Menampilkan jumlah file, baris kode, rincian jenis file, file terbesar, dan file yang baru diubah untuk project saat ini | | **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | Terminal xterm.js lengkap dengan dukungan multi-tab | | **[CloudCLI Scheduler](https://github.com/grostim/cloudcli-cron)** | Membuat prompt terjadwal dalam lingkup workspace dan menjalankannya melalui CLI lokal seperti Codex atau Claude Code | | **[PRISM CloudCLI](https://github.com/jakeefr/cloudcli-plugin-prism)** | Menyediakan informasi session untuk Claude Code di dalam CloudCLI, termasuk visibilitas penggunaan token | | **[Sessions](https://github.com/strykereye2/cloudcli-plugin-session-manager)** | Melihat, mengelola, dan menghentikan session Claude Code yang aktif | | **[Token Cost Calculator](https://github.com/NightmareAway/cloudcli-plugin-token-cost-calculator)** | Menghitung biaya API dari harga model dan penggunaan token, dengan dukungan preset harga model | | **[Task Queue](https://github.com/TadMSTR/cloudcli-plugin-task-queue)** | Dashboard antrean tugas untuk melihat, memfilter, dan menjalankan tugas agent | | **[GitHub Issues Board](https://github.com/szmidtpiotr/claude-github-issue)** | Papan Kanban untuk GitHub Issues dengan sinkronisasi TaskMaster dua arah dan instalasi otomatis skill CLI /github-task | | **[ccx](https://github.com/AaronWong1999/cloudcli-plugin-ccx)** | Menampilkan penggunaan Claude dan Codex serta menyerahkan session yang sedang terbuka ke agent lainnya beserta riwayat percakapannya (macOS, memerlukan ccx) | ### Buat Plugin Anda Sendiri **[Template Plugin Starter →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — fork repository ini untuk membuat plugin Anda sendiri. Template ini menyertakan contoh yang berfungsi dengan rendering frontend, pembaruan konteks secara langsung, dan komunikasi RPC ke server backend. **[Dokumentasi Plugin →](https://cloudcli.ai/docs/plugin-overview)** — panduan lengkap untuk API plugin, format manifest, model keamanan, dan lainnya. --- ## FAQ
Apa bedanya dengan Claude Code Remote Control? Claude Code Remote Control memungkinkan Anda mengirim pesan ke session yang sudah berjalan di terminal lokal. Mesin Anda harus tetap menyala, terminal harus tetap terbuka, dan session akan timeout setelah sekitar 10 menit tanpa koneksi jaringan. CloudCLI UI dan CloudCLI Cloud memperluas Claude Code, bukan berjalan sebagai sistem terpisah di sampingnya — MCP server, izin, pengaturan, dan session Anda sama persis dengan yang digunakan Claude Code secara native. Tidak ada yang diduplikasi atau dikelola secara terpisah. Dalam praktiknya, ini berarti: - **Semua session Anda, bukan hanya satu** — CloudCLI UI secara otomatis menemukan setiap session dari folder `~/.claude`. Remote Control hanya mengekspos satu session aktif agar tersedia di aplikasi mobile Claude. - **Pengaturan Anda tetap menjadi sumber utama** — MCP server, izin tool, dan konfigurasi project yang Anda ubah di CloudCLI UI ditulis langsung ke konfigurasi Claude Code dan langsung berlaku, begitu pula sebaliknya. - **Mendukung lebih banyak agent** — Claude Code, Cursor CLI, dan Codex, bukan hanya Claude Code. - **UI lengkap, bukan sekadar jendela chat** — file explorer, integrasi Git, manajemen MCP, dan terminal shell semuanya sudah tersedia. - **CloudCLI Cloud berjalan di cloud** — tutup laptop Anda dan agent tetap berjalan. Tidak ada terminal yang harus terus dipantau, dan tidak ada mesin yang harus terus menyala.
Apakah saya perlu membayar langganan AI secara terpisah? Ya. CloudCLI menyediakan lingkungan, bukan AI. Anda menggunakan langganan Claude, Cursor, atau Codex milik Anda sendiri. CloudCLI Cloud mulai dari €7/bulan untuk lingkungan terkelola tersebut, di luar biaya langganan AI.
Bisakah saya menggunakan CloudCLI UI di ponsel? Ya. Untuk self-hosted, jalankan server di mesin Anda lalu buka `[yourip]:port` di browser apa pun pada jaringan Anda. Untuk CloudCLI Cloud, buka dari perangkat apa pun — tanpa VPN, tanpa port forwarding, tanpa setup. Aplikasi native juga sedang dikembangkan.
Apakah perubahan yang saya buat di UI akan memengaruhi setup Claude Code lokal saya? Ya, untuk self-hosted. CloudCLI UI membaca dan menulis konfigurasi `~/.claude` yang sama dengan yang digunakan Claude Code secara native. MCP server yang Anda tambahkan melalui UI akan langsung muncul di Claude Code, begitu pula sebaliknya.
--- ## Komunitas & Dukungan - **[Dokumentasi](https://cloudcli.ai/docs)** — instalasi, konfigurasi, fitur, dan pemecahan masalah - **[Discord](https://discord.gg/buxwujPNRE)** — dapatkan bantuan dan terhubung dengan pengguna lain - **[GitHub Issues](https://github.com/siteboon/claudecodeui/issues)** — laporan bug dan permintaan fitur - **[Panduan Kontribusi](../CONTRIBUTING.md)** — cara berkontribusi pada project ## Lisensi GNU Affero General Public License v3.0 atau yang lebih baru (AGPL-3.0-or-later) — lihat [LICENSE](../LICENSE) untuk teks lengkap, termasuk ketentuan tambahan pada Bagian 7. Project ini bersifat open source dan bebas digunakan, dimodifikasi, serta didistribusikan berdasarkan lisensi AGPL-3.0-or-later. Jika Anda memodifikasi software ini dan menjalankannya sebagai layanan jaringan, Anda harus menyediakan kode sumber hasil modifikasi kepada pengguna layanan tersebut. CloudCLI UI - (https://cloudcli.ai). ## Ucapan Terima Kasih ### Dibangun Dengan - **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - CLI resmi Anthropic - **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - CLI resmi Cursor - **[Codex](https://developers.openai.com/codex)** - OpenAI Codex - **[React](https://react.dev/)** - Library antarmuka pengguna - **[Vite](https://vitejs.dev/)** - Build tool cepat dan server pengembangan - **[Tailwind CSS](https://tailwindcss.com/)** - Framework CSS utility-first - **[CodeMirror](https://codemirror.net/)** - Editor kode tingkat lanjut - **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Opsional)* - Manajemen project dan perencanaan tugas berbasis AI ### Sponsor - [Siteboon - pembuat website berbasis AI](https://siteboon.ai) ---
Dibuat dengan sepenuh hati untuk komunitas Claude Code, Cursor, dan Codex.