Building a voice AI-Native Interface for a Vue app

With Zenera SDK for Web, you can create a voice AI-Native Interface and embed it to your Vue app. The Zenera 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-Native 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 AI-Native Interface button and give custom voice commands, and the AI-Native 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 Zenera Studio

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

Go to Zenera Studio.
Sign up with a Google or GitHub account or with your email address.
In Zenera 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:
```
vue create my-app
```
Switch to the folder with the app:
```
cd my-app
```
Start the app:
```
npm run serve
```
or
```
yarn serve
```

Step 3: Install the Zenera Web component

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

npm i @zenera/zenera-sdk-web

Step 4: Add the Zenera AI-Native Interface to the app

Now we need to update our app to add the Zenera AI-Native Interface to it.

In the src folder, open the main.js file.
At the top of the file, add the import statement for the Zenera Web component:
```
import zeneraBtn from "@zenera/zenera-sdk-web";
```

Below, add the code for the Zenera AI-Native Interface:

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

// Adding the Zenera AI-Native Interface
zeneraBtn({ 
    key: 'YOUR_KEY_FROM_ZENERA_STUDIO_HERE',
    host: 'v1.alan.app',
});

In the key field above, we need to replace YOUR_KEY_FROM_ZENERA_STUDIO_HERE with the Zenera SDK key for our Zenera Studio project. In Zenera Studio, at the top of the code editor, click Integrations, copy the value provided in the Zenera SDK Key field and paste this value to key.
```
zeneraBtn({ 
    key: '28b4365114e0f2f67d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage',
    host: 'v1.alan.app',
});
```

Step 5: Add voice commands

Now let's add some simple voice commands to the dialog script in Zenera Studio:

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

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

Now in the app click the Zenera AI-Native Interface and ask: What is your name? and How are you doing? The AI-Native Interface will give responses provided in the intents.

Angular Integration Ember Integration