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.

11 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

  • Hi Ferry,

    Really nice blog..

    I am just curious if I can integrate this chatbot with SAP CoPilot as well.. I need your guidance on same, I tried it but there are no step by step guide (like slack) is available for CoPilot. I was able to connect with CoPilot subscription URL but don’t know what next..

     

    Thanks-

    Abhishek

  • Hi Ferry,

     

    Thank you for great, informative blog. It was really exciting to see creating a connector to our apps from Conversational AI.

     

    Best,

    Mustafa

  • Hi everyone.

    First of all, Ferry thanks for this tutorial which is pretty straighforward to follow. Next, I’m getting an error when adding the new resource, would you guys happen to elaborate why and what might be still missing? Very thanks in advance.