Claude Code + CMUX:最強のAIコーディング用ターミナル

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00これはCmuxです。コーディングエージェント用に構築されたターミナルで、エージェントがブラウザを
00:00:04開いて制御したり、別のペインにサブエージェントを作成したり、カスタム通知を送信したり、
00:00:09CLIやソケットAPIを通じて、さらに多くのことを実行できる能力を彼らに与えます。
00:00:13しかし、Warp、Solotam、Dmuxなど、他にも多くのターミナルエージェントがある中で、
00:00:19何がCmuxをそんなに特別にしているのでしょうか?
00:00:20チャンネル登録をして、さっそく中身を見ていきましょう。
00:00:24その名前に反して、Cmuxはtmuxとは何の関係もありません。libghostyの上に構築された
00:00:30ネイティブMacアプリで、Webkitブラウザと、タブやペインなどのレイアウト用に
00:00:36bon-splitを使用しています。
00:00:37しかし、本当の魔法はエージェントがアプリと通信する方法にあります。
00:00:41お見せしましょう。
00:00:42Cmuxをインストールして設定すると、タブをサポートする普通のターミナルのような画面が表示されます。
00:00:46垂直または水平の分割も可能ですし、必要であれば
00:00:53その分割されたペインの中にさらにタブを作ることもできます。
00:00:55Cmuxをインストールすると、Cmux CLIも利用可能になります。これを使えば、
00:01:00新しいワークスペースや分割ペインの作成、サイドバーへのログや進捗情報の表示、
00:01:06さらにはtmux互換コマンドの使用など、多くのオプションが提供されます。
00:01:11これらはすべて、後ほど説明するCmux Unixソケットのおかげです。
00:01:15では、何か面白いことをやってみましょう。
00:01:16まず、ここをクリアして「claude code」を起動します。するとサイドバーのタイトルが
00:01:20変わったのがわかります。トークンを無駄にしないよう、
00:01:25モデルをHaikuに変更しておきます。
00:01:26そして、ClaudeにCmux CLIを使って、新しい分割ペインでブラウザを開き、
00:01:30google.comに移動して、入力欄に「hello world」と入力して検索するように頼みます。
00:01:36エンターキーを押すと、Claudeが処理を開始します。
00:01:38ここで彼はCmuxの使い方を学習しています。
00:01:40Googleの新しいタブが開きました。
00:01:42検索を実行するか見てみましょう。
00:01:44おっと、少し苦戦しているようですね。
00:01:45「hello world」の検索が実行されました。
00:01:47完璧に検索できましたね。
00:01:49リンクをクリックするように頼むこともできます。
00:01:51例えば、ここにあるIMDbのリンクをクリックしたい場合、「IMDbの
00:01:55hello worldのリンクをクリックして」と言えば、
00:01:57Claudeがそれを実行してくれます。
00:01:59非常にクールなのは、この分割ペインのブラウザ内でもデベロッパーツールにアクセスできることで、
00:02:04作業中のページのデバッグに役立ちます。
00:02:07これらはすべて、SellsエージェントブラウザのAPI設計に似た
00:02:11ブラウザコマンドによって行われます。
00:02:12この「ブラウザとターミナルの並列表示」の利点は、エージェントがブラウザを操作し、
00:02:16テストを行い、その結果を返してくれるのを、
00:02:20開発者がリアルタイムで確認できることです。
00:02:21別のことも試してみましょう。
00:02:22このタブを閉じて、情報をすべてクリアします。
00:02:25Claudeに、分割ペインで自分自身のインスタンスを2つ作成するよう頼みます。一つは
00:02:30プロジェクトを理解するため、もう一つはこのプロジェクトのコードを分析するためです。
00:02:33そして完了したら、メインのClaudeインスタンスに情報を返し、
00:02:38ペインを閉じるように指示します。
00:02:39エンターを押すと、2つの分割ペインが作成され、両方でClaudeが起動します。
00:02:45今、彼らに指示を出しているのが見えますが、これをリアルタイムで見るのは凄まじいですね。
00:02:50選択されていないペインは少し暗くなっていますが、クリックすれば
00:02:53明るくなります。
00:02:54時間がかかるので、動画のこの部分は早送りします。
00:02:57両方の分割ペインの作業が終わり、Claudeが自動的にそれらを閉じました。そして
00:03:02最初のインスタンスと2番目のインスタンスから情報を取得しています。これは非常に素晴らしいです。
00:03:07複数のサブエージェントが行き詰まっていないか進捗を確認するなど、
00:03:11多くの活用法が想像できます。
00:03:12しかし、今のデモの問題点は、サブエージェントが通知を出したり、
00:03:16助けを必要としたりしたときに、それを簡単に知る方法がなかったことです。
00:03:21幸いなことに、Cmuxではそれが簡単に解決できます。
00:03:23別の例を試してみましょう。
00:03:24新しいClaude Codeのセッションで、Cmuxを使って分割ペインにClaudeの新しいインスタンスを
00:03:28作成し、そのペインでプロジェクトを調査して
00:03:33コードの改善案を提示するようにプロンプトを入力します。
00:03:36完了したら、Cmuxを使って適切な通知を書き、「trigger-flash」を実行して
00:03:40私の注意を引くように指示します。
00:03:41このコマンドは、指定されたペインの境界線を青く点滅させます。
00:03:45それが進行している間に、新しいワークスペースを作成し、そこで
00:03:48「open-code」を実行してみます。
00:03:49Cmuxの良さはCLIであるため、どんなエージェント・ハーネスとも併用できる点です。
00:03:54「open-code」を開き終えたちょうどその時、Cmuxから通知が届きました。
00:03:58ベルのアイコンをクリックすると、並列分析が開始されたことがわかります。まだ完了はしていません。
00:04:03しかし通知をクリックすると、情報を持っている適切なペインを表示してくれます。
00:04:07指示通りに動かなかったようなので、もう一度やり直すよう伝えます。
00:04:10それが進んでいる間に、「open-code」に戻って、元々やろうとしていた
00:04:13「Cmux CLIを使ってプロジェクトのブランチ名を追加し、
00:04:19そのブランチ名の横に適切なアイコンを表示させる」という操作をしてみます。
00:04:21エンターを押して実行させると、Cmuxから通知が届きました。
00:04:25並列分析が開始されました。今回は
00:04:29正しく開始されたようですね。
00:04:30サイドバーの中にメッセージが表示されているのも確認できます。
00:04:32完了しました。
00:04:33分割ペインを閉じ、サイドバーのテキストを消去するように頼みます。
00:04:36ご覧の通り、適切なアイコン付きでブランチ名が追加されました。先ほど私は
00:04:40「SFアイコン」と言いましたが、実際には「SFシンボル」のことでした。正しく理解してくれたようで良かったです。
00:04:45分割ペインが閉じられ、サイドバー内のテキストも削除されました。
00:04:49これらは非常に単純な例でしたが、エージェントがターミナルを制御することで可能になる
00:04:52強力な機能の片鱗を感じていただけたかと思います。
00:04:57他にも、プログレスバーの使用や、ワークスペースへのカスタムカラーの追加、
00:05:00エージェントによるタブのリネーム、コマンドパレットでの全オプションの表示、
00:05:05そしてCmuxがGhostyの設定を読み取って適用できることなど、
00:05:10素晴らしい機能を紹介しきれていません。
00:05:11今回はフックやスキルを使わず、Claude Codeのサンドボックスを無効にして使用しました。
00:05:16そうしないとエラーが出てしまうからです。ですが、作成者が公開しているCmux用の
00:05:20コアスキルとブラウザスキルを導入し、Claude Codeのフックを設定して
00:05:26通知を自動送信したり、カスタムスクリプトを書いたりすることを強くお勧めします。
00:05:29これらによってCmuxはさらに便利になりますが、スキルや通知を
00:05:33手動でコピー&ペーストするのではなく、もっと簡単にゼロから
00:05:38セットアップできる方法があればいいなと思います。
00:05:39「skills.sh」のように、使用しているエージェント・ハーネスを自動検出し、
00:05:43適切なディレクトリにスキルを適用してくれるような仕組みが
00:05:48Cmuxのセットアップにもあれば最高です。
00:05:49とはいえ、Cmuxはすでに素晴らしいツールですし、セットアップスクリプトは後で追加されるでしょう。
00:05:53メモリやパフォーマンスに優れたネイティブMacアプリである点や、
00:05:58CLIがUnixソケットを通じてJSONで通信する点が、
00:06:02通信を高速かつシンプルにしていて非常に気に入っています。
00:06:04「高速かつシンプル」といえば、SQLiteよりも138倍速い
00:06:10Rust製の「StoolLab」というデータベースをご存知ですか?
00:06:17Andrisによるこちらの動画で詳しく学ぶことができます。

