Customize AI Assistant appearance

UIKit

Overview

The AI Assistant chat UI can be presented independently using AIAssistantViewController. You can also customize its appearance to match your application.

The chat UI provides color customization options for its appearance. You can customize background colors, text colors, and accent colors for messages, input fields, and the overall container.

Appearance Customization

To customize the appearance of AIAssistantViewController, configure the aiAssistantAppearance property using these three main appearance types:

  • AIAssistantAppearance - Main type that controls how the entire chat interface looks. Set the background color and customize message bubble and input field styling all in one place.
  • AIAssistantMessageAppearance - Controls the background colors, text colors, and colors for interactive elements like links for message bubbles from AI and users.
  • AIAssistantInputAppearance - Controls the input area's text field background and send button color.

Example Implementation 

// Create and configure the AI Assistant view controller
let aiAssistantViewController = AIAssistantViewController(session: aiSession)


// Configure input field appearance
let chatInputAppearance = AIAssistantInputAppearance(
    inputBackgroundColor: UIColor(red: 0.98, green: 0.98, blue: 0.98, alpha: 1),
    sendButtonColor: UIColor(red: 0.435, green: 0.710, blue: 0.475, alpha: 1)
)


// Configure message appearance
let chatMessageAppearance = AIAssistantMessageAppearance(
    userMessageBackgroundColor: UIColor(red: 0.85, green: 0.93, blue: 0.87, alpha: 1.0),
    aiMessageBackgroundColor: UIColor(red: 0.92, green: 0.89, blue: 0.98, alpha: 1.0),
    userMessageTextColor: UIColor(red: 0.18, green: 0.24, blue: 0.21, alpha: 1.0),
    aiMessageTextColor: UIColor(red: 0.16, green: 0.13, blue: 0.32, alpha: 1.0),
    interactiveAccentColor: UIColor(red: 0.38, green: 0.53, blue: 0.96, alpha: 1.0)
)


// Create overall appearance configuration
let appearance = AIAssistantAppearance(
    backgroundColor: UIColor(red: 0.98, green: 0.98, blue: 0.98, alpha: 1),
    messageAppearance: chatMessageAppearance,
    inputAppearance: chatInputAppearance
)


// Apply the appearance
aiAssistantViewController.aiAssistantAppearance = appearance


// Present the AI Assistant
present(aiAssistantViewController, animated: true)
AI Assistant with custom appearance