Incorporating AI Into Your React App

If you are a programmer you definitely know about React. You most likely know how to use React to create a web application. There are endless things you can create with React. Well with this new day and age we have a new friend called AI (Artificial Intelligence). Now what if we created a React application and then incorporated AI into it. Today this blog will be covering how to do so.

First things first it is not as difficult as one would expect. Today we will be using Alan AI to help us create a React app with AI. This will be a simple voice enabled React app. Users will be able to click the voice assistant button and give commands and in return Alan AI will reply to them.

Step 1. Go to Alan AI Studio (https://alan.app/). Then sign up and in Alan AI create a project.

Step 2. Now it is time to create a simple React app.

1. Go to the folder where you would like to create the app.
   npx create-react-app my-app

2. Switch to that folder
   cd my-app

3.Now just start it up
npm start

Step 3. Install the Alan AI Web component. Luckily with this day and age we don't have to create an AI from scratch.
npm i @alan-ai/alan-sdk-web

Step 4. Its time to add the Alan AI button to the app

1.Open your App.js file

2.Import the Alan AI Web component
import alanBtn from "@alan-ai/alan-sdk-web";

3.Use the Effect Hook to add the Alan AI button.
import React, { useEffect } from 'react';

4.Now call useEffect

function App() {
    // Adding the Alan AI button
    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
                }
            }
        });
    }, []);
}

1. You need to replace YOUR_KEY_FROM_ALAN_STUDIO_HERE with the special Alan AI SDK key. In Alan AI studio at the top of the code editor click Integrations, then copy the value provided in the Alan SDK key field then paste the value to "key" in the code.

Step 5. Finally its time to add voice commands.

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

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

Now in your react app you will be able to ask "What is your name?" and "How are you doing?"

See since we have helpful libraries and frameworks it is not too complicated to incorporate AI into your react app. This is just one framework. Here are a couple more frameworks and libraries so you can go and create an AI react app on your own. TensorFlow.js, Brain.js, OpenCV.js, IBM Watson Developer Cloud, ML5.js, Microsoft Cognitive Services. In this blog we went over a very basic way to incorporate AI. It gets much more difficult with a combination of backend and frontend development. This is just an easy fun way to get your feet wet.

I have always found AI very interesting, the fact that it is now possible to create an AI React app to amazing. As I mentioned before this is a very elementary way to incorporate AI although it is very neat. As a developer that is still in school I love coming across new challenges and obstacles. With this new information I learned I thought what better way to share it than with a blog. Now go and create an AI React app!!!

Resources- (https://alan.app/)