Skip to main content

4. Customization



Intro​

Customize your AI assistant to perfectly fit your brand and user experience. This guide covers how to adjust the AI characteristics, change the assistant’s voice, and style the assistant button to match your application’s design. Tailor every aspect to make the AI assistant truly yours.



1. AI Characteristics​

Customize the assistant behavior via the Admin Panel by providing your custom prompt and training data.

By default, AiAssistantProvider supplies the AI model with the current screen content. To disable, set scrapeContent to false. Scraped content supplements your custom prompts added from the admin panel.



2. Assistant Voice​

Change AI assistant's voice via the Admin Panel by selecting your preferred voice in the application settings.



3. Button Design​

3.1 Button Color​

Modify the colors of the AiAssistantButton at different states:

const customStateColors = {
    STATE_IDLE: '#4a6cf6', // Bright Blue
    STATE_LISTENING_START: '#F64A7B', // Bright Pink
    STATE_THINKING_START: '#4ac2f6', // Sky Blue
    STATE_SPEAKING_START: '#4af67f', // Light Green
};

<AiAssistantButton stateColors={customStateColors} />;

3.2 Button Style & Position​

Pass a style object to adjust dimensions, position, and appearance:

const customStyle = {
    // Positioning and layout properties
    position: 'relative', // Positioning of the button, 'absolute' or 'relative' to its normal position
    bottom: 'auto', // Distance from the bottom of its container (use with 'position: absolute')
    right: 'auto', // Distance from the right of its container (use with 'position: absolute')
    zIndex: 999, // Z-index for layering controls

    // Dimension properties
    width: '100px', // Button width
    height: '100px', // Button height

    // Font and color properties
    fontSize: '50px', // Font size of the icon/text inside the button
    color: '#FFF', // Color of the text/icon inside the button

    // Border properties
    border: 'none', // Border properties
    borderRadius: '20%', // Border radius to control the curvature of the button corners

    // Box model properties
    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.5)', // Box shadow properties
    transition: 'background-color 0.3s ease-in-out', // Transition effect for hover or click events

    // Flexbox properties
    display: 'flex', // CSS display property
    justifyContent: 'center', // Aligns children (e.g., icon) horizontally
    alignItems: 'center', // Aligns children (e.g., icon) vertically
};

<AiAssistantButton style={customStyle} />;

For example: To override default positioning, set position: 'relative' and bottom/right: 'auto'. This allows custom placement within your container.


3.3 Button Advanced Styling​

Apply CSS classes for complex styling:

.my-custom-button {
    padding: 10px 20px;
    transition: all 0.5s ease;

    /* Hover effect */
    &:hover {
        background-color: #365f8c;
        transform: scale(1.1);
    }

    /* Responsive adjustments */
    @media (max-width: 600px) {
        width: 100%;
        font-size: 14px;
    }
}

<AiAssistantButton className="my-custom-button" />

Use the style prop for inline adjustments or className for stylesheet-based customizations.