Add actionable links

Alan AI allows you to embed actionable links into the AI agent responses. With actionable links, you can make the AI agent responses more interactive and functional. When a user clicks one of these links, the AI agent navigates them to a relevant section of your app, such as a settings page, a specific product or any other location that aligns with their query.

Use case

You want the AI agent to provide a response with actionable links embedded in it. When the user clicks the link, they are instantly taken to the corresponding app page and section.

Prerequisites

To successfully follow this exercise, make sure the following prerequisites are met:

• You have signed up for Alan AI Studio and created a project for the AI agent. For details, see Sign up for Alan AI Studio.

• You have set up a dynamic corpus for the AI agent. For details, see Create a dynamic corpus.

• You have integrated the AI agent into the sample app using the Alan AI Plugin or Alan AI SDK. For details, see Integrate with the app.

Embed actionable links

To embed actionable links:

1. To the project in Alan AI Studio, add a new dialog script: Navigation.

2. To the script, add the following code:

   Dialog script

   /**
   @tool: click by element by its selector.
   */
   function clickEl(selectorToClick, selectorToWait, delay) {
       return new Promise(function (resolve) {
           var el = document.querySelector(atob(selectorToClick));
   
           if (el) {
               el.click();
               var intervalId = setInterval(function () {
                   if (document.querySelector(atob(selectorToWait))) {
                       clearInterval(intervalId);
                       resolve();
                   }
               }, delay || 5000);
           }
       });
   }
   
   
   /**
   @tool: Opens a VM block by ID
   */
   function openVmById(vmId) {
       var id = vmId;
       var goToRightPagePromise = new Promise(function(resolve){
           if(window.location.href.indexOf('vm')>-1){
               resolve();
           } else {
               clickEl(
                   btoa('[href="/vm"]'),
                   btoa('#'+id),
                   1000
               ).then(function(){
                   resolve();
               })
           }
       });
       goToRightPagePromise.then(function(){
           var vmNameEl = document.getElementById(id);
           if (vmNameEl) {
               vmNameEl.click();
           }
       })
   }
   
   function btoa(str){
       return Buffer.from(str).toString('base64');
   }
   

   The code above is used to expand a specific VM block and display VM details:

   • The clickEl() function clicks an element specified by a selector and waits for another element to appear before resolving a promise.

   • The openVmById() function navigates to the VM section of the page and opens a specific VM block by its ID.

   • The btoa() function is a helper function that encodes a string into Base64 format.

   Note

   To review the HTML structure of the VM block and VM page, see the app/src/vm-tabs/vm-tabs.component.html file in the sample app folder.

   Here is how these functions work together to expand a specific VM block:

   1. When the user click a VM link displayed in the AI agent response, the openVmById() function checks the current URL. If the user is not on the VM page, it calls clickEl() to navigate to the VM page.

   2. The clickEl() function decodes the Base64 selectors, finds the appropriate link ([href="/vm"]), clicks it and waits for the VM block to load.

   3. openVmById() finds the VM block by its ID and simulates a click to expand it, showing VM details, such as status, CPU usage, memory usage, disk space and last boot time.

3. In the code editor in Alan AI Studio, under Transforms, open the infrastructure_output transform.

4. Update the general transform instruction:

   • At the top of the transform, import the openVmById() and clickEl() functions:

     Output transform

     #import openVmById, clickEl
     

   • Add the following instruction:

     Output transform

     In the Full-Answer section, all infrastructure object that has an object ID must be formatted as a clickable link  [](). For example, if the result includes {"vm": {"id": "01", "name": "backup-server", ...}}, it must be displayed as [backup-server](openVmById('01')).
     

   

5. Open the example added to the transform, in the Result field, delete the content and click the Generate result button at the top to produce the output with the new instructions applied.

   

6. Save the changes in the transform.

Validation

In the running sample app, go to the Buckets or Services page and ask a question: Show all running VMs. Then, click a link of a specific VM to open its details.

Next step

Analyze user queries