AI コーディングエージェントの管理を行う Vibe Kanban を試してみた

AI コーディングエージェントが登場して以来、開発者の仕事はコードの生成からコードのレビューや設計、AI エージェントの管理へとシフトしつつあります。AI コーディングエージェントは大量のコードを高速に生成できる一方で、生成されたコードが正しいか、セキュリティ上の問題がないか、プロジェクトのスタイルガイドに準拠しているかを確認する必要があります。また、AI エージェントに適切なプロンプトを与え、タスクを分割して効率的に作業を進めるための管理も重要です。

Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。Vibe Kanban は名前の通りカンバン方式の UI でタスクを管理します。従来のプロジェクト管理ツールと異なる点は、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できることです。Vibe Kanban は以下のような特徴を持っています。

Codex, Claude Code, Gemini CLI といった主要な AI コーディングエージェントをサポートしており、簡単にエージェントを切り替えて使用できる
複数のタスクを並列で実行できる
コーディングエージェントが取り組んでいるタスクのステータスを Web UI で確認できる
MCP サーバーの設定を一元管理できる

この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。

インストール

Vibe Kanban は npm を使用してインストール・実行できます。以下のコマンドで Vibe Kanban を利用可能なポートで起動します。

npx vibe-kanban

コマンドを実行すると、Vibe Kanban が起動し、ブラウザでアクセスできるようになります。ポート番号は実行するたびに変化しますが、環境変数 PORT を設定することで固定できます。

PORT=3000 npx vibe-kanban

ブラウザで http://localhost:3000 にアクセスすると、Vibe Kanban の UI が表示されます。初めは安全上の警告文がダイアログで表示されます。チェックボックスにチェックを入れて「I Accept the Risks and Want to Proceed」ボタンをクリックしましょう。

使用するコーディングエージェントとエディタを設定します。ここではコーディングエージェントに Claude Code を使用し、エディタには VS Code を選択します。この設定は後から変更できます。

続いて GitHub アカウントに接続するための認証を行います。GitHub アカウントに接続することで、Vibe Kanban からリポジトリにアクセスしてプルリクエストを作成したり、コードをコミットしたりできます。この設定はスキップすることも可能です。認証方式は GitHub 認証の他に、GitHub Personal Access Token を使用する方式もサポートしており、後から設定画面で変更できます。

最後にフィードバックデータの収集に関する設定をすると、Vibe Kanban の初期設定は完了です。

プロジェクトを選択する

初めに Vibe Kanban で管理するプロジェクトを選択します。右上の「+ Create Project」ボタンをクリックして新しいプロジェクトを作成します。

既存のディレクトリからプロジェクトを選択するか、新しいディレクトリを作成してプロジェクトを開始します。ここでは既存のディレクトリを選択します。プロジェクト名は管理しやすい名前を付けましょう。オプショナルとしてセットアップコマンドや開発サーバーを起動するコマンドを指定できます。

「Kanban App」という名前のプロジェクトが作成されました。

タスクを作成して AI コーディングエージェントに作業を依頼する

プロジェクトを選択すると、タスクの一覧が表示されます。初めはタスクがないので、「Create Task」ボタンをクリックして新しいタスクを作成します。

ここではカンバンアプリケーションに以下の機能を追加するタスクを作成しましょう。

ダークモードを切り替える機能
ユニットテストを追加する
ボード画面にトップに戻るボタンを追加する

タスクにはタイトル・説明文・画像を追加できます。タスクを作成する時にあらかじめ用意されたテンプレートを使用できます。デフォルトでは「Add Unit Tests」「Bug Analysis」「Code Refactoring」の 3 つのテンプレートが用意されており、グローバル設定から追加・編集も可能です。

ここではダークモードを切り替える機能のタスクを作成すると以下のように作成しました。

# ダークモードを切り替える機能
 
ユーザーがダークモードとライトモードを切り替えられるようにする。
 
- Tailwind CSS のダークモード機能を使用して実装する
- 初期状態ではユーザーのシステム設定に合わせてモードを切り替える
- ヘッダーの右上に切り替えボタンを配置し、クリックするたびにモードが切り替わるようにする
- モードの状態はローカルストレージに保存し、ページを再読み込みしても状態が維持されるようにする

「Create & Start Task」ボタンをクリックすると、タスクが作成され、AI コーディングエージェントが自動的に作業を開始します。「Create」ボタンをクリックすると単にタスクが作成されるだけで、AI コーディングエージェントは開始されません。作成したタスクは「TO DO」レーンに表示されます。レーンに配置されたタスクはドラッグ＆ドロップで移動できます。

ボード上のタスクをクリックすると、タスクの詳細が表示されます。タスクの詳細画面で「Start」ボタンをクリックすると、AI コーディングエージェントがタスクの作業を開始します。開始したタスクは「In Progress」レーンに移動し、エージェントとのやり取りがチャット形式で表示されます。エージェントの作業は Git Worktree を使用して分離されたブランチで行われます。.env ファイルのように git の追跡対象外であるが開発に必要なファイルはプロジェクトの「Copy Files」設定で指定しておくと、エージェントの作業ブランチにコピーされます。

デフォルトではユーザーの許可なしにコマンドやコードを編集する --dangerously-skip-permissions オプションが指定された状態でエージェントが起動するので注意してください。安全のために dev container のように隔離された環境でエージェントを実行することをお勧めします。

タスクが完了すると「Review」レーンに移動し音声で通知されます。「Review」レーンのタスクをクリックすると、AI コーディングエージェントが生成したコードの差分が表示されます。

完了したタスクに修正を加えたい場合は、チャット画面でエージェントに再度指示を出すこともできます。その場合、タスクは再び「In Progress」レーンに移動します。

右側の三点リーダーをクリックすると、差分をエディタで開く・開発サーバーを起動する・Rebase・プルリクエストを作成する・マージといった操作が行えます。ここでは「Merge」をクリックしてマージを実行しましょう。

Base Branch に差分がマージされ、タスクが「Done」レーンに移動します。

Vibe Kanban の MCP サーバー

Vibe Kanban 自体を MCP サーバーとして使用することで、任意の AI エージェントから Vibe Kanban のプロジェクトやタスクを管理できるようになります。試しに Claude Desktop に MCP サーバーを接続してみましょう。以下の設定を追加します。

{
  "mcpServers": {
    "vibe_kanban": {
      "command": "npx",
      "args": ["-y", "vibe-kanban", "--mcp"]
    }
  }
}

以下のプロンプトを Claude に入力して、Vibe Kanban のプロジェクトにタスクを追加してもらいましょう。

「Kanban App」プロジェクトに「ボードのタスクを文字列で検索する機能を追加する」タスクを作成してください。機能の要件は以下の通りです。
 
- ユーザーが入力した文字列に基づいて、ボード上のタスクをフィルタリングする
- フィルタリングはリアルタイムで行われ、ユーザーが入力を変更するたびに結果が更新される
- タスクのタイトルや説明文に対して検索を行う
- 検索結果が0件の場合は「該当するタスクはありません」と表示する

「List projects」ツールを使用して「Kanban App」プロジェクトが存在することを確認し、「Create task」ツールを使用してタスクが作成されました。