Skip to Content
Technical Articles
Author's profile photo Danish Meraj

Bringing ChatGPT in SAP Analytics Cloud using Custom Widget

Part – 1: Bringing ChatGPT in SAP Analytics Cloud using Custom Widget

Part – 2: Data Discovery using ChatGPT in SAP Analytics Cloud

“Integrating ChatGPT-3 in SAP Analytics Cloud using the custom widget”. Sounds complex? Believe me! It is not. You can do it in less than 30 mins, even if you are an absolute beginner.

This blog post will explain how to create an analytic application in the SAP Analytics Cloud that can take user queries and return responses. It will involve creating a custom widget in the SAP Analytics Cloud to integrate with ChatGPT-3 using the OpenAI API. We will achieve this goal in 7 easy steps. All the relevant files can also be found on my GitHub repository here.

Step 1: Prerequisites: 

Before we proceed with the creation of a custom widget and its integration in SAC, it is important that you fulfill the following requirements.

  • Create an account on the OpenAI platform: Create an account on the OpenAI platform by visiting this URL here.
  • Getting the API key: Create a secret key in the “Build your application” section of the page by visiting this URL here.

Figure 1: The figure shows creation of secret key.

Note: Please ensure that you copy and securely save the secret key. This key will be required to make an API call in the future step.


Step 2: Creating custom widget: 

The custom widget created in this blog will help us integrate SAP Analytics cloud with OpenAI API. Custom widget is created with different web components and a JSON file. These web components files differ according to the custom widget use case. In this case, we need two files, i.e., “customWidget.json” and “main.js”.

I will not cover the basics of custom widget but If you would like to understand custom widgets in detail, then I recommend reading this nice blog Demystifying Custom Widgets for SAP Analytics Cloud by Pranav Kandpal.

Please select one method from Method 1 and Method 2. Note that Method 1 is recommended for quick creation of the custom widget.


Method 1: Plug and Play

