Skip to Content
Technical Articles
Author's profile photo Rahul Patra

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 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.


Create a New Bot by clicking on New Bot


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


Name: Password Reset Chat Bot

Description: To Reset System Password

Topics: IT-Support, Customer Support

Default language: English


Type of Data: Personal

End-Users: Non-vulnerable


Make it Private.

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


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.


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.


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 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 make you understand that you have to do something. Entities help you actually do something.


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


Once it created it will be available on the list of intents. Now, you have to create a new 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.


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


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


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.


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


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 is basically the task you want to perform by the skill.


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


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:


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:×330.jpg

Title: Password Reset

Subtitle: Reset your SAP password.

Click on the SAVE button.


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


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.


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.


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.


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.


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.


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

	// set the device model
	this.setModel(models.createDeviceModel(), "device");
renderRecastChatbot: function() {
	if (!document.getElementById("cai-webchat")) {
		var s = document.createElement("script");
	 	  s.setAttribute("id", "cai-webchat");
		  s.setAttribute("src", "");
		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


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Gurpreet Jaspal
      Gurpreet Jaspal

      Cool... Will try soon. Thanks for sharing.

      Author's profile photo Rahul Patra
      Rahul Patra
      Blog Post Author

      You are welcome Gurpreet !! 🙂


      Author's profile photo Dhanasupriya Sidagam
      Dhanasupriya Sidagam

      Nice Blog!!

      Author's profile photo Rahul Patra
      Rahul Patra
      Blog Post Author

      Thanks, Supriya.

      Author's profile photo Archana Shukla
      Archana Shukla

      Hello Rahul,
      Good introductory blog to ChatBot. How have you used SAP Cloud Platform Workflow in here? (its tagged to SCP Workflow!)

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Great Work!!



      Author's profile photo SAP CPI 3
      SAP CPI 3


      Thanks for clean post,

      I tried the above  approach but i am getting following as an error "Parsing error: Unexpected token renderRecastChatbot [ESLINT: ()]" . I am getting error on the line highlighted below in the image. Can anyone suggest what i am doing wrong here?




      Author's profile photo Rahul Patra
      Rahul Patra
      Blog Post Author

      Hi  SAP CPI 3,

      You have missed a comma (,) on 31st line no at the end of last function. It will resolve the issue.

      Thanks & Regards,



      Author's profile photo Scott Dillon
      Scott Dillon

      Hi Rahul, I am having a few small issues with this Blog. Did you walk it through end 2 end yourself? For example, it would seem like when I try to test the Bot with "Reset my System Password", it is picking up one of the other Intents. If you look into it, you will see that "@reset" is there in a couple of formats so whenever I try the text you have listed I get "Lets start Over" 🙂 Any thoughts?

      Author's profile photo Rahul Patra
      Rahul Patra
      Blog Post Author

      Dear Scott,

      There is a standard Intent present in the chatbot as the name @reset. The standard @reset intent to reset the chat or to Start Over a new Chat, For that you are getting the message.


      In my use case, I have also used the Word 'RESET' to reset the password. So, please delete the standard intent @reset and test. It should work. If you don't delete @reset it will clash between @reset and @resetpassword

      Thanks & Regards,


      Author's profile photo Rajasekhar Nadella
      Rajasekhar Nadella

      Hi I had written the same code which was given in the component.js but I was getting the below attached screen without chatbox and with an error in console

      Author's profile photo Rahul Patra
      Rahul Patra
      Blog Post Author

      Dear Rajasekhar,

      Can you please upload a snap of your component.js just to validate.

      Thanks & Regards,


      Author's profile photo chandra Solleti
      chandra Solleti

      Hi Rajasekhar Nadella

      , were you able to solve this issue ? , i am having the same issue now.

      Author's profile photo vikash kumar
      vikash kumar

      Hi I am getting same issue Have you given any solution For Rahasekher otherwise can You share the code of Component,js



      Author's profile photo Rahul Patra
      Rahul Patra
      Blog Post Author
      	renderRecastChatbot: function () {
      			if (!document.getElementById("cai-webchat")) {
      				var s = document.createElement("script");
      				s.setAttribute("id", "cai-webchat");
      				s.setAttribute("src", "");
      			s.setAttribute("channelId", "");
      			s.setAttribute("token", "");
      Author's profile photo Angel Cortes
      Angel Cortes

      Hi Rahul Patra
      It is a very good tutorial, thanks. I followed it to the letter in my chatbots and they work in a Fiori application, but what if we want to take this to the next level. To a Portal in Fiorilaunchpad.
      Maybe you have already asked yourself the same thing or have another tutorial on how to do it.
      With the steps you gave us everything goes well until we deploy the application in the Portal, the chatbot works without problems the first time it is run. But if I return to my home page, first: the chatbot window is still active, and the most appropriate thing would be to close it when leaving the application, I want to believe it like this. second: if I want to enter the chatbot application again, an error is generated in the application component.
      Thanks for your attention, I would very much like to read your comments.

      Best regards
      Angel Cortes, Mexico.

      Author's profile photo Rahul Patra
      Rahul Patra
      Blog Post Author

      Dear Angel Cortes,

      If you want to integrate this chatbot to the Fiori launchpad, you can select a Fiori Launchpad Extenstion in Web IDe and try to import code in Fiori Launchpad.html.

      You change the settings in CAI tool in your bot connector to make your chatbot never open always.

      Regarding the issue, there is some code Fiori 3.0 not expecting, will check and revert with an alternative.


      Author's profile photo Gabriel Cortezia
      Gabriel Cortezia

      Hello  Rahul Patra,


      I am facing the same error identified by Rajsekhar.


      I am using exactly the same code in Component.js

      renderRecastChatbot: function() {
      			if (!document.getElementById("cai-webchat")) {
      				var s = document.createElement("script");
      				s.setAttribute("id", "cai-webchat");
      				s.setAttribute("src", "");
      			s.setAttribute("channelId", "XXXXXXXXXXXXXXXXXXXX");
      			s.setAttribute("token", "XXXXXXXXXXXXXXXXXXXXXXXX");

      Do you have an ideia of what is wrong?



      Author's profile photo chandra Solleti
      chandra Solleti

      Hi   Gabriel Cortezia  , were you able to solve this issue ?

      Author's profile photo Sebastiano Marchesini
      Sebastiano Marchesini


      Now it's not working if you don't add:

      renderRecastChatbot: function() {
      			if (!document.getElementById("cai-webchat")) {
      				var s = document.createElement("script");
      				s.setAttribute("id", "cai-webchat");
      				s.setAttribute("src", "");
                                      s.setAttribute("apiRoot",""); //NEW LINE
      			s.setAttribute("channelId", "XXXXXXXXXXXXXXXXXXXX");
      			s.setAttribute("token", "XXXXXXXXXXXXXXXXXXXXXXXX");
      Author's profile photo Samir Kulkarni
      Samir Kulkarni

      Appreciate the blog Rahul! great topic, very well explained and man you nailed the use case ! Thank you so much!