Skip to Content

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:

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:


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

You must be Logged on to comment or reply to a post.
    • 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,

    • 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().

    • Sure,

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

      onBeforeBotOpen: function () {
          this.isDisplayed = false;
  • 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” ?

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