Getting started

agentic-ui-vue lets an AI assistant help people use your Vue app — while your app stays in control. Components declare capabilities: actions with defined inputs, clear descriptions, and risk labels. The AI asks your app to run one of those actions; before anything runs, the request goes through validate → permission → confirmation → execute.

Packages

Package	Description
@agentic-ui/core	The registry, capability rules, safety pipeline, target selection, and audit events
@agentic-ui/schema	JSON Schema (draft-07 subset) types, a pluggable validator, and a zod adapter
@agentic-ui/protocol	Data formats (ToolCall/ToolResult/CatalogEntry) and MCP + AI SDK mapping
@agentic-ui/vue	The Vue plugin and lifecycle composables (useAgentCapability, useAgent, …)
@agentic-ui/client	The Vercel AI SDK transport binding (bindRegistryToChat) and catalog serialization
@agentic-ui/widget	Optional in-app assistant: a floating chat widget plus headless composables
@agentic-ui/testing	Tools for testing a capability like a function, without an LLM or Vue

Install

pnpm add @agentic-ui/vue      # one package — core/schema/protocol come with it
pnpm add @agentic-ui/widget   # optional: the in-app chat widget

ai (the Vercel AI SDK) is a peer dependency — pnpm/npm install it automatically. The LLM server proxy is your own app code; it additionally needs ai plus a provider SDK (e.g. @ai-sdk/openai) server-side.

Quick start

// main.ts
import { createApp } from 'vue'
import { createAgenticUi } from '@agentic-ui/vue'
import App from './App.vue'

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

<!-- any component: declare what the agent may do here -->
<script setup lang="ts">
import { reactive } from 'vue'
import { useAgentCapability } from '@agentic-ui/vue'

const todos = reactive<{ text: string; done: boolean }[]>([])

useAgentCapability({
  name: 'todos.list',
  description: 'List the current todo items.',
  inputSchema: { type: 'object', properties: {} },
  risk: 'read',
  execute: () => todos,
})

useAgentCapability({
  name: 'todos.add',
  description: 'Add a new todo item.',
  inputSchema: { type: 'object', properties: { text: { type: 'string' } }, required: ['text'] },
  risk: 'mutating',
  execute: ({ text }: { text: string }) => { todos.push({ text, done: false }) },
})
</script>

This makes the actions available to the AI. The library checks the input before running them and, because todos.add is mutating, can ask the user to approve the exact change first. When the component leaves the page, the actions are no longer available. The AI receives an unavailable result and can adjust what it does next.

Next steps

To connect these capabilities to an LLM, use bindRegistryToChat from @agentic-ui/vue/transport (or drop in @agentic-ui/widget, which owns the transport). A small server proxy keeps the API key out of the browser, and useConfirmationQueue lets you add an approval screen for risky actions. The integration guide walks through the full setup, including the proxy, transport, and approvals.