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 index ba46731657..7fb68f5cdb 100644 --- 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 @@ -8,61 +8,62 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# 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) +# Integrate Gemini AI with ASP.NET MVC AI AssistView control + +The AI AssistView control integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs) API to deliver intelligent conversational interfaces. It leverages advanced natural language understanding to interpret user input, maintain context throughout interactions, and provide accurate, relevant responses. By configuring secure authentication and data handling, developers can unlock powerful AI-driven communication features that elevate user engagement and streamline support experiences. ## Prerequisites + +* **Google Account**: For generating a Gemini API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies -* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs). -* [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. +1. Install the `Gemini AI` nuget package in the application. ```bash -NuGet\Install-Package Syncfusion.EJ2.MVC5 +NuGet\Install-Package Mscc.GenerativeAI ``` - -Install the Gemini AI package in the application using Package Manager Console. - + +2. Install the `Markdig` nuget packages in the application. + ```bash - -NuGet\Install-Package Mscc.GenerativeAI - + +Nuget\Install-Package Markdig + ``` ## Generate API Key + +1. **Access Google AI Studio**: Instructs users to sign into [Google AI Studio](https://aistudio.google.com/app/apikey) with a Google account or create a new account if needed. + +2. **Navigate to API Key Creation**: Go to the `Get API Key` option in the left-hand menu or top-right corner of the dashboard. Click the `Create API Key` button. + +3. **Project Selection**: Choose an existing Google Cloud project or create a new one. + +4. **API Key Generation**: After project selection, the API key is generated. Users are instructed to copy and store the key securely, as it is shown only once. + +> Security note: Advises against committing the API key to version control and recommends using environment variables or a secret manager in production. -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. - -## Configure Gemini AI with AI AssistView - -You can add the below respective files in your application: - -* Add your generated `API Key` at the line +## Gemini AI with AI AssistView + +Modify the `index.cshtml` file to integrate the Gemini AI with the AI AssistView control. +* Add your Gemini API key securely in the configuration: + ```bash - + string apiKey = 'Place your API key here'; - + ``` {% tabs %} @@ -75,11 +76,3 @@ string apiKey = 'Place your API key here'; {% 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 the hosted link to interact with the 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/ollama-llm-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/ollama-llm-integration.md new file mode 100644 index 0000000000..079305de41 --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/ollama-llm-integration.md @@ -0,0 +1,76 @@ +--- +layout: post +title: LLM Model in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of LLM Model in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: LLM Model +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate LLM via Ollama with ASP.NET MVC AI AssistView control + +The AI AssistView control integrates with [LLM via Ollama](https://ollama.com) to enable advanced conversational AI features in your ASP.NET MVC application. The control acts as a user interface where user prompts are sent to the selected LLM model via API calls, providing natural language understanding and context-aware responses. + +## Prerequisites + +Before starting, ensure you have the following: + +* [Ollama](https://ollama.com) installed to run and manage LLM models locally. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependency + +To install the Markdig package by run `NuGet\Install-Package Markdig` in Package Manager Console. + +## Configuring Ollama + +Install the LLM Model package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Microsoft.Extensions.AI + +NuGet\Install-Package Microsoft.Extensions.AI.Ollama + +``` + +## Configure AI AssistView with Ollama in ASP.NET MVC + +Modify the `index.cshtml` file to integrate the Ollama with the AI AssistView control. + +Add services in `Program.cs` file + +```bash + +using Microsoft.Extensions.AI; + +builder.Services.AddControllersWithViews(); +builder.Services.AddCors(options => +{ + options.AddPolicy("AllowAll", + builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()); +}); +builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11434/"), "deepseek-r1")) + .UseDistributedCache() + .UseLogging(); + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/razor %} +{% endhighlight %} +{% highlight c# tabtitle="llm-model.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-mvc.cs %} +{% endhighlight %} +{% endtabs %} + +![LLM Model](../images/llm-model.png) 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 689c0e6d1f..bf6bb87746 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 @@ -1,65 +1,76 @@ --- 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. +title: Azure OpenAI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Azure OpenAI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc -control: Azure Open AI +control: Azure OpenAI publishingplatform: ##Platform_Name## documentation: ug --- -# Azure Open AI With AI AssistView control +# Integrate Azure OpenAI with ASP.NET MVC 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 MVC 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) +The AI AssistView control integrates with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) to enable advanced conversational AI features in your applications. The control acts as a user interface, where user prompts are sent to the Azure OpenAI service via API calls, providing natural language understanding and context-aware responses. ## Prerequisites - -* An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) 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. +Before starting, ensure you have the following: + +* **An Azure account**: with access to [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code). + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. +## Install Dependencies + +Install the required packages: + +1. Install the `OpenAI` and `Azure` nuget packages in the application. + ```bash - + NuGet\Install-Package OpenAI NuGet\Install-Package Azure.AI.OpenAI NuGet\Install-Package Azure.Core ``` + +2. Install the `Markdig` nuget packages in the application. + +```bash + +Nuget\Install-Package Markdig + +``` + +Note: The sample below uses HttpClient directly and does not require the Azure/OpenAI SDKs. -## Configure Azure Open AI +## Configure Azure OpenAI -1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure OpenAI resource. -2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. +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 matches your resource configuration. +3. Note the following values: + - API key + - Endpoint (for example, https://.openai.azure.com/) + - API version (must be supported by your resource) + - Deployment name (for example, gpt-4o-mini) 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. + +## Azure OpenAI with AI AssistView + +Modify the `index.cshtml` file to integrate the Azure OpenAI with the AI AssistView control. -## Configure 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: +* Update the following configuration values with your Azure OpenAI details: ```bash @@ -78,12 +89,4 @@ string deploymentName = "Your_Deployment_Name"; {% 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 the Hosted link to interact with your Azure Open AI for dynamic response. \ No newline at end of file +![Azure OpenAI](../images/open-ai.png) 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 index d100b357bd..b2927f46d9 100644 --- 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 @@ -8,61 +8,62 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Gemini AI With AI AssistView control +# Integrate Gemini AI with ASP.NET Core 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) +The AI AssistView control integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs) API to deliver intelligent conversational interfaces. It leverages advanced natural language understanding to interpret user input, maintain context throughout interactions, and provide accurate, relevant responses. By configuring secure authentication and data handling, developers can unlock powerful AI-driven communication features that elevate user engagement and streamline support experiences. ## Prerequisites -* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs). -* [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application - -## Install Packages +* **Google Account**: For generating a Gemini API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies -Install the Syncfusion ASP.NET Core package in the application using Package Manager Console. +1. Install the `Gemini AI` nuget package in the application. ```bash -NuGet\Install-Package Syncfusion.EJ2.AspNet.Core +NuGet\Install-Package Mscc.GenerativeAI ``` - -Install the Gemini AI package in the application using Package Manager Console. - + +2. Install the `Markdig` nuget packages in the application. + ```bash - -NuGet\Install-Package Mscc.GenerativeAI - + +Nuget\Install-Package Markdig + ``` ## Generate API Key + +1. **Access Google AI Studio**: Instructs users to sign into [Google AI Studio](https://aistudio.google.com/app/apikey) with a Google account or create a new account if needed. + +2. **Navigate to API Key Creation**: Go to the `Get API Key` option in the left-hand menu or top-right corner of the dashboard. Click the `Create API Key` button. + +3. **Project Selection**: Choose an existing Google Cloud project or create a new one. + +4. **API Key Generation**: After project selection, the API key is generated. Users are instructed to copy and store the key securely, as it is shown only once. + +> Security note: Advises against committing the API key to version control and recommends using environment variables or a secret manager in production. -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. - -## Configure Gemini AI with AI AssistView - -You can add the below respective files in your application: - -* Add your generated `API Key` at the line +## Gemini AI with AI AssistView + +Modify the `index.cshtml` file to integrate the Gemini AI with the AI AssistView control. +* Add your Gemini API key securely in the configuration: + ```bash - + string apiKey = 'Place your API key here'; - + ``` {% tabs %} @@ -75,11 +76,4 @@ string apiKey = 'Place your API key here'; {% 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 the hosted link to interact with the Gemini AI for dynamic response \ No newline at end of file + \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/ollama-llm-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/ollama-llm-integration.md new file mode 100644 index 0000000000..3a7403ca0e --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/ollama-llm-integration.md @@ -0,0 +1,76 @@ +--- +layout: post +title: LLM Model in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of LLM Model in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: LLM Model +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate LLM via Ollama with ASP.NET Core AI AssistView control + +The AI AssistView control integrates with [LLM via Ollama](https://ollama.com) to enable advanced conversational AI features in your ASP.NET Core application. The control acts as a user interface where user prompts are sent to the selected LLM model via API calls, providing natural language understanding and context-aware responses. + +## Prerequisites + +Before starting, ensure you have the following: + +* [Ollama](https://ollama.com) installed to run and manage LLM models locally. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependency + +To install the Markdig package by run `NuGet\Install-Package Markdig` in Package Manager Console. + +## Configuring Ollama + +Install the LLM Model package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Microsoft.Extensions.AI + +NuGet\Install-Package Microsoft.Extensions.AI.Ollama + +``` + +## Configure AI AssistView with Ollama in ASP.NET Core + +Modify the `index.cshtml` file to integrate the Ollama with the AI AssistView control. + +Add services in `Program.cs` file + +```bash + +using Microsoft.Extensions.AI; + +builder.Services.AddControllersWithViews(); +builder.Services.AddCors(options => +{ + options.AddPolicy("AllowAll", + builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()); +}); +builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11434/"), "deepseek-r1")) + .UseDistributedCache() + .UseLogging(); + +``` + +{% tabs %} +{% highlight tagHelper tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="llm-model.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-core.cs %} +{% endhighlight %} +{% endtabs %} + +![LLM Model](../images/llm-model.png) 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 542a1d9551..4d98aea12a 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 @@ -1,65 +1,76 @@ --- 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. +title: Azure OpenAI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Azure OpenAI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc -control: Azure Open AI +control: Azure OpenAI publishingplatform: ##Platform_Name## documentation: ug --- -# 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 Core 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) +# Integrate Azure OpenAI with ASP.NET Core AI AssistView control +The AI AssistView control integrates with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) to enable advanced conversational AI features in your applications. The control acts as a user interface, where user prompts are sent to the Azure OpenAI service via API calls, providing natural language understanding and context-aware responses. + ## Prerequisites - -* An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) 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. - +Before starting, ensure you have the following: + +* **An Azure account**: with access to [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code). + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies + +Install the required packages: + +1. Install the `OpenAI` and `Azure` nuget packages in the application. + ```bash - + NuGet\Install-Package OpenAI NuGet\Install-Package Azure.AI.OpenAI NuGet\Install-Package Azure.Core ``` + +2. Install the `Markdig` nuget packages in the application. + +```bash + +Nuget\Install-Package Markdig + +``` + +Note: The sample below uses HttpClient directly and does not require the Azure/OpenAI SDKs. -## Configure Azure Open AI +## Configure Azure OpenAI -1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure OpenAI resource. -2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. +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 matches your resource configuration. +3. Note the following values: + - API key + - Endpoint (for example, https://.openai.azure.com/) + - API version (must be supported by your resource) + - Deployment name (for example, gpt-4o-mini) 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. - -## Configure Azure Open AI with AI AssistView +> `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. + +## Azure OpenAI with AI AssistView -You can add the below respective files in your application: +Modify the `index.cshtml` file to integrate the Azure OpenAI with the AI AssistView control. -* Update the following configuration values with your Azure Open AI details: +* Update the following configuration values with your Azure OpenAI details: ```bash @@ -78,12 +89,4 @@ string deploymentName = "Your_Deployment_Name"; {% 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 the hosted link to interact with your Azure Open AI for dynamic response. \ No newline at end of file +![Azure OpenAI](../images/open-ai.png) diff --git a/ej2-asp-core-mvc/ai-assistview/images/llm-model.png b/ej2-asp-core-mvc/ai-assistview/images/llm-model.png new file mode 100644 index 0000000000..7b29ce3d57 Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/llm-model.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 index 2e2a91dd08..7b29ce3d57 100644 Binary files a/ej2-asp-core-mvc/ai-assistview/images/open-ai.png and b/ej2-asp-core-mvc/ai-assistview/images/open-ai.png differ diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md index 8441303b06..9bccca5958 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md @@ -8,22 +8,25 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Microsoft Bot Framework With ASP.NET MVC Chat UI component +# Integrate Microsoft Bot Framework with ASP.NET MVC Chat UI control -The Syncfusion ASP.NET MVC Chat UI supports integration with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in an ASP.NET MVC application. +The Chat UI control integrates seamlessly with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring Direct Line in Azure, and integrating the Chat UI in the application. -## Getting Started With the Chat UI Component +## Prerequisites -Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET MVC app: +Before starting, ensure you have the following: -[ASP.NET MVC Getting Started Guide](../getting-started) +* **Node.js**: Version 16 or higher with npm. -## Prerequisites +* [Microsoft Azure Account](https://portal.azure.com/#home) : Required to create and host the bot. + +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. -* [Microsoft Azure Account](https://portal.azure.com/#home): Required to create and host the bot. -* `Visual Studio`: With ASP.NET MVC development tools. -* `Syncfusion EJ2 ASP.NET MVC`: Install Syncfusion.EJ2.MVC5 in your project. -* `Deployed Azure Bot`: A bot should be created and published using the Bot Framework, accessible via an Azure App Service. Refer to [Microsoft's Bot Creation Guide](https://learn.microsoft.com/en-us/azure/bot-service/). +* **Deployed Azure Bot**: A bot should be created and published using the [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0), which is accessible via an Azure App Service. Refer to Microsoft's Bot Creation Guide. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. ## Install Dependencies @@ -36,14 +39,6 @@ Install-Package Newtonsoft.Json ``` -* Install the Syncfusion EJ2 ASP.NET MVC package: - -```bash - -Install-Package Syncfusion.EJ2.MVC5 - -``` - ## Configure the Azure Bot 1. In the [Azure Portal](https://portal.azure.com/#home), navigate to your bot resource. @@ -123,7 +118,7 @@ Add the Direct Line secret to `Web.config`: Use the Chat UI `messageSend` event to handle message exchanges. This event is triggered before a message is sent, allowing you to forward it to the bot via the direct line API. Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. -Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the direct line API: +Modify the `Views/Home/Index.cshtml` file to integrate the Syncfusion Chat UI with the direct line API: {% tabs %} {% highlight Html tabtitle="Index.cshtml" %} @@ -232,7 +227,7 @@ To enable CORS for API requests, add to `Web.config` under ``: ### Start the Application: Run the project in Visual Studio or use IIS Express. -Open your app in the browser Hosted link to interact with your Microsoft Bot Framework chatbot. +Open your app in the browser (e.g., `http://localhost:port`) to interact with your Microsoft Bot Framework chatbot. ## Troubleshooting diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md index 874d8dade9..27cd2df364 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md @@ -8,23 +8,26 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Google Dialogflow With ASP.NET MVC Chat UI component +# Integrate Google Dialogflow with ASP.NET MVC Chat UI control -The Syncfusion Chat UI supports integration with [Google Dialogflow](https://cloud.google.com/dialogflow/docs), enabling advanced conversational AI features in your ASP.NET MVC applications. +The Chat UI control integrates with [Google Dialogflow](https://cloud.google.com/dialogflow/docs) to enable advanced conversational AI features in your ASP.NET MVC applications. The control acts as a user interface for a support bot, where user prompts are sent to the Dialogflow service via API calls, providing natural language understanding and context-aware responses. -## Getting Started With the ChatUI Component +## Prerequisites -Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET MVC app: +Before starting, ensure you have the following: -[ASP.NET MVC Getting Started Guide](../getting-started) +* **Node.js**: Version 16 or higher with npm. -## Prerequisites +* **Google Account**: To access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). + +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. -* Google account to access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). -* Visual Studio with ASP.NET MVC development tools. -* Syncfusion EJ2 ASP.NET MVC installed in your project. * Dialogflow Service Account with the `Dialogflow API Client` role and its JSON key file. +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + ## Install Dependencies * Install backend dependencies for Dialogflow and server setup using NuGet: @@ -34,13 +37,6 @@ Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is c Install-Package Google.Cloud.Dialogflow.V2 Install-Package Newtonsoft.Json -``` -* Install the Syncfusion EJ2 ASP.NET MVC package in your project: - -```bash - -Install-Package Syncfusion.EJ2.MVC5 - ``` ## Set Up the Dialogflow Agent @@ -49,13 +45,13 @@ Install-Package Syncfusion.EJ2.MVC5 2. Add intents with training phrases and responses (e.g., greetings, FAQs). Test using the dialogflow simulator. -3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a Service Account with the dialogflow API client role, and download the JSON key file. +3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a service account with the dialogflow API client role, and download the JSON key file. > `Security Note`: Never commit the JSON key file to version control. Use environment variables or a secret manager (e.g., Google Cloud Secret Manager) for production. -## Configure ASP.NET MVC Backend +## Configure Node.js Backend -Create `service-acct.json` with your Dialogflow service account credentials in your project root: +Create `backend/service-acct.json` with your Dialogflow service account credentials: {% tabs %} {% highlight js tabtitle="service-acct.json" %} @@ -136,7 +132,7 @@ namespace YourNamespace.Controllers ## Configure message send -Use the Chat UI `messageSend` event to exchange messages. This event is triggered before a message is sent, allowing you to forward it to the backend. +Use the Chat UI `messageSend` event to exchanges message. Each time a user sends a message, this event will be invoked with details of the sent message. ### Forward Message to backend: @@ -146,7 +142,7 @@ In the `messageSend` event handler, send a POST request to your backend API endp Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. -Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the dialogflow backend: +Modify the `Views/Home/Index.cshtml` file to integrate the Syncfusion Chat UI with the dialogflow backend: {% tabs %} {% highlight Html tabtitle="Index.cshtml" %} @@ -216,4 +212,4 @@ Open your app in the browser and chat with your dialogflow-powered bot. * `No Response`: Test intents in the Dialogflow Console simulator to ensure they are configured correctly. * `Quota Exceeded`: Check Dialogflow API quotas in the Google Cloud Console. * `Network Issues`: Confirm the application is running and the frontend is pointing to the correct API URL. -* `Invalid Credentials`: Verify the service account JSON or configuration settings are correctly set up. \ No newline at end of file +* `Invalid Credentials`: Verify the service account JSON or configuration settings are correctly set up. diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md index a7b98e7559..a5a29b7f24 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md @@ -8,37 +8,34 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Microsoft Bot Framework With ASP.NET Core Chat UI component +# Integrate Microsoft Bot Framework with ASP.NET Core Chat UI control -The Syncfusion ASP.NET MVC Chat UI supports integration with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in an ASP.NET Core application. +The Chat UI control integrates seamlessly with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring Direct Line in Azure, and integrating the Chat UI in the application. -## Getting Started With the ChatUI Component +## Prerequisites -Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET Core app: -[ASP.NET Core Getting Started Guide](../getting-started) +Before starting, ensure you have the following: -## Prerequisites +* **Node.js**: Version 16 or higher with npm. -* [Microsoft Azure Account](https://portal.azure.com/#home): Required to create and host the bot. -* `.NET SDK`: Version 6.0 or higher for ASP.NET Core. -* `Syncfusion EJ2 ASP.NET Core`: Install Syncfusion.EJ2.AspNet.Core in your project. -* `Deployed Azure Bot`: A bot should be created and published using the Bot Framework, accessible via an Azure App Service. Refer to [Microsoft's Bot Creation Guide](https://learn.microsoft.com/en-us/azure/bot-service/). +* [Microsoft Azure Account](https://portal.azure.com/#home) : Required to create and host the bot. -## Install Dependencies -* Install backend dependencies for bot communication using NuGet: +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. -```bash +* **Deployed Azure Bot**: A bot should be created and published using the [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0), which is accessible via an Azure App Service. Refer to Microsoft's Bot Creation Guide. -dotnet add package Microsoft.Bot.Connector.DirectLine -dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson +## Set Up the AI AssistView control -``` +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies -* Install the Syncfusion EJ2 ASP.NET Core package: +* Install backend dependencies for bot communication using NuGet: ```bash -dotnet add package Syncfusion.EJ2.AspNet.Core +dotnet add package Microsoft.Bot.Connector.DirectLine +dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson ``` @@ -272,4 +269,4 @@ Open your app in the browser Hosted link to interact with your Microsoft Bot Fra - Test the bot in the Azure Portal using the `Test in Web Chat` feature to ensure it's running correctly. - Check the bot's `Messaging endpoint` in the Configuration section and ensure it is correct and accessible. * `Connection Fails on Load`: Verify the token controller is running and accessible. Check the browser console for network errors. -* `Token Expiration`: direct line tokens are short-lived. The direct line client typically handles token refresh, but if issues persist, restart the direct line connection. \ No newline at end of file +* `Token Expiration`: direct line tokens are short-lived. The direct line client typically handles token refresh, but if issues persist, restart the direct line connection. diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md index d104cd8d6d..afe7e44cda 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md @@ -8,23 +8,28 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Google Dialogflow With ASP.NET Core Chat UI component +# Integrate Google Dialogflow with ASP.NET Core Chat UI control -The Syncfusion Chat UI supports integration with [Google Dialogflow](https://cloud.google.com/dialogflow/docs), enabling advanced conversational AI features in your ASP.NET Core applications. +The Chat UI control integrates with [Google Dialogflow](https://cloud.google.com/dialogflow/docs) to enable advanced conversational AI features in your ASP.NET Core applications. The control acts as a user interface for a support bot, where user prompts are sent to the Dialogflow service via API calls, providing natural language understanding and context-aware responses. -## Getting Started With the ChatUI Component +## Prerequisites -Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is correctly rendered in your ASP.NET Core app: -[ASP.NET Core Getting Started Guide](../getting-started) +Before starting, ensure you have the following: -## Prerequisites +* **Node.js**: Version 16 or higher with npm. + +* **Google Account**: To access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). + +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* Dialogflow Service Account with the `Dialogflow API Client` role and its JSON key file. + +## Set Up the AI AssistView control -* Google account to access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). -* .NET SDK (version 6.0 or higher) for ASP.NET Core. -* Syncfusion EJ2 ASP.NET Core installed in your project. -* Dialogflow Service Account with the Dialogflow API Client role and its JSON key file. +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. ## Install Dependencies + * Install backend dependencies for Dialogflow and server setup using NuGet: ```bash @@ -33,37 +38,30 @@ dotnet add package Google.Cloud.Dialogflow.V2 dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson ``` -* Install the Syncfusion EJ2 ASP.NET Core package in your project: - -```bash -dotnet add package Syncfusion.EJ2.AspNet.Core - -``` ## Set Up the Dialogflow Agent 1. In the dialogflow console, create an [agent](https://cloud.google.com/agent-assist/docs), set a name (e.g., `MyChatBot`), and configure the default language (e.g., English - `en`). 2. Add intents with training phrases and responses (e.g., greetings, FAQs). Test using the dialogflow simulator. -3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a Service Account with the dialogflow API client role, and download the JSON key file. +3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a service account with the dialogflow API client role, and download the JSON key file. > `Security Note`: Never commit the JSON key file to version control. Use environment variables or a secret manager (e.g., Google Cloud Secret Manager) for production. ## Configure Node.js Backend -Create `service-acct.json` with your Dialogflow service account credentials in your project root (or use User Secrets for development): +Create `backend/service-acct.json` with your Dialogflow service account credentials: {% tabs %} {% highlight js tabtitle="service-acct.json" %} - { -"type": "service_account", -"project_id": "your-dialogflow-project-id", -"private_key_id": "abc123xyz...", -"private_key": "-----BEGIN PRIVATE KEY-----\nMIIEv...", -"client_email": "dialogflow-agent@your-dialogflow-project-id.iam.gserviceaccount.com", -... + "type": "service_account", + "project_id": "your-dialogflow-project-id", + "private_key_id": "abc123xyz...", + "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEv...", + "client_email": "dialogflow-agent@your-dialogflow-project-id.iam.gserviceaccount.com", + ... } {% endhighlight %} {% endtabs %} @@ -131,7 +129,7 @@ namespace YourNamespace.Controllers ## Configure message send -Use the Chat UI `messageSend` event to exchange messages. This event is triggered before a message is sent, allowing you to forward it to the backend. +Use the Chat UI `messageSend` event to exchanges message. Each time a user sends a message, this event will be invoked with details of the sent message. ### Forward Message to backend: @@ -213,4 +211,4 @@ Open your app in the browser and chat with your dialogflow-powered bot. * `No Response`: Test intents in the Dialogflow Console simulator to ensure they are configured correctly. * `Quota Exceeded`: Check Dialogflow API quotas in the Google Cloud Console. * `Network Issues`: Confirm the application is running and the API URL is correct. -* `Invalid Credentials`: Verify the service account JSON or configuration settings are correctly set up. \ No newline at end of file +* `Invalid Credentials`: Verify the service account JSON or configuration settings are correctly set up. 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 index 9d34a474eb..7eb7a85b01 100644 --- 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 @@ -39,7 +39,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); //Replace Your Model Name Here + var model = googleAI.GenerativeModel(model: Model.Gemini25Flash); //Replace your model name here var response = await model.GenerateContent(request.Prompt); @@ -76,4 +76,4 @@ 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 index 6c0054c9c0..f6b81bda01 100644 --- 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 @@ -42,7 +42,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); //Replace Your Model Name Here + var model = googleAI.GenerativeModel(model: Model.Gemini25Flash); //Replace your model name here var responseText = await model.GenerateContent(request.Prompt); 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 index ecd93a6004..c635693166 100644 --- 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 @@ -16,8 +16,7 @@ @@ -103,7 +102,7 @@ } .banner-content .e-assistview-icon:before { - font-size: 35px; + font-size: 25px; } .banner-content { 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 index 69282bbe0c..5d1ce9f210 100644 --- 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 @@ -15,8 +15,7 @@ @@ -99,7 +98,7 @@ } .banner-content .e-assistview-icon:before { - font-size: 35px; + font-size: 25px; } .banner-content { diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-core.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-core.cs new file mode 100644 index 0000000000..c607b6fd0a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-core.cs @@ -0,0 +1,92 @@ +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.AI; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + private readonly IChatClient _chatClient; + private readonly ILogger _logger; + + public HomeController(IChatClient chatClient, ILogger logger) + { + _chatClient = chatClient; + _logger = logger; + } + + public IActionResult Index() + { + var viewModel = new IndexViewModel(); + // 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?" + }; + return View(viewModel); + } + + [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."); + } + + // Use Ollama via IChatClient (from Program.cs) + var chatCompletion = await _chatClient.CompleteAsync(request.Prompt); + var responseText = chatCompletion.Message.Contents.FirstOrDefault()?.ToString(); + + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Ollama API returned no text."); + return BadRequest("No response from Ollama."); + } + + _logger.LogInformation("Ollama response received: {Response}", responseText); + return Json(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Ollama call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + + public IActionResult Error() + { + return View(); + } + } + + public class IndexViewModel + { + public List Items { get; set; } = new List(); + public string[] PromptSuggestionData { get; set; } + } + + public class PromptRequest + { + [JsonPropertyName("prompt")] + 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/llm-model/llm-model-mvc.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-mvc.cs new file mode 100644 index 0000000000..c118feda00 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-mvc.cs @@ -0,0 +1,85 @@ +using System.Diagnostics; +using Microsoft.AspNetCore.Mvc.RazorPages; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.AI; +using Mscc.GenerativeAI; +using Syncfusion.EJ2.Layouts; +using System.Text.Json.Serialization; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + private readonly IChatClient _chatClient; + private readonly ILogger _logger; + + public HomeController(IChatClient chatClient, ILogger logger) + { + _chatClient = chatClient; + _logger = logger; + } + + public IActionResult Index() + { + // Initialize toolbar items (like reference) + var items = new List + { + new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" } + }; + var PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + ViewBag.PromptSuggestionData = PromptSuggestionData; + ViewBag.Items = items; + + return View(); + } + + [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."); + } + + // Use Ollama via IChatClient + var chatCompletion = await _chatClient.CompleteAsync(request.Prompt); + var responseText = chatCompletion.Message.Contents.FirstOrDefault()?.ToString(); + + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Ollama API returned no text."); + return BadRequest("No response from Ollama."); + } + + _logger.LogInformation("Ollama response received: {Response}", responseText); + return Json(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Ollama call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } + + public class PromptRequest + { + [JsonPropertyName("prompt")] + public string Prompt { get; set; } + } + + public class ToolbarItemModel + { + public string iconCss { get; set; } + public string align { get; set; } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/razor new file mode 100644 index 0000000000..9b603a439e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/razor @@ -0,0 +1,90 @@ +@using Syncfusion.EJ2.InteractiveChat +@using Syncfusion.EJ2 + +@{ + ViewData["Title"] = "AI Assistance"; +} + +
+ @Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").PromptSuggestions(ViewBag.PromptSuggestionData).PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings() +{ + Items = ViewBag.Items, + ItemClicked = "toolbarItemClicked" +}).Render() +
+ + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/tagHelper new file mode 100644 index 0000000000..7abe5633da --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/tagHelper @@ -0,0 +1,85 @@ +@model AssistViewDemo.Controllers.IndexViewModel +@{ + ViewData["Title"] = "AI Assistance"; +} + +
+ + + +
+ + + + + \ 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 index 0ff4e66bf0..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); @@ -86,4 +86,4 @@ 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 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/ai-assistview/ai-integrations/open-ai/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/razor index 4f93076204..561e97b36f 100644 --- 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 @@ -15,8 +15,7 @@ @@ -94,7 +93,7 @@ } .banner-content .e-assistview-icon:before { - font-size: 35px; + font-size: 25px; } .banner-content { 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 index 560e6b7e1c..103c1b2da7 100644 --- 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 @@ -16,8 +16,7 @@ @@ -98,7 +97,7 @@ } .banner-content .e-assistview-icon:before { - font-size: 35px; + font-size: 25px; } .banner-content { 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 ba3e7f92f4..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 @@ -98,4 +98,4 @@ } }; -} \ No newline at end of file +} 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 2f1a689619..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 @@ -95,4 +95,4 @@ } }; -} \ No newline at end of file +} diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index ca75e3a4d5..6dcad9b621 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -206,7 +206,10 @@ Google Gemini
  • - Azure Open AI + Azure OpenAI +
    • +
  • + Ollama LLM
    • @@ -573,10 +576,10 @@
  • Chat Bot Integrations
    • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 7b84bff62b..21c405232d 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -160,8 +160,11 @@ Google Gemini
  • - Azure Open AI + Azure OpenAI
    • +
  • + Ollama LLM +
  • Toolbar items
    • @@ -576,10 +579,10 @@
  • Chat Bot Integrations