Copy the below code and save it as a .json file to your local system with the name “customWidget” and proceed to Step 3.

  "eula": "",
  "vendor": "Danish",
  "license": "",
  "id": "",
  "version": "1.0.0",
  "name": "chatGPT SAC",
  "newInstancePrefix": "chatGPTInSAC",
  "description": "A custom widget to integrate chatGPT3 in SAC Analytic application",
  "webcomponents": [
      "kind": "main",
      "tag": "custom-widget",
      "url": "",
      "integrity": "",
      "ignoreIntegrity": true
  "properties": {
		"width": {
			"type": "integer",
			"default": 1
		"height": {
			"type": "integer",
			"default": 1
  "methods": {
		"post": {
			"description": "Wrapper for jQuery post",
			"parameters": [
					"name": "APIKey",
					"type": "string",
					"description": ""
					"name": "endPoint",
					"type": "string",
					"description": ""
					"name": "prompt",
					"type": "string",
					"description": ""
			"returnType": "string"
  "events": {


Method 2: 

  • Copy the code below and Save it as .js file to your github. Ensure that the code is hosted and can be accessed from the URL.
    var ajaxCall = (key, url, prompt) => {
      return new Promise((resolve, reject) => {
          url: url,
          type: "POST",
          dataType: "json",
          data: JSON.stringify({
            model: "text-davinci-002",
            prompt: prompt,
            max_tokens: 1024,
            n: 1,
            temperature: 0.5,
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${key}`,
          crossDomain: true,
          success: function (response, status, xhr) {
            resolve({ response, status, xhr });
          error: function (xhr, status, error) {
            const err = new Error('xhr error');
            err.status = xhr.status;
    const url = "";
    (function () {
      const template = document.createElement("template");
      template.innerHTML = `
          <div id="root" style="width: 100%; height: 100%;">
      class MainWebComponent extends HTMLElement {
        async post(apiKey, endpoint, prompt) {
          const { response } = await ajaxCall(
          return response.choices[0].text;
      customElements.define("custom-widget", MainWebComponent);
  • Copy the code from method 1 and change the “url” object in the property “webcomponents” to your own hosted URL, as shown in fig. 2. Save the file as “customWidget.json” and proceed to Step 3.

Figure 2: The figure shows the edit required if the hosting url is changed.


Step 3: Adding the custom widget in SAC.

Add custom widget in SAC by navigating to Analytic application -> Custom widgets and click on ‘+’ icon as shown in the fig.3. Select the file from local system and click “OK” as shown in fig. 4.

Figure 3: The figure shows adding of the custom widget in SAC.



Figure 4: The figure shows uploading json file in SAC.


Step 4: Adding the custom widget to Analytic designer. 

Add the custom widget to the application designer by following the steps in fig 5. 

Figure 5: The figure shows adding custom widget in analytic designer.


Step 5: Creating a User interface in Analytic designer.

Add additional widgets to the analytic designer for creating a basic UI and name the widgets like those shown in fig 6.

Figure 6: The figure shows the required widget to create a basic UI.

The final UI should look like as shown in the fig. 7.

Figure 7: The figure shows the overview of the UI.

Note: ChatGPT-3 logo is optional.


Step 6: Adding a script to the onClick event

Add the script below to the “button_submit ” onClick event. Replace the SECRET_API_KEY with your secret API key created in Step 1. 

var endpoint = "completions";


var prompt = InputField_prompt.getValue();

var response =,endpoint,prompt);


//console.log(["output", response]);


Figure 8: The figure shows the script for “onClick” event in button.


Step 7: Testing the integration

Congratulations!!! ChatGPT-3 integration in SAP Analytics Cloud is completed. Go ahead and type your query and get response from chatGPT-3 as shown in fig 9.

Note: If you face issues, such as output is not visible, make the size of “Text_response” widget a bit bigger. Additionally, try to get shorter responses first and then gradually tune the rest of the UI to fit the requirement.

Figure 9: The figure shows Analytic application giving response from ChatGPT-3.


Conclusion: In this blog, we created an analytic application and integrated it with OpenAI API using custom widgets. The analytic application has a user interface through which users can interact with the ChatGPT-3. The existing application can be extended and tuned to fit specific use cases. This blog can also give an idea about creating custom widgets to integrate with external APIs.

If you find this blog useful then, please like this blog post and follow me for contents related to SAP Analytics Cloud. If you have any questions or feedback, please leave a comment below.


References and Further study on similiar topic:

Quickly integrate Sap Analytics Cloud with other systems using custom widget.

Demystifying Custom Widgets for SAP Analytics Cloud

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Nik Bach
      Nik Bach

      As I see you do not access any data of SAP SAC. it is just a widget to play with chatgpt. Did you evaluate the usage of actual data discovery. Instead of building reports, just asking the system?

      Author's profile photo Antoine CHABERT
      Antoine CHABERT

      Hi Nik Bach you could be interested by this



      Author's profile photo Marc-Antoine BERTHET
      Marc-Antoine BERTHET

      Thank you for this blog it is really easy to deploy and we saved a lot of time thanks to you.

      Nevertheless, we have an issue with the content security policy, do you know how can I fix it ? I can't find a lot of information about it :






      Author's profile photo Marc-Antoine BERTHET
      Marc-Antoine BERTHET

      Solved the issue : we can just ignore this message. It works even if we have the error message in the console.

      Author's profile photo Ryusuke Yamada
      Ryusuke Yamada

      Hi export

      I try your blog and have error


      イベント "Button_submit.onClick" に対するスクリプト実行に失敗しました

      xhr error
      status: 429

      Error: xhr error
      at Object.error (main.js:23:21)
      at u (jquery-dbg.js:3500:31)
      at Object.fireWith [as rejectWith] (jquery-dbg.js:3630:7)
      at k (jquery-dbg.js:9913:14)
      at m.<anonymous> (jquery-dbg.js:10172:9)
      at m.<anonymous> (app.chunk.528.a6c2fec5c995899b6666.js:2:399695)
      at XMLHttpRequest.n (app.chunk.528.a6c2fec5c995899b6666.js:2:61181)


      can you help me?

      Author's profile photo Danish Meraj
      Danish Meraj
      Blog Post Author

      Hi Ryusuke,

      Thanks for bringing up the error.

      I retested the integration and it is working great. The error is likely due to exceeding the OpenAI API's token limit. You can check the OpenAI documentation for error codes here.

      There are two potential solutions you can consider in this case:

      1. Apply for a quota increase: You can request an increase in your token limit from OpenAI url mentioned above.
      2. Try creating a new credential with a different email address: This would provide you with a new token limit to work with.

      Please let me know if you continue to experience this issues, preferably by contacting me on LinkedIn 🙂

      Author's profile photo Ryusuke Yamada
      Ryusuke Yamada

      Thank you very much. Your advice solved the problem.

      Author's profile photo Krupa Kulkarni
      Krupa Kulkarni

      Hi Danish,

      It worked beautifully! Thanks a lot.. Looking forward to your future posts..

      Have you tried using data in it by any chance?


      Thanks & Regards,

      Krupa Kulkarni

      Author's profile photo Danish Meraj
      Danish Meraj
      Blog Post Author

      Hi Krupa,

      Glad to hear that it worked. Thanks for your kind words.

      Yes! I have tried it using data. I plan to write about it in a future post.


      Thanks and Regards,

      Danish Meraj