Integrating with Alan

To integrate an Angular 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. Import alanBtn to your Angular component:

      Client app
      import alanBtn from "@alan-ai/alan-sdk-web";

    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 your component:

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

For details, see Specifying the Alan button parameters.


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.

Trying the Alan sample app

In our GitHub repository, you can find a sample Angular app already integrated with Alan. Download the app to get an idea of how you can voice enable your Angular app and trigger actions in the app with voice commands.

What’s next?

Go to Script concepts to learn about Alan concepts and functionality you can use to create a voice script.