@agentskit/vue

@agentskit/vue

Profile: concise-package

Vue 3 composable + headless chat components. Same ChatReturn contract every AgentsKit framework binding ships — swap frameworks without changing your agent.

Tags: ai · agents · llm · agentskit · vue · vue3 · composable · chat · streaming

Verified proof

• Package metadata and tests live under packages/vue/.
• Package guide: https://www.agentskit.io/docs/reference/packages/vue
• Stability map: docs/STABILITY.md

How this fits the ecosystem

@agentskit/vue brings the shared AgentsKit chat contract to Vue 3 with composables, streaming, tools, memory, and headless components.

• AgentsKit: compose it with the other packages in this repo to build agents from small, swappable parts.
• Registry: look for ready agents and templates that already use this layer at registry.agentskit.io.
• Playbook: learn the production patterns behind this layer at playbook.agentskit.io.

Docs: package guide · agent handoff

Why

• One controller contract, framework-specific views — useChat returns shared chat state/actions; component props remain binding-specific.
• Composition API native — values surface as refs; drops into <script setup> with zero glue.
• Headless by default — components emit data-ak-* attributes; bring your own styling.
• Streaming, tools, HITL — the shared state/action contract follows @agentskit/react; component props and exports are Vue-specific, not full parity.

Install

npm install @agentskit/vue @agentskit/adapters

Peers: vue ^3.4.

Quick example

<script setup lang="ts">
import { useChat } from '@agentskit/vue'
import type { ChatConfig } from '@agentskit/core'

declare const adapter: ChatConfig['adapter']

const chat = useChat({
  // Inject an adapter backed by your server/edge endpoint. Never ship provider secrets here.
  adapter,
})
</script>

<template>
  <div data-ak-chat>
    <p v-for="m in chat.messages" :key="m.id" :data-ak-role="m.role">{{ m.content }}</p>
    <form @submit.prevent="chat.send(chat.input)">
      <input
        :value="chat.input"
        :disabled="chat.status === 'streaming'"
        @input="(e) => chat.setInput((e.target as HTMLInputElement).value)"
      />
    </form>
  </div>
</template>

State is reactive — read chat.messages / chat.input directly (no .value).

API

• useChat(config) — composable returning ChatReturn: reactive messages, status, input, error, usage + actions send(text), setInput(v), stop, retry, clear, approve, deny, edit, regenerate. Call inside setup() / <script setup>; scope dispose unsubscribes and stops in-flight work (idempotent).
• <ChatRoot> — controller-free data-ak-chat root with a default slot for application shells that already use useChat.
• <ChatContainer :config> — batteries-included headless container.
• Headless primitives: Message, InputBar (blocks submit/Enter while streaming), Markdown, CodeBlock, ToolCallView (aria-expanded on the toggle), ThinkingIndicator, ToolConfirmation — each emits data-ak-* only.

Ecosystem

Contributors

License

MIT — see LICENSE.

Docs

Full documentation · GitHub

Quick start

import '@agentskit/vue'
console.log('@agentskit/vue loaded')

Maturity and compatibility

• Stability: beta — see docs/STABILITY.md
• Node.js 20+ and TypeScript strict mode
• Published as @agentskit/vue

Contributing

See CONTRIBUTING.md and the monorepo LICENSE.