# เอเจนต์ AI: แสดงขั้นตอนสด การอนุมัติ และการแจ้งเตือน

> แสดงทุกขั้นตอนที่เอเจนต์ทำระหว่างทำงาน พักการเรียกใช้เครื่องมือที่มีความเสี่ยงไว้ในกล่องอนุมัติแบบสดจนกว่าจะมีคนอนุมัติ และส่งผลลัพธ์ไปยังเบราว์เซอร์และโทรศัพท์จากเอเจนต์ ไคลเอนต์ MCP และโฟลว์แบบไม่ต้องเขียนโค้ด

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

เอเจนต์ AI ที่ทำงานเบื้องหลังนานหนึ่งนาทีโดยไม่มีอะไรขึ้นบนหน้าจอ ดูเหมือนค้างไปแล้ว และเอเจนต์ที่คืนเงินคำสั่งซื้อโดยไม่ถามใครเลยยิ่งแย่กว่า Hibira ให้เอเจนต์ของคุณใช้ช่องแบบเรียลไทม์เดียวกับส่วนอื่นของแอป ทุกขั้นตอนแสดงทันทีที่เสร็จ การเรียกใช้เครื่องมือที่มีความเสี่ยงจะรออยู่ในกล่องอนุมัติแบบสดจนกว่าจะมีคนอนุมัติ และผลลัพธ์ส่งถึงคนที่ควรเห็นทั้งในเบราว์เซอร์และบนโทรศัพท์

## สิ่งที่ผู้ใช้ได้รับ

- ทุกขั้นตอนของงานเอเจนต์ ("ค้นหาคำสั่งซื้อแล้ว" "ร่างคำตอบแล้ว") แสดงทันทีที่เสร็จในทุกแท็บที่เปิดอยู่
- คำขออนุมัติขึ้นในกล่องอนุมัติทันที พร้อมแสดงว่าผู้ตรวจคนอื่นคนไหนกำลังดูอยู่ จึงไม่มีสองคนตัดสินใจเรื่องคืนเงินรายการเดียวกัน
- การแจ้งเตือนแบบพุชเมื่อเอเจนต์ทำงานเสร็จหรือต้องให้คนตัดสินใจ แต่ไม่มีใครเปิดหน้านั้นอยู่

