Skip to main content

Introduction

AaaS Pilot Kit SDK optimized for Vue 3 applications, based on Composition API and dependency injection.

Features​

  • 🪝 Composition API - useAaaSPilotKit, useConversation, useConversationList and other composables
  • 🎯 Dependency Injection - provideAaaSPilotKit follows Vue 3 provide/inject standard paradigm, manages global state, implements cross-component state sharing
  • 📦 TypeScript Support - Complete type definitions, consistent with core library types
  • ⚡ Performance Optimization - Built-in reactive state management, automatic controller lifecycle handling
  • 🔄 Event System - Simplified event listener interface, supports streaming content updates
  • 💡 Vue 3 Native - Fully leverages Vue 3's reactive system and Composition API

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

Core API​

Provider and Dependency Injection​

FunctionFeatureUse Case
provideAaaSPilotKitCreate and provide controller instanceInitialize in root component
useAaaSPilotKitGet controller and stateAccess functionality in child components
injectAaaSPilotKitUnderlying dependency injection functionAdvanced usage and custom wrapping

Core Composables​

ComposableFeatureReturn Value
useAaaSPilotKitGet controller and state{controller, isReady, isMuted, isRendering, create, dispose}
useAaaSPilotKitEventsBind event listenersvoid
useConversationListGet conversation list{conversationList}
useConversationHandle single conversation content{conversationContents}

Event Handling​

Simplified event listener interface, supports all core library events:

<script setup lang="ts">
    useAaaSPilotKitEvents({
        onReady: () => console.log('Ready'),
        onAsrMessage: (payload) => console.log('ASR Result:', payload.text),
        onRenderStart: (payload) => console.log('Start Rendering:', payload),
        onConversationChange: (payload) => updateUI(payload)
    });
</script>

Advanced Features​

Custom AgentService​

When you need to connect to a private Agent streaming API protocol, you can create a custom Agent service class by extending BaseAgentService:

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

    const options = {
        token: 'your-auth-token-here',
        figureId: '209337',
        ttsPer: 'LITE_audiobook_female_1',
        agentService: CustomAgentService // Replace agentConfig, then agentConfig can be omitted
    };

    // Pass in custom AgentService
    provideAaaSPilotKit(options);
</script>

⚠️ Note: When using custom agentService, agentConfig configuration is not available.

Detailed Implementation Guide: Custom AgentService Configuration

Streaming Conversation Rendering​

Parent Component - Get Conversation List

<template>
    <div>
        <ConversationItem
            v-for="conversation in conversationList"
            :key="conversation.id"
            :conversation="conversation"
        />
    </div>
</template>

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

    const {conversationList} = useConversationList();
</script>

Child Component - Render Single Conversation Content

<template>
    <div>
        <div
            v-for="item in conversationContents"
            :key="item.uiId"
            :class="['message', item.mod]"
        >
            <strong>{{ item.mod }}</strong>
            <div>{{ item.content }}</div>
            <span>{{ item.completed ? 'Complete' : 'In Progress' }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
    import {useConversation} from '@bdky/aaas-pilot-kit-vue3';
    import {toRef} from 'vue';
    import type {AnyConversation} from '@bdky/aaas-pilot-kit';

    const props = defineProps<{
        conversation: AnyConversation | undefined;
    }>();

    const {conversationContents} = useConversation(toRef(props, 'conversation'));
</script>
Why need toRef?

Since conversation is passed in via props, directly destructuring props.conversation loses reactivity. Using toRef(props, 'conversation') creates a ref pointing to the props property, ensuring that when the conversation passed from the parent component changes, useConversation can reactively update conversationContents.

Lifecycle Management​

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

    const {controller, create, dispose} = useAaaSPilotKit();
    // Manually control lifecycle
    const restartSession = async () => {
        dispose();
        await nextTick();
        create();
    };
</script>

Complete Example​

View detailed usage examples and best practices:

Technical Support​