Claude Code + CMUX: Terminal Coding AI Terbaik

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00Ini adalah Cmux, terminal yang dirancang untuk agen pengodean yang memberi mereka kemampuan untuk membuka
00:00:04dan mengontrol browser, membuat sub-agen di panel yang berbeda, mengirimkan notifikasi kustom kepada Anda,
00:00:09dan banyak lagi melalui CLI dan API soket.
00:00:13Namun dengan banyaknya agen terminal lain seperti Warp, Solotam, dan Dmux, apa yang membuat Cmux begitu
00:00:19istimewa?
00:00:20Klik subscribe dan mari kita bahas.
00:00:24Terlepas dari namanya, Cmux tidak ada hubungannya dengan tmux. Ini adalah aplikasi Mac asli yang dibangun di atas
00:00:30libghosty yang menggunakan browser webkit dan bond-split untuk tata letaknya, seperti tab, panel, dan
00:00:36sebagainya.
00:00:37Namun keajaiban sebenarnya terletak pada cara agen tersebut berkomunikasi dengan aplikasinya.
00:00:41Mari saya tunjukkan.
00:00:42Jadi setelah menginstal dan mengatur Cmux, kita akan melihat terminal yang tampak biasa yang
00:00:46mendukung tab. Kita bisa membagi layar, baik secara vertikal maupun horizontal, dan kita bisa memiliki tab di dalam
00:00:53pembagian panel tersebut jika diinginkan.
00:00:55Sekarang dengan Cmux terinstal, kita juga memiliki akses ke Cmux CLI, yang memberi kita opsi
00:01:00untuk berbagai hal seperti membuat ruang kerja baru dan panel pemisah baru, menampilkan informasi seperti
00:01:06log dan progres di sidebar, dan bahkan menggunakan perintah yang kompatibel dengan tmux.
00:01:11Semua ini berkat soket Unix Cmux, yang akan kita bahas nanti.
00:01:15Tapi mari kita lakukan sesuatu yang menarik.
00:01:16Pertama, saya akan membersihkan ini, saya akan membuka Claude Code, yang bisa kita lihat sekarang telah
00:01:20mengubah judul sidebar. Kita akan ubah modelnya menjadi Haiku, agar saya tidak membuang-buang
00:01:25token apa pun.
00:01:26Lalu saya akan meminta Claude menggunakan Cmux CLI untuk membuka browser di panel pemisah baru,
00:01:30lalu menavigasi ke google.com, mengetik “hello world” ke dalam input dan melakukan pencarian Google.
00:01:36Jadi jika saya tekan enter, Claude akan menjalankan tugasnya.
00:01:38Dan di sini ia sedang mempelajari cara menggunakan Cmux.
00:01:40Ia telah membuka tab baru ke Google.
00:01:42Dan mari kita lihat apakah ia melakukan pencarian.
00:01:44Oke, ia mulai berusaha.
00:01:45Dan ia telah melakukan pencarian untuk “hello world”.
00:01:47Dan ia melakukannya dengan sempurna.
00:01:49Dan saya bahkan bisa memintanya untuk mengeklik tautan.
00:01:51Katakanlah saya ingin mengeklik tautan IMDb ini di sini, saya bisa katakan: klik tautan
00:01:55“hello world” dari IMDb.
00:01:57Dan Claude akan segera melakukannya.
00:01:59Yang sangat keren adalah bahkan di dalam browser panel terpisah ini, saya memiliki akses ke alat pengembang,
00:02:04yang akan membantu men-debug halaman yang sedang saya kerjakan.
00:02:07Semua ini dilakukan dengan perintah browser yang mirip dengan desain API browser agen Cells.
00:02:11browser.
00:02:12Jadi keuntungan memiliki tampilan terminal browser berdampingan ini adalah agen dapat
00:02:16menavigasi melalui browser, melakukan pengujian, dan mengirimkan kembali hasilnya, yang dapat Anda lihat sebagai
00:02:20pengembang secara real-time.
00:02:21Mari kita coba hal lain.
00:02:22Saya akan menutup tab ini dan membersihkan semua informasi ini.
00:02:25Saya akan meminta Claude membuat dua instans dirinya sendiri di panel terpisah, satu untuk memahami
00:02:30proyek ini, dan satu lagi untuk menganalisis kode dari proyek ini.
00:02:33Dan setelah selesai, mereka harus memberikan informasinya kembali ke instans utama Claude,
00:02:38lalu menutup panel tersebut.
00:02:39Jadi jika kita tekan enter, ia membuat dua panel terpisah, lalu membuka Claude di keduanya.
00:02:45Dan sekarang kita bisa melihat ia memberikan instruksi kepada mereka, sungguh luar biasa melihatnya secara real-time.
00:02:50Sekarang panel yang tidak dipilih agak gelap, jadi kita bisa mengekliknya untuk membuatnya
00:02:53lebih terang.
00:02:54Saya akan mempercepat bagian video ini karena akan memakan waktu lama.
00:02:57Dan sekarang setelah kedua panel selesai, Claude telah menutupnya secara otomatis dan mendapatkan informasi
00:03:02dari instans pertama di sini dan instans kedua di bawah sini, yang sangat keren.
00:03:07Dan Anda bisa membayangkan begitu banyak kegunaan untuk ini, seperti memeriksa izin pada sub-agen yang berbeda
00:03:11untuk memastikan mereka tidak macet.
00:03:12Tapi satu masalah dengan demo yang baru saja saya lalui adalah setiap kali salah satu dari mereka memiliki
00:03:16notifikasi atau butuh bantuan saya, tidak ada cara mudah bagi saya untuk mengetahuinya.
00:03:21Tapi untungnya Cmux memudahkan hal itu.
00:03:23Mari kita coba hal lain.
00:03:24Dalam sesi Claude Code baru, saya akan memberikan perintah untuk membuat instans baru
00:03:28Claude di panel terpisah menggunakan Cmux dan kemudian di panel itu, memintanya untuk mempelajari dan menyarankan
00:03:33peningkatan kode untuk proyek ini.
00:03:36Setelah selesai, buat notifikasi yang sesuai menggunakan Cmux dan jalankan “trigger flash” untuk menarik
00:03:40perhatian saya.
00:03:41Perintah tersebut mengaktifkan bingkai berkedip biru pada panel yang ditentukan.
00:03:45Jadi selagi itu berjalan, saya akan membuat ruang kerja baru dan di sini saya akan menjalankan
00:03:48Open Code.
00:03:49Keindahan Cmux adalah karena ia berupa CLI, ia bisa berjalan dengan rangkaian agen apa pun.
00:03:54Dan tepat saat saya selesai membuka Open Code, kita bisa melihat ada notifikasi dari Cmux.
00:03:58Jika saya klik ikon lonceng, kita bisa melihat analisis paralel telah dimulai, jadi belum benar-benar selesai.
00:04:03Tapi jika saya klik notifikasinya, ia menunjukkan panel yang tepat yang berisi informasi tersebut.
00:04:07Sekarang ia tidak melakukan persis seperti yang saya minta, jadi saya akan menyuruhnya melakukannya lagi.
00:04:10Dan selagi itu berjalan, mari kita kembali ke Open Code dan melakukan apa yang akan saya lakukan
00:04:13sebelumnya, yaitu menggunakan Cmux CLI untuk menambahkan nama branch proyek dan menggunakan
00:04:19ikon yang sesuai di sebelah nama branch tersebut.
00:04:21Sekarang saya tekan enter dan biarkan ia bekerja, dan kita bisa melihat ada notifikasi
00:04:25dari Cmux, yaitu analisis paralel telah dimulai dan sepertinya kali ini dimulai dengan benar.
00:04:29benar kali ini.
00:04:30Kita bahkan bisa melihat pesannya di dalam sidebar.
00:04:32Jadi sekarang sudah selesai.
00:04:33Saya akan memintanya untuk menutup panel terpisah dan menghapus teks sidebar.
00:04:36Dan kita bisa melihat di sini ia menambahkan nama branch dengan ikon yang sesuai dan tadi
00:04:40saya bilang SF icons, tapi maksud saya sebenarnya SF symbol, jadi saya senang ia memahaminya.
00:04:45Dan kita bisa melihat di sini ia telah menutup panel terpisah dan menghapus teks yang ada di dalam sidebar.
00:04:49Semua contoh ini sangat sederhana, tapi saya harap ini memberi Anda gambaran tentang
00:04:52hal-hal hebat yang bisa dilakukan terminal Cmux saat agen memiliki kendali atasnya.
00:04:57Dan saya bahkan belum membahas beberapa fitur luar biasa seperti kemampuan menggunakan bilah
00:05:00progres, menambahkan warna kustom ke ruang kerja, menggunakan agen untuk mengganti nama tab, menampilkan semua
00:05:05opsi di palet perintah, dan fakta bahwa Cmux dapat membaca dan menerapkan konfigurasi
00:05:10Ghosty Anda.
00:05:11Sekarang saya menggunakan Cmux tanpa hook atau skill apa pun dan saya menonaktifkan sandbox di Claude Code karena
00:05:16saya akan mendapatkan error ini, tapi saya sangat menyarankan Anda untuk mendapatkan skill core dan browser
00:05:20untuk Cmux yang dibuat oleh penciptanya dan juga mengaturnya dengan Claude Code hooks untuk mengirimkan
00:05:26notifikasi secara otomatis atau bahkan menulis skrip kustom.
00:05:29Semua ini membuat Cmux jauh lebih berguna, tapi saya berharap ada cara yang lebih mudah untuk mengaturnya
00:05:33dari awal daripada harus menyalin dan menempelkan skill dan notifikasi secara manual
00:05:38ke tempatnya.
00:05:39Sama seperti skills.sh yang mendeteksi secara otomatis rangkaian agen apa yang Anda miliki dan menerapkan
00:05:43skill ke direktori yang tepat, saya berharap Cmux melakukan hal yang sama untuk membantu proses
00:05:48pengaturan keseluruhannya.
00:05:49Tapi Cmux sudah merupakan alat yang hebat dan saya yakin skrip pengaturan dapat ditambahkan nanti.
00:05:53Saya sangat suka fakta bahwa ini adalah aplikasi Mac asli yang bagus untuk memori dan performa,
00:05:58dan fakta bahwa CLI berkomunikasi dengan aplikasi via JSON melalui soket Unix, yang
00:06:02membantu membuat komunikasi menjadi cepat dan sederhana.
00:06:04Berbicara tentang cepat dan sederhana, tahukah Anda ada database di luar sana yang 138 kali lebih cepat daripada
00:06:10SQLite yang ditulis dalam Rust bernama StoolLab, yang bisa Anda pelajari selengkapnya di video dari
00:06:17Andris ini.

