React Widget Component Library

Out-of-the-box Digital Employee UI components, build a complete interactive interface in 5 minutes.

Why Choose Widget?

Out-of-the-box

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

import {PilotKit, ConversationList, Subtitle, ControlPanel} from '@bdky/aaas-pilot-kit-react-widget';
import '@bdky/aaas-pilot-kit-react-widget/styles.css';

function App() {
    return (
        <PilotKit token="xxx" figureId="xxx" ttsPer="xxx">
            <ConversationList />
            <Subtitle />
            <ControlPanel />
        </PilotKit>
    );
}

Auto-adaptive

PC and mobile auto-switch layouts, no additional code needed. All components support variant property:

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

Customizable (when you need)

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

// Custom rendering
<Subtitle>
    {({speakerName, fullText}) => (
        <div className="my-subtitle">
            <span>{speakerName}</span>
            <p>{fullText}</p>
        </div>
    )}
</Subtitle>

Widget vs SDK

SDK refers to @bdky/aaas-pilot-kit-react, providing underlying Hooks and event capabilities, requiring you to implement UI yourself.

Scenario	Recommended Solution
Quick launch, low UI requirements	Widget
Need completely custom UI design	React SDK
80% default + 20% fine-tuning	Widget + Style customization
Deep integration into existing design system	React SDK

Not sure? Try Widget first

If you encounter limitations, it's easy to switch to SDK - they share the same underlying APIs. The Hooks and events used internally by Widget come from @bdky/aaas-pilot-kit-react.

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 box
RecommendedQuestions	Recommended question list

Overlay

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

Layout Helpers

Component	Purpose
Layout	Flex layout container
FillAdapter	Adaptive fill space

Development Tools

Component	Purpose
DebugPanel	Debug panel, displays events and states

Next Steps

• Installation Guide - npm/yarn installation
• Quick Start - 5 minutes to get running
• Responsive Adaptation - PC/mobile adaptation guide

Technical Support

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