In this segment, we are going to cover one of the most recent technology which will help you integrate chatbots to help your customers in getting answered some common questions and even do some tasks or perform some functions in your web app based on voice commands given by users. So without wasting any more time let's see how we can use this service in our web app and make something awesome!

What is Alan AI?

With Alan AI, you can quickly create, distribute, and manage in-app voice assistants. Alan AI is a full Conversational AI platform. Our goal is to allow multi-modal voice, the next-generation user experience for mobile apps so that businesses can benefit right now while users are delighted. In simpler terms, they will provide you they're already trained and tested chatbots and you can program the chatbot to perform specific functions based on specific voice commands given by the user and later on integrate it with your web app to make it usable for users.

Let's Get It Started!

We will be learning the basics of Alan AI and how to start using it. To first create and use the chatbot provided by the platform you need to do the following steps:-

1. Go to the official page and go to sign up - https://alan.app/

2. Sign up for Alan Studio or sign in if you are already registered.

3. When you sign up, Alan adds free interactions to your balance to let you get started. To get additional interactions to your balance, sign up with your GitHub account or connect your Alan account with your GitHub account and give stars to Alan repositories.

4. Then create your first project like this:-

   

   Choose "Create Voice Assistant"

Then select an empty project.

Then just name it and you are good to go. You will be directed to a page like this:-

This is basically the IDE for coding out your chatbot. Here we will write some JavaScript code in order to say to our bot what voice notes or commands should it do or say and so.

So let's code out a sample chat bot:-

Now you can write the following code below:-

intent("Hey who are you?", p=> {
    p.play("Well, I am just a bot who can answers your questions and also perform some functions in this web app.")
})

So this is a sample code that will reply to anyone who says the sentence which is passed as parameters in the intended function.

Let's test it:-

-> Just press "Crtl + S" to save your changes and it automatically deploys the saved changes now to test it you can use the mic button given on the bottom right corner to say the given voice command and see what the chatbot replies.

Now you have got the reply back as what we had written in the play function, now let's dive a bit deeper.

intent("( Say | Tell me) who is Elon Musk?", p => {
    p.play("Elon Musk is the owner of Tesla Motors.")
})

Here, you can see something different in the accepting sentence of the intent. We are now using something called wildcards which helps us to make our chatbot more human-like. Here we have written in parathesis to separate them from the other part of sentences and then the straight line in between the two phrases denotes accepting two possibilities of this intent. This means that users can mean to ask the same questions but in a different possible manner in terms of the grammar and vocabulary of the sentence. For example, here the user wants to know who is Elon Musk so he/she can ask this in two ways:

• Tell me who is Elon Musk?

• Say who is Elon Musk? (Although this is grammatically wrong but I hope you get the point)

This way we are able to make the chatbot more realistic by allowing it to answer the same question which can be asked in many forms.

You can also extract a term from the accepting sentence again by using wildcards but it looks a lot different and here is an example of it:-

intent("Who owns  $(company* (.*))?", p=> {
    if(p.company.value=== "Tata") {
        p.play("Ratan Tata");
    }
    else if(p.company.value=== "Microsoft") {
        p.play("Bill Gates");
    }
    else {
        p.play("Sorry , i am not aware of this company!");
    }

})

If you want to learn more about how wildcards are used here, do check out their docs they are very detailed and comprehensive.

Create a Sample React App

Now, lets us just create a sample react app just to use our Alan AI chatbot that we just created. Let's think of a use case for the web app we will be building.

Let's build a simple E-commerce website, not like Amazon or something but it would only have a home page to welcome and a product page to show products.

Sounds Good? LET'S GOO!!

Now instead of building the sample react app the usual way which takes up a lot of time, we will use Vite.

Do visit Vite's official docs page to know how you can do but I will also show you here right now:-

https://vitejs.dev/guide/

Now put this command in your terminal, and make sure the terminal is at the location you want to create the project.

npm create vite@latest

You will be prompted to enter a project name, just write the name you prefer then choose a framework as "React" and language as "JavaScript".

Then just install all the libraries and dependencies of the project by using this

npm install

now you can use run this command to see if your react app is successfully built and running now or not.

npm run dev

Now let's build a sample E-commerce web app as stated above.

The code will be available in my GitHub repos.

I could come up with this design, but not so great but did not want to waste time in creating a good UI now so...

and I made the products page something like this...

Now let's bring in our Alan AI chatbot for using it in the web app that we just created. To do that we need to first install the required libraries and dependencies for using Alan AI services.

There's a step-by-step process in the documentation here:-

https://alan.app/docs/client-api/web/react/

But I will also be guiding you on this,

1. First, let's install all the libraries required.

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

1. Then we are simply ready to use a chatbot in our web app. Copy this sample code that I have written below and add it to the Home page file. Before that do import the AlanBtn from the library and also the use effect hook from React.

   import React, { useEffect } from 'react';
   

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

  useEffect(() => {
      alanBtn({
        key: "YOUR SDK KEY HERE",
        onCommand: (command) => {
          if(command.command === "Hi") {
            console.log("Hi");
          }
        }
      })
  },[])

1. Now to get the SDK key go to "Integrations" on the main IDE page of your Alan AI project and then just copy the SDK key and paste it.

2. Once done you would be able to see a small rounded blue mic button on the bottom right corner of your screen once everything is done well. Something like this:-

Now you can ask all the questions and prompts we had prepared before by clicking on the chatbot and speaking on your mic and the chatbot answers all the answers we prepared for those particular questions.

You can just see how powerful it gets when it comes to providing quality services for like an Ecommerce Store or for some SaaS product pages where they might have questions regarding its usage or some problems they might be facing and such.

Now, let's do something interesting. We will say our chatbot to navigate us to our product page and the chatbot should actually take us to that page.

So for that, we need to write a new intent function which will look something like this,

intent("(Hey| ) (take me| navigate) to the product page", p=> {
    p.play({ command: "navigate"});
    p.play("Navigating to the product page");
})

Here we are passing a JSON object in the play function which contains the command "navigate" which will help us to identify the command on the client side. Then replace your previous alanBtn instance code with this one:-

  useEffect(() => {
      alanBtn({
        key: "YOUR API KEY",
        onCommand: ({ command }) => {
          if(command === 'navigate') {
            window.location.href(`http://127.0.0.1:5173/products`);
          }
        }
      })
  },[])

Now if you say the given prompt, it should take you to the product page now.

Feels awesome right!

Conclusion

Alan AI is a really new platform and a game changer as it allows you to build chatbots for your web apps and even mobile apps in a much easier way without worrying about anything regarding learning Machine Learning or Artificial Intelligence to make one. It is the perfect tool for a developer to use it for tons of use cases as we discussed above.

So, I will leave you with this. I am attaching the link to my GitHub repo for all the source codes so that you can look into it.

GitHub Link:- github.com/shazm12/hashnode-proj-sample-ala..

Bah-bye!!