Key Takeaway

Cmuxは、CLIやソケットAPIを通じてAIエージェントにターミナルやブラウザの制御権を与えることで、開発作業を劇的に効率化する次世代のコーディング環境です。

Highlights

Cmuxはlibghosty上に構築された、AIコーディングエージェント向けの高機能なネイティブMac用ターミナルである

Cmux CLIとUnixソケットを介して、エージェントがブラウザの制御、ペインの作成、通知送信などを自律的に実行できる

Claude Codeとの連携により、サブエージェントを複数立ち上げて並列でコード分析やタスク処理を行うことが可能

ターミナル内にWebkitブラウザを表示でき、エージェントが検索やデバッグを行う様子をリアルタイムで監視できる

通知機能や境界線の点滅(trigger-flash)により、エージェントが助けを必要とした際に開発者の注意を引く仕組みを備えている

Rust製の高性能な設計により、高速かつシンプルな通信と優れたメモリパフォーマンスを実現している

Timeline

Cmuxの概要と基本アーキテクチャ

動画の冒頭では、コーディングエージェント用に特別に設計されたターミナル「Cmux」の基本コンセプトが紹介されます。Cmuxはlibghostyの上に構築されたネイティブのMacアプリであり、ブラウザの制御やサブエージェントの作成といった独自の能力をAIに提供します。既存のWarpやtmuxとは異なり、Webkitブラウザの統合やbon-splitによる柔軟なレイアウト管理が特徴です。エージェントがアプリと直接通信する仕組みこそが、このツールの「魔法」であると説明されています。開発者がエージェントの動きを完全にコントロールしつつ、高度な自動化を実現するための基盤がここにあります。