Key Takeaway

Cmux merevolusi alur kerja pengodean dengan menyediakan terminal yang memungkinkan agen AI mengontrol browser, mengelola sub-agen di banyak panel, dan memberikan umpan balik real-time kepada pengembang.

Highlights

Cmux adalah terminal Mac asli yang dirancang khusus untuk agen AI dengan dukungan browser bawaan dan kontrol panel tingkat lanjut.

Fitur utama meliputi kemampuan agen untuk membuka browser WebKit, menavigasi situs web, dan melakukan tugas otomatis melalui CLI.

Mendukung komunikasi canggih antar agen AI (seperti Claude Code) untuk bekerja secara paralel di panel yang berbeda.

Memiliki sistem notifikasi visual seperti "trigger flash" dan indikator sidebar untuk memberi tahu pengguna tentang progres tugas agen.

Dibangun di atas libghosty dan menggunakan soket Unix untuk komunikasi JSON yang cepat dan efisien antara CLI dan aplikasi.

Kompatibel dengan perintah tmux dan memungkinkan kustomisasi penuh melalui profil konfigurasi Ghosty.

Timeline

Pengenalan Cmux dan Arsitektur Dasar

Video dimulai dengan memperkenalkan Cmux sebagai terminal revolusioner yang dirancang untuk memaksimalkan potensi agen pengodean AI. Berbeda dengan terminal tradisional, Cmux memungkinkan agen untuk membuka browser, membuat sub-agen, dan mengirimkan notifikasi kustom melalui CLI. Meskipun namanya mirip, pembicara menegaskan bahwa Cmux tidak memiliki hubungan teknis dengan tmux. Aplikasi ini merupakan aplikasi Mac asli yang dibangun menggunakan libghosty, WebKit untuk browser, dan bun-split untuk manajemen tata letak. Arsitektur ini sangat krusial karena menentukan bagaimana agen AI dapat berkomunikasi secara efisien dengan antarmuka terminal.

