AI エージェント：進行状況のライブ表示、承認、通知

エージェントの各ステップを進行に合わせて表示し、リスクのあるツール呼び出しは人が承認するまでライブの受信箱で待たせ、結果をエージェント、MCP クライアント、ノーコードのフローからブラウザーとスマートフォンに届けます。

AI エージェントが 1 分間バックグラウンドで動いていても画面に何も出なければ、止まっているように見えます。確認もせずに注文を返金してしまうのは、もっと困ります。Hibira なら、エージェントもアプリのほかの部分と同じリアルタイムチャンネルを使えます。ステップは終わるたびに表示され、リスクのあるツール呼び出しは人が承認するまでライブの受信箱で待ち、結果は届けるべき人のブラウザーやスマートフォンに届きます。

ユーザーにとっての価値

エージェントの各ステップ（「注文を確認しました」「返信の下書きを作りました」）が、終わるたびに開いているすべてのタブに表示されます。
承認のリクエストはすぐに受信箱に表示され、ほかに誰が見ているかもわかるので、同じ返金を 2 人が判断することはありません。
エージェントが完了したときや判断が必要なときに誰もページを開いていなければ、プッシュ通知が届きます。

左はエージェントの実行、右は承認の受信箱。各ステップは終わり次第表示され、返金はレビュー担当者を待ち、承認するとエージェントが最後まで続けます。

使う機能

実行ごとのプライベートチャンネル（private-agent-run-42 など）で、ステップと結果を送ります。
承認の受信箱には @hibira-io/approvals：Vercel AI SDK、Mastra、LangGraph（JavaScript と Python）向けのサーバーヘルパーと、React と Vue のコンポーネントがあります。
プレゼンスチャンネルで、同じリクエストをほかに誰が開いているかをレビュアーに見せます。
MCP サーバーのツール publish_event、send_push、request_approval。Claude、Cursor などの MCP クライアントで動くエージェント向けです。
Beams 互換 API によるプッシュ通知。

ステップと結果

エージェントステップごとに 1 イベント

trigger()

Hibira

WebSocket

ユーザーのページステップのライブ一覧

承認が必要なツール呼び出し

エージェント実行を一時停止

approvals.request()

Hibira

WebSocket

レビュアーの受信箱承認、編集、却下

エージェントのステップがユーザーに届き、リスクのあるツール呼び出しは人の承認を待つ

ステップ 1：エージェントから各ステップを送る

Vercel AI SDK では、onStepFinish がステップごとに実行されます。ツールの入力ではなく名前だけを送れば、イベントは小さく、機密データもソケットを通りません。

import { generateText, stepCountIs } from 'ai';

const channel = `private-agent-run-${run.id}`;
const result = await generateText({
  model,
  tools,
  messages,
  stopWhen: stepCountIs(10),
  onStepFinish: async ({ toolCalls }) => {
    if (toolCalls.length) {
      await pusher.trigger(channel, 'step', { tools: toolCalls.map((c) => c.toolName) });
    }
  },
});
await saveRun(run.id, result.text);
await pusher.trigger(channel, 'done', { id: run.id });

ブラウザーでは実行を始める前に購読し、ツールごとにラベルを表示します。チャンネルの認可ルートでは、private-agent-run-42 を実行 42 を始めたユーザーにだけ許可してください。

const channel = pusher.subscribe(`private-agent-run-${runId}`);
channel.bind('step', ({ tools }) => tools.forEach((t) => steps.add(LABELS[t] ?? t)));
channel.bind('done', async ({ id }) => showResult(await fetch(`/runs/${id}`).then((r) => r.json())));

ほかのエージェントフレームワークでも同じです。ステップが終わるところで trigger() を呼びます。

ステップ 2：リスクのあるツールの前に人に確認する

ツールに needsApproval を付けます。実行がそのツールで止まったらリクエストを作成すると、レビュアーには private-hibira-approvals.support.inbox で approval イベントがすぐに届きます。

import { tool } from 'ai';
import { createApprovals } from '@hibira-io/approvals';
import { approvalCalls } from '@hibira-io/approvals/ai-sdk';

export const approvals = createApprovals({ pusher, scope: 'support', resume });

const tools = {
  refund_order: tool({ inputSchema, needsApproval: true, execute: refund }),
};

const calls = approvalCalls(result);
if (calls.length) {
  await approvals.request({ agent: 'Support agent', title: 'Refund order #1042', calls, metadata: { chatId } });
}

レビュアーは受信箱のコンポーネントで判断します。コンポーネントはクライアントイベントではなく approvals.handler() のルートを通してバックエンドを呼び、resume(request) が答えをエージェントに返します。2 人のレビュアーが同時に送信しても、実行されるのは一度だけです。

import { ApprovalInbox, createApprovalsClient } from '@hibira-io/approvals/react';
import '@hibira-io/approvals/styles.css';

const client = createApprovalsClient({ endpoint: '/api/approvals', pusher, scope: 'support' });

export function ApprovalsPage({ me }) {
  return <ApprovalInbox client={client} me={me.id} />;
}

同じパッケージには Mastra（requireApproval と suspend()）と LangGraph（interrupt()）向けのヘルパーもあります。Python では pip install "hibira-approvals[pusher,fastapi]" で、LangGraph Python から同じリクエストを作れ、受信箱用の FastAPI ルーターも使えます。Laravel で作るなら、Filament AI 承認が Laravel AI SDK のエージェント向けの受信箱を Filament パネルに追加します。

ステップ 3：Claude、Cursor などの MCP クライアントのエージェント

MCP クライアントで動くエージェントは、コードを書かなくても Hibira を使えます。MCP サーバーを追加すると、エージェントは次のことができます。

publish_event で進捗と結果をチャンネルに送り、ダッシュボードやチームメンバーのブラウザーで作業を追えるようにする
完了時に send_push で interest やユーザーにプッシュ通知を送る
request_approval で人に確認する。回答を選べるホスト型ページのリンクが返り、get_approval で答えを待てます。チャンネルを指定すれば、リクエストは上の受信箱にも表示されます。

claude mcp add --transport http hibira https://hibira.io/mcp

ステップ 4：ノーコードのフロー

自動化ツールからも同じイベントを送れます。フローからステップや結果をチャンネルに送ったり、プッシュ通知を送ったり、チャンネルで何か起きたときにフローを始めたりできます。

n8n：Hibira ノードは n8n の AI エージェントのツールとしても使えます
Make
Node-RED
Activepieces

ヒント

イベントは小さく保ちましょう。ID と短いラベルを送り、結果全体はサーバーから取得します。サイズの上限はプランによって異なります。料金をご覧ください。
ステップとリクエストはデータベースにも保存しておくと、あとから開いたページでも実行の全体を表示できます。
エージェントが回答を 1 トークンずつ書く場合は、時間のかかる処理の進捗と AI 回答のストリーミングを参照してください。
承認のリクエストは、ツールの入力をソケットに載せません。受信箱がバックエンドから取得し、バックエンドがそのユーザーにレビューの権限があるかを確認します。
レビュアーが誰もオンラインでないときは、createApprovals() の notify オプションを使い、プッシュ通知ガイドのとおりにレビュアーへプッシュを送りましょう。