diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md index 2d3b85a82c..3d7d786bac 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md @@ -10,7 +10,7 @@ documentation: ug # Integration of Azure Open AI With AI AssistView control -The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your Angular applications. +The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your MVC applications. ## Getting Started With the AI AssistView control diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md index bd7dab59db..5514e7bd7b 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md @@ -10,7 +10,7 @@ documentation: ug # Integration of Azure Open AI With AI AssistView control -The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your Angular applications. +The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your Core applications. ## Getting Started With the AI AssistView control diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/ai-integrations/openai-integration.md index 629425146d..7b03076dde 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/ai-integrations/openai-integration.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/ai-integrations/openai-integration.md @@ -1,25 +1,25 @@ --- layout: post -title: Open AI in ##Platform_Name## Chat UI Control | Syncfusion -description: Checkout and learn about Integration of Open AI in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +title: Azure Open AI in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc -control: Open AI +control: Azure Open AI publishingplatform: ##Platform_Name## documentation: ug --- -# Integration of Open AI With Chat UI component +# Integration of Azure Open AI With Chat UI component -The Syncfusion Chat UI supports integration with (OpenAI)[https://platform.openai.com/docs/overview], enabling advanced conversational AI features in your Asp MVC applications. +The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your MVC applications. ## Getting Started With the Chat UI Component -Before integrating Open AI, ensure that the Syncfusion Chat UI control is correctly rendered in your MVC application: +Before integrating Azure Open AI, ensure that the Syncfusion Chat UI control is correctly rendered in your MVC application: [ MVC Getting Started Guide](../getting-started) ## Prerequisites -* OpenAI account to generate an API key for accessing the `OpenAI` API +* An Azure account with access to `Azure Open AI` services and a generated API key. * Syncfusion Chat UI for MVC `Syncfusion.EJ2.MVC5` Install ASP.NET MVC package in the application. @@ -33,36 +33,40 @@ NuGet\Install-Package Syncfusion.EJ2.MVC5 ``` -Install the Open AI package in the application using the Package Manager Console. +Install the Open AI and Azure Open AI package in the application using Package Manager Console. ```bash NuGet\Install-Package OpenAI +NuGet\Install-Package Azure.AI.OpenAI +NuGet\Install-Package Azure.Core ``` ## Generate API Key -1. Go to [Open AI](https://platform.openai.com/docs/overview) and sign in with your Google account. If you don’t have one, create a new account. +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. -2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu. +2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. -3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key. +3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration. -4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again. +4. Store these values securely, as they will be used in your application. -> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. +> `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely -## Integration Open AI with Chat UI +## Integration Azure Open AI with Chat UI You can add the below respective files in your application: -* Add your generated `API Key` at the line +* Update the following configuration values with your Azure Open AI details: ```bash -const openaiApiKey = 'Place your API key here'; +string endpoint = "Your_Azure_OpenAI_Endpoint"; +string apiKey = "Your_Azure_OpenAI_API_Key"; +string deploymentName = "Your_Deployment_Name"; ``` @@ -75,7 +79,7 @@ const openaiApiKey = 'Place your API key here'; {% endhighlight %} {% endtabs %} -![Open AI](../../images/openai.png) +![Azure Open AI](../../images/openai.png) ## Run and Test @@ -83,4 +87,4 @@ Run the application in the browser using the following command. Build and run the app (Ctrl + F5). -Open `https://localhost:44321` to interact with your Open AI for dynamic response. \ No newline at end of file +Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md index 41935b22d0..11ec9b6d5f 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md @@ -1,25 +1,25 @@ --- layout: post -title: Open AI in ##Platform_Name## Chat UI Control | Syncfusion -description: Checkout and learn about Integration of Open AI in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +title: Azure Open AI in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc -control: Open AI +control: Azure Open AI publishingplatform: ##Platform_Name## documentation: ug --- -# Integration of Open AI With Chat UI component +# Integration of Azure Open AI With Chat UI component -The Syncfusion Chat UI supports integration with (OpenAI)[https://platform.openai.com/docs/overview], enabling advanced conversational AI features in your Asp Core applications. +The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your Core applications. ## Getting Started With the Chat UI Component -Before integrating Open AI, ensure that the Syncfusion Chat UI control is correctly rendered in your core application: +Before integrating Azure Open AI, ensure that the Syncfusion Chat UI control is correctly rendered in your core application: [ Asp Core Getting Started Guide](../getting-started) ## Prerequisites -* OpenAI account to generate an API key for accessing the `OpenAI` API +* An Azure account with access to `Azure Open AI` services and a generated API key. * Syncfusion Chat UI for Core `Syncfusion.EJ2.AspNet.Core` Install ASP.NET Core package in the application. @@ -32,36 +32,40 @@ Install the Syncfusion ASP.NET Core package in the application using the Package NuGet\Install-Package Syncfusion.EJ2.AspNet.Core ``` -Install the Open AI package in the application using the Package Manager Console. +Install the Open AI and Azure Open AI package in the application using Package Manager Console. ```bash NuGet\Install-Package OpenAI +NuGet\Install-Package Azure.AI.OpenAI +NuGet\Install-Package Azure.Core ``` -## Generate API Key +## Configure Azure Open AI -1. Go to [Open AI](https://platform.openai.com/docs/overview) and sign in with your Google account. If you don’t have one, create a new account. +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. -2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu. +2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. -3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key. +3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration. -4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again. +4. Store these values securely, as they will be used in your application. -> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. +> `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. -## Integration Open AI with Chat UI +## Integration Azure Open AI with Chat UI You can add the below respective files in your application: -* Add your generated `API Key` at the line +* Update the following configuration values with your Azure Open AI details: ```bash -const openaiApiKey = 'Place your API key here'; +string endpoint = "Your_Azure_OpenAI_Endpoint"; +string apiKey = "Your_Azure_OpenAI_API_Key"; +string deploymentName = "Your_Deployment_Name"; ``` @@ -74,7 +78,7 @@ const openaiApiKey = 'Place your API key here'; {% endhighlight %} {% endtabs %} -![Open AI](../../images/openai.png) +![Azure Open AI](../../images/openai.png) ## Run and Test @@ -82,4 +86,4 @@ Run the application in the browser using the following command. Build and run the app (Ctrl + F5). -Open `https://localhost:44321` to interact with your Open AI for dynamic response. \ No newline at end of file +Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/images/openai.png b/ej2-asp-core-mvc/chat-ui/images/openai.png index 417700cfe8..3f56e695a9 100644 Binary files a/ej2-asp-core-mvc/chat-ui/images/openai.png and b/ej2-asp-core-mvc/chat-ui/images/openai.png differ diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs index bb855a230f..5bc65aba86 100644 --- a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs @@ -39,9 +39,9 @@ public async Task OnPostGetAIResponse([FromBody] PromptRequest re return BadRequest("Prompt cannot be empty."); } - string endpoint = ""; // Replace with your Azure OpenAI endpoint - string apiKey = ""; // Replace with your Azure OpenAI API key - string deploymentName = ""; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) var credential = new AzureKeyCredential(apiKey); var client = new AzureOpenAIClient(new Uri(endpoint), credential); diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs index 912076e1f3..fdb042b819 100644 --- a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs @@ -41,9 +41,9 @@ public async Task GetAIResponse([FromBody] PromptRequest request) } // Azure OpenAI configuration - string endpoint = ""; // Replace with your Azure OpenAI endpoint - string apiKey = ""; // Replace with your Azure OpenAI API key - string deploymentName = ""; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) var credential = new AzureKeyCredential(apiKey); var client = new AzureOpenAIClient(new Uri(endpoint), credential); diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs index e91eb26216..08e0eb9fc7 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs @@ -37,7 +37,7 @@ public async Task GetAIResponse([FromBody] PromptRequest request) } string apiKey = ""; // Replace with your key var googleAI = new GoogleAI(apiKey: apiKey); - var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); + var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); // Replace Your Model Name Here var responseText = await model.GenerateContent(request.Prompt); if (string.IsNullOrEmpty(responseText?.Text)) diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor index 458d712bbf..08eaac9cd2 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor @@ -2,7 +2,7 @@ @using Newtonsoft.Json @using Syncfusion.EJ2 @{ - ViewData["Title"] = "AI Chat with Gemini AI"; + ViewData["Title"] = "AI Chat with Gemini AI"; }
@@ -30,8 +30,7 @@ } } - function onMessageSend(args) { - setTimeout(async () => { + async function onMessageSend(args) { chatObj.typingUsers = [aiModel]; let responseText = ''; try { @@ -58,7 +57,6 @@ } finally { chatObj.typingUsers = []; } - }, 500); } diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/openai.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/openai.cs index 71c2f92ac1..835a39f831 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/openai.cs +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/openai.cs @@ -6,7 +6,8 @@ using OpenAI.Chat; using Syncfusion.EJ2.InteractiveChat; using Newtonsoft.Json; - +using Azure.AI.OpenAI; +using Azure; private readonly ILogger _logger; public List HeaderToolbar { get; set; } = new List(); public HomeController(ILogger logger) @@ -19,7 +20,7 @@ public IActionResult Index() HeaderToolbar.Add(new ToolbarItemModel { align = "Right", iconCss = "e-icons e-refresh", tooltip = "Refresh" }); ViewBag.HeaderToolbar = HeaderToolbar; var currentUser = new ChatUIUser { Id = "user1", User = "You" }; - var aiUser = new ChatUIUser { Id = "ai", User = "Open AI" }; + var aiUser = new ChatUIUser { Id = "ai", User = "Azure Open AI" }; ViewBag.CurrentUser = currentUser; ViewBag.AIUser = aiUser; @@ -37,22 +38,32 @@ public async Task GetAIResponse([FromBody] PromptRequest request) _logger.LogWarning("Prompt is null or empty."); return BadRequest("Prompt cannot be empty."); } - string apiKey = ""; // Replace with your OpenAI API key - var openAiClient = new OpenAIClient(apiKey); - var chatClient = openAiClient.GetChatClient("gpt-4o-mini"); // Use your preferred model, e.g., "gpt-4o-mini" or "gpt-4o" - OpenAI.Chat.ChatCompletion completion = await chatClient.CompleteChatAsync(request.Prompt); - string responseText = completion.Content[0].Text; + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + + string responseText = completion.Value.Content[0].Text; if (string.IsNullOrEmpty(responseText)) { - _logger.LogError("OpenAI API returned no text."); - return BadRequest("No response from OpenAI."); + _logger.LogError("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure Open AI."); } - _logger.LogInformation("OpenAI response received: {Response}", responseText); + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); return Json(responseText); } catch (Exception ex) { - _logger.LogError("Exception in OpenAI call: {Message}", ex.Message); + _logger.LogError("Exception in Azure Open AI call: {Message}", ex.Message); return BadRequest($"Error generating response: {ex.Message}"); } } diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/razor index 569033ddb1..ec39532a80 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/razor +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/razor @@ -2,11 +2,11 @@ @using Newtonsoft.Json @using Syncfusion.EJ2 @{ - ViewData["Title"] = "AI Chat with OpenAI"; + ViewData["Title"] = "AI Chat with Azure Open AI"; }
- @Html.EJS().ChatUI("chatUI").User(ViewBag.CurrentUser).HeaderText("Chat with OpenAI").HeaderToolbar(new ChatUIToolbarSettings() { Items = ViewBag.HeaderToolbar, ItemClicked = "itemClicked" }).HeaderIconCss("e-icons e-ai-chat").EmptyChatTemplate("#emptyChatTemplate").MessageSend("onMessageSend").Created("onCreated").Render() + @Html.EJS().ChatUI("chatUI").User(ViewBag.CurrentUser).HeaderText("Chat with Azure Open AI").HeaderToolbar(new ChatUIToolbarSettings() { Items = ViewBag.HeaderToolbar, ItemClicked = "itemClicked" }).HeaderIconCss("e-icons e-ai-chat").EmptyChatTemplate("#emptyChatTemplate").MessageSend("onMessageSend").Created("onCreated").Render()
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/gemini.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/gemini.cs index e8165296a1..b0ef1d5362 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/gemini.cs +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/gemini.cs @@ -31,7 +31,7 @@ public async Task OnPostGetAIResponse([FromBody] PromptRequest re string apiKey = ""; // Replace with your key var googleAI = new GoogleAI(apiKey: apiKey); - var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); + var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); // Replace Your Model Name Here var response = await model.GenerateContent(request.Prompt); diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper index 9008ee3b9a..fa35b8f30f 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper @@ -63,8 +63,7 @@ }; // Handle message sending - chatUI.messageSend = function (args) { - setTimeout(async () => { + chatUI.messageSend = async function (args) { // Show typing indicator chatUI.typingUsers = [aiModel]; @@ -89,7 +88,6 @@ author: aiModel }); } catch (error) { - console.error('Error fetching Gemini response:', error); chatUI.addMessage({ text: 'Error generating response. Please try again.', author: aiModel @@ -98,7 +96,6 @@ // Hide typing indicator chatUI.typingUsers = []; } - }, 500); }; -} \ No newline at end of file +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/openai.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/openai.cs index bef1e1c39d..afb07f147b 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/openai.cs +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/openai.cs @@ -1,8 +1,10 @@ using Microsoft.AspNetCore.Mvc; -using Microsoft.AspNetCore.Mvc.RazorPages; +using Microsoft.AspNetCore.Mvc.RazorPages; using System.Threading.Tasks; using OpenAI.Chat; using OpenAI; +using Azure; +using Azure.AI.OpenAI; private readonly ILogger _logger; public List HeaderToolbar { get; set; } = new List(); @@ -29,25 +31,33 @@ public async Task OnPostGetAIResponse([FromBody] PromptRequest re return BadRequest("Prompt cannot be empty."); } - string apiKey = ""; // Replace with your OpenAI API key - var openAiClient = new OpenAIClient(apiKey); - var chatClient = openAiClient.GetChatClient("gpt-4o-mini"); // Use your preferred model, e.g., "gpt-4o-mini" or "gpt-4o" + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) - ChatCompletion completion = await chatClient.CompleteChatAsync(request.Prompt); - string response = completion.Content[0].Text; + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); - if (string.IsNullOrEmpty(response)) + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + string responseText = completion.Value.Content[0].Text; + + if (string.IsNullOrEmpty(responseText)) { - _logger.LogError("Open AI API returned no text."); - return BadRequest("No response from Open AI."); + _logger.LogError("Azure Open AI API returned no text."); + return BadRequest("No response from Azure Open AI."); } - _logger.LogInformation("Open AI response received: {Response}", response); - return new JsonResult(response); + _logger.LogInformation("Azure Open AI response received: {Response}", responseText); + return new JsonResult(responseText); } catch (Exception ex) { - _logger.LogError("Exception in Open AI call: {Message}", ex.Message); + _logger.LogError("Exception in Azure Open AI call: {Message}", ex.Message); return BadRequest($"Error generating response: {ex.Message}"); } } diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper index 3c865740e2..ad95de3f5f 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper @@ -1,7 +1,7 @@ @page @model IndexModel @{ - ViewData["Title"] = "Chat UI with Open AI"; + ViewData["Title"] = "Chat UI with Azure Open AI"; }
- + @@ -34,7 +34,7 @@ @section Scripts { @@ -49,7 +49,7 @@ }; var aiModel = { id: 'ai', - user: 'Open AI' + user: 'Azure Open AI' }; // Customize header, icon, and toolbar @@ -60,8 +60,7 @@ }; // Handle message sending - chatUI.messageSend = function (args) { - setTimeout(async () => { + chatUI.messageSend = async function (args) { // Show typing indicator chatUI.typingUsers = [aiModel]; @@ -86,7 +85,6 @@ author: aiModel }); } catch (error) { - console.error('Error fetching Open AI response:', error); chatUI.addMessage({ text: 'Error generating response. Please try again.', author: aiModel @@ -95,7 +93,6 @@ // Hide typing indicator chatUI.typingUsers = []; } - }, 500); }; -} \ No newline at end of file +} diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 8e7a01f0aa..877f05b545 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -589,7 +589,7 @@ Integration with Google Gemini
  • - Integration with Open AI + Integration with Azure Open AI
    • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index a47cd75c51..f5da926d7b 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -592,7 +592,7 @@ Integration with Google Gemini
  • - Integration with Open AI + Integration with Azure Open AI