Skip to Content
Technical Articles
Author's profile photo Ferry Djaja

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.

Assigned Tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nabheet Madan
      Nabheet Madan

      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?

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      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

      Author's profile photo Paul Pinard
      Paul Pinard

      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

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Hi Paul

      Thanks. Sure. Happy to share with others! and let me know your blog link.

       

      Best,

      Ferry

      Author's profile photo Paul Pinard
      Paul Pinard

      Hi Ferry,

      Here is the URL of our blog: https://cai.tools.sap/blog/

      Happy to discuss about it!

      Best,

      Paul

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Thanks Paul !

       

      Best,

      Ferry

      Author's profile photo Ronghai Huang
      Ronghai Huang

      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)

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      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

      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      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

      Author's profile photo Mustafa Demiray
      Mustafa Demiray

      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

      Author's profile photo Luis Felipe Barrera Estrada
      Luis Felipe Barrera Estrada

      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.

       

      Author's profile photo jaba kumar
      jaba kumar

      H Ferry,

      Nice Article.Am trying the same scenario .But here am getting a error on open connector .Please find the error

       

      Body data is :

      {"message": {"content":"I want flowers for my mom, an offer?","type":"text"}, "conversation_id": "CONVERSATION_ID"}​

      Author's profile photo Sugandhan Vazhumuni
      Sugandhan Vazhumuni

      Nice blog.

      Please explain how to do the fiori app for CAI.