Triggering activities without voice commands (React Native)¶

When building a voice agent, it may be necessary to trigger an action without a voice command from the user. For example, you may want the voice agent to provide details about an item when the user taps this item in the app.

In this tutorial, we will let users hear the current count when the Click me! link is tapped. To do this, we will use Alan AI’s project API. The project API functionality allows sending any information from the app to the dialog script and triggering activities without a voice command. To use it, we need to do the following:

Define a new project API method in the dialog script
Call this method from the app

What you will learn¶

How to send arbitrary data from the dialog script to the app
How to trigger activities without a voice command

What you will need¶

You have completed all steps from the previous tutorials:
You have set up the React Native environment and it is functioning properly. For details, see React Native documentation.

Step 1. Add a project API method to the dialog script¶

First, we will define a project API method in the dialog script. In the code editor in Alan AI Studio, add the following code:

Dialog script¶

projectAPI.getCount = function(p, param, callback) {
    p.play(`It is ${param.count}, keep going`);
    callback();
};

When this method is called, the AI agent will do the only thing — play the current count to the user.

Step 2. Call the project API method from the app¶

Now, we need to call the defined method from the app.

In the App.js file, update the following import statement to include useRef:
App.js¶
```
import React, { useState, useEffect, useRef } from 'react';
```

Update the app:

App.js¶

const App = () => {

  const notInitialRender = useRef(false);

  useEffect(() => {
    if (notInitialRender.current) {
      AlanManager.activate();
      AlanManager.callProjectApi("getCount", {count}, function(error, result) {
        console.log(error, result);
      })
    } else {
      notInitialRender.current = true
    }
  }, [count]);
}

Here is how it works: every time the count changes, the Alan AI button is automatically activated with Alan AI’s activate() client API method and the getCount project API method is called. The current count is passed to the dialog script, and the AI agent plays the following phrase on the server side: It is <count>, keep going.

You can try it: tap the link in the app. Alan AI will accompany each tap with the count phrase playback.

What’s next?¶

Have a look at the next tutorial: Navigating between screens with voice.