← กรณีการใช้งาน

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

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

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

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

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

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

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

ขั้นที่ 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 เมื่อการทำงานหยุดที่เครื่องมือนั้น ให้สร้างคำขอ ผู้ตรวจจะได้รับอีเวนต์ approval บน private-hibira-approvals.support.inbox ทันที

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

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 ใส่กล่องอนุมัติไว้ในแผง Filament ของคุณสำหรับเอเจนต์ที่สร้างด้วย Laravel AI SDK

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

เอเจนต์ที่ทำงานในไคลเอนต์ MCP ใช้ Hibira ได้โดยคุณไม่ต้องเขียนโค้ด เพิ่มเซิร์ฟเวอร์ MCP แล้วเอเจนต์จะทำสิ่งเหล่านี้ได้:

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

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

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

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

• n8n โหนด Hibira ใช้เป็นเครื่องมือของเอเจนต์ AI ใน n8n ได้ด้วย
• Make
• Node-RED
• Activepieces

เคล็ดลับ

• ให้อีเวนต์มีขนาดเล็ก: ส่ง ID และป้ายกำกับสั้น ๆ แล้วโหลดผลลัพธ์ทั้งหมดจากเซิร์ฟเวอร์ของคุณ ขนาดสูงสุดขึ้นอยู่กับแพ็กเกจ ดูราคา
• เก็บทุกขั้นตอนและคำขอในฐานข้อมูลด้วย หน้าที่เปิดทีหลังจะได้แสดงการทำงานทั้งหมด
• ถ้าเอเจนต์เขียนคำตอบทีละโทเค็น ดูความคืบหน้าของงานที่ใช้เวลานานและการสตรีมคำตอบจาก AI
• คำขออนุมัติไม่ส่งอินพุตของเครื่องมือผ่านซ็อกเก็ต กล่องอนุมัติจะโหลดจากแบ็กเอนด์ของคุณ ซึ่งตรวจว่าผู้ใช้คนนั้นตรวจได้หรือไม่
• เมื่อไม่มีผู้ตรวจออนไลน์ ให้ใช้ตัวเลือก notify ของ createApprovals() ส่งพุชถึงผู้ตรวจตามคู่มือการแจ้งเตือนแบบพุช