PilotKit

Core container component, integrates Provider and digital human rendering, is the root component for all Widget components.

Basic Usage

<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>
    <PilotKit
        token="your-token"
        figureId="your-figure-id"
        ttsPer="your-tts-per"
        :agentConfig="{robotId: 'your-robot-id'}"
    >
        <ControlPanel />
    </PilotKit>
</template>

Using Ref

Through ref you can 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);

function handleSendMessage() {
    pilotKitRef.value?.input('Hello');
}

function handleInterrupt() {
    pilotKitRef.value?.interrupt();
}
</script>

<template>
    <PilotKit ref="pilotKitRef" v-bind="props">
        <button @click="handleSendMessage">Send Message</button>
        <button @click="handleInterrupt">Interrupt</button>
    </PilotKit>
</template>

Props

Required Properties

Property	Type	Description
token	string	Authentication Token
figureId	string	Digital human avatar ID
ttsPer	string	TTS voice ID

Agent Configuration

Property	Type	Description
agentConfig	{robotId: string; token?: string}	Agent configuration, choose one with agentService
agentService	typeof BaseAgentService	Custom AgentService class

agentConfig vs agentService

• Use Baidu default Agent: Configure agentConfig
• Use private Agent API: Provide custom agentService, see Custom AgentService

Behavior Configuration

Property	Type	Default	Description
prologue	string	-	Opening remark, automatically broadcast after SDK ready
interruptible	boolean	false	Whether to allow interrupting broadcast
timeoutSec	number	120	No operation timeout time (seconds)
typeDelay	number	100	Chinese typewriter effect delay (ms)
enTypeDelay	number	50	English typewriter effect delay (ms)
minSplitLen	number	10	Streaming text minimum split length

Rendering Configuration

Property	Type	Default	Description
rendererMode	'cloud-native' | 'standard'	'standard'	Rendering mode
scaleX	number	1	Horizontal scaling
scaleY	number	1	Vertical scaling
translateX	number	0	Horizontal offset
translateY	number	0	Vertical offset

Internationalization Configuration

Property	Type	Default	Description
locale	string	'zh'	UI interface language (v1.1.2+)
messages	Partial<I18nMessages>	-	Custom translation messages (v1.1.2+)

For detailed configuration, see Internationalization (i18n)

Style Properties

Property	Type	Description
class	string	Custom class name
style	CSSProperties	Custom style
backgroundUrl	string	Background image URL
autoMount	boolean	Whether to auto-mount, default true

Events

Event	Type	Description
@ready	() => void	SDK ready
@needManualActivation	() => void	Need manual activation (iOS iframe)
@asrStart	() => void	ASR started
@asrMessage	(payload) => void	ASR recognition result
@renderStart	(payload) => void	Started broadcasting
@inactivity	(payload) => void	User inactivity timeout
@busy	(payload) => void	System busy
@interrupt	(payload) => void	Broadcast interrupted
@conversationChange	(payload) => void	Conversation content changed
@isRenderingChange	(isRendering) => void	Broadcasting status changed
@replyStart	(payload) => void	Reply started
@ttft	(payload) => void	First token latency metric

Event Payload Types

Event callback Payload type definitions are detailed in Vue 3 SDK Composables Documentation.

Ref Methods

Through ref you can access following methods:

Method	Type	Description
input	(text: string) => void	Send text input
mute	(muted: boolean) => void	Set mute status
interrupt	() => void	Interrupt current broadcast
dispose	() => void	Destroy instance
playPrologue	() => void	Play opening remark
playFromFullText	(text: string) => void	Play complete text
playFromStreamText	(text: string) => void	Stream play text
keepAlive	() => void	Keep connection active
checkAudioDevice	() => Promise<Result>	Check audio device
activateManually	() => Promise<void>	Manual activation (iOS)
getIsReady	() => boolean	Get ready status
getIsMuted	() => boolean	Get mute status
getIsRendering	() => boolean	Get broadcasting status

Provide/Inject

PilotKit internally creates PilotKitContext, child components can access through usePilotKitContext:

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

const pilotKit = usePilotKitContext();

function sendMessage() {
    pilotKit?.input('Hello');
}
</script>

<template>
    <button @click="sendMessage">Send Message</button>
</template>

Style Customization

CSS Class Names

Class Name	Description
.apk-pilot-kit	Root container
.apk-pilot-kit__mask	Mask layer (children rendering position)

Background Image

Use backgroundUrl to set background:

<template>
    <PilotKit
        backgroundUrl="https://example.com/background.jpg"
        ...
    />
</template>

Related

• Vue 3 SDK Provider - Underlying Provider documentation
• Configuration Options - Complete configuration options reference