Alan Electron Framework

Integrating with Alan

To integrate an Electron app with Alan:

  1. Add the Alan Web SDK to your app. You can do it in two ways:

    • With the npm package

    • In the browser library mode

    To install the Alan Web SDK with the npm package:

    1. In the Terminal, run the command:

      npm install @alan-ai/alan-sdk-web --save
    2. Include the following <script> tag in the index.html file:

      Client app
      <script src="node_modules/@alan-ai/alan-sdk-web/dist/alan_lib.min.js"></script>

    To load the Alan Web SDK in the browser library mode, add the alan_lib.min.js library to the index.html file using the <script> tag:

    Client app
    <script type="text/javascript" src=""></script>
  2. Add the Alan button to the index.html file:

    Client app
        onCommand: (commandData) => {
          if (commandData.command === 'go:back') {
            // Call the client code that will react to the received command


Regularly update the @alan-ai/alan-sdk-web package your project depends on. To check if a newer version is available, run npm outdated. To update the alan package, run npm update @alan-ai/alan-sdk-web. For more details, see npm documentation.

Specifying the Alan button parameters

You can specify the following parameters for the Alan button added to your app:






The Alan SDK key for a project in Alan Studio.


JSON object

The authentication or configuration data to be sent to the voice script. For details, see authData.



The element where Alan button will be added. If no rootEl is provided, the Alan button is added to the body.



The property signaling whether the overlay fade effect must be used when the microphone permission prompt in the browser is displayed. The overlay effect makes the prompt more noticeable and helps make sure users provide microphone access to the voice assistant.



A callback for handling commands from the Alan voice script. In this callback, you can set up logic on how your app must react to commands received from the voice script. For details, see onCommand handler.



A callback for receiving the connection state of the Alan button. For details, see onButtonState handler.



A callback Responsible for handling events received from Alan. For details, see onEvent handler.

Changing the Alan button position

By default, the Alan button is placed in the bottom right corner of the window. To change the Alan button position, you can use the following options for the alanBtn variable:

  • left: sets the Alan button position from the left edge

  • right: sets the Alan button position from the right edge

  • top: sets the Alan button position from the top edge

  • bottom: sets the Alan button position from the bottom edge

  • zIndex: sets the z-order of the Alan button

Client app
var alanBtnInstance = alanBtn({
   key: "0717498b05e694d0b083b897e50a49102e956eca572e1d8b807a3e2338fdd0dc/stage",
   onConnectionStatus: function(status) {
      // status could be connected or disconnected
   rootEl: document.getElementById("alan-btn"),
   bottom: '50px',
   left: '50px',
   zIndex: 10

What’s next?

Upon integration, your app gets the in-app voice assistant that can be activated with the Alan button displayed on top of the app’s UI.

To build a full-fledged multimodal UX, you can use Alan’s SDK toolkit:


Client API methods

Enable communication between the client app and Alan and perform actions in the app.

Learn more


Alan handlers

Handle commands, understand the button state and capture events in the client app.

Learn more


Example apps

Find and explore examples of voice-enabled apps on the Alan AI GitHub repository.

View on GitHub