---
title: "AI Kit Vue"
description: "Vue 3 composables for AI-powered interfaces — streaming completions and persisted conversations via the Composition API."
canonical: "https://docs.ainative.studio/docs/ai-kit/vue"
last-updated: "2026-10-03T21:47:10.764Z"
---

# AI Kit Vue

Source: https://docs.ainative.studio/docs/ai-kit/vue

> Vue 3 composables for AI-powered interfaces — streaming completions and persisted conversations via the Composition API.

# AI Kit Vue

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

```bash
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.

```vue
<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.

```vue
<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](/docs/ai-kit/overview) — the full toolkit and shared core
- [AI Kit React](/docs/ai-kit/react) — the React SDK
- [AI Kit Svelte](/docs/ai-kit/svelte) — the Svelte SDK