How to integrate an Artificial Intelligence in your React App?

Part 1

In this blog, I decided to talk about a little app I created with something that looks like really high-tech and hard to implement but is actually not!

Do you like Siri? Yes, the annoying Apple Voice assistant in you iPhone? We are about to implement a small version of that…. ALAN AI.

For that, we will use Alan AI library, an amazing JavaScript library that makes it really easy to have you own voice assistant for your application.

Google ‘Alan AI’ or go to https://alan.app/ and create your account (it’s free, and I am not getting paid for this, unfortunately)

Once logged in, create a new empty project:

To integrate it, it’s fairly easy — go to the Integrations tab and copy your Alan Key:

Scroll down and you will see how to integrate using different platforms and frameworks, click in React:

Alan also offers a nice and neat documentation to integrate your app:

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

For the ones that like functional components rather than Class based components, here is an example:

Alan’s scripts are written and run in the Alan Studio IDE and apart from some particular syntax, it’s Vanilla JS. Put simply, we give Alan what we think the user may say in the “intent” function, and this function takes an object “p” as a second argument, that runs a function to execute whatever you would like to do with that voice command. We can make a request with Alan Studio:

As well as pass some information back to the React App, with the command object when calling the function p.play():

Or the union of both:

In this case, we are taking what the user may say, making a request to the news API and returning a command to the react app, as well as the articles fetched from the API.

And that’s it!

In the next installment, we will learn how to manage this data sent from Alan AI in our React app, as well as present them our UI.

See you next week!