Skip to Content
Technical Articles

Build a Fiori ChatBot with SAP Conversational AI and SAP Open Connectors

In this blog we’ll learn how to build a simple chatbot with SAP Conversational AI and SAP Open Connectors. We will also build an SAPUI5 Fiori front-end as an UI for the chatbot.

Pre-requisites

You need to have an account created for  SAP HANA Trial OnDemand and SAP Conversational AI.

Setting Up SAP Conversational AI

  • I created hello bot with @buy and @flower intents.
  • @buy intent
  • @flower intent
  • I also created @flower_entity entity. 
  • @flower_entity entity. 
  • Setup the triggers.
  • Under Actions tab, I defined the Requirements.

Once you have completed  the setup, we will use Dialog end points to test the bot with curl command:

  • Select Train tab and get the authorization token information. Take note of this token information, we will use it later when we setup SAP Open Connectors.
  • Use the SAP Conversational AI Dialog endpoints to communicate with bot.
  • Run curl command to test:
    curl -H "Authorization: Token d54cc18944a6cc60ca94852d2fc8d8ce" -H "Content-Type: application/json" -d '{"message": {"content":"I want flowers for my mom, an offer?","type":"text"}, "conversation_id": "CONVERSATION_ID"}' -X POST "https://api.cai.tools.sap/build/v1/dialog"​

  • If no error, you will get the response message in JSON format:
    {
      "results": {
        "nlp": {
          "uuid": "6631abdd-73a8-4de2-ab98-249e3f0abee5",
          "intents": [
            {
              "slug": "buy",
              "confidence": 0.99,
              "description": null
            }
          ],
          "entities": {
            "pronoun": [
              {
                "person": 1,
                "number": "singular",
                "gender": "unknown",
                "raw": "I",
                "confidence": 0.99
              }
            ],
            "number": [
              {
                "scalar": 1,
                "raw": "an",
                "confidence": 0.99
              }
            ]
          },
          "language": "en",
          "processing_language": "en",
          "version": "1902.2.0",
          "timestamp": "2019-02-26T08:10:54.924465+00:00",
          "status": 200,
          "source": "I want flowers for my mom, an offer?",
          "act": "assert",
          "type": null,
          "sentiment": "neutral"
        },
        "qna": {
          
        },
        "messages": [
          {
            "type": "text",
            "content": "Rose, Tulip and Daisy, which one you like?",
            "delay": null
          }
        ],
        "conversation": {
          "id": "CONVERSATION_ID",
          "language": "en",
          "memory": {
            
          },
          "skill": "greetings",
          "skill_occurences": 2
        }
      },
      "message": "Dialog rendered with success"
    }​

Setting Up SAP Open Connectors

Enable Open Connectors service in SAP Cloud Platform.

  • Logon to SAP HANA Trials On Demand and select Neo Trial.
  • Select Services.
  • Search for open and select Open Connectors.
  • Select Enable.
  • Select Go to Service.

Now you are at Open Connectors Service main page.

  • Select Connectors to create new connection.
  • Select Build a new connector.
  • Click Create.
  • Under Information tab, give the connector name cai and description, type of service REST API and authentication method Custom. Select Save & Next to continue.
  • Under Setup tab, Properties section set the following properties:
    base URL: https://api.cai.tools.sap/build/v1/dialog
    Pagination type: page starts with 0
    Pagination Max: 100
    Content-Type Header: application/json
    Accept Header: application/jsonAuthentication section, authentication type: custom
  • At Configuration section, set the following properties:
    Name: Authorization
    Key: Authorization
    Type: Text 128
    Default: Token d54cc18944a6cc60ca94852d2fc8d8ce
    Description: Authorization
  • At Parameters section, set the following properties.
  • Select Save & Next to continue.
  • Under Resources tab, add a new resource, select Post and click Go.
  • Complete the following parameters and click Save.
  • Select Authenticate instance.
  • Enter the name cai and select Create Instance.
  • Select Test in the API docs.
  • Select Try it out.
  • Enter the following in body’section and click Execute.
    {"message": {"content":"I want flowers for my mom, an offer?","type":"text"}, "conversation_id": "CONVERSATION_ID"}​

  • You will get the response message back in JSON format.
  • Take note the authorization header information in curl command, we will use this information when we build the SAPUI5 chatbot front-end.
    curl -X POST "https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/" -H  "accept: application/json" -H  "Authorization: User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=" -H  "Content-Type: application/json" -d "{\"message\": {\"content\":\"I want flowers for my mom, an offer?\",\"type\":\"text\"}, \"conversation_id\": \"CONVERSATION_ID\"}"​
    Authorization: User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=

SAPUI5 Front-End

I have created a simple front-end with a nice button Chat with me.Take a look at onSendPressed() method in App.controller.js Here I have defined the Ajax HTTP Post query with the following parameters:

  • urlhttps://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/
  • headers: ‘Authorization’:’User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=’,This is from curl command when we setup in SAP Open Connectors.
  • data: ‘{“message”: {“content”:”‘ + question + ‘”,”type”:”text”}, “conversation_id”: “CONVERSATION_ID”}’
onSendPressed: function(oEvent) {

    var chatbot = this.getView().byId("botchat");
    var question = oEvent.getParameter("text");

    console.log(question);
    var data = '{"message": {"content":"' + question + '","type":"text"}, "conversation_id": "CONVERSATION_ID"}';


    var _id = localStorage.getItem("chatId");
    if (_id != undefined) {
        //payload.id = _id;
    }

    jQuery.ajax({
        url: "https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/",
        cache: false,
        type: "POST",
        headers: {
            'Authorization': 'User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=',
            'Content-Type': 'application/json'
        },
        data: data,
        async: true,
        success: function(sData) {
            console.log('[POST] /discover-dialog', sData);

            chatbot.addChatItem(sData.results.messages[0].content, false);
            chatbot.botFinishTyping();
            localStorage.setItem("chatId", sData.id);

        },
        error: function(sError) {
            chatbot.addChatItem("Something error!", false);
        }
    });

}

Execute the Ajax call and we’ll get the response back in JSON format. Parse it and send back to user. Simple!

Source code: https://github.com/ferrygun/SAPOpenConnectorsChatBot

That’s all the required setup that we need to do.

8 Comments
You must be Logged on to comment or reply to a post.
  • Interesting blog, so in a nut shell your SAPUI5 chat bot uses open connector bot API which in turn talk to conversational AI. Any reason for not consuming conversational AI API or frontend directly?

    • Thanks. No specific reason, I am just doing it for my own personal PoC. I think there are many ways to consume directly SAP CAI

      Regards

      Ferry

  • Hi Ferry,

    Amazing article, congrats for your work!
    I’m managing SAP Conversational AI’s blog and I wanted to know if you would be interested in being featured in it with a blog post talking about CAI integrations into other SAP products.
    Please don’t hesitate to contact me <private information removed by moderator>

    Best,

    Paul

  • HI Djaja,

     

    It’s interesting to read your PoC, but I didn’t get the point – what does the Fiori Chat Bot here mean? – is your chat bot created by using any Fiori approved UI5 controls?

     

    Thanks,

     

    Ronghai(Roy)

    • Hello Ronghai

       

      I built this PoC for my own learning experience (also to share with others)  that we can integrate SAP Open Connectors with others SAP Product (like SAP CAI). I think that’s the objective of this blog.

      Best,

      Ferry