Merge pull request #4559 from syncfusion-content/982586-Azure-ChatUI

982586: added UG for the Azure Open AI integration with the ChatUI component in the Core and MVC platform

Author: IndrajithSrinivasan

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
 

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
 

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,12 +79,12 @@ const openaiApiKey = 'Place your API key here';
 {% endhighlight %}
 {% endtabs %}
 
-![Open AI](../../images/openai.png)
+![Azure Open AI](../../images/openai.png)
 
 ## Run and Test 
 
 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.
+Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response.

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,12 +78,12 @@ const openaiApiKey = 'Place your API key here';
 {% endhighlight %}
 {% endtabs %}
 
-![Open AI](../../images/openai.png)
+![Azure Open AI](../../images/openai.png)
 
 ## Run and Test 
 
 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.
+Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response.

ej2-asp-core-mvc/chat-ui/images/openai.png

@@ -39,9 +39,9 @@ public async Task<IActionResult> 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);

ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs

@@ -41,9 +41,9 @@ public async Task<IActionResult> 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); 

ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs

@@ -37,7 +37,7 @@ public async Task<IActionResult> 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))

ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs

@@ -2,7 +2,7 @@
 @using Newtonsoft.Json
 @using Syncfusion.EJ2
 @{
-    ViewData["Title"] = "AI Chat with Gemini AI";
+	ViewData["Title"] = "AI Chat with Gemini AI";
 }
 
 <div class="chatui-container" style="height:380px; width:450px">
@@ -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);
     }
 </script>
 

ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor

@@ -6,7 +6,8 @@
 using OpenAI.Chat;
 using Syncfusion.EJ2.InteractiveChat;
 using Newtonsoft.Json;
-
+using Azure.AI.OpenAI;
+using Azure;
 private readonly ILogger<HomeController> _logger;
 public List<ToolbarItemModel> HeaderToolbar { get; set; } = new List<ToolbarItemModel>();
 public HomeController(ILogger<HomeController> 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<IActionResult> 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}");
     }
 }