SAP Build Apps integration with SAP AI Core services: Part 2 - Integration via Javascript function

[qiushi_wang1]

In this series of blogs, I will showcase how to integrate SAP AI Core services into SAP Build Apps to develop applications with AI capabilities.

• Part 1: SAP Build Apps integration with SAP AI Core services: - Setup
• Part 2: SAP Build Apps integration with SAP AI Core services - Integration via Javascript function (current blog)
• Part 3: SAP Build Apps integration with SAP AI Core services - Integration via REST API
• Part 4: SAP Build Apps integration with SAP AI Core services - Integration via Action 

SAP Build Apps integration with SAP AI Core services - Integration via Javascript function

If you want maximum flexibility and complete control over your logic flow and don't mind writing your own code, creating a JavaScript function can be an option for integrating SAP AI Core service into your SAP Build Apps application.

1. Configure the BTP destination REST API integration in SAP Build Apps. Unlike integration with the REST API flow function, you don't need to configure additional common request headers and resource schema, as these will be specified in a JavaScript function.

2. Use the JavaScript flow function to integrate with the new REST API. Note that this integration currently only functions in the deployed app due to the limitations of the destination proxy of SAP Build Apps; it does not work in preview mode. As demonstrated in the sample code below, you will need to manage the CSRF token by first fetching it, saving it, and then using it for POST requests.

sample code of Javascript function

let user_input = inputs.user_input;
let system_input = inputs.system_input;
console.log(user_input, system_input);

let text = ''; // Initialize text variable to store the response text

try {
  const svc_url = "destinations/AzureOpenAI/chat/completions?api-version=2024-02-01";

  // Fetch CSRF token from the server
  const csrfResponse = await fetch(svc_url, { method: "GET", headers: { "X-CSRF-Token": "Fetch" } });
  const csrf_token = csrfResponse.headers.get('x-csrf-token'); // Use .get() to retrieve header value

  // Data object for POST request
  const data = {
    messages: [
      { role: "system", content: system_input },
      { role: "user", content: user_input }
    ],
    max_tokens: 1000,
    temperature: 0.5,
    frequency_penalty: 0,
    presence_penalty: 0,
    stop: null // Use null without quotes for actual null value
  };

  // Headers including CSRF token
  const headers = {
    "Content-Type": "application/json",
    "ai-resource-group": "default",
    "X-Csrf-Token": csrf_token
  };

  // Fetch request to the service URL
  const fetchResponse = await fetch(svc_url, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(data)
  });

  // Check if the response is ok (status in the range 200-299)
  if (!fetchResponse.ok) {
    throw new Error(`HTTP error! status: ${fetchResponse.status}`);
  }

  // Parse JSON response
  const responseData = await fetchResponse.json();
  console.log(responseData);
  // Assign the response text to the variable
  text = responseData.choices[0].message.content;

} catch (error) {
  // Log any errors that occur during the fetch operation
  console.error(error);
}

// Return the text
  const new_obj = { text };
  console.log(new_obj);
  return new_obj;

3. Design your page and UI controls in SAP Build Apps, then open the logic canvas to add logic to the desired UI control, include the JavaScript function in the logic, and add input and output parameters to the JavaScript function. 

4. Deploy your app and run it

Link to previous blog: SAP Build Apps integration with SAP AI Core services: Part 1 - Setup 

Link to next blog: SAP Build Apps integration with SAP AI Core services: Part 3 - Integration via REST API