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

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

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);