複数AIエージェントを並列管理するUI

2025年11月、vscode-ai-agent-manager を作った。Claude / Codex / Gemini / Cursor Agent を並列に起動して管理するためのダッシュボード。

背景はシンプルで、AI エージェントを複数同時に走らせると、どの Agent が何を実行中かすぐ分からなくなる。ターミナルを並べても追えない。だったら一覧で見られる UI が欲しい、という個人的な需要。

VS Code 拡張 → Web アプリへ

最初は VS Code 拡張として作り始めた。けど途中で「拡張の制約に縛られるより Web アプリの方が早い」と判断して、Webアプリ移行に伴う拡張機能コードの削除 というコミットで方針転換。最終的に Next.js + shadcn/ui の Web アプリに落ち着いた。

機能と構成

• タスクの CRUD（app/api/tasks/...）
• Agent の起動/停止（app/api/agents/start /stop）
• カンバンボード UI（KanbanBoard.tsx / TaskCard.tsx）
• WebSocket（Socket.IO）でリアルタイムにログを流す
• 状態は Zustand（taskStore / logStore）

型定義を見ると、設計の意図がそのまま出ている。

export type AgentType = "claude" | "codex" | "gemini" | "cursor-agent";
export type AgentStatus = "idle" | "running" | "stopped" | "completed" | "error";

export interface Task {
  id: string;
  prompt: string;
  agentConfigs: AgentConfig[];
  agentInstances: AgentInstance[];
  worktreePath: string;   // タスクごとに git worktree を割り当てる
}

1タスクに対して複数の Agent を割り当てて、それぞれを git worktree で分離して走らせる、というのが肝。useSocketIO で各 Agent のログストリームを購読して、カンバン上のカードに状態（running/completed/error）を反映する。

学び

エージェントを「並列のワーカー」として扱うなら、タスク = worktree、ログ = ストリームで分離するのが素直だった。Socket.IO でログを流して Zustand に溜める、という組み合わせはこの手のリアルタイム監視 UI にそのまま使い回せそう。

おわり

AIエージェント前提の設計書 で考えていたことの、実装側の補完。Agent 管理 UI は 2025年の個人開発あるあるで、似たものを何度も作りたくなる。次はこの worktree + ログストリームの骨格を、もっと汎用のジョブランナーに寄せられそう。