Provider Context

React Context Provider is responsible for creating/destroying the underlying createAaaSPilotKit controller and passing state to child components.

AaaSPilotKitProvider

Basic Usage

import {AaaSPilotKitProvider} 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: 'your-token',
        robotId: 'your-robot-id'
    }
};

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

Props Interface

interface IAaaSPilotKitProviderProps<AS extends BaseAgentService = BaseAgentService> {
    children: React.ReactNode;
    options: IOptions<AS>;
}

Parameter Description:

• children: React child components
• options: AaaS Pilot Kit configuration options, see Configuration Options Documentation

Language Configuration

You can configure ASR recognition and TTS synthesis language through the lang parameter:

import {AaaSPilotKitProvider, Language} from '@bdky/aaas-pilot-kit-react';

function App() {
    return (
        <AaaSPilotKitProvider
            options={{
                token: 'your-auth-token-here',
                figureId: '209337',
                ttsPer: 'LITE_audiobook_female_1',
                lang: Language.ENGLISH,  // Use Language constant
                // or lang: 'en'           // Use string directly
                agentConfig: {
                    token: 'your-token',
                    robotId: 'your-robot-id'
                }
            }}
        >
            <Dashboard />
        </AaaSPilotKitProvider>
    );
}

Supported languages include: Chinese(zh), English(en), Japanese(ja), Spanish(es), Russian(ru), Korean(ko), Vietnamese(vi), German(de), Indonesian(id), Thai(th).

For detailed language configuration instructions, please refer to Configuration Options Documentation.

Lifecycle Management

Provider automatically manages controller lifecycle:

function App() {
    const [config, setConfig] = useState(initialOptions);

    return (
        <AaaSPilotKitProvider options={config}>
            {/* Provider automatically re-creates controller when options change */}
            <button onClick={() => setConfig(newOptions)}>
                Switch Configuration
            </button>
            <Dashboard />
        </AaaSPilotKitProvider>
    );
}

Automatic Handling:

1. First render: Automatically creates controller instance
2. Configuration change: Automatically re-creates controller when options changes
3. Component unmount: Automatically executes controller.dispose() to release resources
4. Event monitoring: Synchronously monitors core events, maintains internal state

Internal State Management

Provider internally maintains the following states and automatically synchronizes:

State	Type	Description	Corresponding Event
isReady	boolean	Whether controller is ready	ready
isMuted	boolean	Whether muted	mute
isRendering	boolean	Whether currently broadcasting	is_rendering_change

These states are obtained through useAaaSPilotKit hook:

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

    return (
        <div>
            <div>Ready status: {isReady ? 'Ready' : 'Initializing'}</div>
            <div>Muted status: {isMuted ? 'Muted' : 'Normal'}</div>
            <div>Broadcasting status: {isRendering ? 'In progress' : 'Idle'}</div>
        </div>
    );
}

Context Interface

interface IAaaSPilotKitProvider<AS extends BaseAgentService = BaseAgentService> {
    controller: ReturnType<typeof createAaaSPilotKit<AS>> | null;
    isReady: boolean;
    isMuted: boolean;
    isRendering: boolean;
    create: () => void;
    dispose: () => void;
}

Method Description:

• create(): Manually create controller instance
• dispose(): Manually destroy controller instance

Note

Directly calling create/dispose will skip normal lifecycle management, only use in special scenarios.

Advanced Usage

Multi-Instance Management

function MultiInstanceApp() {
    return (
        <div>
            {/* Instance 1 */}
            <AaaSPilotKitProvider options={customerServiceOptions}>
                <CustomerServicePanel />
            </AaaSPilotKitProvider>

            {/* Instance 2 */}
            <AaaSPilotKitProvider options={salesOptions}>
                <SalesPanel />
            </AaaSPilotKitProvider>
        </div>
    );
}

ErrorBoundary

import {ErrorBoundary} from 'react-error-boundary';

function AppWithErrorBoundary() {
    return (
        <ErrorBoundary
            fallback={<div>Digital Employee initialization failed</div>}
            onError={(error) => console.error('Provider error:', error)}
        >
            <AaaSPilotKitProvider options={options}>
                <Dashboard />
            </AaaSPilotKitProvider>
        </ErrorBoundary>
    );
}

Performance Optimization

Configuration Stabilization

function OptimizedProvider() {
    // ✅ Use useMemo to stabilize configuration object
    const options = useMemo(() => ({
        token: process.env.REACT_APP_AUTH_TOKEN,
        figureId: '209337',
        ttsPer: 'LITE_audiobook_female_1',
        // agentConfig: Required if no custom agentService is provided
        agentConfig: {
            token: process.env.REACT_APP_AGENT_TOKEN,
            robotId: process.env.REACT_APP_ROBOT_ID
        }
    }), []);

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

// ❌ Avoid creating new object on every render
function BadProvider() {
    return (
        <AaaSPilotKitProvider options={{
            token: 'your-auth-token-here',
            figureId: '209337', // New object on every render!
            // ...
        }}>
            <Dashboard />
        </AaaSPilotKitProvider>
    );
}

Lazy Initialization

function LazyProvider({ children }) {
    const [shouldInit, setShouldInit] = useState(false);

    if (!shouldInit) {
        return (
            <div>
                <button onClick={() => setShouldInit(true)}>
                    Start Digital Employee
                </button>
            </div>
        );
    }

    return (
        <AaaSPilotKitProvider options={options}>
            {children}
        </AaaSPilotKitProvider>
    );
}

Debugging Tips

Development Mode Enhancement (Logs Overflow)

function EnhancedProvider({ children, options }) {
    const enhancedOptions = useMemo(() => ({
        ...options,
        env: process.env.NODE_ENV,
        enableDebugMode: process.env.NODE_ENV === 'development'
    }), [options]);

    return (
        <AaaSPilotKitProvider options={enhancedOptions}>
            {children}
        </AaaSPilotKitProvider>
    );
}