Quick Start

Installation

Unified use of public package @bdky/aaas-pilot-kit-vue3.

npm

$ npm install @bdky/aaas-pilot-kit-vue3

yarn

$ yarn add @bdky/aaas-pilot-kit-vue3

Dependency Note

Core functionality depends on @bdky/aaas-pilot-kit, please refer to Vanilla SDK Configuration Options to learn about complete configuration options IOptions.

Quick Start

Basic Usage

App.vue - Parent Component (Provide Provider)

<template>
    <div class="app">
        <!-- Digital human rendering container -->
        <div ref="digitalHumanRef" class="digital-human-container"></div>
        <PilotComponent />
    </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {provideAaaSPilotKit} from '@bdky/aaas-pilot-kit-vue3';
import {type IOptions} from '@bdky/aaas-pilot-kit';
import PilotComponent from './PilotComponent.vue';

const options: IOptions = {
    token: 'your-auth-token-here',
    figureId: '209337',
    ttsPer: 'LITE_audiobook_female_1',
    // agentConfig: If custom agentService is not provided, this config is required
    agentConfig: {
        token: 'xxxx',
        robotId: 'xxxx'
    }
};

// Provide AaaSPilotKit instance to all child components
const provider = provideAaaSPilotKit(options);

// Digital human rendering container ref
const digitalHumanRef = ref<HTMLDivElement>();

// Mount digital human to DOM
onMounted(() => {
    if (digitalHumanRef.value) {
        provider.controller.value?.mount(digitalHumanRef.value);
    }
});
</script>

<style scoped>
.digital-human-container {
    width: 100%;
    height: 400px;
    position: relative;
}
</style>

PilotComponent.vue - Child Component (Use Composables)

<template>
    <div>
        <div>Status: {{ isReady ? 'Ready' : 'Initializing' }}</div>
        <div>Muted: {{ isMuted ? 'Yes' : 'No' }}</div>
        <div>Rendering: {{ isRendering ? 'In Progress' : 'Idle' }}</div>
        <div>Conversation Count: {{ conversationList.length }}</div>
        <button @click="controller?.input('Hello')">
            Send Message
        </button>
    </div>
</template>

<script setup lang="ts">
import {
    useAaaSPilotKit,
    useConversationList
} from '@bdky/aaas-pilot-kit-vue3';

const {controller, isReady, isMuted, isRendering} = useAaaSPilotKit();
const {conversationList} = useConversationList();
</script>

Important Note

provideAaaSPilotKit and useAaaSPilotKit cannot be used in the same component!

• Parent Component: Call provideAaaSPilotKit(options) to provide instance, and can mount digital human container
• Child Component: Call useAaaSPilotKit() and other composables to use instance

This is a requirement of the Vue 3 provide/inject mechanism: provide must be in parent component, inject must be in child or descendant components.

Configuration Options

For complete configuration options, please refer to the core library documentation:

const options: IOptions = {
    token: 'your-auth-token-here',
    figureId: '209337',
    ttsPer: 'LITE_audiobook_female_1',
    // agentConfig: If custom agentService is not provided, this config is required
    agentConfig: {
        token: 'your-token',
        robotId: 'your-robot-id'
    },
    // Other configuration options...
};

Type Imports

The interfaces exported in the library are consistent with core types, convenient for referencing in business code:

import type {
    IAaaSPilotKitProvider,
    AaaSPilotKitProviderKey,
    IUseAaaSPilotKitResult,
    IUseAaaSPilotKitEventsProps,
    IUseConversationResult,
    IUseConversationListResult
} from '@bdky/aaas-pilot-kit-vue3';

// Import more types from core library
import type {
    IAaaSPilotKitEmitter,
    AnyConversation
} from '@bdky/aaas-pilot-kit';

Next Steps

• Provider Context - Learn about dependency injection and Provider detailed configuration
• Composables API - Learn more about all available composables
• FAQ - View common questions and best practices