integrate Azure Open AI chat functionality into the custom chat modal in ServiceNow UI Builder

[MADHUSUDHANJ]

Hi ServiceNow Community,

I recently worked on integrating Azure Open AI chat functionality into a custom chat modal in UI Builder on a ServiceNow instance (Yokohama release, instance: yoklhoma). The goal was to send user input and chat history to a server-side script, call Azure Open AI, and display the response in the modal. However, I encountered several challenges due to UI Builder’s restrictive client script environment and registration issues with data resources.

Objective was to integrate Azure Open AI chat functionality into a custom chat modal within a UI Builder page on a ServiceNow instance (yoklhoma, Yokohama release). The chat modal needed to:

• Accept user input.
• Maintain chat history.
• Send the prompt and history to a server-side script that calls Azure Open AI.
• Display the AI response in the chat modal.

The server-side logic was implemented in a Scripted REST API. The challenge was invoking this server-side logic from the UI Builder client script (handler function) to facilitate the chat interaction.

Below is a detailed account of each approach i tried, the errors encountered, and the potential reasons for their failures.

Approach 1: Using a REST Data Broker (CallAzureAIDirect)

Objective: Create a REST Data Broker in UI Builder to call the Scripted REST API (Azure_AI_Direct) and access it via api.data in the client script.

Steps Taken:

• Created a REST Data Broker named CallAzureAIDirect in the UI Builder Data tab.
• Configured it to:
  • Call the endpoint /api/x_X_X_0/azure_ai_direct/chat.
  • Use the POST method.
  • Set headers: Content-Type: application/json.
  • Define a request body with parameters sysparm_prompt and sysparm_history_json.
• Attempted to call the REST Data Broker from the client script using api.data.callazureaidirect.execute(params).

Error Encountered: (F12: Console)

• api.data was empty ([]), and the REST Data Broker was not registered.
• Specific error: TypeError: api.data.callazureaidirect.execute is not a function.

Approach 2: Using a Scriptlet (getazureairesponsedirectscriptlet)

Objective: Create a Scriptlet in UI Builder to call the server-side logic and access it via api.data in the client script.

Steps Taken:

• Created a Scriptlet named getazureairesponsedirectscriptlet in UI Builder.
• Configured the Scriptlet to invoke the server-side logic (likely via a Script Include or direct REST call to Azure_AI_Direct).
• Attempted to call the Scriptlet from the client script using api.data.getazureairesponsedirectscriptlet.execute(params).

Error Encountered:

• api.data was empty ([]), and the Scriptlet was not registered.
• No specific error thrown, but the client script failed to find the Scriptlet in api.data.

Approach 3: Using GlideAjax to Call a Script Include

Objective: Use GlideAjax in the UI Builder client script to call a Script Include (x_x_x_0.AzureOpenAIChatUtil or AzureAIDirect) that handles the Azure Open AI call.

Steps Taken:

• Updated the handler function to use GlideAjax:
  
  const ga = new imports.GlideAjax('x_x_x.AzureOpenAIChatUtil');
  ga.addParam('sysparm_name', 'getAIResponse');
  ga.addParam('sysparm_prompt', paramsForAPI.sysparm_prompt);
  ga.addParam('sysparm_history_json', paramsForAPI.sysparm_history_json);
  ga.getXMLAnswer(...);
  
  

  Error Encountered:

  • Error: Attempted to import undeclared client script include: GlideAjax.

  Seems GlideAjax is not supported in UI Builder client scripts.
  

   

  Approach 4: Direct REST Call Using XMLHttpRequest

Objective: Use XMLHttpRequest as an alternative to fetch to make a direct HTTP request to the Scripted REST API from the UI Builder client script.

Steps Taken:

• Updated the handler function to use XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/x_x_x_0/azure_ai_direct/chat', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');
xhr.onreadystatechange = function() { ... };
xhr.send(JSON.stringify(paramsForAPI));

Error Encountered:

• TypeError: XMLHttpRequest is not a constructor.

Has anyone successfully integrated external APIs like Azure Open AI in UI Builder (Yokohama or later releases)? Did you face similar issues with data resource registration or client script restrictions? Any tips for making REST Data Brokers work reliably in UI Builder?

Thanks for reading, and I hope this helps others facing similar challenges!

[MADHUSUDHANJ]

Specific errors:

• api.data was empty ([]), and the REST Data Broker was not registered.
• Specific error: TypeError: api.data.callazureaidirect.execute is not a function.
  
  Attempted to call the REST Data Broker from the client script using api.data.callazureaidirect.execute(params).

Did any community member face similar errors? Tried refresh() as well but didn't work out.