diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md new file mode 100644 index 0000000000..4850316d1d --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md @@ -0,0 +1,85 @@ +--- +layout: post +title: Gemini AI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Gemini AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Gemini AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integration of Gemini AI With AI AssistView control + +The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your MVC applications. + +## Getting Started With the AI AssistView control + +Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your MVC application: + +[ MVC Getting Started Guide](../getting-started) + +## Prerequisites + +* Google account to generate API key on accessing `Gemini AI`. +* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application + +## Install Packages + +Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Syncfusion.EJ2.MVC5 + +``` + +Install the Gemini AI package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Mscc.GenerativeAI + +``` + +## Generate API Key + +1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account. + +2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. + +3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. + +4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. + +> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. + +## Integration Gemini AI with AI AssistView + +You can add the below respective files in your application: + +* Add your generated `API Key` at the line + +```bash + +string apiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs %} +{% endhighlight %} +{% endtabs %} + +![Gemini AI](../../images/gemini-ai.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 Gemini AI for dynamic response. \ No newline at end of file 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 new file mode 100644 index 0000000000..2d3b85a82c --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md @@ -0,0 +1,89 @@ +--- +layout: post +title: Azure Open AI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Azure Open AI +publishingplatform: ##Platform_Name## +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. + +## Getting Started With the AI AssistView control + +Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your MVC application: + +[ MVC Getting Started Guide](../getting-started) + +## Prerequisites + +* An Azure account with access to `Azure Open AI` services and a generated API key. +* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application + +## Install Packages + +Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Syncfusion.EJ2.MVC5 + +``` + +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 + +``` + +## Configure Azure Open AI + +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. + +2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. + +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. Store these values securely, as they will be used in your application. + +> `Security Note`: 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 Azure Open AI with AI AssistView + +You can add the below respective files in your application: + +* Update the following configuration values with your Azure Open AI details: + +```bash + +string endpoint = "Your_Azure_OpenAI_Endpoint"; +string apiKey = "Your_Azure_OpenAI_API_Key"; +string deploymentName = "Your_Deployment_Name"; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs %} +{% endhighlight %} +{% endtabs %} + +![Azure Open AI](../../images/open-ai.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 Azure Open AI for dynamic response. \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md new file mode 100644 index 0000000000..8fbbe75041 --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md @@ -0,0 +1,85 @@ +--- +layout: post +title: Gemini AI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Gemini AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Gemini AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integration of Gemini AI With AI AssistView control + +The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your Core applications. + +## Getting Started With the AI AssistView control + +Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your Core application: + +[ ASP.NET CORE Getting Started Guide](../getting-started) + +## Prerequisites + +* Google account to generate API key on accessing `Gemini AI`. +* [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application + +## Install Packages + +Install the Syncfusion ASP.NET Core package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Syncfusion.EJ2.AspNet.Core + +``` + +Install the Gemini AI package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Mscc.GenerativeAI + +``` + +## Generate API Key + +1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account. + +2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. + +3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. + +4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. + +> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. + +## Integration Gemini AI with AI AssistView + +You can add the below respective files in your application: + +* Add your generated `API Key` at the line + +```bash + +string apiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs %} +{% endhighlight %} +{% endtabs %} + +![Gemini AI](../../images/gemini-ai.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 Gemini AI for dynamic response. \ No newline at end of file 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 new file mode 100644 index 0000000000..bd7dab59db --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md @@ -0,0 +1,89 @@ +--- +layout: post +title: Azure Open AI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Azure Open AI +publishingplatform: ##Platform_Name## +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. + +## Getting Started With the AI AssistView control + +Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your Core app: + +[ CORE Getting Started Guide](../getting-started) + +## Prerequisites + +* An Azure account with access to `Azure Open AI` services and a generated API key. +* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application + +## Install Packages + +Install the Syncfusion ASP.NET Core package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Syncfusion.EJ2.AspNet.Core + +``` + +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 + +``` + +## Configure Azure Open AI + +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. + +2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. + +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. Store these values securely, as they will be used in your application. + +> `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 Azure Open AI with AI AssistView + +You can add the below respective files in your application: + +* Update the following configuration values with your Azure Open AI details: + +```bash + +string endpoint = "Your_Azure_OpenAI_Endpoint"; +string apiKey = "Your_Azure_OpenAI_API_Key"; +string deploymentName = "Your_Deployment_Name"; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs %} +{% endhighlight %} +{% endtabs %} + +![Azure Open AI](../../images/open-ai.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 Azure Open AI for dynamic response. \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png b/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png new file mode 100644 index 0000000000..bbc60975ac Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png differ diff --git a/ej2-asp-core-mvc/ai-assistview/images/open-ai.png b/ej2-asp-core-mvc/ai-assistview/images/open-ai.png new file mode 100644 index 0000000000..c30c78379f Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/open-ai.png differ diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs new file mode 100644 index 0000000000..f2e0ab297c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs @@ -0,0 +1,79 @@ +using Mscc.GenerativeAI; + +namespace WebApplication4.Pages +{ + public class IndexModel : PageModel + { + + public IndexViewModel ViewModel { get; set; } = new IndexViewModel(); + public void OnGet() + { + // Initialize toolbar items + ViewModel.Items = new List + { + new ToolbarItemModel + { + iconCss = "e-icons e-refresh", + align = "Right", + } + }; + + // Initialize prompt suggestions + ViewModel.PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + } + public async Task OnPostGetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string apiKey = ""; // Replace with your key + var googleAI = new GoogleAI(apiKey: apiKey); + var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); + + var response = await model.GenerateContent(request.Prompt); + + if (string.IsNullOrEmpty(response?.Text)) + { + _logger.LogError("Gemini API returned no text."); + return BadRequest("No response from Gemini."); + } + + _logger.LogInformation("Gemini response received: {Response}", response.Text); + return new JsonResult(response.Text); + } + catch (Exception ex) + { + _logger.LogError("Exception in Gemini call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } + + public class IndexViewModel + { + public List Items { get; set; } = new List(); + public string[] PromptSuggestionData { get; set; } + } + + public class PromptRequest + { + public string Prompt { get; set; } + } + + public class ToolbarItemModel + { + public string align { get; set; } + public string iconCss { get; set; } + } + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs new file mode 100644 index 0000000000..c94229f8d3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs @@ -0,0 +1,65 @@ +using Mscc.GenerativeAI; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + + public List Items { get; set; } = new List(); + + public IActionResult Index() + { + Items.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" }); + ViewBag.Items = Items; + var PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + ViewBag.PromptSuggestionData = PromptSuggestionData; + return View(); + } + + public class ToolbarItemModel + { + public string iconCss { get; set; } + public string align { get; set; } + } + + + [HttpPost] + public async Task GetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string apiKey = ""; // Replace with your key + var googleAI = new GoogleAI(apiKey: apiKey); + var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); + + var responseText = await model.GenerateContent(request.Prompt); + + if (string.IsNullOrEmpty(responseText?.Text)) + { + _logger.LogError("Gemini API returned no text."); + return BadRequest("No response from Gemini."); + } + + _logger.LogInformation("Gemini response received: {Response}", responseText?.Text); + return Json(responseText?.Text); + } + catch (Exception ex) + { + _logger.LogError("Exception in Gemini call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/razor new file mode 100644 index 0000000000..ebec3a9e57 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/razor @@ -0,0 +1,112 @@ +@using Syncfusion.EJ2.InteractiveChat +@using Syncfusion.EJ2 + +@{ + ViewData["Title"] = "AI Assistance with OpenAI"; +} + +
+ @Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").PromptSuggestions(ViewBag.PromptSuggestionData).PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings() +{ + Items = ViewBag.Items, + ItemClicked = "toolbarItemClicked" +}).StopRespondingClick("stopRespondingClick").Render() +
+ + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper new file mode 100644 index 0000000000..0e59d545ac --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper @@ -0,0 +1,108 @@ +@using Syncfusion.EJ2.InteractiveChat +@{ + ViewData["Title"] = "AI Assistance with Gemini"; +} + +
+ + + +
+ + + + + + \ No newline at end of file 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 new file mode 100644 index 0000000000..0ff4e66bf0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs @@ -0,0 +1,89 @@ +using OpenAI; +using Azure; +using Azure.AI.OpenAI; +namespace WebApplication4.Pages +{ + public class IndexModel : PageModel + { + + public IndexViewModel ViewModel { get; set; } = new IndexViewModel(); + public void OnGet() + { + // Initialize toolbar items + ViewModel.Items = new List + { + new ToolbarItemModel + { + iconCss = "e-icons e-refresh", + align = "Right", + } + }; + + // Initialize prompt suggestions + ViewModel.PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + } + + public async Task OnPostGetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + 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) + + 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("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure OpenAI."); + } + + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return new JsonResult(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure OpenAI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } + + public class IndexViewModel + { + public List Items { get; set; } = new List(); + public string[] PromptSuggestionData { get; set; } + } + + public class PromptRequest + { + public string Prompt { get; set; } + } + + public class ToolbarItemModel + { + public string align { get; set; } + public string iconCss { get; set; } + } + } \ No newline at end of file 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 new file mode 100644 index 0000000000..912076e1f3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs @@ -0,0 +1,75 @@ +using OpenAI; +using OpenAI.Chat; +using Azure; +using Azure.AI.OpenAI; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + + public List Items { get; set; } = new List(); + + public IActionResult Index() + { + Items.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" }); + ViewBag.Items = Items; + var PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + ViewBag.PromptSuggestionData = PromptSuggestionData; + return View(); + } + public class ToolbarItemModel + { + public string iconCss { get; set; } + public string align { get; set; } + } + [HttpPost] + public async Task GetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + // 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) + + 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("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure OpenAI."); + } + + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return Json(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure OpenAI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/razor new file mode 100644 index 0000000000..4f93076204 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/razor @@ -0,0 +1,103 @@ +@using Syncfusion.EJ2.InteractiveChat + +@{ + ViewData["Title"] = "AI Assistance with OpenAI"; +} + +
+ @Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").PromptSuggestions(ViewBag.PromptSuggestionData).PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings() +{ + Items = ViewBag.Items, + ItemClicked = "toolbarItemClicked" +}).StopRespondingClick("stopRespondingClick").Render() +
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper new file mode 100644 index 0000000000..560e6b7e1c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper @@ -0,0 +1,108 @@ +@using Syncfusion.EJ2.InteractiveChat +@{ + ViewData["Title"] = "AI Assistance with Gemini"; +} + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 6189c7d423..1d618988f2 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -200,6 +200,16 @@