Building a voice Agentic Interface for a Vue app¶

With Alan AI SDK for Web, you can create a voice Agentic Interface and embed it to your Vue 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 Agentic Interface from scratch.

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

What you will learn¶

How to add a voice interface to a Vue app
How to write simple voice commands for a Vue app

What you will need¶

To go through this tutorial, make sure the following tools are installed on your machine:

Vue CLI. For details, see Vue documentation.
Node.js or yarn.

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.

Go to Alan AI Studio.
Sign up with a Google or GitHub account or with your email address.
In Alan AI Studio, click Create Project. Select to create an empty project and give it any name you want.

Step 2: Create a Vue app¶

Now let’s create a simple Vue app:

On your machine, navigate to the folder in which the app will reside and run the following command:
Terminal¶
```
vue create my-app
```
Switch to the folder with the app:
Terminal¶
```
cd my-app
```
Start the app:
Terminal¶
```
npm run serve
```
or
Terminal¶
```
yarn serve
```

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 agentic interface to the app¶

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

In the src folder, open the main.js file.
At the top of the file, add the import statement for the Alan AI Web component:
Vue app¶
```
import alanBtn from "@alan-ai/alan-sdk-web";
```

Below, add the code for the Alan AI agentic interface:

Vue app¶

new Vue({
    render: h => h(App),
}).$mount('#app')

// Adding the Alan AI agentic interface
alanBtn({
    key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
    host: 'v1.alan.app',
    onCommand: (commandData) => {
        if (commandData.command === 'go:back') {
            // Call the client code that will react to the received command
        }
    },
});

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.

Vue app¶

alanBtn({
    key: '28b4365114e0f2f67d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage',
    host: 'v1.alan.app',
    onCommand: (commandData) => {
        if (commandData.command === 'go:back') {
            // Call the client code that will react to the received command
        }
    },
});

Step 5. Add voice commands¶

Let’s add some voice commands so that we can interact with our Vue 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 agentic interface and ask: What is your name? and How are you doing? The Agentic Interface will give responses provided in the intents.