Skip to main content

Quick Start

Get a complete digital employee interactive interface running in 5 minutes.

Minimal Example​

<script setup lang="ts">
import {PilotKit, ControlPanel} from '@bdky/aaas-pilot-kit-vue3-widget';
import '@bdky/aaas-pilot-kit-vue3-widget/styles.css';
</script>

<template>
    <div style="width: 100vw; height: 100vh">
        <PilotKit
            token="your-token"
            figureId="your-figure-id"
            ttsPer="your-tts-per"
            :agentConfig="{robotId: 'your-robot-id'}"
        >
            <ControlPanel />
        </PilotKit>
    </div>
</template>

This minimal example will:

  • Render the digital human avatar
  • Display voice/text input control panel
  • Automatically handle ASR, TTS, and conversation flow

Complete Example​

Below is a complete example containing all commonly used components:

<script setup lang="ts">
import {ref} from 'vue';
import {
    PilotKit,
    ConversationList,
    Subtitle,
    ControlPanel,
    RecommendedQuestions,
    StartupScreen,
    LoadingOverlay,
    StatusOverlay,
    Layout,
    FillAdapter,
    useIsMobile,
    type IPilotKitRef
} from '@bdky/aaas-pilot-kit-vue3-widget';
import '@bdky/aaas-pilot-kit-vue3-widget/styles.css';

const showStartup = ref(false);
const showLoading = ref(true);
const showBusy = ref(false);
const showConversationList = ref(false);

const isMobile = useIsMobile();
const pilotKitRef = ref<IPilotKitRef | null>(null);

function handleQuestionClick(question: string) {
    pilotKitRef.value?.input(question);
}

function handleReconnect() {
    showBusy.value = false;
    showLoading.value = true;
}
</script>

<template>
    <!-- Busy state -->
    <StatusOverlay
        v-if="showBusy"
        show
        message="Sorry, I'm busy right now, please try again later"
        buttonText="Call Again"
        @buttonClick="handleReconnect"
    >
        <template #avatar>
            <img src="/avatar.jpg" alt="" />
        </template>
    </StatusOverlay>

    <div v-else style="width: 100vw; height: 100vh">
        <PilotKit
            ref="pilotKitRef"
            token="your-token"
            figureId="your-figure-id"
            ttsPer="your-tts-per"
            :agentConfig="{robotId: 'your-robot-id'}"
            prologue="Hello, I'm a digital employee, how can I help you?"
            interruptible
            @ready="showLoading = false"
            @needManualActivation="showLoading = false; showStartup = true"
            @busy="showBusy = true"
        >
            <Layout direction="vertical" hCenter>
                <FillAdapter />

                <!-- Conversation list -->
                <ConversationList
                    v-if="showConversationList"
                    @close="showConversationList = false"
                />

                <!-- Recommended questions -->
                <RecommendedQuestions
                    :questions="['Introduce yourself', 'What can you do?']"
                    :style="{marginBottom: '10px'}"
                    @questionClick="handleQuestionClick"
                />

                <!-- Subtitle (PC display) -->
                <Subtitle
                    v-if="!isMobile && !showConversationList"
                    showSpeaker
                    expandable
                    :style="{marginBottom: '10px'}"
                    @expand="showConversationList = true"
                />

                <!-- Control panel -->
                <ControlPanel :style="{marginBottom: '30px'}" />
            </Layout>

            <!-- iOS manual activation page -->
            <StartupScreen
                :show="showStartup"
                title="Start Conversation"
                buttonText="Activate"
                hintText="For better recognition results, please experience in a quiet environment"
                @ready="showStartup = false"
            >
                <template #avatar>
                    <img src="/avatar.jpg" alt="" />
                </template>
            </StartupScreen>

            <!-- Loading -->
            <LoadingOverlay
                :show="showLoading"
                description="Connecting..."
            >
                <template #avatar>
                    <img src="/avatar.jpg" alt="" />
                </template>
            </LoadingOverlay>
        </PilotKit>
    </div>
</template>

Code Breakdown​

1. PilotKit Core Container​

PilotKit is the core of the entire application, it:

  • Internally includes AaaSPilotKitProvider, no need to manually wrap
  • Automatically mounts digital human rendering
  • Provides ref to access controller methods
<script setup lang="ts">
import {ref} from 'vue';
import {PilotKit, type IPilotKitRef} from '@bdky/aaas-pilot-kit-vue3-widget';
import '@bdky/aaas-pilot-kit-vue3-widget/styles.css';

const pilotKitRef = ref<IPilotKitRef | null>(null);
</script>

<template>
    <PilotKit
        ref="pilotKitRef"
        token="xxx"
        figureId="xxx"
        ttsPer="xxx"
        :agentConfig="{...}"
        prologue="..."
        @ready="onReady"
    >
        <!-- Child components -->
    </PilotKit>
</template>

2. Layout​

Use Layout + FillAdapter to implement flexible layouts:

<template>
    <Layout direction="vertical" hCenter>
        <FillAdapter />        <!-- Occupy remaining space -->
        <ConversationList />   <!-- Conversation list -->
        <ControlPanel />       <!-- Control panel -->
    </Layout>
</template>

3. Overlay Components​

Overlay components are used to display different states:

  • StartupScreen: iOS iframe scenarios require user manual activation
  • LoadingOverlay: Loading state
  • StatusOverlay: Busy, timeout, and other states

4. Responsive Adaptation​

Use useIsMobile() Composable to detect device type:

<script setup lang="ts">
import {useIsMobile} from '@bdky/aaas-pilot-kit-vue3-widget';
import '@bdky/aaas-pilot-kit-vue3-widget/styles.css';

const isMobile = useIsMobile();
</script>

<template>
    <!-- Mobile doesn't show subtitle, directly shows conversation list -->
    <Subtitle v-if="!isMobile" />
</template>

Next Steps​