Merge pull request #6782 from syncfusion-content/982891-ai-integrations

982891: Update the ai-integrations contents

Author: IndrajithSrinivasan

blazor/ai-assistview/ai-integrations/gemini-integration.md

@@ -13,9 +13,9 @@ The Syncfusion AI AssistView supports integration with [Gemini](https://ai.googl
 
 ## Prerequisites
 
-* Google account to generate an API key for accessing Gemini AI
-* Syncfusion AI AssistView for Blazor package (Syncfusion.Blazor.InteractiveChat) installed in the project
-* Markdig package available in the project for Markdown-to-HTML conversion (required by the sample code)
+* Google account to generate an API key for accessing [Gemini AI](https://ai.google.dev/gemini-api/docs/quickstart)
+* Syncfusion AI AssistView for Blazor package [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed in the project.
+* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code).
 
 ## Getting Started with the AI AssistView Component
 
@@ -29,25 +29,25 @@ Install the Syncfusion Blazor package in the application.
 
 ```bash
 
-Install-Package Syncfusion.Blazor.InteractiveChat
+Nuget\Install-Package Syncfusion.Blazor.InteractiveChat
 
 ```
 
 Install the Gemini AI package in the application.
 
 ```bash
 
-Install-Package Mscc.GenerativeAI
+Nuget\Install-Package Mscc.GenerativeAI
 
 ```
 
 ## Generate API Key
 
-1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with a Google account. Create a new account if needed.
+1. Go to [Google AI Studio](https://aistudio.google.com/app/api-keys) and sign in with a google account. Create a new account if needed.
 
-2. Select Get API Key from the left menu or the top-right of the dashboard.
+2. Select `Get API key` from the left menu or the top-right of the dashboard.
 
-3. Choose Create API Key. Select an existing Google Cloud project or create a new one, then proceed.
+3. Choose `Create API key`. Select an existing google cloud project or create a new one, then proceed.
 
 4. After creating or selecting a project, an API key is generated and displayed. Copy the key and store it securely, as it may be shown only once.
 
@@ -66,6 +66,11 @@ const string GeminiApiKey = 'Place your API key here';
 {% tabs %}
 {% highlight razor %}
 
+@using Syncfusion.Blazor.InteractiveChat
+@using Syncfusion.Blazor.Navigations
+@using Mscc.GenerativeAI
+@using Markdig
+
 <div class="aiassist-container" style="height: 350px; width: 650px;">
     <SfAIAssistView @ref="sfAIAssistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@OnPromptRequest">
         <AssistViews>

blazor/ai-assistview/ai-integrations/openai-integration.md

@@ -13,8 +13,8 @@ The Syncfusion AI AssistView supports integration with [Azure Open AI](https://m
 
 ## Prerequisites
 
--  An Azure account with access to `Azure Open AI` services and a generated API key.
-- Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in the project
+-  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.
+- Syncfusion AI AssistView for Blazor [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed in the project
 
 ## Getting Started with the AI AssistView Component
 
@@ -49,9 +49,9 @@ Note: The sample below uses HttpClient directly and does not require the Azure/O
 
 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. 
+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.
 

blazor/chat-ui/ai-integrations/gemini-integration.md

@@ -13,8 +13,8 @@ The Syncfusion  Chat UI supports integration with [Gemini](https://ai.google.dev
 
 ## Prerequisites
 
-* Google account to generate API key on accessing `Gemini AI`
-* Syncfusion Chat UI for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project. 
+* Google account to generate API key on accessing [Gemini AI](https://ai.google.dev/gemini-api/docs/quickstart)
+* Syncfusion Chat UI for Blazor [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed in your project. 
 
 ## Getting Started with the Chat UI Component
 
@@ -28,25 +28,25 @@ Install the Syncfusion Blazor package in the application.
 
 ```bash
 
-Install-Package Syncfusion.Blazor.InteractiveChat
+Nuget\Install-Package Syncfusion.Blazor.InteractiveChat
 
 ```
 
 Install the Gemini AI package in the application.
 
 ```bash
 
-Install-Package Mscc.GenerativeAI
+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.
 
-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. 
+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.
 
@@ -65,6 +65,11 @@ const string GeminiApiKey = 'Place your API key here';
 {% tabs %}
 {% highlight razor %}
 
+@using Syncfusion.Blazor.InteractiveChat
+@using Syncfusion.Blazor.Navigations
+@using Mscc.GenerativeAI
+@using Markdig
+
 <div style="height: 400px; width: 400px;">
     <SfChatUI ID="chatUI" User="currentUser" HeaderText="Chat UI" HeaderIconCss="e-icons e-ai-chat" Messages="@Messages" MessageSend="OnMessageSend" TypingUsers="@typingUsers">
         <ChildContent>

blazor/chat-ui/ai-integrations/openai-integration.md

@@ -13,8 +13,8 @@ The Syncfusion Chat UI supports integration with [Azure Open AI](https://microso
 
 ## Prerequisites
 
--  An Azure account with access to `Azure Open AI` services and a generated API key.
-- Syncfusion Chat UI for Blazor `Syncfusion.Blazor.InteractiveChat` installed in the project
+-  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.
+- Syncfusion Chat UI for Blazor [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed in the project.
 
 ## Getting Started with the Chat UI Component
 
@@ -49,9 +49,9 @@ Note: The sample below uses HttpClient directly and does not require the Azure/O
 
 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. 
+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.