Eksplorasi Fitur CLI dan Integrasi Browser

Bagian ini mendemonstrasikan antarmuka Cmux yang mendukung pembagian layar secara vertikal dan horizontal serta sistem tab yang fleksibel. Pengguna memiliki akses ke Cmux CLI untuk mengelola ruang kerja, melihat log di sidebar, dan menjalankan perintah yang kompatibel dengan tmux. Demonstrasi menarik dilakukan dengan meminta Claude Code membuka browser di panel terpisah untuk melakukan pencarian Google secara otomatis. Fitur ini sangat berguna bagi pengembang karena mereka dapat melihat agen melakukan pengujian web atau debugging secara real-time di samping panel kode. Integrasi alat pengembang (developer tools) di dalam panel browser terminal menambah nilai fungsionalitas untuk proses debugging yang lebih mendalam.

Kolaborasi Multi-Agen dan Analisis Paralel

Pembicara menunjukkan kemampuan tingkat lanjut di mana satu instans Claude dapat membuat dua sub-agen di panel terpisah untuk tugas yang berbeda. Satu agen ditugaskan untuk memahami struktur proyek, sementara agen lainnya menganalisis kode secara mendalam sebelum memberikan laporan kembali ke instans utama. Setelah tugas selesai, panel-panel tersebut ditutup secara otomatis, menunjukkan efisiensi dalam manajemen sumber daya. Fitur ini memungkinkan pemrosesan informasi yang jauh lebih cepat melalui kerja paralel antar agen AI. Hal ini memberikan gambaran tentang masa depan pengembangan perangkat lunak di mana manusia berperan sebagai pengawas dari orkestrasi banyak agen AI.

