Working with Streaming response from REST Service in Mendix

Hi all,

As we are currently working on a project using OpenAI, I wanted to share how you can use JavaScript to display a streamed response and show each chunk. We consume OpenAI indirectly, meaning a REST service acts as an intermediary between Mendix and OpenAI, providing the OpenAI response via the Streaming API.

 Therefore the Mendix Starter App was no option for us.

With the following code, we managed to update the response with each new chunk:

export async function JS_ConsumeREST_Mockup(chunkedResponse) {
// BEGIN USER CODE

var chunkedUrl = 'YOUR_STREAMING_API_URL';

fetch(chunkedUrl, {method: 'POST', headers: {

"Content-Type": "application/json",

"Host": "YOUR_STREAMING_API_HOST_URL"

}, body:JSON.stringify({ "question": "string",

"history": [

{

"role": "user",

"content": "string"

}

]})})

.then(processChunkedResponse)

.then(onChunkedResponseComplete)

.catch(onChunkedResponseError)

;

function onChunkedResponseComplete(result) {

console.log('all done!', result)

}

function onChunkedResponseError(err) {

console.error(err)

}

function processChunkedResponse(response) {

var text = '';

var reader = response.body.getReader()

var decoder = new TextDecoder();

return readChunk();

function readChunk() {

return reader.read().then(appendChunks);

}

function appendChunks(result) {

var chunk = decoder.decode(result.value || new Uint8Array, {stream: !result.done});

//console.log('got chunk of', chunk.length, 'bytes');

chunkedResponse.set("Text", chunkedResponse.get("Text") + chunk);

mx.data.commit({ mxobj: chunkedResponse,

callback: function() {console.log("Object committed");},

error: function(e) {console.error("Could not commit object:", e)

;}});

console.log(chunkedResponse.get("Text"));

text += chunk;

if (result.done) {

console.log('returning')

return text;

} else {

console.log('recursing')

return readChunk();

}

}

}

// END USER CODE
}

example use:

Hope this is interesting for some of you.

Best,

David