Trying to get Azure AI to work with Nuxt 3

For some reason, when I push this script in the server/api folder to cloudflare pages it fails every time, returning a 500 error code.When I run it with the same environment variables in development mode it works fine. Any Ideas on how to fix this?

import {getBearerTokenProvider, ClientSecretCredential } from "@azure/identity";
import { AzureOpenAI } from "openai";

export default defineEventHandler(async (event) => {
  const runtimeConfig = useRuntimeConfig(event);
  const endpointazure = `${runtimeConfig.azureEndpoint}`;
  const keyazure = `${runtimeConfig.azureKey}`;
  const cred = new ClientSecretCredential(
    `${runtimeConfig.azureClient}`,
    `${runtimeConfig.azureTenant}`,
    `${runtimeConfig.azureSecret}`
  );
  const tokenProvider = getBearerTokenProvider(
    cred,
    "https://cognitiveservices.azure.com/.default"
  );
  
  interface ChatMessage {
    role: string;
    content: string;
  }
  const client = new AzureOpenAI(
    {
      tokenProvider,
      apiVersion: "2024-08-01-preview",
      endpoint: endpointazure,
      apiKey: keyazure,
    }
  );

  // Parse the request body as an object containing a 'chat' array
  const body = await readBody<{ chat: ChatMessage[] }>(event);

  // Access the 'chat' array from the body
  const chatHistory = body.chat;

  // Check if chatMessages is an array
  if (Array.isArray(chatHistory)) {
    // Iterate over each ChatMessage object and print its content
    chatHistory.forEach((message, index) => {
    });
  } else {
    console.error('Chat is not an array');
    return { error: 'Invalid chat format' };
  }

  const result = await client.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: chatHistory,
    max_tokens: 150,
  });


  console.log(result.choices[0].message.content);
  return result.choices[0].message.content;
});

the result is just an internal server error 500.

I modified the code and directly added the endpoint, client ID, client secret, and tenant ID to the azure-openai.ts file within the server/api folder. I successfully got the output in both development and Cloudflare pages.

server/api/azure-openai.ts :

Below is the complete azure-openai.ts code

import { ClientSecretCredential } from "@azure/identity";
import { AzureOpenAI } from "openai";

export default defineEventHandler(async (event) => {
  try {
    const endpointazure = "https://xxxxxxxxx.cognitiveservices.azure.com/openai/deployments/gpt-4o-mini/chat/completions?api-version=2024-08-01-preview";
    const clientId = "<clientID>";
    const tenantId = "<tenantID>";
    const clientSecret = "<clientSecret>";

    const cred = new ClientSecretCredential(tenantId, clientId, clientSecret);
    const tokenResponse = await cred.getToken("https://cognitiveservices.azure.com/.default");
    const bearerToken = tokenResponse.token;
    const headers = {
      Authorization: `Bearer ${bearerToken}`,
      "Content-Type": "application/json",
    };
    const queryParams = getQuery(event);
    const chatParam = queryParams.chat;

    if (!chatParam) {
      return { error: "No chat parameter provided" };
    }
    const chatParamString = Array.isArray(chatParam) ? chatParam[0] : chatParam;
    let chatHistory;
    try {
      chatHistory = JSON.parse(chatParamString);
    } catch (err) {
      return { error: "Invalid chat format" };
    }

    if (!Array.isArray(chatHistory)) {
      return { error: "Invalid chat format" };
    }
    const response = await fetch(endpointazure, {
      method: "POST",
      headers: headers,
      body: JSON.stringify({
        model: "gpt-4o-mini",
        messages: chatHistory,
        max_tokens: 150,
      }),
    });
    if (!response.ok) {
      const errorResponse = await response.json();
      console.error("API Error:", errorResponse);
      return { error: "API request failed", details: errorResponse };
    }

    const result = await response.json();
    console.log("API Response:", result);
    if (result.choices && result.choices.length > 0) {
      console.log("API Response:", result.choices[0].message?.content);
      return result.choices[0].message?.content;
    } else {
      return { error: "Invalid response from OpenAI API" };
    }
  } catch (error) {
    console.error("Error in Azure OpenAI API:", error);
    return { error: "Internal Server Error", details: (error as Error).message };
  }
});

Development Output :

I successfully deployed my Nuxt3 project to Cloudflare Pages using GitHub, as shown below.

The Cloudflare pages have been deployed successfully, as shown in the GitHub below.

CloudFlare pages Output :

I successfully got the output in the CloudFlare pages.