Customize the Agentic Interface look and feel

Alan AI provides advanced customization options to let you align the Agentic Interface appearance with your app design and branding. Using Alan AI Studio, you can customize:

  • Agentic Interface button: change appearance of the Agentic Interface button that triggers the Alan AI Agentic Interface.

  • Alan AI Agentic Interface: tailor the Alan AI Agentic Interface to fit your design preferences.

Use case

Using Alan AI Studio, you can customize the Agentic Interface button to match the app branding colors and style. Additionally, you can adjust the Agentic Interface window colors and fonts to reflect the app theme.

Prerequisites

To successfully follow this exercise, make sure you have signed up for Alan AI Studio and created a project for the Agentic Interface. For details, see Sign up for Alan AI Studio.

Customize the Agentic Interface button

To customize the Agentic Interface button:

  1. In Alan AI Studio, at the top of the code editor, click Integrations.

  2. To the right of Visual styles, click Configure.

  3. Use the Alan Button tab to set the button size, adjust colors and replace the default logo on top of the button with a custom one.

  4. To the right of the Button Style Name field, click Save to save the created style.

    ../../_images/button.png

Customize the Alan AI Agentic Interface

To customize the Alan AI Agentic Interface:

  1. In Alan AI Studio, at the top of the code editor, click Integrations.

  2. To the right of Visual styles, click Configure.

  3. Click the Text Chat tab.

  4. Use the Text Chat view to adjust the visual styles of the Agentic Interface UI.

  5. To the right of the Button Style Name field, click Save to save the created style.

    ../../_images/chat.png

Validation

Reload the running sample app and make sure the button and Agentic Interface styles are applied.

../../_images/chat-updated.png