Conversational AI (Recast.AI) Direct Integration with SAPUI5 Application

Recast.AI Integration

Initially in our project, integration of Recast.AI was planned to take place only in SAP Jam Messages service.
After successful integration we decided to investigate whether it was possible to integrate Recast.AI bot directly into SAPUI5 Application in order to get easy access to Chatbot just right from Fiori app.

Currently no guides for Chatbot integration with SAPUI5 Application are provided by Recast.AI.

The available Channels described on Recast.AI include SAP Jam.

Our starting point was an article on SCN describing a possible approach for such integration, you can find it by the following link:
https://blogs.sap.com/2018/08/13/chatbot-integrationrecast.ai-with-sap-ui5/

There are several limitations in the mentioned above approach:

• When popover is minimized, history of messaging is no longer available
• According to SAPUI5 best practices, it is not allowed to use direct creation of HTML objects
• Scrolling in the message box is not available. This leads to problems in displaying full lists of messages and new messages not fitting the popover;
• Using developer token to retrieve x-uuid.

Main Functionality

In SAPUI5 application Chatbot is integrated as a popover and it is designed using SAPUI5 controls.

It looks like a regular chat.

To achieve this, we used modified styles.css

There are several main advantages of having Chatbot integrated into SAPUI5 Application compared to using integration with SAP Jam Page:

• No need to navigate to any other app or service
• You can call Chatbot from any view just by adding the button to the footer:

Technical Design

The View is designed as a separate Fragment with Popover control, List in it and Input for user messages:

Fragment is called from the main view by clicking the button event:

And “onAfterRendering” bot is called:

As UI5 Fiori application is a client-side application, you must use only the request access token for communication with Recast API.

Authentication description in API reference forbids using developer access token on the client-side application:

(source: https://recast.ai/docs/api-reference/#authentication)

Then the bot is launched and bonded to the fragment.

After the text parsing (get input value and send message on keyup enter) POST request to Recast.AI API is sent and the received response is processed in order to create an incoming message:

Integration Advantages

As you can see from the present article, there is no standardized guidance on integration with SAPUI5 application in Recast.AI documentation (only SAP Jam is described).

But it is possible to use best practices and standard SAPUI5 controls.

The history of messages is available during the current session, so even if you navigate to other views and then get back, you will still be able to review you chat history.

You can use custom CSS styles to implement nice and chat-looking appearance of your integrated Chatbot.

Disadvantages of the Current Approach

Please consider that current integration approach is quite good for piloting stage and for SAP systems (Fiori Launchpads) with direct Internet connection, that is not usually the case. Additionally, please also consider that Recast.ai request token is used directly here and it means that it could be easily taken via F12 analysis and re-used by smart business users or could be used for non-designed business scenarios. We have reviewed integration we suggested here to avoid developer token usage that is for sure critical, however, direct request token usage is always not the best approach either.