Adding voice assistant to React Apps using Alan AI

The ultimate luxury is to have a personal assistant who listens to our needs and does them for us. Thanks to Artificial intelligence assistants aka voice assistants, this is actually possible! Voice assistants come as small packages and perform actions after hearing a wake-up word or command.

The speech and voice recognition market is currently worth billions of dollars. By 2025, it's projected to surpass $30 billion! Integrating voice assistant in an application enhances UX, ultimately increasing user retention rate.

If you run a startup or are building personal projects, adding a voice assistant will take your application to the next level. Companies like Alan help you integrate the voice assistant in just a matter of some minutes. In this article, we will integrate our Alan AI voice assistant into a React application. But, Alan AI does support a lot more frameworks and libraries which you should check from here and give it a try.

What are voice assistants? 💬

Voice assistants are devices/apps that use voice recognition technology, tongue processing, and AI to reply to humans. Using this technology, the device synthesises the user’s message, breaks it down, evaluates it, and offers a meaningful response in return.

Chatbot ❗️= Voice Assistant

Chatbots and voice assistants have a couple of things in common. Both are constantly learning more about their respective users, counting on newer data to enhance the standard of interactions. And both use automation to speak instantly and make the user experience (UX) convenient.

But, chatbots don't understand human emotions. Although chatbot answers accurately but they don't understand our moods or feelings and don't know how to respond accordingly. Voice assistants, on the other hand, can evaluate natural language complexities using advanced natural language processing.

What is Alan AI? 🤔

There are two categories of AI voice assistants: one is general purpose voice assistants and the other is bot voice assistants. Voice assistants like Siri, Alexa belongs to the first category while voice assistants which can be completely customized according to our need like Alan AI falls under the second category.

Alan is a complete end-to-end Voice AI Platform that lets you embed a contextual voice assistant into your existing application UI.

Alan AI enhances the experience of the application with an intelligent, engaging, and personalized conversational voice assistant. The best part is that there is no need to create spoken language models, train the speech recognition software, deploy and host voice components — the Alan AI backend does most of the work. With Alan, a voice experience for your app can be built and developed by even a single developer, rather than a team of Machine Learning and DevOps experts.

Alan allows you to transcend the capabilities of touch and sort interfaces and voice-enable any complex workflow or function in your app. Voice scripts are written in JavaScript, which makes them highly customizable and versatile . Alan runs on almost every platform. So without further ado, let's start with React + Alan AI.

In this tutorial we will be creating an web application that will tell the user about data structures. The user will be able to choose the data structure and get an introduction about it through both manually and through voice commands via Alan AI.

Let's setup the project ✨

Set up a new React project using create-react-app

npx create-react-app react-alan
cd react-alan

Let's run the app to check if everything is working.

npm start

If you can see the screen as shown below, you are good to go!

Now, let's add Alan Web SDK to the app. Here, we will be using the NPM package to install the module.

npm install @alan-ai/alan-sdk-web --save

Next we'll import alanBtn to the React application. So add this line to your App.js file.

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

Now, let's add the AlanBtn to the React component in App.js.

import React, { useEffect } from 'react';

useEffect(() => {
  alanBtn({
    key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
    onCommand: (commandData) => {
      if (commandData.command === 'go:back') {
        // Call the client code that will react to the received command
      }
    }
  });
}, []);

Next, let's get your private key from Alan Studio to run the application. Sign up for Alan Studio from Studio Page. Once you are authorised you need to create a project by just clicking on the Create Voice Assistant button.

Create an empty project and name it anything (Example: reader).

Within matter of seconds you have your project ready to work with. On the upper right side of your screen you can find Integrations tab. Click on it to get your key and customize the speech by changing voice, time of reaction, microphone time out and so on.

Once, you get your private key, paste it in the key parameter in your App.js. If you see the screen as shown below, you are good to go.

And that's it! You have successfully setup React with Alan AI integration.

The next question you think have in our mind is what can we do with the integration?🤔 Let's build a web application to automate learning Data structures more fun and engaging. Let's build Qooma - A voice based Data Structures buddy. Upon a single click on the voice assistant it would take us through the routes and tell you what we want to know about the data structure. Qooma as a prototype has minimal features which gives you the opportunity to add more and make a useful end to end learning product with Alan AI.

This is how our project structure should look like:

Now let's create all the routes using react-router-dom in App.js. After adding the routes, this is how you App.js should look like:

import React, { useEffect } from "react";
import alanBtn from "@alan-ai/alan-sdk-web";
import Home from "./pages/Home";
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Array from "./pages/array";
import LinkedList from "./pages/linkedList";
import Stack from "./pages/stack";
import Queue from "./pages/queue";
import Graph from "./pages/graph";
import Tree from "./pages/tree";

const App = () => {
  useEffect(() => {
    alanBtn({
      key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
      onCommand: ({ command, category }) => {
        console.log(category)
        if (command === "home") {
          window.location.replace('/');
        } else if (command === "goto") {
          window.location.replace("/read/"+category)
        }
      },
    });
  }, []);

  return (
    <Router>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/read/array" element={<Array/>}/>
        <Route path="/read/linkedlist" element={<LinkedList/>}/>
        <Route path="/read/stack" element={<Stack/>}/>
        <Route path="/read/queue" element={<Queue/>}/>
        <Route path="/read/tree" element={<Tree/>}/>
        <Route path="/read/graph" element={<Graph/>}/>
      </Routes>
    </Router>
  );
};

export default App;

Now let's create a home page which shows all the data structures on cards, with links to their personal pages. To give the page basic styling, we'll be using Material UI.
Home.js:

import React, { useState, useEffect } from "react";
import { Container, Typography } from "@mui/material";
import Grid from "@mui/material/Grid";
import { Link } from "react-router-dom";
import "../App.css";

const Home = () => {
  return (
    <Container style={{ marginTop: "3%" }}>
      <Typography textAlign="center" variant="h2" component="h3">
        Learn about Data Structures
      </Typography>
      <Typography textAlign="center" variant="h5" component="h3">
        Try saying "Open stack"
      </Typography>
      <Grid container className="grid">
        <Grid item xs={4} className="gridItem">
          <Link to={"/read/array"} className="text">
            <Typography variant="h5" component="h5">
              Array
            </Typography>
          </Link>
        </Grid>
        <Grid item xs={4} className="gridItem">
          <Link to={"/read/linkedlist"} className="text">
            <Typography variant="h5" component="h5">
              Linked List
            </Typography>
          </Link>
        </Grid>
        <Grid item xs={4} className="gridItem">
          <Link to={"/read/stack"} className="text">
            <Typography variant="h5" component="h5">
              Stack
            </Typography>
          </Link>
        </Grid>
        <Grid item xs={4} className="gridItem">
          <Link to={"/read/queue"} className="text">
            <Typography variant="h5" component="h5">
              Queue
            </Typography>
          </Link>
        </Grid>
        <Grid item xs={4} className="gridItem">
          <Link to={"/read/graph"} className="text">
            <Typography variant="h5" component="h5">
              Graph
            </Typography>
          </Link>
        </Grid>
        <Grid item xs={4} className="gridItem">
          <Link to={"/read/tree"} className="text">
            <Typography variant="h5" component="h5">
              Tree
            </Typography>
          </Link>
        </Grid>
      </Grid>
    </Container>
  );
};

export default Home;

Let's add some more custom styling in App.css

body{
  background-color: #cee3e9;
}

.grid{
  margin: 50px 0px 50px 150px;
}

.gridItem{
  margin: 30px !important;
  text-align: center;
  max-width: 200px;
  min-height: 100px;
  padding: 40px;
  background-color: #fff;
}

.text{
  color: black;
  text-decoration: none;
}

.text:hover{
  color: rgb(71, 154, 223);
}

Now that we're done with the home page, let's create the pages for each data structure.
array.js:


import React from "react";
import {
  Typography,
  Card,
  CardContent,
  CardMedia,
  CardActionArea,
  Container,
} from "@mui/material";

const Array = () => {
  return (
    <>
      <Container style={{ marginTop: "3%" }}>
        <Typography textAlign="center" variant="h2" component="h3">
          Learn about Arrays
        </Typography>
        <Typography textAlign="center" variant="h5" component="h3">
          Try saying "Tell me about Array"
        </Typography>
      </Container>
      <Container
        style={{ display: "flex", justifyContent: "center", marginTop: "3%" }}
      >
        <Card sx={{ maxWidth: 500 }}>
          <CardActionArea>
            <CardMedia
              component="img"
              height="250"
              image="https://res.cloudinary.com/dqlh4eyt8/image/upload/v1648017909/james-harrison-vpOeXr5wmR4-unsplash_or1hrm.jpg"
              alt="code"
            />
            <CardContent>
              <Typography gutterBottom variant="h4" component="div">
                Array
              </Typography>
              <Typography variant="body2" color="text.secondary">
                In computer science, an array data structure, or simply an array, is a data structure consisting of a collection of elements, each identified by at least one array index or key. An array is stored such that the position of each element can be computed from its index tuple by a mathematical formula.
              </Typography>
            </CardContent>
          </CardActionArea>
        </Card>
      </Container>
    </>
  );
};

