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 4850316d1d..6b998edc49 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 @@ -20,7 +20,7 @@ Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control i ## Prerequisites -* Google account to generate API key on accessing `Gemini AI`. +* 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 @@ -43,7 +43,7 @@ NuGet\Install-Package Mscc.GenerativeAI ## Generate API Key -1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account. +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. @@ -74,7 +74,7 @@ string apiKey = 'Place your API key here'; {% endhighlight %} {% endtabs %} -![Gemini AI](../../images/gemini-ai.png) +![Gemini AI](../images/gemini-ai.png) ## Run and Test @@ -82,4 +82,4 @@ Run the application in the browser using the following command. Build and run the app (Ctrl + F5). -Open `https://localhost:44321` to interact with your Gemini AI for dynamic response. \ No newline at end of file +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/openai-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md index 2d3b85a82c..4be3202b90 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md @@ -10,7 +10,7 @@ documentation: ug # Integration of Azure Open AI With AI AssistView control -The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your Angular applications. +The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your MVC applications. ## Getting Started With the AI AssistView control @@ -20,7 +20,7 @@ Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView contr ## Prerequisites -* An Azure account with access to `Azure Open AI` services and a generated API key. +* 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 @@ -49,7 +49,7 @@ NuGet\Install-Package Azure.Core 2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. -3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration. +3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration. 4. Store these values securely, as they will be used in your application. @@ -78,7 +78,7 @@ string deploymentName = "Your_Deployment_Name"; {% endhighlight %} {% endtabs %} -![Azure Open AI](../../images/open-ai.png) +![Azure Open AI](../images/open-ai.png) ## Run and Test @@ -86,4 +86,4 @@ Run the application in the browser using the following command. Build and run the app (Ctrl + F5). -Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response. \ No newline at end of file +Open the Hosted link to interact with your Azure Open AI for dynamic response. \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md index 8fbbe75041..6d541374ee 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 @@ -20,7 +20,7 @@ Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control i ## Prerequisites -* Google account to generate API key on accessing `Gemini AI`. +* 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 @@ -43,7 +43,7 @@ NuGet\Install-Package Mscc.GenerativeAI ## Generate API Key -1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account. +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. @@ -74,7 +74,7 @@ string apiKey = 'Place your API key here'; {% endhighlight %} {% endtabs %} -![Gemini AI](../../images/gemini-ai.png) +![Gemini AI](../images/gemini-ai.png) ## Run and Test @@ -82,4 +82,4 @@ Run the application in the browser using the following command. Build and run the app (Ctrl + F5). -Open `https://localhost:44321` to interact with your Gemini AI for dynamic response. \ No newline at end of file +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.NETCORE/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md index bd7dab59db..80e73b0fed 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md @@ -10,7 +10,7 @@ documentation: ug # Integration of Azure Open AI With AI AssistView control -The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your Angular applications. +The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your Core applications. ## Getting Started With the AI AssistView control @@ -20,7 +20,7 @@ Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView contr ## Prerequisites -* An Azure account with access to `Azure Open AI` services and a generated API key. +* 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 @@ -49,7 +49,7 @@ NuGet\Install-Package Azure.Core 2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. -3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration. +3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration. 4. Store these values securely, as they will be used in your application. @@ -78,7 +78,7 @@ string deploymentName = "Your_Deployment_Name"; {% endhighlight %} {% endtabs %} -![Azure Open AI](../../images/open-ai.png) +![Azure Open AI](../images/open-ai.png) ## Run and Test @@ -86,4 +86,4 @@ Run the application in the browser using the following command. Build and run the app (Ctrl + F5). -Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response. \ No newline at end of file +Open the hosted link to interact with your Azure Open AI for dynamic response. \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png b/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png index bbc60975ac..2e2a91dd08 100644 Binary files a/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png and b/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png differ diff --git a/ej2-asp-core-mvc/ai-assistview/images/open-ai.png b/ej2-asp-core-mvc/ai-assistview/images/open-ai.png index c30c78379f..2e2a91dd08 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/ai-integrations/gemini-integration.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/ai-integrations/gemini-integration.md deleted file mode 100644 index 6ad8c188d9..0000000000 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/ai-integrations/gemini-integration.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -layout: post -title: Gemini AI in ##Platform_Name## Chat UI Control | Syncfusion -description: Checkout and learn about Gemini AI in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Gemini AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Integration of Gemini AI With Chat UI component - -The Syncfusion Chat UI supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your MVC applications. - -## Getting Started With the Chat UI Component - -Before integrating Gemini AI, ensure that the Syncfusion Chat UI control is correctly rendered in your MVC application: - -[ MVC Getting Started Guide](../getting-started) - -## Prerequisites - -* Google account to generate API key on accessing `Gemini AI` - -* Syncfusion Chat UI for MVC `Syncfusion.EJ2.MVC5` Install ASP.NET MVC package in the application. - -## Install Dependencies - -Install the Syncfusion ASP.NET MVC package in the application using the Package Manager Console. - -```bash - -NuGet\Install-Package Syncfusion.EJ2.MVC5 - -``` - -Install the Open AI package in the application using the Package Manager Console. - -```bash - -NuGet\Install-Package Mscc.GenerativeAI - -``` - -## Generate API Key - -1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account. - -2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. - -3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. - -4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. - -> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. - -## Integration Gemini AI with Chat UI - -You can add the below respective files in your application: - -* Add your generated `API Key` at the line - -```bash - -const geminiApiKey = 'Place your API key here'; - -``` - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor %} -{% endhighlight %} -{% highlight c# tabtitle="gemini.cs" %} -{% include code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs %} -{% endhighlight %} -{% endtabs %} - -![gemini](../../images/gemini.png) - -## Run and Test - -Run the application in the browser using the following command. - -Build and run the app (Ctrl + F5). - -Open `https://localhost:44321` to interact with your Gemini AI for dynamic response. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/ai-integrations/openai-integration.md deleted file mode 100644 index 7b03076dde..0000000000 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/ai-integrations/openai-integration.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -layout: post -title: Azure Open AI in ##Platform_Name## Chat UI Control | Syncfusion -description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Azure Open AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Integration of Azure Open AI With Chat UI component - -The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your MVC applications. - -## Getting Started With the Chat UI Component - -Before integrating Azure Open AI, ensure that the Syncfusion Chat UI control is correctly rendered in your MVC application: -[ MVC Getting Started Guide](../getting-started) - -## Prerequisites - -* An Azure account with access to `Azure Open AI` services and a generated API key. - -* Syncfusion Chat UI for MVC `Syncfusion.EJ2.MVC5` Install ASP.NET MVC package in the application. - -## Install Dependencies - -Install the Syncfusion ASP.NET MVC package in the application using the Package Manager Console. - -```bash - -NuGet\Install-Package Syncfusion.EJ2.MVC5 - -``` - -Install the Open AI and Azure Open AI package in the application using Package Manager Console. - -```bash - -NuGet\Install-Package OpenAI -NuGet\Install-Package Azure.AI.OpenAI -NuGet\Install-Package Azure.Core - -``` - - -## Generate API Key - -1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. - -2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. - -3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration. - -4. Store these values securely, as they will be used in your application. - -> `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely - -## Integration Azure Open AI with Chat UI - -You can add the below respective files in your application: - -* Update the following configuration values with your Azure Open AI details: - -```bash - -string endpoint = "Your_Azure_OpenAI_Endpoint"; -string apiKey = "Your_Azure_OpenAI_API_Key"; -string deploymentName = "Your_Deployment_Name"; - -``` - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/razor %} -{% endhighlight %} -{% highlight c# tabtitle="openai.cs" %} -{% include code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/openai.cs %} -{% endhighlight %} -{% endtabs %} - -![Azure Open AI](../../images/openai.png) - -## Run and Test - -Run the application in the browser using the following command. - -Build and run the app (Ctrl + F5). - -Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response. \ No newline at end of file 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 88006b3400..a1851ab8b4 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 @@ -10,7 +10,7 @@ documentation: ug # Microsoft Bot Framework With ASP.NET MVC Chat UI component -The Syncfusion ASP.NET MVC Chat UI supports integration with a Microsoft Bot Framework 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 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. ## Getting Started With the Chat UI Component @@ -20,7 +20,7 @@ Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI c ## Prerequisites -* `Microsoft Azure Account`: Required to create and host the bot. +* [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/). @@ -48,17 +48,17 @@ Install-Package Syncfusion.EJ2.MVC5 1. In the [Azure Portal](https://portal.azure.com/#home), navigate to your bot resource. -2. Enable the Direct Line channel: +2. Enable the direct line channel: * Go to `Channels` > `Direct Line` > `Default-Site`. * Copy one of the displayed secret keys. -3. Verify the Messaging endpoint in the Configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). +3. Verify the messaging endpoint in the configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). > `Security Note`: Never expose the Direct Line secret key in frontend code. Use a backend token server to handle it securely. ## Set Up Token Server -Create a Web API controller in your ASP.NET MVC project to handle Direct Line token generation. Add `Controllers/TokenController.cs`: +Create a Web API controller in your ASP.NET MVC project to handle direct line token generation. Add `Controllers/TokenController.cs`: {% tabs %} {% highlight cs tabtitle="TokenController.cs" %} @@ -121,9 +121,9 @@ Add the Direct Line secret to `Web.config`: ## Integrate ChatUI in ASP.NET MVC -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. +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: +Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the direct line API: {% tabs %} {% highlight Html tabtitle="Index.cshtml" %} @@ -232,7 +232,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 (e.g., `http://localhost:port`) to interact with your Microsoft Bot Framework chatbot. +Open your app in the browser Hosted link 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 978274bffd..af7f45ae42 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 @@ -20,7 +20,7 @@ Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is c ## Prerequisites -* Google account to access `Dialogflow` and `Google Cloud Console`. +* 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. @@ -45,11 +45,11 @@ Install-Package Syncfusion.EJ2.MVC5 ## 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`). +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. +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. @@ -140,13 +140,13 @@ Use the Chat UI `messageSend` event to exchange messages. This event is triggere ### Forward Message to backend: -In the `messageSend` event handler, send a POST request to your backend API endpoint (`/api/chat/message`). The backend forwards the message to Dialogflow and returns the response. +In the `messageSend` event handler, send a POST request to your backend API endpoint (`/api/chat/message`). The backend forwards the message to dialogflow and returns the response. ### Displaying Bot response: 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: +Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the dialogflow backend: {% tabs %} {% highlight Html tabtitle="Index.cshtml" %} @@ -205,9 +205,9 @@ Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the Di Run the project in Visual Studio or use IIS Express. -Open your app in the browser and chat with your Dialogflow-powered bot. +Open your app in the browser and chat with your dialogflow-powered bot. -![ChatUI with Dialogflow](../../images/dialogflow.png) +![ChatUI with Dialogflow](../images/dialogflow.png) ## Troubleshooting: @@ -216,4 +216,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. +* `Invalid Credentials`: Verify the service account JSON or configuration settings are correctly set up. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md deleted file mode 100644 index 33bed56777..0000000000 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -layout: post -title: Gemini AI in ##Platform_Name## Chat UI Control | Syncfusion -description: Checkout and learn about Integration of Gemini AI in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Gemini AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Integration of Gemini AI With Chat UI component - -The Syncfusion Chat UI supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your Core applications. - -## Getting Started With the Chat UI Component - -Before integrating Gemini AI, ensure that the Syncfusion Chat UI control is correctly rendered in your Core application: - -[ core Getting Started Guide](../getting-started) - -## Prerequisites - -* Google account to generate API key on accessing `Gemini AI` - -* Syncfusion Chat UI for Core `Syncfusion.EJ2.AspNet.Core` Install ASP.NET Core package in the application. - -## Install Dependencies - -Install the Syncfusion ASP.NET Core package in the application using the Package Manager Console. - -```bash - -NuGet\Install-Package Syncfusion.EJ2.AspNet.Core - -``` - -Install the Open AI package in the application using the Package Manager Console. - -```bash - -NuGet\Install-Package Mscc.GenerativeAI - -``` - -## Generate API Key - -1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account. - -2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. - -3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. - -4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. - -> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. - -## Integration Gemini AI with Chat UI - -You can add the below respective files in your application: - -* Add your generated `API Key` at the line - -```bash - -const geminiApiKey = 'Place your API key here'; - -``` - -{% tabs %} -{% highlight tagHelper tabtitle="CSHTML" %} -{% include code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="gemini.cs" %} -{% include code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/gemini.cs %} -{% endhighlight %} -{% endtabs %} - -![Open AI](../../images/gemini.png) - -## Run and Test - -Run the application in the browser using the following command. - -Build and run the app (Ctrl + F5). - -Open `https://localhost:44321` to interact with your Gemini AI for dynamic response. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md deleted file mode 100644 index 11ec9b6d5f..0000000000 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -layout: post -title: Azure Open AI in ##Platform_Name## Chat UI Control | Syncfusion -description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Azure Open AI -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Integration of Azure Open AI With Chat UI component - -The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your Core applications. - -## Getting Started With the Chat UI Component - -Before integrating Azure Open AI, ensure that the Syncfusion Chat UI control is correctly rendered in your core application: -[ Asp Core Getting Started Guide](../getting-started) - -## Prerequisites - -* An Azure account with access to `Azure Open AI` services and a generated API key. - -* Syncfusion Chat UI for Core `Syncfusion.EJ2.AspNet.Core` Install ASP.NET Core package in the application. - -## Install Dependencies - -Install the Syncfusion ASP.NET Core package in the application using the Package Manager Console. - -```bash - -NuGet\Install-Package Syncfusion.EJ2.AspNet.Core -``` - -Install the Open AI and Azure Open AI package in the application using Package Manager Console. - -```bash - -NuGet\Install-Package OpenAI -NuGet\Install-Package Azure.AI.OpenAI -NuGet\Install-Package Azure.Core - -``` - - -## Configure Azure Open AI - -1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. - -2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. - -3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration. - -4. Store these values securely, as they will be used in your application. - -> `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. - -## Integration Azure Open AI with Chat UI - -You can add the below respective files in your application: - -* Update the following configuration values with your Azure Open AI details: - -```bash - -string endpoint = "Your_Azure_OpenAI_Endpoint"; -string apiKey = "Your_Azure_OpenAI_API_Key"; -string deploymentName = "Your_Deployment_Name"; - -``` - -{% tabs %} -{% highlight tagHelper tabtitle="CSHTML" %} -{% include code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="openai.cs" %} -{% include code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/openai.cs %} -{% endhighlight %} -{% endtabs %} - -![Azure Open AI](../../images/openai.png) - -## Run and Test - -Run the application in the browser using the following command. - -Build and run the app (Ctrl + F5). - -Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response. \ No newline at end of file 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 11910f2113..b752257335 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 @@ -10,7 +10,7 @@ documentation: ug # Microsoft Bot Framework With ASP.NET Core Chat UI component -The Syncfusion ASP.NET Core Chat UI supports integration with a Microsoft Bot Framework 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 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. ## Getting Started With the ChatUI Component @@ -19,7 +19,7 @@ Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI c ## Prerequisites -* `Microsoft Azure Account`: Required to create and host the bot. +* [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/). @@ -46,17 +46,17 @@ dotnet add package Syncfusion.EJ2.AspNet.Core 1. In the [Azure Portal](https://portal.azure.com/#home), navigate to your bot resource. -2. Enable the Direct Line channel: +2. Enable the direct line channel: * Go to `Channels` > `Direct Line` > `Default-Site`. * Copy one of the displayed secret keys. -3. Verify the Messaging endpoint in the Configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). +3. Verify the messaging endpoint in the configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). > `Security Note`: Never expose the Direct Line secret key in frontend code. Use a backend token server to handle it securely. ## Set Up Token Server -Create a controller in your ASP.NET Core project to handle Direct Line token generation. Add `Controllers/TokenController.cs`: +Create a controller in your ASP.NET Core project to handle direct line token generation. Add `Controllers/TokenController.cs`: {% tabs %} {% highlight cs tabtitle="TokenController.cs" %} @@ -262,7 +262,7 @@ dotnet run ``` -Open your app in the browser (e.g., `http://localhost:5000`) to interact with your Microsoft Bot Framework chatbot. +Open your app in the browser Hosted link to interact with your Microsoft Bot Framework chatbot. ## Troubleshooting @@ -272,4 +272,4 @@ Open your app in the browser (e.g., `http://localhost:5000`) to interact with yo - 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. \ No newline at end of file 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 15a02f6b7c..8d2d46feca 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 @@ -19,7 +19,7 @@ Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is c ## Prerequisites -* Google account to access `Dialogflow` and `Google Cloud Console`. +* 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. @@ -42,11 +42,11 @@ 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`). +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. +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. @@ -135,13 +135,13 @@ Use the Chat UI `messageSend` event to exchange messages. This event is triggere ### Forward Message to backend: -In the messageSend event handler, send a POST request to your backend API endpoint (`/api/chat/message`). The backend forwards the message to Dialogflow and returns the response. +In the `messageSend` event handler, send a POST request to your backend API endpoint (`/api/chat/message`). The backend forwards the message to dialogflow and returns the response. ### Displaying Bot response: Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. -Create `Views/Home/Index.cshtml` (assuming MVC) to integrate the Syncfusion Chat UI with the Dialogflow backend: +Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the dialogflow backend: {% tabs %} {% highlight Html tabtitle="Index.cshtml" %} @@ -202,9 +202,9 @@ dotnet run ``` - Open your app and chat with your Dialogflow-powered bot. +Open your app in the browser and chat with your dialogflow-powered bot. -![ChatUI with Dialogflow](../../images/dialogflow.png) +![ChatUI with Dialogflow](../images/dialogflow.png) ## Troubleshooting: diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 30b127dc34..84ab90075f 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -580,16 +580,6 @@ -
  • AI Integrations - -
  • Time break
  • Timestamp
  • Typing indicator
    • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 07e20f636e..f132eea9f9 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -583,16 +583,6 @@ -
  • AI Integrations - -
  • Time break
  • Timestamp
  • Typing indicator