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

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

Source: https://hibira.io/ja/use-cases/ai-agents

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

## ユーザーにとっての価値

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

![左はエージェントの実行、右は承認の受信箱。各ステップは終わり次第表示され、返金はレビュー担当者を待ち、承認するとエージェントが最後まで続けます。](https://hibira.io/portal/articles/demo-ai-agents-ja.mp4)

## 使う機能

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

```text
flow: エージェントのステップがユーザーに届き、リスクのあるツール呼び出しは人の承認を待つ
== ステップと結果
エージェント|ステップごとに 1 イベント --`trigger()`--> *Hibira --WebSocket--> ユーザーのページ|ステップのライブ一覧
== 承認が必要なツール呼び出し
エージェント|実行を一時停止 --`approvals.request()`--> *Hibira --WebSocket--> レビュアーの受信箱|承認、編集、却下
```

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

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

```js
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 を始めたユーザーにだけ許可してください。

```js
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` イベントがすぐに届きます。

```js
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 人のレビュアーが同時に送信しても、実行されるのは一度だけです。

```jsx
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 承認](https://hibira.io/ja/guides/filament-approvals)が Laravel AI SDK のエージェント向けの受信箱を Filament パネルに追加します。

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

MCP クライアントで動くエージェントは、コードを書かなくても Hibira を使えます。[MCP サーバー](https://hibira.io/ja/mcp-server)を追加すると、エージェントは次のことができます。

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

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

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

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

- [n8n](https://hibira.io/ja/guides/n8n)：Hibira ノードは n8n の AI エージェントのツールとしても使えます
- [Make](https://hibira.io/ja/guides/make)
- [Node-RED](https://hibira.io/ja/guides/node-red)
- [Activepieces](https://hibira.io/ja/guides/activepieces)

## ヒント

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