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 1893daa705..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 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 index 3b13389e0c..079305de41 100644 --- 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 @@ -8,29 +8,29 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# LLM via Ollama With AI AssistView component +# Integrate LLM via Ollama with ASP.NET MVC AI AssistView control -The Syncfusion AI AssistView supports integration with [LLM via Ollama](https://ollama.com), enabling advanced conversational AI features in your applications. The component acts as a UI for a support bot, where user prompts are sent to the selected AI service via API calls. - -## Getting Started With the AI AssistView control - -Before integrating LLM Model, 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 [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 -* [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 - -``` +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. @@ -42,7 +42,9 @@ NuGet\Install-Package Microsoft.Extensions.AI.Ollama ``` -## Configure LLM Model with AI AssistView +## 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 @@ -72,11 +74,3 @@ builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11 {% endtabs %} ![LLM Model](../images/llm-model.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 LLM Model for dynamic response. 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 00c70d5cab..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. +![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 index 68b782efaf..3a7403ca0e 100644 --- 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 @@ -8,29 +8,29 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# LLM via Ollama With AI AssistView component +# Integrate LLM via Ollama with ASP.NET Core AI AssistView control -The Syncfusion AI AssistView supports integration with [LLM via Ollama](https://ollama.com), enabling advanced conversational AI features in your applications. The component acts as a UI for a support bot, where user prompts are sent to the selected AI service via API calls. +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. -## Getting Started With the AI AssistView control - -Before integrating LLM Model, ensure that the Syncfusion AI AssistView control is correctly rendered in your Core application: - -[ CORE Getting Started Guide](../getting-started) - ## Prerequisites -* [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 +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. @@ -42,7 +42,9 @@ NuGet\Install-Package Microsoft.Extensions.AI.Ollama ``` -## Configure LLM Model with AI AssistView +## 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 @@ -72,11 +74,3 @@ builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11 {% endtabs %} ![LLM Model](../images/llm-model.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 AI model where you can enter prompts and receive responses from the Ollama model. \ 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 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/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 b173d641b7..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" %} 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 17620f1f8f..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" %} 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 c1ab5e4e15..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 ``` 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 fdc51ba056..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: diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 9c467effec..bd87913c18 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -206,7 +206,7 @@ Google Gemini
  • - Azure Open AI + Azure OpenAI
  • Ollama LLM @@ -576,10 +576,10 @@
  • Chat Bot Integrations
    • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 38f043e65b..8895e097af 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -160,7 +160,7 @@ Google Gemini
  • - Azure Open AI + Azure OpenAI
  • Ollama LLM @@ -579,10 +579,10 @@
  • Chat Bot Integrations