ChatBot Integration(recast.ai) with SAP UI5

[former_member224926]

I have become more interested in chat bots and how they can serve customers.  After a bunch of research and testing I decided to start a project in order to learn about bots.



In this article, I explain steps to integrate chat bots with SAP Web IDE.  I will be using recast.ai to create chat bot, integrate and render the same in ui5. So, friends let get started.

Web IDE For The Front End

I decided to use SAP Web IDE to develop the front end to the project, as Web IDE allows fast yet robust development of sites that can be deployed easily.  Web IDE was the perfect fit for this learning project.

Assumption

1. You have created bot in recast.ai


2. You have base knowledge of rest api.

Procedure of Integration and Chat Bot Rendering

Step 1. Invoke recast rest api passing your user slug and token.

a. Redefine onAfterRendering



b.Invoke rest api call to get user unique ID or uuid which would later be used for interaction between the ui5 bot interface and recast intents.

Please find place for your user-slug and token to find out in recast



 

Step 2. Invoke bot popover in the sense render ui



Invoke chat bot by registering enter key with code 13 for chat input. This would enable bot-user chat interactive display on the press even of enter key.



 

Step 3. Fetch response of user chat input based on intent received from recast.



 

Step 4. Create bot message ui based on the response received in step 4 rest call.



Step 5. Add animation to bot message display and after timeout we remove the animation in above step.



 

Last Step 6. Add style class for images in chat display to appear as icon siZe.



 

Conclusion

1. Refer recast.ai api-reference to know more about connectors.


2. Chat bot interface can be designed in many ways please find this code pen link.


3. Whenever, you are doing integration providing correct tokens number, user slug and bot slug(bot name) is important for successful integration.


4. Please find link to above sample code in github.

Hope it helps 🙂

 

Regards,

Manisha Madhwani