Vue DevTools

@agentic-ui/vue tích hợp sẵn Vue DevTools để bạn theo dõi "thế giới" của agent ngay khi đang code — không cần cấu hình gì.

Bạn nhận được gì

Cài plugin như bình thường rồi mở Vue DevTools ở chế độ development. Sẽ có 2 panel:

• Inspector "Agentic UI" — cây capability đang đăng ký, cập nhật sống: tên (kèm target label khi có nhiều instance), tag màu theo risk (read / mutating / destructive), và state (active / suspended). Chọn 1 mục để xem full descriptor — description, inputSchema, scope, tags, và revision lúc đăng ký. Cây tự refresh khi component mount/unmount, nên luôn khớp những gì đang hiển thị trên màn hình.
• Timeline layer "Agentic UI" — từng AuditEvent khi nó xảy ra: received → validated → permitted → confirmed → executed (hoặc rejected), kèm status, thời lượng, và digest của payload. Chính là execution pipeline được trực quan hoá.

Không cần cấu hình

Bridge được nối tự động khi bạn install plugin:

import { createAgenticUi } from '@agentic-ui/vue'

createApp(App).use(createAgenticUi()).mount('#app')

Nó chỉ chạy ở development — phần tích hợp được guard sau một dev check và bị tree-shake khỏi bản production — và không bao giờ throw khi máy không có Vue DevTools, nên cứ để yên là an toàn.

Nối thủ công

Nếu bạn tự tạo registry (ví dụ dùng chung một registry cho nhiều app), gọi bridge trực tiếp:

import { setupAgenticDevtools } from '@agentic-ui/vue'

setupAgenticDevtools(app, registry)

Xây trên @vue/devtools-api chính thức (setupDevtoolsPlugin) — đúng cơ chế mà Pinia và Vue Router đang dùng.