Skip to main content

Quick Start

AaaS Pilot Kit wrapper library for React applications, including Provider, Context, and common hooks.

Installation​

Use the public package @bdky/aaas-pilot-kit-react.

npm

$ npm install @bdky/aaas-pilot-kit-react

yarn

$ yarn add @bdky/aaas-pilot-kit-react
Dependencies Note

Core capabilities depend on @bdky/aaas-pilot-kit, please refer to Vanilla SDK Configuration Options for complete configuration items IOptions.

Quick Start​

Basic Usage​

import {
    AaaSPilotKitProvider,
    useAaaSPilotKit,
    useAaaSPilotKitEvents,
    useConversationList
} from '@bdky/aaas-pilot-kit-react';
import {type IOptions} from '@bdky/aaas-pilot-kit';

const options: IOptions = {
    token: 'your-auth-token-here',
    figureId: '209337',
    ttsPer: 'LITE_audiobook_female_1',
    // agentConfig: Required if no custom agentService is provided
    agentConfig: {
        token: 'xxxx',
        robotId: 'xxxx'
    }
};

function App() {
    return (
        <AaaSPilotKitProvider options={options}>
            <Dashboard />
        </AaaSPilotKitProvider>
    );
}

function Dashboard() {
    const {controller, isReady, isMuted, isRendering} = useAaaSPilotKit();
    const {conversationList} = useConversationList();

    useAaaSPilotKitEvents({
        onReady: () => console.log('Digital Employee ready'),
        onAsrMessage: payload => console.log('ASR:', payload.text)
    });

    return (
        <section>
            <div>Status: {isReady ? 'Ready' : 'Initializing'}</div>
            <div>Muted: {isMuted ? 'Yes' : 'No'}</div>
            <div>Rendering: {isRendering ? 'In progress' : 'Idle'}</div>
            <div>Conversations: {conversationList.length}</div>
            <button onClick={() => controller?.input('Hello')}>Send message</button>
        </section>
    );
}

Complete Example​

import {useRef, useEffect} from 'react';
import {
    AaaSPilotKitProvider,
    useAaaSPilotKit,
    useAaaSPilotKitEvents,
    useConversationList,
    useConversation
} from '@bdky/aaas-pilot-kit-react';

// Configuration options
const options = {
    token: 'your-auth-token-here',
    figureId: '209337',
    ttsPer: 'LITE_audiobook_female_1',
    // agentConfig: Required if no custom agentService is provided
    agentConfig: {
        token: 'your-token',
        robotId: 'your-robot-id'
    },
    // Other configurations...
};

function App() {
    return (
        <AaaSPilotKitProvider options={options}>
            <div className="app">
                <AvatarContainer />
                <ChatPanel />
                <ControlPanel />
            </div>
        </AaaSPilotKitProvider>
    );
}

// Digital Human container
function AvatarContainer() {
    const {controller, isReady} = useAaaSPilotKit();
    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(
        () => {
            if (controller && containerRef.current) {
                controller.mount(containerRef.current);
            }
        },
        [isReady, controller]
    );

    if (!isReady) {
        return (
            <div>Connecting...</div>
        );
    }

    return (
        <div
            ref={containerRef}
            className="avatar-container"
            style={{width: '400px', height: '600px'}}
        />
    );
}

// Chat panel
function ChatPanel() {
    const {conversationList} = useConversationList();

    return (
        <div className="chat-panel">
            <h3>Conversation History</h3>
            {conversationList.map(conversation => (
                <ConversationItem
                    key={conversation.id}
                    conversation={conversation}
                />
            ))}
        </div>
    );
}

// Single conversation item
function ConversationItem({conversation}) {
    const {conversationContents} = useConversation(conversation);

    return (
        <div className="conversation-item">
            <div className="conversation-type">
                {conversation.type === 'client' ? 'User' : 'AI Assistant'}
            </div>
            <div className="conversation-content">
                {conversationContents.map(item => (
                    <div key={item.uiId} className={`content-item ${item.completed ? 'completed' : 'typing'}`}>
                        {item.content}
                    </div>
                ))}
            </div>
        </div>
    );
}

// Control panel
function ControlPanel() {
    const {controller, isReady, isMuted, isRendering} = useAaaSPilotKit();

    useAaaSPilotKitEvents({
        onReady: () => console.log('Digital Employee ready'),
        onError: (error) => console.error('Error:', error),
        onAsrMessage: (payload) => console.log('Speech recognition:', payload.text),
        onConversationChange: (payload) => console.log('Conversation update:', payload)
    });

    const handleSendMessage = () => {
        const message = prompt('Enter message:');
        if (message && controller) {
            controller.input(message);
        }
    };

    const handleToggleMute = () => {
        if (controller) {
            controller.mute(!isMuted);
        }
    };

    const handleInterrupt = () => {
        if (controller) {
            controller.interrupt('User manual interrupt');
        }
    };

    return (
        <div className="control-panel">
            <div className="status">
                <span>Status: {isReady ? 'Ready' : 'Initializing'}</span>
                <span>Rendering: {isRendering ? 'In progress' : 'Idle'}</span>
            </div>
            <div className="controls">
                <button
                    onClick={handleSendMessage}
                    disabled={!isReady}
                >
                    Send Message
                </button>
                <button
                    onClick={handleToggleMute}
                    disabled={!isReady}
                >
                    {isMuted ? 'Unmute' : 'Mute'}
                </button>
                <button
                    onClick={handleInterrupt}
                    disabled={!isReady || !isRendering}
                >
                    Interrupt
                </button>
            </div>
        </div>
    );
}

export default App;

TypeScript Support​

React SDK provides complete TypeScript type support:

import type {
    IAaaSPilotKitProvider,
    IAaaSPilotKitProviderProps,
    IUseAaaSPilotKitResult,
    IUseAaaSPilotKitEventsProps,
    IUseConversationResult,
    IUseConversationListResult
} from '@bdky/aaas-pilot-kit-react';

// Component props type definition
interface DashboardProps {
    className?: string;
    onReady?: () => void;
}

function Dashboard({ className, onReady }: DashboardProps) {
    const {controller, isReady}: IUseAaaSPilotKitResult = useAaaSPilotKit();

    useAaaSPilotKitEvents({
        onReady: onReady
    });

    // ...
}

Integrating with State Management Libraries​

Integrating with Redux​

import {useDispatch, useSelector} from 'react-redux';
import {updateConversations, setAvatarStatus} from './store/avatarSlice';

function Dashboard() {
    const dispatch = useDispatch();
    const {isReady} = useAaaSPilotKit();

    useAaaSPilotKitEvents({
        onReady: () => {
            dispatch(setAvatarStatus('ready'));
        },
        onConversationChange: (payload) => {
            dispatch(updateConversations(payload));
        }
    });

    // ...
}

Integrating with Zustand​

import {useAvatarStore} from './store/avatarStore';

function Dashboard() {
    const setStatus = useAvatarStore(state => state.setStatus);
    const addConversation = useAvatarStore(state => state.addConversation);

    useAaaSPilotKitEvents({
        onReady: () => setStatus('ready'),
        onConversationAdd: addConversation
    });

    // ...
}

Next Steps​