Building a voice agent for an Angular app

With Alan AI SDK for Web, you can create a voice agent or chatbot and embed it to your Angular app. The Alan AI Platform provides you with all the tools and leverages the industry’s best Automatic Speech Recognition (ASR), Spoken Language Understanding (SLU) and Speech Synthesis technologies to quickly build an AI agent from scratch.

In this tutorial, we will create a simple voice enabled Angular app. The app users will be able to click the voice agent button and give custom voice commands, and the AI agent will reply to them.

What you will learn

  • How to add a voice interface to an Angular app

  • How to write simple voice commands for an Angular app

What you will need

To go through this tutorial, make sure Node.js and the Angular CLI are installed on your machine. For details, see Angular documentation.

Step 1. Sign up for Alan AI Studio

First, we need to sign up for Alan AI Studio — the web IDE where we will create the dialog script for our voice agent.

  1. Go to Alan AI Studio.

  2. Sign up with a Google or GitHub account or with your email address.

  3. In Alan AI Studio, click Create Project. Select to create an empty project and give it any name you want.

Step 2: Create an Angular app

Now let’s create a simple Angular app.

  1. On your machine, navigate to the folder in which the app will reside and run the following command:

    Terminal
    ng new my-app
    

    The ng new command will prompt about features to include in the app. Press Enter on your keyboard to create an app with default features.

  2. Switch to the folder with the app:

    Terminal
    cd my-app
    
  3. Start the app:

    Terminal
    ng serve --open
    
    ../../../_images/angular-app-starter.png

Step 3: Install the Alan AI Web component

We need to add the Alan AI Web component to the app. In the app folder, install the Alan AI Web component with the following command:

Terminal
npm i @alan-ai/alan-sdk-web

Step 4: Add the Alan AI button to the app

Now we need to update our app to add the Alan AI button to it.

  1. In the src/app folder, open the app.component.ts file.

  2. At the top of the file, add the import statement for the Alan AI Web component:

    Angular app
    import alanBtn from "@alan-ai/alan-sdk-web";
    
  3. In the AppComponent class, add the Alan AI button:

    Angular app
    export class AppComponent {
    
        alanBtnInstance;
    
        constructor(){
            this.alanBtnInstance = alanBtn({
                key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
                host: 'v1.alan.app',
            });
        }
    }
    
  4. In the key field above, we need to replace YOUR_KEY_FROM_ALAN_STUDIO_HERE with the Alan AI SDK key for our Alan AI Studio project. In Alan AI Studio, at the top of the code editor, click Integrations, copy the value provided in the Alan SDK Key field and paste this value to key.

    Angular app
    export class AppComponent {
    
        alanBtnInstance;
    
        constructor(){
            this.alanBtnInstance = alanBtn({
                key: '28b4365114e0f2f67d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage',
                host: 'v1.alan.app',
            });
        }
    }
    

Step 5. Add voice commands

Let’s add some voice commands so that we can interact with our Angular app through voice. In Alan AI Studio, open the project and, in the code editor, add the following intents:

Dialog script
intent(`What is your name?`, p => {
    p.play(`It's Alan, and yours?`);
});

intent(`How are you doing?`, p => {
    p.play(`Good, thank you. What about you?`);
});

Now in the app click the Alan AI button and ask: What is your name? and How are you doing? Alan AI will give responses provided in the intents.

../../../_images/angular-app-button.png