Skip to main content

Introduction

Vanilla JavaScript SDK with no framework dependencies, can be used in any frontend framework.

Installation​

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

npm

$ npm install @bdky/aaas-pilot-kit

yarn

$ yarn add @bdky/aaas-pilot-kit

Quick Start​

import {createAaaSPilotKit} from '@bdky/aaas-pilot-kit';

// Initialize with your configuration
const controller = createAaaSPilotKit({
    token: 'your-auth-token-here',
    figureId: '209337',
    ttsPer: 'LITE_audiobook_female_1',
    // agentConfig: Required if no custom agentService is provided
    agentConfig: {
        // Keyue Customer Service Agent token
        token: 'xxxx',
        // Keyue Outbound Call Agent robotId
        robotId: 'xxxx'
    }
});

// Listen to events
controller.emitter.on('ready', () => {
    // Use non-streaming API to play opening greeting
    controller.playFromFullText('Hello, how can I help you today?');
});

controller.emitter.on('conversation_add', (conversation) => {
    console.log('New conversation content:', conversation.text);
});

// Mount
await controller.mount(containerElement);

Best Practices​

1. Wait for Ready Event​

Always wait for the ready event before starting interactions:

controller.emitter.on('ready', () => {
    // Safely start conversation
    controller.input('Welcome message');
});

2. Handle Manual Activation​

Check and handle browser autoplay restrictions

  • ⚠️ Currently known to require manual activateManually() call in iOS WeChat to ensure proper rendering and audio playback
let activity = false;
controller.emitter.on('ready', () => {
    activity = true;
});

// In user click handler
activationButton.addEventListener('click', () => {
    if (activity && controller.checkNeedsManualActivation()) {
        controller.activateManually();
    }
});

3. Implement Proper Error Handling​

controller.emitter.on('error', (error) => {
    // Always log errors
    logger.error('AaaS Pilot Kit Error', error);
});

4. Resource Cleanup​

Always destroy the controller when component unmounts:

// Cleanup on page unload
window.addEventListener('beforeunload', () => {
    controller.dispose();
});

// Or in appropriate lifecycle (React example)
useEffect(
    () => {
        const cleanup = () => {
            controller.dispose();
        };
        return cleanup;
    },
    []
);

TypeScript Support​

Includes comprehensive TypeScript definitions:

import type {
    IAaaSPilotKitController,
    IAaaSPilotKitEmitter,
    IOptions
} from '@bdky/aaas-pilot-kit';

// Full type safety
const options: IOptions = {
    token: 'your-auth-token-here',
    figureId: '209337',
    ttsPer: 'LITE_audiobook_female_1',
    // ... other options with auto-completion
};

// Typed event listeners
controller.emitter.on('conversation_add', conversation => {
    // conversation is fully typed
    console.log(conversation.id, conversation.text, conversation.type);
});

Next Steps​