@itannix/vue

Vue SDK for the ItanniX Voice AI platform. Add real-time voice interactions to your Vue app with a simple composable or component.

Installation

npm install @itannix/vue

Quick Start (Composable)

<template>
  <div>
    <p>Status: {{ status }}</p>
    <button @click="connect" :disabled="status !== 'disconnected'">
      Connect
    </button>
    <button @click="disconnect" :disabled="status === 'disconnected'">
      Disconnect
    </button>
    <div v-for="(msg, i) in messages" :key="i">
      <p><strong>{{ msg.role }}:</strong> {{ msg.text }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useVoiceClient } from '@itannix/vue';

const messages = ref<Array<{ role: string; text: string }>>([]);

const { status, connect, disconnect, sendFunctionResult } = useVoiceClient({
  workspaceKey: 'your-workspace-key',
  clientId: 'your-client-id',
  clientSecret: 'your-client-secret',
  onTranscript: (text) => {
    messages.value.push({ role: 'user', text });
  },
  onAssistantMessage: (text, done) => {
    if (done) {
      messages.value.push({ role: 'assistant', text });
    }
  },
  onFunctionCall: (name, args, callId) => {
    sendFunctionResult(callId, { success: true });
  },
  onError: (error) => {
    console.error('Connection error:', error);
  }
});
</script>

Quick Start (Component)

<template>
  <div>
    <VoiceAssistant
      ref="assistantRef"
      workspace-key="your-workspace-key"
      client-id="your-client-id"
      client-secret="your-client-secret"
      @status-change="handleStatusChange"
      @transcript="handleTranscript"
      @assistant-message="handleAssistantMessage"
    />
    <p>Status: {{ status }}</p>
    <button @click="assistantRef?.connect()">Connect</button>
    <button @click="assistantRef?.disconnect()">Disconnect</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VoiceAssistant } from '@itannix/vue';
import type { ConnectionStatus } from '@itannix/vue';

const assistantRef = ref<InstanceType<typeof VoiceAssistant> | null>(null);
const status = ref<ConnectionStatus>('disconnected');

function handleStatusChange(newStatus: ConnectionStatus) {
  status.value = newStatus;
}

function handleTranscript(text: string) {
  console.log('You:', text);
}

function handleAssistantMessage(text: string, done: boolean) {
  if (done) console.log('Assistant:', text);
}
</script>

Composable Options

| Option | Type | Required | Description | |--------|------|----------|-------------| | workspaceKey | string | Yes | Your workspace API key from workspace settings | | clientId | string | Yes | Your ItanniX client ID | | clientSecret | string | Yes | Your client secret | | serverUrl | string | No | API server URL (default: https://api.itannix.com) | | onTranscript | (text: string) => void | No | Called when user speech is transcribed | | onAssistantMessage | (text: string, done: boolean) => void | No | Called with assistant response (streaming) | | onFunctionCall | (name, args, callId) => void | No | Called when assistant invokes a function | | onError | (error: Error) => void | No | Called on connection errors |

Composable Return Value

| Property | Type | Description | |----------|------|-------------| | status | Ref<ConnectionStatus> | Current connection status (reactive) | | connect | () => Promise<void> | Start voice connection | | disconnect | () => void | End voice connection | | sendFunctionResult | (callId, result) => void | Send function call result back to assistant |

Component Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | workspaceKey | string | Yes | Your workspace API key from workspace settings | | clientId | string | Yes | Your ItanniX client ID | | clientSecret | string | Yes | Your client secret | | serverUrl | string | No | API server URL |

Component Events

| Event | Payload | Description | |-------|---------|-------------| | statusChange | ConnectionStatus | Connection status changed | | transcript | string | User speech transcribed | | assistantMessage | { text: string, done: boolean } | Assistant response (streaming) | | functionCall | { name: string, args: object, callId: string } | Function call from assistant | | error | Error | Connection or runtime error |

Component Methods

Access via template ref:

<VoiceAssistant ref="assistantRef" ... />

<script setup>
const assistantRef = ref();

// Connect
assistantRef.value?.connect();

// Disconnect
assistantRef.value?.disconnect();

// Send function result
assistantRef.value?.sendFunctionResult(callId, { success: true });

// Get status
console.log(assistantRef.value?.status);
</script>

License

MIT