React

Integrating with Alan

To integrate a React app with Alan:

1. Add the Alan Web SDK to your app. You can do it in two ways:

   • With the npm package

   • In the browser library mode

   NPM package

   To install the Alan Web SDK with the npm package:

   1. In the Terminal, run the command:

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

   2. Import alanBtn to your React component:

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

   Browser library mode

   To load the Alan Web SDK in the browser library mode, add the alan_lib.min.js library to the index.html file using the <script> tag:

   <script type="text/javascript" src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>
   

2. Add the Alan button to your React component:

   • React functional component

   • React functional component with HRM (Hot Module Replacement)

   • React class component

   Functional component

   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
         }
       }
     });
   }, []);
   

   Functional component with HMR

   import React, { useEffect, useRef } from 'react';
   
   const alanBtnInstance = useRef(null);
   
   useEffect(() => {
     if (!alanBtnInstance.current) {
       alanBtnInstance.current = 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
           }
         }
       });
     }
   }, []);
   

   Class component

   componentDidMount() {
     this.alanBtnInstance = 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
         }
       },
     });
   }
   

For details, see Alan button parameters.

Trying the Alan sample app

In our GitHub repository, you can find a sample React app already integrated with Alan. Download the app to get an idea of how you can voice enable your React app and trigger actions in the app with voice commands.

What’s next?

Go to Script concepts to learn about Alan concepts and functionality you can use to create a voice script.