![ด้านซ้ายคือการทำงานของเอเจนต์ ด้านขวาคือกล่องรออนุมัติ: แต่ละขั้นตอนแสดงทันทีที่เสร็จ การคืนเงินรอผู้ตรวจสอบ และเมื่อกดอนุมัติ เอเจนต์ก็ทำต่อจนจบ](https://hibira.io/portal/articles/demo-ai-agents-th.mp4)

## ฟีเจอร์ที่ใช้

- **ช่องส่วนตัว**หนึ่งช่องต่อการทำงานหนึ่งครั้ง เช่น `private-agent-run-42` สำหรับขั้นตอนและผลลัพธ์
- **[@hibira-io/approvals](https://github.com/hibira-io/approvals)** สำหรับกล่องอนุมัติ: ตัวช่วยฝั่งเซิร์ฟเวอร์สำหรับ Vercel AI SDK, Mastra และ LangGraph (JavaScript และ Python) พร้อมคอมโพเนนต์ React และ Vue
- **ช่อง presence** ให้ผู้ตรวจเห็นว่ามีใครเปิดคำขอเดียวกันอยู่บ้าง
- เครื่องมือ `publish_event`, `send_push` และ `request_approval` ของ **[เซิร์ฟเวอร์ MCP](https://hibira.io/th/mcp-server)** สำหรับเอเจนต์ที่ทำงานใน Claude, Cursor หรือไคลเอนต์ MCP อื่น
- **การแจ้งเตือนแบบพุช**ผ่าน API ที่เข้ากันได้กับ Beams

```text
flow: ขั้นตอนของเอเจนต์ส่งถึงผู้ใช้ และการเรียกใช้เครื่องมือที่มีความเสี่ยงรอให้คนอนุมัติ
== ขั้นตอนและผลลัพธ์
เอเจนต์ของคุณ|หนึ่งอีเวนต์ต่อขั้นตอน --`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` เมื่อการทำงานหยุดที่เครื่องมือนั้น ให้สร้างคำขอ ผู้ตรวจจะได้รับอีเวนต์ `approval` บน `private-hibira-approvals.support.inbox` ทันที

```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)` ของคุณจะส่งคำตอบกลับให้เอเจนต์เพียงครั้งเดียว แม้ผู้ตรวจสองคนกดส่งพร้อมกัน:

```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 approvals](https://hibira.io/th/guides/filament-approvals) ใส่กล่องอนุมัติไว้ในแผง Filament ของคุณสำหรับเอเจนต์ที่สร้างด้วย Laravel AI SDK

## ขั้นที่ 3: เอเจนต์ใน Claude, Cursor และไคลเอนต์ MCP อื่น

เอเจนต์ที่ทำงานในไคลเอนต์ MCP ใช้ Hibira ได้โดยคุณไม่ต้องเขียนโค้ด เพิ่ม[เซิร์ฟเวอร์ MCP](https://hibira.io/th/mcp-server) แล้วเอเจนต์จะทำสิ่งเหล่านี้ได้:

- ส่งความคืบหน้าและผลลัพธ์ไปยังช่องของคุณด้วย `publish_event` ให้แดชบอร์ดหรือเบราว์เซอร์ของเพื่อนร่วมทีมติดตามงานได้
- ส่งการแจ้งเตือนแบบพุชไปยัง interest หรือผู้ใช้ด้วย `send_push` เมื่อทำงานเสร็จ
- ถามคนด้วย `request_approval`: จะได้ลิงก์ไปยังหน้าที่เราโฮสต์ให้ ซึ่งคนเลือกคำตอบได้ แล้วรอคำตอบด้วย `get_approval` ถ้าระบุช่อง คำขอจะแสดงในกล่องอนุมัติด้านบนด้วย

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

## ขั้นที่ 4: โฟลว์แบบไม่ต้องเขียนโค้ด

เครื่องมืออัตโนมัติก็ส่งอีเวนต์แบบเดียวกันได้ โฟลว์เผยแพร่ขั้นตอนหรือผลลัพธ์ไปยังช่อง ส่งการแจ้งเตือนแบบพุช หรือเริ่มทำงานเมื่อมีอะไรเกิดขึ้นบนช่องได้:

- [n8n](https://hibira.io/th/guides/n8n) โหนด Hibira ใช้เป็นเครื่องมือของเอเจนต์ AI ใน n8n ได้ด้วย
- [Make](https://hibira.io/th/guides/make)
- [Node-RED](https://hibira.io/th/guides/node-red)
- [Activepieces](https://hibira.io/th/guides/activepieces)

## เคล็ดลับ

- ให้อีเวนต์มีขนาดเล็ก: ส่ง ID และป้ายกำกับสั้น ๆ แล้วโหลดผลลัพธ์ทั้งหมดจากเซิร์ฟเวอร์ของคุณ ขนาดสูงสุดขึ้นอยู่กับแพ็กเกจ ดู[ราคา](https://hibira.io/th/pricing)
- เก็บทุกขั้นตอนและคำขอในฐานข้อมูลด้วย หน้าที่เปิดทีหลังจะได้แสดงการทำงานทั้งหมด
- ถ้าเอเจนต์เขียนคำตอบทีละโทเค็น ดู[ความคืบหน้าของงานที่ใช้เวลานานและการสตรีมคำตอบจาก AI](https://hibira.io/th/use-cases/job-progress)
- คำขออนุมัติไม่ส่งอินพุตของเครื่องมือผ่านซ็อกเก็ต กล่องอนุมัติจะโหลดจากแบ็กเอนด์ของคุณ ซึ่งตรวจว่าผู้ใช้คนนั้นตรวจได้หรือไม่
- เมื่อไม่มีผู้ตรวจออนไลน์ ให้ใช้ตัวเลือก `notify` ของ `createApprovals()` ส่งพุชถึงผู้ตรวจตาม[คู่มือการแจ้งเตือนแบบพุช](https://hibira.io/th/guides/push-notifications)