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:

• url: https://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.