- read

Integrating AI Voice Assistant to a React JS Application

Shristi 1

Before starting, let’s first understand what is an AI Voice Assistant? Voice assistants are devices/apps that use voice recognition technology, natural language processing i.e., NLP, & AI to respond to humans. Using these technologies, the device synthesizes the user’s message, breaks it down, evaluates it, and offers a meaningful response. This pretty much sums up all about the AI Voice Assistants.

But you might be thinking what are these technologies and do we need to get familiar with all these technologies before starting the project? Well, the answer is NO! We can build a voice assistant without acing any of these technologies. Now the next question to ponder upon would be who made that possible..? Well, that’s where Alan comes into play. Alan is a full Voice AI Platform that allows anyone to integrate a contextual voice assistant into their app without having to know anything about Artificially Intelligence.

Now that we’ve established it, let’s get started on our project. Along with that, I’ll be providing you some insight into all the vital things you need to know; please try to follow along with me and you’ll get some fantastic results.

Project Set-up:

  1. Open your preferred code editor and in its terminal type: npx create-react-app my_trivia.
  2. This will create a folder named “my-trivia” for our project. You can name anything you like. Next, type: cd my-trivia && npm start ( Now it’ll take a few minutes to start the app and if you see something like “below” then we’re all set up to move forward.)

To integrate the Alan AI voice assistant we’ve to install Alan-AI SDK by running: npm install @alan-ai/alan-sdk-web — save

Now the very important prerequisite to using Alan’s features is that you must register yourself on its website. If you already have an account then login to your account and skip this part else follow along:-

  1. Click on the button ‘Get Started’ (it’ll redirect you to the sign-up page)
  2. Now, sign-up by email and log in to your newly made account.
  3. Click on the ‘Create Voice Assistant’ and select an empty project.
  4. I’ve already created a project named my_trivia (in the image below), you can name it whatever you want.

After you’ve done that, click on Open Project and you should be able to see Alan AI Studio:

Alan AI Studio

Here we develop Alan scripts that specify how Alan interacts with our React app and conversely. You can use the editor to write scripts that Alan will run in real-time. The Debugging Chat, the blue screen on the right, is to test those scripts.

In our project, we’re going to use some basic scripts. To get the gist of how Alan AI works, let’s explore some of its features.

Intents

In intent, you can specify a voice command that Alan should hear. Here’s how you’d go about doing it intent(‘Hello World’)

There are two parameters: first is what you give input (i.e., what you say) & the second is the response one can set for Alan to reply with, using a callback. That is done as follows :

intent(‘Hello Alan’,p=>{
p.play(‘Hey SJ’)
});

You receive access to a particular object inside the callback that you can use to do whatever in response to the command. You can pass a string to the play method on this object that represents the response to that intent.

The script that I’ve written is as follows:

intent('select category $(CAT Book|Film|Music)', p => {
p.play({"category": p.CAT.value})
p.play(`selecting category ${p.CAT.value} in a sec`);
});

For the time being copy & paste this into your project and we’ll come to this later. Also let’s, quickly verify the scripts using the Debugging window.

If it shows the results as in the image then it’s working fine(in the right, the blue panel).

Slots in Alan AI

Slots are nothing but what we call variables or dynamic values in any of our programming languages. I’m using User-defined slots to capture custom values by creating a dynamic list of values. Now, if I ask Alan

Select category book

Alan will reply and say

Selecting category book

Like this I can ask to use a similar command to select the category music too, only this time Alan will say ‘Selecting category music’ as we’ve specified this term with a slot.

So, I guess it’s clear why I called it variable earlier, as it gets replaced at runtime with the value that is obtained through the voice command. Here’s how we’ve done that:

intent('select category $(CAT Book|Film|Music)', p => {
p.play({"category": p.CAT.value})
p.play(`selecting category ${p.CAT.value} in a sec`);
});

NOTE: The list of values in user-defined slots is static: it remains intact for the whole dialog session. If you need to update the slot values during the dialog, refer to the documentation on dynamic slots.

Now whichever category the user says, only that category will be used in its response command. Also inside the callback, we need to access the value property on that variable name’s property present on the callback object.

