Vue DevTools

@agentic-ui/vue ships a Vue DevTools integration so you can watch the agent's world live while you develop — no setup required.

What you get

Install the plugin as usual and open Vue DevTools in development. Two panels appear:

• The "Agentic UI" inspector — a live tree of every capability currently registered: its name (and target label when there are several instances), a colored tag for its risk (read / mutating / destructive), and its state (active / suspended). Select one to see the full descriptor — description, inputSchema, scope, tags, and the revision it was registered at. The tree refreshes as components mount and unmount, so it always matches what's on screen.
• The "Agentic UI" timeline layer — every AuditEvent as it happens: received → validated → permitted → confirmed → executed (or rejected), with the status, duration, and payload digest. It's the execution pipeline, visualized.

Zero config

The bridge is wired automatically when you install the plugin:

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

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

It's development-only — the integration is guarded behind a dev check and tree-shaken out of production builds — and it never throws when Vue DevTools isn't present, so it's safe to leave in.

Manual wiring

If you construct the registry yourself (for example, sharing one registry across apps), call the bridge directly:

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

setupAgenticDevtools(app, registry)

Built on the official @vue/devtools-apisetupDevtoolsPlugin — the same mechanism Pinia and Vue Router use.