OPenAI API integration fails

[bpawanchand]

Hello ,

I was following all the exercises related to TS and UI5 and it was really a very . I was able to quickly understand . However, when I am trying to apply few variations to the provided exercises especially ex4 I was trying to make use of third-party API of openai in my application and followed the steps to include UI5 tooling , and also by enhancing the ui5.yaml file by adding custom task and custom middleware. However, when I executed the locahost:8080/resources/core.js it says couldn't find the provided resource. Below is the sample code

Error

Can some one help me here

Thanks Pavan

[petermuessig]

Hi Pavan,

the openai library is not made for the browser. It requires a lot of Node.js related dependencies which cannot be polyfilled for the browser. You should see the errors in the log which states it cannot bundle node:stream.

But there is an alternative made for the browser: https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai => @azure/openai. I did a quick test and this library can be used in UI5 apps:

sap.ui.define(["@azure/openai"], function(OpenAI) {
    "use strict";

    console.log(OpenAI);

    const { OpenAIClient, AzureKeyCredential } = OpenAI;

    const client = new OpenAIClient(
        "https://<resource name>.openai.azure.com/",
        new AzureKeyCredential("<Azure API key>")
    );
    client.getCompletions("<deployment ID>", ["YOUR PROMPT HERE"]).then(({ id, created, choices, usage }) => {

    });

It fails as I just copy and pasted the code from the Azure OpenAI page but the JS code is loaded and the classes are accessible...

HTH

[bpawanchand]

Hey Peter thanks for the help. Ill go through content suggested by you