Kendo MVC AI Completion Service Output is not displaying

[Gerber]

Hi,

I have a problem displaying the content from the AIPrompt Output tab and I'm getting An error occurred while processing the request.

I'm not sure if I'm missing a parameter returning  the response from the content. I am using OpenAI as a service.

• Here is my code

public async Task<ActionResult> GenerateSupplierAIReponse()
{
    var apiKey = ConfigurationManager.AppSettings["OpenAPIKey"];
    var aiServiceUrl = "https://api.openai.com/v1/chat/completions";
    StringBuilder sb = new StringBuilder();
    using (var httpClient = new HttpClient())
    {
        httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", apiKey);

        try
        {
            using (var requestStream = new StreamReader(HttpContext.Request.InputStream))
            {
                var body = await requestStream.ReadToEndAsync();
                var requestBody = new
                {
                    model = "gpt-4",
                    messages = new[]
                    {
                        new { role = "user", content = body }
                    }
                };

                var response = await httpClient.PostAsJsonAsync(aiServiceUrl, requestBody);
             
                response.EnsureSuccessStatusCode();
                var jsonResponse = await response.Content.ReadAsStringAsync();
                OpenAIResponse aIResponse = JsonConvert.DeserializeObject<OpenAIResponse>(jsonResponse);


                foreach (var i in aIResponse.choices)
                {
                    sb.AppendLine(i.message.content);
                }

                var formattedResponse = new
                {
                    Output = sb.ToString(),
                };

                string finalJsonResult = new JavaScriptSerializer().Serialize(formattedResponse);
                return Content(finalJsonResult, "application/json");
            }

        }
        catch (HttpRequestException ex)
        {
            // Log the error
            Console.Error.WriteLine($"HTTP Error: {ex.Message}");
            return Json(new { error = "Error communicating with OpenAI." }, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            // Log the error
            Console.Error.WriteLine($"General Error: {ex.Message}");
            return Json(new { error = "An unexpected error occurred." }, JsonRequestBehavior.AllowGet);
        }
    }

}

 

• Here is the example content that I'm about to return.

"{\"Output\":\"As an AI, I don\\u0027t have real-time data access, but as of my last update, I don\\u0027t have specific information about the parent company of Acme Electronics. Acme is a common generic name used in various forms of fiction, and there could be many small companies by that name. It would help if you were more specific about the company\\u0027s location or other details.\\r\\n\"}"

 

• and here is my UI

@(Html.Kendo().AIPrompt()
    .Name("aiprompt")
    .ActiveView(0)
    .Service("GenerateSupplierAIReponse", "Supplier")
    //.Events(events => events
    //    .PromptRequest("onPromptRequest")
    //)
    .ToolbarItems(items =>
    {
        items.Add().Type(ItemType.Spacer);

        items.Add()
             .Type(ItemType.Button)
             .Icon("x")
             .FillMode(ButtonFillMode.Flat)
             .Rounded(Rounded.Full)
             .ThemeColor(ThemeColor.Primary)
             .Click("onToolbarButtonClick");
    })
    .Views(views =>
    {
        views.Add().Type(Kendo.Mvc.UI.ViewType.Prompt)
        .PromptSuggestions(new string[] { "What is the parent company of " + Model.Name, "Give me the headquarter address of " + Model.Name });
        views.Add().Type(Kendo.Mvc.UI.ViewType.Output);
    })
)

 

• and here is the result

Everything is getting all the correct authentication and the ai response message content but upon returning the content it will prompt an error message. 

Please advice.

Thank you,

Gerber Manalo