Ainative Vue Sdk

---

name: ainative-vue-sdk description: Use @ainative/vue-sdk to add AI chat to Vue 3 apps. Use when (1) Installing @ainative/vue-sdk, (2) Using the useChat composable in Vue components, (3) Providing AINative config with provideAINative, (4) Displaying reactive chat messages, (5) Building chat UI with Vue 3 Composition API. Published npm package v1.0.0.

---

@ainative/vue-sdk

Vue 3 composables for AINative chat completions.

Install

npm install @ainative/vue-sdk

Setup: provideAINative

// main.ts
import { createApp } from 'vue';
import { provideAINative } from '@ainative/vue-sdk';
import App from './App.vue';
const app = createApp(App);
app.provide('ainative', {
  apiKey: import.meta.env.VITE_AINATIVE_API_KEY,
  baseUrl: 'https://api.ainative.studio',
});
app.mount('#app');

Or provide inside a component:

useChat Composable

useChat Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | model | string | — | Model ID (e.g. claude-3-5-sonnet-20241022) | | initialMessages | Message[] | [] | Seed the conversation |

useChat Return

| Field | Type | Description | |-------|------|-------------| | messages | Ref | Reactive message list | | isLoading | Ref | True during request | | error | Ref | Last error | | sendMessage | (msgs: Message[]) => Promise<...> | Send next turn | | reset | () => void | Clear conversation |

useCredits Composable

Nuxt Integration

// plugins/ainative.client.ts
import { provideAINative } from '@ainative/vue-sdk';
export default defineNuxtPlugin(() => {
  provideAINative({ apiKey: useRuntimeConfig().public.ainativeApiKey });
});

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: { ainativeApiKey: process.env.VITE_AINATIVE_API_KEY }
  }
});

Exports

import {
  useChat,
  useCredits,
  useAINative,
  provideAINative,
  type Message,
  type UseChatOptions,
  type UseChatReturn,
  type AINativeError,
} from '@ainative/vue-sdk';

References

packages/sdks/vue/src/composables/useChat.ts — useChat implementation

packages/sdks/vue/src/composables/useCredits.ts — useCredits implementation

packages/sdks/vue/src/composables/useAINative.ts — Config injection

packages/sdks/vue/src/index.ts — Package exports