export default Array;

You can create similar pages for all other data structures you want to add like linked list, stacks, queues and so on.

Finally, let's add our voice script to Alan AI, to make our assistant customized. Add the following script to your project in Alan AI Studio.

intent('What does this app do?', 'What can I do here?', 
      reply('This app will tell you about the different types of data structures.'));

const CATEGORIES = ['array', 'linked list', 'stack', 'queue', 'tree', 'graph'];
const CATEGORIES_INTENT = `${CATEGORIES.map((category) => `${category}~${category}`).join('|')}`;
intent(`(go to|show|open) (the|) $(C~ ${CATEGORIES_INTENT})`,(p)=>{
    if(p.C.value.toLowerCase()=='linked list'){
        p.play({command:'goto',category:'linkedlist'})
    } else {
        p.play({command:'goto',category:p.C.value.toLowerCase()})
    }
})

intent(`(show|what is|tell me about|what's|what are|what're|read) (the|) $(C~ ${CATEGORIES_INTENT})`,(p)=>{
    if(p.C.value.toLowerCase()=='array'){
        p.play('In computer science, an array data structure, or simply an array, is a data structure consisting of a collection of elements, each identified by at least one array index or key. An array is stored such that the position of each element can be computed from its index tuple by a mathematical formula. ')
    } else if(p.C.value.toLowerCase()=='linked list'){
        p.play('In computer science, a linked list is a linear collection of data elements whose order is not given by their physical placement in memory. Instead, each element points to the next. It is a data structure consisting of a collection of nodes which together represent a sequence.')
    }else if(p.C.value.toLowerCase()=='stack'){
        p.play({command:'read',category:'stack'})
        p.play('In computer science, a stack is an abstract data type that serves as a collection of elements, with two main principal operations: Push, which adds an element to the collection, and Pop, which removes the most recently added element that was not yet removed.')
    }else if(p.C.value.toLowerCase()=='queue'){
        p.play('In computer science, a queue is a collection of entities that are maintained in a sequence and can be modified by the addition of entities at one end of the sequence and the removal of entities from the other end of the sequence.')
    }else if(p.C.value.toLowerCase()=='tree'){
        p.play('In computer science, a tree is a widely used abstract data type that simulates a hierarchical tree structure, with a root value and subtrees of children with a parent node, represented as a set of linked nodes.')
    }else if(p.C.value.toLowerCase()=='graph'){
        p.play('In computer science, a graph is an abstract data type that is meant to implement the undirected graph and directed graph concepts from the field of graph theory within mathematics.')
    }
})

intent('(go|) back', (p) => {
    p.play('Sure, going back');
    p.play({ command: 'home',category:'none'})
})

In this script, we are giving the assistant four custom features:

Answer questions like what does this app do?
Take you to any data structure page you want by saying 'open'. For example:'Open array'
Tell you about the data structures by saying 'tell me about. For example:'Tell me about array'
Go back to the home page

After writing all the code and adding the voice script, this is how your app should look like:

And you're done! Ofcourse you can write a much better optimized code, but as beginner tutorial, the code is kept as basic as possible. You can try playing around with the Alan assistant, ask questions about the data structures and even customize the app even more. The Alan Button is highly customizable according to your need. Starting from the button layout to the start command everything is documented really well and you can check it out here. Once, you are done playing around and configuring the button as per your need check out Script concepts to make it even more functional.

Outro 💚

The world of voice assistants is a big and fascinating topic. Players like Alan have helped users get on board quickly and with ease. It offers wholesome features with the power to make an impact. There’s no better way to test-drive Alan than by diving in and playing with it.

The purpose of the blog is to create awareness about Voice assistants and build a community of React developers who can integrate voice assistants into their applications. To learn further I would recommend you to go through Alan AI's official Documentation. If you enjoy using Alan AI do join their community on Slack to know more about them and even contribute to it. In case you have some questions regarding the article or want to discuss something under the sun feel free to connect with me on LinkedIn💕.

If you run an organization and want me to write for you please do connect with me 🙈

Blog

Adding voice assistant to React Apps using Alan AI

Aniket Pal

What are voice assistants? 💬

What is Alan AI? 🤔

Let's setup the project ✨

Outro 💚

Join Our Newsletter. No Spam, Only the good stuff.

Related