In-app assistant

@agentic-ui/widget is an optional package that gives you an in-app assistant for Vue: a floating chat widget plus headless composables, wired to the registry and its safety pipeline. Drop one component into your app and users get an assistant that runs your app's own actions — validated, permission-checked, and approved before anything happens.

pnpm add @agentic-ui/widget

Peers: vue ^3.3 and ai ^5, plus @agentic-ui/vue and @agentic-ui/client.

Three ways in

Tier	You write	Best for
Drop-in	<AgentWidget api="/agent/chat" />	Ship an assistant today
Slots	<AgentWidget> + #launcher / #header	Keep the logic, swap the chrome
Headless	useAgentChat() / useAgentWidget() + your template	Own the whole UI

Whichever you choose, every action the assistant takes still goes through validate → permission → confirmation → execute → audit.

Drop-in

The registry plugin must be installed once:

// main.ts
import { createApp } from 'vue'
import { createAgenticUi } from '@agentic-ui/vue'
createApp(App).use(createAgenticUi()).mount('#app')

Then place the widget anywhere in your app:

<script setup lang="ts">
import { AgentWidget } from '@agentic-ui/widget'
import '@agentic-ui/widget/styles.css' // optional default theme
</script>

<template>
  <AgentWidget
    api="/agent/chat"
    title="Assistant"
    :suggestions="['Add a task', 'Summarize this page']"
    show-audit
  />
</template>

You declare capabilities elsewhere with useAgentCapability (see Integration); the widget shows and drives whatever is registered. It needs the same small server proxy described in the integration guide — the browser never holds your LLM key.

The layout is a normal live chat: a scrolling message log with the composer pinned to the bottom. Approvals float above the composer only while something is pending, and the audit trail is tucked behind an activity toggle (enable it with show-audit). Tool calls stream inline as quiet steps, each on its own line, separate from the reply.

Slots

Keep the wiring, replace the chrome:

<AgentWidget api="/agent/chat">
  <template #launcher="{ toggle, unread }">
    <button class="my-fab" @click="toggle">
      Ask AI <span v-if="unread">{{ unread }}</span>
    </button>
  </template>
</AgentWidget>

#launcher receives { open, unread, toggle }; #header receives { close, title }.

Headless

useAgentChat is the brain — it creates the chat, routes confirmations through a queue, collects audit events, and exposes a normalized log. Build any UI on top of it:

import { useAgentChat } from '@agentic-ui/widget'

const chat = useAgentChat({ api: '/agent/chat' })
// chat.lines · chat.input · chat.busy · chat.error
// chat.send(text?) · chat.stop()
// chat.approvals · chat.approve(callId, remember?) · chat.deny(callId, reason?)
// chat.audit · chat.entries

useAgentWidget adds the panel's open state: open, unread, toggle(), show(), hide().

Components

Use these standalone, or let <AgentWidget> compose them. All are theme-able via au-* classes.

• AgentChatPanel — the message log + composer.
• AgentApprovalPanel — pending confirmations; pass changesFor to show a field-level diff instead of raw input JSON.
• AgentAuditTimeline — the pipeline phases of every call.
• AgentCapabilityInspector — the live catalog, searchable.

Theming

The default theme is driven entirely by --au-* custom properties. Override a handful on :root to reskin, or skip styles.css and style the au-* classes yourself. Light and dark are both defined and honor the viewer's theme.

:root {
  --au-accent: #6d5efc;
  --au-bg: #0b0b12;
  --au-surface: #141420;
}

Conversation history & auto-compact

Within a session the assistant remembers — the chat keeps the whole transcript and sends it every turn, so the model sees prior messages. As the session grows so does the prompt; set maxHistoryTokens to auto-compact the history sent to the model (a token-budgeted sliding window over the most recent turns). The on-screen transcript stays complete; only the sent copy is bounded.

<AgentWidget api="/agent/chat" :max-history-tokens="8000" />

useAgentChat({ api: '/agent/chat', maxHistoryTokens: 8000 })

The estimator is tokenizer-free (~chars / 4); override with estimateTokens. For a custom transport, compact yourself with the exported compactMessages.

Boundaries

• No server is shipped — the proxy (and your key) stays in your app.
• The pipeline is never bypassed; approval cards render the registry's own confirmation queue.
• Capabilities are yours to declare with useAgentCapability.