インターフェースとCmux CLIの機能

ここでは実際の操作画面を用いて、タブや垂直・水平分割ペインなどのユーザーインターフェースが解説されます。特筆すべきはCmux CLIの存在で、これを利用することでワークスペースの作成やサイドバーへのログ表示、tmux互換コマンドの実行が可能になります。これらの操作はすべてUnixソケットを介して行われ、AIエージェントがシステムを操作するための強力な手段となります。開発者は通常のターミナルとして使いながら、必要に応じてエージェントに複雑な画面操作を指示できる柔軟性を持っています。このセクションは、Cmuxが単なる見た目の良いターミナルではなく、プログラム可能な作業環境であることを示しています。

Claude Codeによるブラウザ操作の実演

Claude Code(AIエージェント)を起動し、実際にブラウザを操作させるデモンストレーションが行われます。Claudeに対して「新しいペインでブラウザを開き、Googleで検索して特定のリンクをクリックする」という指示を出し、AIが自律的にタスクを遂行する様子が描かれます。エージェントが操作に苦戦する場面もありつつ、最終的には正確に目的のサイトへ遷移し、デベロッパーツールまで活用してデバッグの準備を整えます。このようにブラウザとターミナルを並列表示することで、開発者はエージェントの作業プロセスをリアルタイムで監視し、即座にフィードバックを与えることができます。API設計が既存のエージェントブラウザに似ているため、習得も容易であるという利点が強調されています。

マルチエージェントによる並列分析と自動化

複数のClaudeインスタンスを同時に立ち上げ、一方はプロジェクトの理解、もう一方はコード分析を担当させるという高度なワークフローが紹介されます。メインのエージェントがサブエージェントに指示を出し、作業が完了すると自動的にペインを閉じて情報を集約するというシームレスな連携が確認できます。画面上では選択されていないペインが暗くなるなど、視覚的にも現在のフォーカスが分かりやすい工夫が施されています。この機能により、人間が手動で行っていた情報の整理や重複確認といった作業をAIに完全に任せることが可能になります。大量のコードベースを扱う際に、複数の「目」を持って作業を進められる点は非常に強力なメリットです。

通知システムと注意喚起の仕組み

エージェントが作業を終えたり助けを求めたりする際の「通知機能」に焦点を当てたセクションです。「trigger-flash」コマンドを使用することで、特定のペインの境界線を青く点滅させ、開発者の注意を引く方法が実演されます。動画内では、別のワークスペースで作業中であっても通知が届き、クリック一つで該当する情報を持つペインへジャンプできる利便性が示されています。実際にブランチ名にSFシンボルのアイコンを追加するタスクを依頼し、通知を通じて完了を確認する一連の流れがスムーズに行われます。エージェントとの非同期な共同作業において、この通知システムは作業の断絶を防ぐための重要な鍵となります。最終的に、指示通りのアイコンが正しく追加されたことでツールの実用性が証明されています。

追加機能の紹介とセットアップのアドバイス

最後に、紹介しきれなかったプログレスバー、タブのリネーム、Ghosty設定の継承などの多様な機能がリストアップされます。使用上の注意として、エラー回避のためにClaude Codeのサンドボックスを無効にする設定や、公式のコアスキル・ブラウザスキルの導入が推奨されています。現時点ではセットアップの一部に手動作業が必要ですが、将来的に自動検出スクリプトが登場することへの期待も語られています。CmuxはSQLiteよりも圧倒的に高速なデータベース技術などとも比較されるほど、パフォーマンスにこだわった設計がなされています。全体を通して、AI時代の開発者にとって必携のツールになる可能性を秘めていると結論付けられています。

Community Posts

View all posts