Herdrで初めるマルチエージェント

React Tokyo ミートアップ #19で使用した資料

Transcript

1. React Tokyo ミートアップ #19 herdrで始めるマルチエージェント
2. 自己紹介 名前 Maeta 所属 株式会社ココロザシ プロフィール Reactを使用した開発をやっています。 ReactTokyoのサポーター。
3. herdr とは [ ISOMETRIC ILLUSTRATION ] 手綱を握る 1人の人物と、 働く複 数のAIエージェント 複数のAIエージェントを使用した時の管理の複雑さを解決 するために開発されたツール。 アプリではなく、バックグラウンドとで動作するサーバー。
4. 現在地 31,030 508,825 725 GitHub スター 累計インストール コミュニティプラグイン Y Combinator 参加 · Apache 2.0 のオープンソース
5. 導入はコマンド 1 行 $ curl -fsSL https:-/herdr.dev/install.sh | sh 基本的にゼロコンフィグで使用可能。 UIを提供して セットアップ自体をエージェントに任せることもでき いるのでマウス操作も可能。 る。 # エージェントにオンボーディングを任せるプロンプト Help me understand and set up Herdr. Read https:-/herdr.dev/agent-guide.md first, then walk me through it step by step.
6. ふたを閉じると、作業が止まる 01 02 03 端末を閉じた瞬間にセッション どのエージェントが止まってい 別のマシンから作業に戻れな が切れる るか分からない い エージェントは待てるのに、ターミナルが待てない。
7. 主な特徴 1 基本の仕組み 2 設定とカスタマイズ 3 プラグインで拡張する 4 worktreeで並列化
8. 1 基本の仕組み 常時稼働 · 状態表示 · エージェント操作 · 既存 CLI
9. 1-1 常に動き続ける Rust製の単一バイナリでターミナルの中で完結する。 起動は herdr と打つだけ。 サーバーが動いている限り、セッションとプロセスは保持され、再 接続すればそれらを保持した状態に戻れる。 $ herdr • up
10. 1-2 エージェントの状態を探さない herdr が全てのペインを読み、各エージェントに状態ラベルを付ける。 working エージェント実行中 blocked ユーザーの返答を待っ ている done タスク完了 idle 手が空いている
11. 1-3 エージェントネイティブ 人間が叩く CLI とエージェントが叩く Unixドメインソケット API は共通なので herdrの操作をコマンドで実行かつ、 エージェントも herdrを操作可能。 公式のskillを導入することでペインを分割し、自然言語で片方 のペインを見てタスクを実行するといったことも可能。 例 : 片方のエージェントが実装、片方がレビューを行う [ ISOMETRIC ILLUSTRATION ] エージェント同士が タスクを受 け渡す様子
12. 1-4 いま使っている ターミナルをそのまま使える 使い慣れた CLIはそのままに、 herdr はそれを動かし続ける土台になる。 Claude Code Codex Cursor + 20 agents detected macOS · Linux · Windows beta opencode Grok Copilot
13. 1-5 tmux とどう違うのか 操作感は tmux 。狙っている相手が違う。 tmux herdr 想定する利用者 人間が手で分割する汎用マルチプレクサ エージェント前提で設計されたマルチプレクサ エージェントの状態 ペインを覗いて確かめる必要がある working / blocked / done / idle を自動判定 自動化 send-keys でキー入力を投げて祈る エージェント単位の API。完了まで待つ worktree 手作業で行う必要がある worktree を標準機能として搭載している
14. 1-6 続きから戻る デタッチと再アタッチ 再起動後のレイアウト復元 tmux と同じ操作感でペインは残る。 ワークスペース、タブ、ペイン、カレントディレクトリが戻る。 エージェントの会話も再開 リモート接続 herdrを終了するとセッションも終了するが、再起動時に 前のセッションを自動的に復元することが可能。 ただ し、エージェント側がセッションの復元に対応かつ、 herdr側で対象のインテグレーションをインストールする 必要がある。 SSH経由でリモートアタッチ可能。 SSH configに登録したホスト にも接続可能。 $ herdr --remote workbox
15. 2 設定とカスタマイズ ゼロコンフィグでも動作し、設定も 1ファイルで完結
16. 2-1 設定ファイルは 1 つだけ ~/.config/herdr/config.toml $ herdr --default-config > ~/.config/herdr/config.toml $ herdr server reload-config 必要なものだけ入れる 再起動なしで反映 壊れない 公式ドキュメントにどう設定すればどん メニューからコンフィグのリロードを実 不正な値は安全な既定値に戻り、起動 な影響があるかなどをまとめてあるの 行できるので herdrを閉じることなく反 時に警告が出る。 で必要な設定だけを追加する 映が可能。
17. 2-2 キーは tmux 流のまま デフォルトのプレフィックスは ctrl+b。プレフィック スとの組み合わせでシェルやエディタの入力を奪 [keys] prefix = "ctrl+b" switch_tab = わない。 プレフィックスやその他のキーも設定可 "prefix+1-.9" split_horizontal = 能なので自分にあったキーバインドを設定するこ とも可能。 マウス操作に対応している。ペインをクリック、ペイン同 士の境をドラッグ、右クリックメニューで分割などをマウ ス操作から可能。 "prefix+minus" [[keys.command]] key = "prefix+alt+g" type = "popup" command = "lazygit"
18. 2-2 見た目と通知を自分好みに合わせる テーマ [theme] name = "catppuccin" auto_switch = true サイドバー [ui.sidebar.spaces] rows = [ ["state_icon", "workspace" ], ["branch", "git_status" ], ] 通知 [ui.toast] delivery = "herdr" # herdr / terminal / system / off 端末のライト／ダークモードに追従。個別 終了時と入力待ちの状態を知らせる。 の色も上書きできる。 SSH 越しなら terminal 通知。 状態・ブランチ・モデル名など、出す情報 を設定可能。
19. 3 プラグインで拡張する コマンド 1 つで入れて、キーひとつで呼び出す
20. 3-1 プラグインを使う GitHub からインストール $ herdr plugin install owner/repo 公式のマーケットプレスページから対象のリポジトリに遷移し $ herdr plugin list て、READMEに記載されている手順を元にインストールを行 $ herdr plugin action list --plugin example.layout う。 $ herdr plugin action invoke example.layout.apply 呼び出し方は 2 通り [[keys.command]] key = "prefix+l" herdr plugin action invoke で直接実行する。またはキーバ type = "plugin_action" インドに割り当ててキーボードで実行。プレフィックスとの組み command = "example.layout.apply" 合わせも設定可能。
21. 3-2 公開はトピックを付けるだけ リポジトリに herdr-plugin.toml を置き、 GitHub のト ピックに「 herdr-plugin 」と付けるだけで公開可能。索 引は 30 分ごとに更新される。 MARKETPLACE herdr.dev/plugins に、トピックの付い た公開リポジトリが自動で並ぶ。 herdr はマニフェストを検証するだけで、中身のレビューやサン ドボックス化もせず審査もない。公式もインストールするのは自 己責任でと言っているのでプラグインを入れる前に自分で確認 を行うとより安全。
22. 3-3 Raycast から herdr を操る Raycast を使っているなら、個人が公開している拡張機 能を入れるだけ。ランチャーから起動、ペインへ移動でき る。 できること ワークスペースや worktree の作成 · エージェントの起動とプロンプト 送信 · 状態確認 · ステータスの監視など。 RAYCAST STORE
23. 4 worktreeで並列化 1 ブランチ = 1 ワークスペース
24. 4-1 2-1 Worktree標準搭載 worktree は Git 準拠のワークスペース。親リポジ トリの下に入れ子で並べる。 SPACES herdr · master └ fix/pty-resize · worktree エージェントごとにブランチを分ければ、同じリポジトリの 別タスクを同時に走らせても衝突しない。 └ feat/usage-charts · worktree
25. 4-2 CLI/UIから作成可能 $ herdr worktree create --branch feat/login $ herdr worktree open --branch feat/login $ herdr worktree list $ herdr worktree remove --workspace w2 サイドバーからも 置き場所は設定で 削除は明示的 プロジェクトを右クリックして New / [worktrees] directory = "~/.herdr/worktrees" 閉じても作業ディレクトリは残る。削除 Open worktree。 してもブランチは消さない。
26. DEMO 実際に動かしてみます
27. 感想 herdrを触るまでマルチエージェントを使用したことがありませんでしたが、自然言語で指 示が出せるので直感的にマルチエージェントを使えるようになりつつあります。 と言っても自分もまだまだ使いこなせている訳ではないのでアドバイスなどあれば懇親会 でお声がけしてください。 社内プロジェクトではアプリと別に AIエージェントが仕様駆動開発を行うためのドキュメン トリポジトリがあるのですが、アプリとドキュメント間の連携がやりやすくなりました。 Claude Code同士であればセッション間のやりとりができるようになったが、 herdrはエー ジェント依存していないので個人的に herdrの方が使い易い印象です。
28. 住む場所を、 与える。 動かしっぱなしにする。状態が見える。既存の CLI のま ま。 herdr.dev/docs [ ISOMETRIC ILLUSTRATION ] カバンを持って歩く人物と 背後 で稼働し続けるサーバー