---
title: "Vue SDK"
description: "Vue 3 composables for chat completions and credit management"
canonical: "https://docs.ainative.studio/docs/sdks/vue"
last-updated: "2026-10-03T21:47:10.764Z"
---

# Vue SDK

Source: https://docs.ainative.studio/docs/sdks/vue

> Vue 3 composables for chat completions and credit management

# Vue SDK

Reactive composables for Vue 3 applications using the Composition API.

```bash
npm install @ainative/vue-sdk
```

**Requires:** Vue 3.0+

## Setup

```typescript
// main.ts
import { createApp } from 'vue';
import { useAINative } from '@ainative/vue-sdk';
import App from './App.vue';

const app = createApp(App);

// Configure globally via provide/inject
app.provide('ainative-config', {
  apiKey: 'your-api-key',
  // Note: projectId is NOT a config option — pass it per ZeroDBClient call
});

app.mount('#app');
```

## useChat

```vue
<script setup lang="ts">
import { useChat } from '@ainative/vue-sdk';

const { messages, sendMessage, isLoading, error } = useChat({
  model: 'meta-llama/llama-3.3-70b-instruct',
  systemPrompt: 'You are a helpful assistant.',
});

async function handleSend(text: string) {
  await sendMessage(text);
}
</script>

<template>
  <div>
    <div v-for="msg in messages" :key="msg.id">
      <strong>{{ msg.role }}:</strong> {{ msg.content }}
    </div>
    <p v-if="isLoading">Thinking...</p>
    <p v-if="error" class="error">{{ error.message }}</p>
    <input @keyup.enter="handleSend($event.target.value)" placeholder="Type a message..." />
  </div>
</template>
```

## useCredits

```vue
<script setup lang="ts">
import { useCredits } from '@ainative/vue-sdk';

const { balance, usage, isLoading, refresh } = useCredits();
</script>

<template>
  <div>
    <p>Balance: {{ balance }} credits</p>
    <p>Used: {{ usage }} credits</p>
    <button @click="refresh">Refresh</button>
  </div>
</template>
```

## TypeScript Types

```typescript
import type {
  AINativeConfig,
  Message,
  ChatCompletionResponse,
  CreditBalance,
  AINativeError,
  ChatState,
  CreditsState,
  UseChatOptions,
  UseChatReturn,
  UseCreditsOptions,
  UseCreditsReturn,
} from '@ainative/vue-sdk';
```

## Next Steps

- [Svelte SDK](/docs/sdks/svelte) — Svelte stores and actions
- [TypeScript SDK](/docs/sdks/typescript) — Core SDK for all APIs
- [API Reference](/docs/api/overview) — REST API docs