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

 

[Ivaylo]

Hi Gerber,

Thank you for reaching out.

I am currently investigating the case, but will need some additional time before I can provide feedback. I will get back to you once I have further details on the matter.

Thank you in advance for your patience.

Kind Regards,

Ivaylo

[Ivaylo]

Hi Gerber,

Thank you for your patience.

Thank you for the details provided.

Could you share an isolated sample project where the issue is reproduced? Examining this project will let us replicate the issue locally and further troubleshoot it.

• https://www.telerik.com/blogs/isolating-a-problem-in-a-sample-project  

Looking forward to hearing back from you.

Best Regards,

Ivaylo

[Gerber]

Hi Ivaylo,

Thank you for your quick response. 

We were able to figure out the solution for this. You'll just need to return or supply the properties of addPromptOutput object of aiprompt.

Regards,

Gerber

 

[Gerber]

We were able to figure out the solution for this. You'll just need to return or supply the properties of addPromptOutput object of aiprompt.