Sistem Notifikasi dan Manajemen Sesi

Sesi ini berfokus pada fitur notifikasi Cmux yang membantu pengguna memantau progres agen tanpa harus terus-menerus melihat layar. Fitur "trigger flash" memberikan peringatan visual berupa bingkai biru berkedip pada panel tertentu saat agen membutuhkan perhatian atau telah menyelesaikan tugas. Pembicara juga menunjukkan bagaimana CLI dapat digunakan untuk memodifikasi elemen UI seperti menambahkan nama branch Git dan ikon simbol ke sidebar. Fleksibilitas ini memungkinkan terminal beradaptasi dengan kebutuhan spesifik proyek secara dinamis. Selain itu, Cmux dapat membaca konfigurasi Ghosty milik pengguna, memastikan transisi yang mulus bagi pengguna terminal yang sudah ada.

Saran Pengaturan, Performa, dan Penutup

Pada bagian akhir, pembicara memberikan tips tentang cara mengoptimalkan penggunaan Cmux dengan menonaktifkan sandbox pada Claude Code untuk menghindari error tertentu. Sangat disarankan untuk memasang skill core dan browser yang disediakan oleh pencipta Cmux guna mendapatkan fungsionalitas penuh. Meskipun proses pengaturan manual saat ini dianggap sedikit merepotkan, potensi pengembangan skrip pengaturan otomatis di masa depan sangat besar. Keunggulan utama Cmux terletak pada performa memorinya yang efisien karena merupakan aplikasi asli Mac dan menggunakan protokol JSON yang cepat melalui soket Unix. Video ditutup dengan referensi singkat ke database StoolLab yang memiliki performa tinggi sebagai perbandingan kecepatan teknologi.

Community Posts

View all posts