トラス構造が幾何学的に組まれた建築物のファサード
設計と運用

複数AIコーディングエージェントの承認UIを統一する設計判断

目次を見る

Claude Code、Gemini CLI、Codexなど複数のAIコーディングエージェント(コードの読み書きを自律的に行うAIツール)を併用しているエンジニアに向けた内容です。エージェントごとに承認の出し方が違い、どれかが承認待ちのまま放置される問題への対処を扱います。

開発環境に複数のコーディングエージェントを導入すると、それぞれが独自の端末やプロンプトでファイル変更の許可を求めてきます。Claude Codeはある端末で聞き、Gemini CLIは別の端末で聞き、Codexはまた別の作法で聞いてくるという状態です。この「承認待ちウィンドウがどこにあるか分からない」という問題に対して、HackersHostelチームはAgentWebUIという自前ホスト型(自分のサーバーで動かす方式)のWebツールを公開しています。

何が問題で、なぜ設計上の課題になるのか

複数のエージェントを並行運用する構成は、個々のツールの能力とは別に運用上の摩擦を生みます。

エージェントAがファイル変更の許可を求めて待っている間、別の端末でエージェントBの出力を確認していると、Aの待機に気づかないまま時間が過ぎます。これは個々のエージェントの性能問題ではなく、承認フロー(人間が変更を確認して許可する手順)がツールごとに分断されていることに起因するインターフェース層の設計課題です。

ソフトウェアアーキテクチャの観点で見ると、これは典型的な「統合レイヤーの欠如」です。マイクロサービス間の通信をAPI Gatewayで一本化するのと同じ発想で、複数エージェントの承認フローを一箇所に集約する必要があります。AgentWebUIはこの統合レイヤーを担うコンポーネントとして設計されています。

技術的な仕組みを段階的に見る

AgentWebUIの構成要素を分解すると、判断に使える情報が見えてきます。

まずサーバー側はPythonで約3,000行、依存ライブラリはaiohttp(非同期HTTP通信ライブラリ)1つのみという軽量構成です。メモリ使用量は約40MBとされており、古いノートPCや安価なVPS(仮想専用サーバー)でも動作する想定です。

エージェントとの接続にはACP(Agent Client Protocol)という標準プロトコルを使っています。これはエージェント側とクライアント側のやり取りを統一的に定義する仕様で、標準入出力(stdio)経由で通信します。ACPに対応しているエージェントなら、Claude CodeでもCodexでもGemini CLIでも、同じクライアント実装で接続できる点が設計上の肝です。

ここが重要なポイントです。個別のエージェントごとに専用の統合コードを書くアプローチだと、エージェントが増えるたびに統合コードも増え、保守コストが線形に積み上がります。ACPという共通プロトコルに乗ることで、クライアント実装を1つ書けば済み、新しいエージェントの追加コストを大幅に下げられます。

モデルの呼び出しについても同様の発想が採用されています。OpenAI互換API(OpenAIのAPI仕様に準拠したインターフェース)であれば、OpenRouter、Groq、Ollama、LM Studio、vLLMなど接続先を問いません。ローカルで動くLlama 3.2 3Bのような小型モデルも、クラウドのモデルも同じ窓口から扱える設計です。

Webクライアント側はPreactをhtmという記法で使い、ビルドステップ(バンドラやnode_modulesを使ったコンパイル工程)を持ちません。ファイルを編集してブラウザをリロードすれば反映される構成で、フロントエンドの実装詳細に深入りする必要はありませんが、運用保守の手間を減らす設計判断として押さえておく価値があります。

既存の選択肢との比較で見える立ち位置

この種のツールには、もともと同チームが開発していた「AgentWebUI Pro」というより高機能な上位版が存在します。今回のAgentWebUIは、その反省を踏まえて最小構成からゼロで再設計されたものだと説明されています。

「機能を足すなら、その重みに見合う価値を証明しなければならない」というルールで作られた点は、技術的負債の管理という観点で参考になります。多機能化が進んだツールを肥大化したまま運用し続けるか、最小構成に作り直すかという判断は、自社の社内ツールやCLIラッパーを運用しているチームでも直面する選択です。

類似の発想としては、Kubernetesのingress controllerが複数のバックエンドサービスへのルーティングを一箇所に集約する構成や、API Gatewayパターンがあります。AgentWebUIは「複数のAIエージェントへのルーティングと承認UIの集約」という点で、同じ統合レイヤーの発想を人間とAIエージェントの境界に適用した事例と捉えられます。

日本の開発現場でも、社内でClaude CodeとGitHub Copilot、独自のRAG(検索拡張生成)ツールを並行導入しているチームは少なくありません。承認フローやログの保存場所がツールごとにバラバラだと、監査ログの一元管理やインシデント発生時の追跡が難しくなります。この点はセキュリティ・可用性の観点でも軽視できない論点です。

今日確認できること

自分のプロジェクトでこの種の統合が必要かどうかは、次の基準で判断できます。

  • 複数のコーディングエージェントを並行運用しているか(1つだけなら統合の優先度は低い)
  • エージェントが動くマシンにSSH接続して確認する手間が発生しているか
  • 承認待ちの見落としによる手戻りが実際に発生しているか
  • 自前ホスト(セルフホスト)でのツール運用に抵抗がないか(アカウント登録なし、.envファイルでの設定という運用形態を許容できるか)

実際に試す場合は、GitHubのHackersHostel/AgentWebUIリポジトリを確認してください。導入は次の4コマンドで完結すると説明されています。

git clone https://github.com/HackersHostel/AgentWebUI.git
cd AgentWebUI
cp .env.example .env  # モデルとエージェントの設定を追加
docker compose up -d

VPSやホームラボでの本番運用を想定する場合は、systemdとCaddy(自動HTTPS対応のリバースプロキシ)でのセットアップを行うインストールスクリプトも用意されているとのことです。導入前には、使用しているエージェントがACPに対応しているか、リポジトリのREADMEで対応エージェント一覧を確認しておくと安全です。

可用性の観点では、セルフホスト型であるため自分の環境の稼働がそのままツールの可用性に直結します。社内の複数人で共有する場合は、サーバーのダウンタイムが承認フロー全体を止めてしまうリスクも事前に検討しておく価値があります。

複数エージェントの統合は、ACPのような共通プロトコルへの対応状況を軸に判断すると選定基準がぶれません。

まとめ

複数のAIコーディングエージェントを使い分ける運用は珍しくなくなりつつありますが、承認フローの分断は見落としやすい運用コストです。

AgentWebUIが示しているのは、ACPという共通プロトコルを軸にした統合レイヤーの設計です。個別統合の積み上げではなく、標準プロトコルに乗ることで保守コストを抑える発想は、他の自社ツール設計にも応用できます。

導入を検討する際は、まず自分が使っているエージェントのACP対応状況を確認し、次に自前ホストでの運用体制(サーバーの可用性、ログの保存方針)を整理しておくと判断しやすくなります。

小さく作り直すか、機能を足し続けるかという技術的負債の管理判断も、AgentWebUI Proとの経緯から学べる点です。まずはリポジトリのREADMEとdocker-compose構成を確認するところから始めてみてください。

参考

My Agents Do the Work, I Just Press "Allow" 🦥

この記事について: 本記事は AI を活用して作成し、forva AI 編集部が内容を確認・監修しています。

AI 駆動開発のご相談は forva AI へ。まずはお気軽にどうぞ。