@agentskit/vue — for agents

#Purpose

Vue 3 binding for the ChatReturn contract from @agentskit/core. Returns a reactive object via reactive() that tracks messages, input, and streaming state, and tears down automatically when the component scope is disposed.

#Install

npm install @agentskit/vue
# peer:
npm install vue

#Primary exports

• useChat(config): ChatReturn — Vue 3 composable, reactive via reactive() + auto-cleanup on scope dispose.
• <ChatContainer :config="..."> — headless container using data-ak-* attributes.

#Minimal example

<script setup lang="ts">
import { useChat } from '@agentskit/vue'
import { anthropic } from '@agentskit/adapters'

const adapter = anthropic({ apiKey: import.meta.env.VITE_ANTHROPIC_KEY, model: 'claude-sonnet-4-6' })
const chat = useChat({ adapter })
</script>

<template>
  <ul>
    <li v-for="m in chat.messages" :key="m.id">{{ m.role }}: {{ m.content }}</li>
  </ul>
  <input :value="chat.input" @input="chat.setInput(($event.target as HTMLInputElement).value)" />
  <button @click="chat.send(chat.input)">Send</button>
</template>

#Common patterns

• Composition API only: useChat uses Vue's reactive() and getCurrentScope() — it must be called inside setup() or <script setup>. Options API is not supported.
• <script setup> recommended: the composable's auto-cleanup relies on the component's effect scope; <script setup> wires this transparently.
• SSR / Nuxt: the adapter makes network calls directly from the browser. Wrap any component that calls useChat in <ClientOnly> (Nuxt) or a dynamic import with ssr: false to prevent server-side execution.
• Reactivity gotcha: do not destructure the return value — const { messages } = useChat(...) loses reactivity. Always access via chat.messages.

#Related

• @agentskit/core — ChatReturn contract.
• @agentskit/adapters — provider adapters.
• @agentskit/react, @agentskit/ink, @agentskit/svelte, @agentskit/solid, @agentskit/angular, @agentskit/react-native — sibling bindings.

#Source

• npm: https://www.npmjs.com/package/@agentskit/vue
• repo: https://github.com/AgentsKit-io/agentskit/tree/main/packages/vue