SAP Conversational AI – How to integrate SAP Chatbot To UI5 Application

Hi Readers!

First of all, thank you very much for reading this blog. I hope it will be helpful for you.

In this blog, I am going to write about the integration of SAP Conversational AI into your SAP Fiori/UI5 application. Before starting anything, let’s understand what is SAP Conversational AI.

SAP Conversational AI

SAP Conversational AI is an SAP product which is available from January 2019. You can build innovative chat Bots with a comprehensive bot provided by SAP Conversational AI. You can leverage artificial intelligence (AI), world-class language technology, and preconfigured bots to improve customer experience.

You can visit https://cai.tools.sap/and signup to start building your Bot. It is free of cost to build your test Bot, but if you want to use at the organization level then you need to buy a license. It’s also become a part of SAP Cloud Platform Enterprise Agreement Licensing. So, if your company holds this license then you are okay to use your bot in your production system.

Let’s start how to build a new Bot.

STEP 1

Create a New Bot by clicking on New Bot

STEP 2

Select Greetings and Smart Talk to add default skills to your Bot. Give a name of your Bot as an example

CREATE YOUR BOT

Name: Password Reset Chat Bot

Description: To Reset System Password

Topics: IT-Support, Customer Support

Default language: English

DATA POLICY

Type of Data: Personal

End-Users: Non-vulnerable

BOT VISIBILITY

Make it Private.

Your Bot will be created and it will be added to your workspace.

STEP 3

Click on the Bot. You can find 3 default skills [Greetings, Small-Talk, Fallback] will be available for your Bot.

You can check your Bot will respond if you ask anything regarding greetings. But, where will your chat? You can find one big button on the down right corner named as ‘CHAT WITH YOUR BOT’. Click on that to start chatting with your Bot.

You can start chatting by typing ‘Hi Bot’, your Bot will respond. See as below.

STEP 4

So, your bot is successfully configured with default skills. Now you need to create a new skill for password reset scenario. Go to BUILD tab and create a new Skill. Give name as ‘Password-Reset’.

Once it created, it will be available on your BUILD tab.

STEP 5

Now, your skill is created, it’s time to train your Bot. Go to TRAIN Tab. You will find multiple standard Intents and Entities will be available. But, you should first know what is Intent and Entity.

ENTITIES

Entities are designed to solve this problem: they extract key information in a sentence. To help you speed up your development, SAP Conversational AI extracts several entities by default: Dates, locations, phone numbers… An exhaustive list is available here.

INTENTS

Intents make you understand that you have to do something. Entities help you actually do something.

CREATING CUSTOM INTENT

Now, create a new custom Intent. Give name as ‘password-reset’.

STEP 6

Once it created it will be available on the list of intents. Now, you have to create a new custom entity.

CREATING CUSTOM ENTITY

We will create custom entities to extract the information we need. As with intents, training is very important: the more examples you add to your bot, the more accurate it gets.

Create a new custom Entity. Give name as ‘reset_password’. Select type as Restricted entity.

STEP 7

Now, you need to add expression to the Bot in Intents. Go to ‘password-reset’ intent and start adding expression.

STEP 8

Now, you need to tag your expressions, select the text you want to tag and type your entity name:

STEP 9

Now that we have labeled have our entities we are going to enrich them! Open the entities panel from your bot under the training tab as shown below:

Now let’s open the RESET_PASSOWRD entity. If you look at the top right of the panel you should see a toggle saying free – restricted and settings, open it so we can explain in details the different options you have access to:

Within the entity panel you have access to different options for your entity:

• Free vs Restricted – A free custom entity is used when you don’t have a strict list of values and want machine learning to detect all possible values whereas a restricted custom entity is used if you have a strict list of words to detect and don’t need automatic detection of the entity.

 

• Fuzzy matching – Fuzzy matching is an index between 0 and 1 to indicate how close a word can be from the one in your entity list of values. If the word is above this index then the platform will tag it as the closest value within your list.

 

