Bắt đầu

agentic-ui-vue để AI assistant giúp người dùng thao tác trong app Vue của bạn — trong khi app vẫn toàn quyền kiểm soát. Component khai báo capability: các hành động có input được định nghĩa rõ, mô tả rõ ràng và nhãn risk. AI yêu cầu app của bạn chạy một trong các hành động đó; trước khi bất cứ thứ gì chạy, request đi qua validate → permission → confirmation → execute.

Các package

Package	Mô tả
@agentic-ui/core	Registry, luật capability, pipeline an toàn, chọn target, và audit event
@agentic-ui/schema	Các type JSON Schema (tập con draft-07), validator có thể thay thế, và adapter zod
@agentic-ui/protocol	Định dạng dữ liệu (ToolCall/ToolResult/CatalogEntry) và mapping MCP + AI SDK
@agentic-ui/vue	Plugin Vue và các composable theo lifecycle (useAgentCapability, useAgent, …)
@agentic-ui/client	Binding transport cho Vercel AI SDK (bindRegistryToChat) và serialize catalog
@agentic-ui/testing	Công cụ test capability như một hàm thường, không cần LLM hay Vue

Cài đặt

pnpm add @agentic-ui/vue @agentic-ui/client ai @ai-sdk/openai

Bắt đầu nhanh

// 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>

Đoạn code này mở các hành động cho AI dùng. Thư viện kiểm tra input trước khi chạy và, vì todos.add là mutating, có thể yêu cầu người dùng duyệt đúng thay đổi đó trước. Khi component rời khỏi trang, các hành động không còn khả dụng nữa. AI nhận về kết quả unavailable và có thể tự điều chỉnh bước tiếp theo.

Bước tiếp theo

Để kết nối các capability này với một LLM, dùng bindRegistryToChat từ @agentic-ui/client. Một server proxy nhỏ giữ API key ngoài browser, và useConfirmationQueue cho phép bạn thêm màn hình duyệt cho các hành động rủi ro. Hướng dẫn tích hợp đi qua toàn bộ quá trình setup, bao gồm proxy, transport, và luồng duyệt.