Vue 3 Widget Component Library

Ready-to-use digital employee UI components, build a complete interactive interface in 5 minutes.

Why Choose Widget?

Ready to Use

No need to design UI from scratch, combine components like building blocks:

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

<template>
    <PilotKit token="xxx" figureId="xxx" ttsPer="xxx">
        <ConversationList />
        <Subtitle />
        <ControlPanel />
    </PilotKit>
</template>

Automatic Adaptation

PC and mobile automatically switch layouts, no extra code needed. All components support variant property:

• auto: Automatically detect device type (default)
• mobile: Force mobile style
• desktop: Force desktop style

Customizable (When Needed)

Each component supports style overriding and custom rendering, won't be limited by "encapsulation":

<template>
    <!-- Custom render -->
    <Subtitle v-slot="{speakerName, fullText}">
        <div class="my-subtitle">
            <span>{{ speakerName }}</span>
            <p>{{ fullText }}</p>
        </div>
    </Subtitle>
</template>

Widget vs SDK

SDK refers to @bdky/aaas-pilot-kit-vue3, which provides underlying composables and event capabilities, requiring you to implement UI yourself.

Scenario	Recommended Approach
Quick launch, low UI requirements	Widget
Need fully customized UI design	Vue 3 SDK
80% default + 20% tweaks	Widget + Style customization
Deep integration into existing design system	Vue 3 SDK

Not sure? Try Widget first

If you encounter limitations, switching to SDK is also very easy—they share the same underlying APIs. Widget's internal composables and events come from @bdky/aaas-pilot-kit-vue3.

Component Overview

Core Container

Component	Purpose
PilotKit	Core container, integrates Provider + digital human rendering

Message Display

Component	Purpose
ConversationList	Message history list
Conversation	Single message
Subtitle	Real-time subtitle

Interactive Control

Component	Purpose
ControlPanel	Voice/text input control panel
Input	Independent text input
RecommendedQuestions	Recommended questions list

Overlay

Component	Purpose
StartupScreen	Startup guide page (iOS manual activation)
LoadingOverlay	Loading state
StatusOverlay	Generic status prompts (busy, timeout, etc.)

Layout Helper

Component	Purpose
Layout	Flex layout container
FillAdapter	Adaptive fill space

Development Tools

Component	Purpose
DebugPanel	Debug panel, displays events and status

Next Steps

• Installation Guide - npm/yarn installation
• Quick Start - Get up and running in 5 minutes
• Responsive Adaptation - PC/mobile adaptation guide

Technical Support

• Underlying SDK documentation: Vue 3 SDK
• Email support: zhangwenxi@baidu.com