@agentskit/vue

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

Why

• One contract, every framework — useChat returns the exact same shape as the React / Svelte / Solid / Angular / RN / Ink bindings.
• 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 — all core features work identically to @agentskit/react.

Install

npm install @agentskit/vue @agentskit/adapters

Peers: vue ^3.4.

Quick example

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

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

<template>
  <ChatContainer>
    <Message v-for="m in chat.messages.value" :key="m.id" :message="m" />
    <InputBar :chat="chat" />
  </ChatContainer>
</template>

API

• useChat(config) — composable returning ChatReturn (messages, status, send, retry, stop, clear, approve, deny, edit).
• Headless components: <ChatContainer>, <Message>, <InputBar>, <ToolCallView>, <ToolConfirmation>, <ThinkingIndicator>.

Ecosystem

| Package | Role | |---------|------| | @agentskit/core | ChatReturn contract | | @agentskit/adapters | LLM providers | | @agentskit/tools | Built-in + integration tools | | @agentskit/memory | Chat + vector backends | | @agentskit/react · svelte · solid · react-native · angular · ink | Same contract, different host |

Contributors

License

MIT — see LICENSE.

Docs

Full documentation · GitHub