AI Kit Vue

Vue 3 composables for building AI-powered interfaces with streaming support, built on @ainative/ai-kit-core.

npm install @ainative/ai-kit-vue

Requires: Vue 3 (vue@^3.0.0)

Composables

useAIStream

Stream AI completions with reactive state for messages, streaming status, errors, and token usage.

<script setup lang="ts">
import { useAIStream } from '@ainative/ai-kit-vue';

const { messages, isStreaming, error, send, reset, retry, stop, usage } =
  useAIStream({
    apiUrl: 'https://api.ainative.studio/api/v1/chat/completions',
    apiKey: import.meta.env.VITE_AINATIVE_API_KEY,
    model: 'gpt-oss-120b',
  });
</script>

<template>
  <div>
    <div v-for="m in messages" :key="m.id">{{ m.role }}: {{ m.content }}</div>
    <p v-if="isStreaming">…</p>
    <p v-if="error" class="error">{{ error.message }}</p>
    <button @click="send('Hello!')" :disabled="isStreaming">Send</button>
    <button @click="stop" v-if="isStreaming">Stop</button>
  </div>
</template>

config is a StreamConfig from @ainative/ai-kit-core (API URL, key, model, and generation options).

Returns (UseAIStreamResult):

Field	Type	Description
messages	ShallowRef<Message[]>	Conversation messages (reactive)
isStreaming	ShallowRef<boolean>	Whether a response is currently streaming
error	ShallowRef<Error | null>	Last error, if any
usage	ShallowRef<Usage>	Token usage for the stream
send(content)	(string) => Promise<void>	Send a user message and stream the reply
retry()	() => Promise<void>	Re-run the last send
stop()	() => void	Abort the in-flight stream
reset()	() => void	Clear messages and state

useConversation

Persist and load a conversation (via a ZeroDB-backed store), with optional auto-save and pagination.

<script setup lang="ts">
import { useConversation } from '@ainative/ai-kit-vue';
import { store } from './store'; // your ai-kit-core conversation store

const convo = useConversation({
  store,
  conversationId: 'thread-123',
  autoSave: true,
  autoSaveDelay: 1000,
  pageSize: 50,
  autoLoad: true,
  onLoad: (c) => console.log('loaded', c.messages.length),
  onError: (e) => console.error(e),
});
</script>

Options (UseConversationOptions):

Option	Type	Description
store	store	Conversation store to read/write
conversationId	string	ID of the conversation to load/persist
autoSave	boolean	Persist changes automatically
autoSaveDelay	number	Debounce (ms) before auto-saving
pageSize	number	Messages per page when loading
autoLoad	boolean	Load on mount
ttl	number	Cache TTL
metadata	Record<string, any>	Arbitrary conversation metadata
onLoad / onSave / onError	callbacks	Lifecycle hooks

See also

• AI Kit Overview — the full toolkit and shared core
• AI Kit React — the React SDK
• AI Kit Svelte — the Svelte SDK