Skip to Content
Author's profile photo Mikhail Andryievich

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.

Assigned Tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Witalij Rudnicki
      Witalij Rudnicki

      Hi Mikhail. Are you located in Wrocław? Would you like to present it at our local SAP Community Meetup https://www.meetup.com/Wroclaw-SAP-Community-Meetup/

      ?

      Author's profile photo Mikhail Andryievich
      Mikhail Andryievich
      Blog Post Author

      Dear Witalij,

      Thank you for your comment!

      Indeed, Skybuffer has an office in Wroclaw and we are more than willing to take part in SAP Community Meetup! I am located in our office in Minsk, Belarus. However, we have discussed the matter with Alex who is running our office in Poland, so he will get in touch with you.

      Thank you once again for the opportunity to get connected!

      Kind regards,
      Mikhail

      Author's profile photo Nikhil Kulkarni
      Nikhil Kulkarni

      Whether request access token of Recast.AI should be added in both the function (getBotInstanceId() and createmessage()) ?

      Author's profile photo Mikhail Andryievich
      Mikhail Andryievich
      Blog Post Author

      CreateMessage function is responsible for message creation and publishing in chat. The function is performed, when message from user successfully sent to Recase API and response came.

      Request access token must be provided in getBotInstanceId().

      Author's profile photo Nikhil Kulkarni
      Nikhil Kulkarni

      Thank you for sharing this blog post Mikhail. Can you share what the onBeforeBotOpen() function inside openBot function consists of.?

      Author's profile photo Mikhail Andryievich
      Mikhail Andryievich
      Blog Post Author

      Sure,

      onBeforeBotOpen() as well as onAfterBotOpen() function is responsible for displaying chat Popover:

      onBeforeBotOpen: function () {
          this.isDisplayed = false;
      }
      Author's profile photo Ferry Djaja
      Ferry Djaja

      Great post! Can you please share the codes?

      Author's profile photo Sai Giridhar Varanasi
      Sai Giridhar Varanasi

      Thank you so much for this blog Mikhail. I worked with Manisha who wrote the following blog.

      https://blogs.sap.com/2018/08/13/chatbot-integrationrecast.ai-with-sap-ui5

      The points you considered in this blog are totally valid. We realized it in later stages of our development and we are currently having every control in SAPUI5. But, exposing of the token is something that needs to be further pondered about.

      Nice Blog!

      Author's profile photo Vighnesh Kamath
      Vighnesh Kamath

      Hi Mikhail,

       

      Great blog!

      Can you share the code on github?

      Thanks

      Author's profile photo Gautami Khandolkar
      Gautami Khandolkar

      Hi Mikhail,

      I am facing issue "Request can not be processed without authentication" when i am trying to get the response from the bot connector for types message. Can you please tell me what could be the issue? Also from where can we get the "conversation_id" ?

      Author's profile photo Yigit Alparslan
      Yigit Alparslan

      Hi Mikhail,

       

      Great post! Can you explain how you defined onAfterRendering function?

      I don't see a snippet for that.

       

      Thanks!

      Author's profile photo Bhoomika Jain
      Bhoomika Jain

      Hi Mikhail Andryievich ,

      Your blog is really nice and i'm able to create a basic bot and integrate it to UI5 app. Now i want to read data from my odata service, for instance, northwind service. Could you please help me for this.

      I tried using this “Call Webhook” option during Actions tab and provided the Northwind odata service there, but i’m always getting “500 – Internal Server Error” through my app and "No Reply" while testing in the recast link.

      I've come across few links which suggest using NodeJS or JAVA to accomplish this but i want to try this without using NodeJS or JAVA.

      Any suggestions would be of great help.

       

      Thanks.