Starting Project

I’m going to create a React application that fetches the data from an API called Trivia API, and display it on our screens. This API consists of a collection of 156,800 trivia questions. It has questions from various categories like television, animals, sports, food, books, and many more. Then we’ll integrate the Alan AI voice assistant into it.

App’s UI

In the root directory create a folder UI, inside it make two files App.module.css & Trivia.module.css. Then paste the following code into the former file.

Then paste the below code into the TriviaQue.module.css file

Now head to App.js, replace all the code in App.js(src/App.js) with the code given below:

With this code we’re going to create the layout of our project, and also I’m using Axios to fetch data from the API. The Next step will be to create the folder components in the root directory, and inside that create a file TriviaQue.js and paste the code given below:

Now head over to localhost:3000, your app should look like the image given below.

If it does, then congratulations you’ve completed the first phase of this project. Remember to check if it’s working. Click on any category and it should display a Question, its level & category with the answer.

Next, we’ll integrate Alan AI voice assistant into our app, to do this we’ll use custom hooks of React. Create another file in src/components and name it useAlan.js. In this file add the code given below:-

About Alan SDK Development Key

Using the alanBtnInstance ref, we construct a reference to store this button. This would provide us access to the Alan AI instance and the many methods it offers.

Finally, we initialize our Alan AI SDK within useEffect(). The development or staging server key must be passed here. You’ll discover an Integrations button in your Alan studio. Simply click on it.

The Alan SDK Key for your voice assistant project will be displayed. Copy that key and paste it into your code. Inside App.js, call the useAlan hook as shown useAlan({getQue});

And as soon as you do that, you should now see a blue microphone button on the right bottom of the page.

This is the Alan AI, integrated into the trivia app. Now we’ll use our already created question intent, and if you click the Alan button and ask it “Select category”, Alan will respond within our React app.

Now we need to pass the category from the script to our React app so that we can get it back from Alan’s response. To do so, we’ve written our intent in this manner:

intent('select category $(CAT Book|Film|Music)', p => {
p.play({"category": p.CAT.value})
p.play(`selecting category ${p.CAT.value} in a sec`);
});

We call a separate play function and pass it an object. We specify a category key with the value containing the category that the user has selected in the command inside this object. The Alan filters out the category property and its value. We‘ll use this object inside the onCommand callback in our useAlan hook.

Calling Trivia API through Alan

When we now run this intent from our React app, we’ll get access to this data inside a onCommand callback as shown:

We’ll invoke our Trivia API based on the category, for this purpose we’ve already passed the getQue function as props inside the custom hook useAlan. Also, I’ve created another function called fetchQue inside our useAlan hook:

const fetchQue=async(category, name)=>{const ques = getQue(category)}

Then, we invoke the fetchQue function inside the onCommand callback : if(data.category === ‘book’) fetchQue(‘10’,’book’);

Note: we’ve already embedded all the code in our useAlan.js file.

Now if you speak to Alan to select any category, our fetchQue() function will be invoked, our App component will interact with the Trivia API and you’ll see the information rendered on the app, in the following manner.

Now you might be wondering what if Alan is not able to interpret what the user said, or maybe if Alan encounters a situation where he doesn’t know how to respond, what’ll happen then? Well, to avoid such situations we do Error Handling in the scripts which can be done by fallback() functions.

For instance, if the user issues a voice command that Alan does not recognize, then Alan will respond with the default command message. The function shown below is used to set the default command.

fallback(p => {
p.play('Sorry, was not able to understand');
});

Conclusion:

In this article, we got familiar with the basics such as what are voice assistants? How to create a react app? What is Alan AI? & how is it helpful? How to work with its features such as intent? How to add Alan AI into react app? Integrating API, passing data into react application, & error handling.

The speech scripts are flexible and dynamic, hence developing with Alan is easy. You may debug your scripts and take complete control of your development-deployment stack after developing your voice script. After that, you can incorporate Alan into your app, just like we did! Feel free to check out the source code here.

For more information about the working of Alan AI, have a look at the Alan Documentation for additional projects, and for reference, view sample Alan projects and SDKs here.

Thank you for reading!