• List of values – This is where you can add all the list of values of your entity which could be different values or synonyms

In our case, our RESET_PASSOWRD entity is going to be restricted.

STEP 10

Let’s start building the chat flow, go to the BUILD tab, and click on the Password-Reset skill.

You will find 3 Tabs: Trigger, Requirements, Actions

Trigger

The trigger is basically, a checklist to enter to the skills. You can set conditions there if the condition satisfies then the skill will be triggered.

Action

Action is basically the task you want to perform by the skill.

Requirements

Requirements are basically the condition you want to keep before going for action.

Example:

If I feel hungry, I will take 100 rupees from my Dad to purchase a Burger.

In this above example,

If I feel hungry is the trigger condition.

I will take 100 rupees from my Dad is the requirement

to purchase a Burger is the Action of the skill.

Now, let’s integrate this to our Bot, go to the trigger tab. Add the below condition by typing in “@password-reset” at textbox and click “SAVE”, and you should see this:

STEP 11

Now, let’s add an action. Go to the Actions tab. Add a new Message Group. Click on Send Message and select a card.

Image URL:

https://securityintelligence.com/wp-content/uploads/2017/06/forgot-password-man-in-the-middle-attack-can-perform-a-password-reset-researchers-warn-630×330.jpg

Title: Password Reset

Subtitle: Reset your SAP password.

Click on the SAVE button.

STEP 12

Let’s chat with the BOT. You can see the below chat, I am giving “Reset my system password”, here my “@password-reset” skill got triggered and the action performed.

STEP 13

Now, I will add some requirements before executing the action. Let’s go to the requirements tab. Add the below condition

Click on the +NEW REPLIES If #password_reset is missing. Add a new Quick reply Message.

STEP 14

Once the user is asked for reset password, 2nd question the bot should ask: ‘In which system?’

So, we are creating a new Entity as ‘System‘. The process will be the same as Step 6.

Name: System

Mode: Restricted

 

Go to password-reset intent and add new expression related to the system. Follow Step 8 to tag your expressions with System entity.

Once you tagged follow STEP 9. Now you can test the expression is working fine or not. On the right side, there is a button ‘Test‘. Click on that and write ‘In EMD System‘.

You can see, EMD is highlighted with the #SYSTEM entity.

STEP 15

Add this also as a condition in Requirements Tab of “@reset-password“ skill.

Again follow STEP 13  to add a New message on the +NEW REPLIES If #system is missing.

Now, let’s chat with the Bot.

STEP 16

Now, Let’s see how to connect this bot with our Fiori application.

Open Full Stack Web-IDE and create a new UI5 Project from Template.

STEP 17

Once your project is created, then go to Connect Tab. And click the + button of Webchat.

Once you clicked one pop up will come to customize your webchat UI. You can add color based on your brand guidelines.

Give the name of the Bot.

Then click on the CREATE button. You will get a script file along with a channelId and Token.

STEP 18

Now we are in the final step. Open Component.js file of your UI5 application. Add a new Function inside the onInit function.

init: function () {
	// call the base component's init function
	UIComponent.prototype.init.apply(this, arguments);

	// enable routing
	this.getRouter().initialize();

	// set the device model
	this.setModel(models.createDeviceModel(), "device");
	this.renderRecastChatbot();
},
renderRecastChatbot: function() {
	if (!document.getElementById("cai-webchat")) {
		var s = document.createElement("script");
	 	  s.setAttribute("id", "cai-webchat");
		  s.setAttribute("src", "https://cdn.cai.tools.sap/webchat/webchat.js");
			  document.body.appendChild(s);
		}
		s.setAttribute("channelId", "<<Your Bot Channel Id>>");
		s.setAttribute("token", "<<Your Bot Token Id>>");
},

Now, Run the application.

 

Hurrah!! You have made it.

Many Thanks!!

Rahul Patra