Skip to main content

Vue SDK

Reactive composables for Vue 3 applications using the Composition API.

npm install @ainative/vue-sdk

Requires: Vue 3.0+

Setup​

// 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',
  projectId: 'your-project',
});

app.mount('#app');

useChat​

<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​

<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​

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

Next Steps​