979392: Added a markdown file for ai integrations

blazor-toc.html

@@ -663,6 +663,12 @@
 				</ul>
 			</li>
 			<li><a href="/blazor/ai-assistview/assist-view">Assist view</a></li>
+			<li>AI Integrations
+				<ul>
+					<li><a href="/blazor/ai-assistview/ai-integrations/gemini-integration">Integration with Google Gemini</a></li>
+					<li><a href="/blazor/ai-assistview/ai-integrations/openai-integration">Integration with Open AI</a></li>
+				</ul>
+			</li>
 			<li><a href="/blazor/ai-assistview/toolbar-items">Toolbar items</a></li>
 			<li><a href="/blazor/ai-assistview/custom-view">Custom views</a></li>
 			<li><a href="/blazor/ai-assistview/file-attachments">File attachments</a></li>
@@ -1422,6 +1428,12 @@
 				</ul>
 			</li>
 			<li><a href="/blazor/chat-ui/messages">Messages</a></li>
+			<li>AI Integrations
+				<ul>
+					<li><a href="/blazor/chat-ui/ai-integrations/gemini-integration">Integration with Google Gemini</a></li>
+					<li><a href="/blazor/chat-ui/ai-integrations/openai-integration">Integration with Open AI</a></li>
+				</ul>
+			</li>
 			<li><a href="/blazor/chat-ui/timebreak">Time break</a></li>
 			<li><a href="/blazor/chat-ui/timestamp">Timestamp</a></li>
 			<li><a href="/blazor/chat-ui/typing-indicator">Typing indicator</a></li>

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

@@ -0,0 +1,131 @@
+---
+layout: post
+title: Gemini Integration with Blazor AI AssistView Component | Syncfusion
+description: Checkout and learn about gemini integration with Blazor AI AssistView component in Blazor WebAssembly Application.
+platform: Blazor
+control: AI AssistView
+documentation: ug
+---
+
+# Integration of Gemini AI With Blazor AI AssistView component
+
+The Syncfusion  AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs/quickstart), enabling advanced conversational AI features in your applications.
+
+## Prerequisites
+
+* Google account to generate API key on accessing `Gemini AI`
+* Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project. 
+
+## Getting Started with the AI AssistView Component
+
+Before integrating Gemini AI, ensure that the Syncfusion AI AssistView is correctly rendered in your application:
+
+[ Blazor Getting Started Guide](../getting-started)
+
+## Install Dependencies
+
+Install the Syncfusion Blazor package in the application.
+
+```bash
+
+Install-Package Syncfusion.Blazor.InteractiveChat
+
+```
+
+Install the Gemini AI package in the application.
+
+```bash
+
+Install-Package Mscc.GenerativeAI
+
+```
+
+## Generate API Key
+
+1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account.
+
+2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard.
+
+3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. 
+
+4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once.
+
+> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
+
+##  Integration Gemini AI with AI AssistView
+
+* Add your generated `API Key` at the line 
+
+```bash
+
+const string GeminiApiKey = 'Place your API key here';
+
+```
+
+{% tabs %}
+{% highlight razor %}
+
+<div class="aiassist-container" style="height: 350px; width: 650px;">
+    <SfAIAssistView @ref="sfAIAssistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@OnPromptRequest">
+        <AssistViews>
+            <AssistView>
+                <BannerTemplate>
+                    <div class="banner-content">
+                        <div class="e-icons e-assistview-icon"></div>
+                        <h3>AI Assistance</h3>
+                        <i>To get started, provide input or choose a suggestion.</i>
+                    </div>
+                </BannerTemplate>
+            </AssistView>
+        </AssistViews>
+        <AssistViewToolbar ItemClicked="ToolbarItemClicked">
+            <AssistViewToolbarItem Type="ItemType.Spacer"></AssistViewToolbarItem>
+            <AssistViewToolbarItem IconCss="e-icons e-refresh"></AssistViewToolbarItem>
+        </AssistViewToolbar>
+    </SfAIAssistView>
+</div>
+
+@code {
+    private SfAIAssistView sfAIAssistView = new SfAIAssistView();
+    private List<string> promptSuggestions = new List<string>
+    {
+        "What are the best tools for organizing my tasks?",
+        "How can I maintain work-life balance effectively?"
+    };
+    private readonly string geminiApiKey = "";
+    private async Task OnPromptRequest(AssistViewPromptRequestedEventArgs args)
+    {
+        try
+        {
+            var gemini = new GoogleAI(apiKey: geminiApiKey);
+            var model = gemini.GenerativeModel(model: "gemini-1.5-flash");
+            var response = await model.GenerateContent(args.Prompt);
+            var responseText = response.Text;
+            var pipeline = new MarkdownPipelineBuilder()
+                .UseAdvancedExtensions()
+                .UsePipeTables()
+                .UseTaskLists()
+                .Build();
+            // Add the response to the AIAssistView
+            await Task.Delay(1000); // Simulate delay as in original code
+            args.Response = Markdown.ToHtml(responseText, pipeline);
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error fetching Gemini response: {ex.Message}");
+            await Task.Delay(1000);
+            args.Response = "⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.";
+        }
+    }
+
+    private void ToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
+    {
+        sfAIAssistView.Prompts.Clear();
+        StateHasChanged();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor AI AssistView Gemini Integration](./images/gemini-integration.png)

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

@@ -0,0 +1,132 @@
+---
+layout: post
+title:  Open AI Integration with Blazor AI AssistView Component | Syncfusion
+description: Checkout and learn about Open AI integration with Blazor AI AssistView component in Blazor WebAssembly Application.
+platform: Blazor
+control: AI AssistView
+documentation: ug
+---
+
+# Integration of Open AI With Blazor AI AssistView component
+
+The Syncfusion  AI AssistView supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your applications.
+
+## Prerequisites
+
+* OpenAI account to generate an API key for accessing the `OpenAI` API
+* Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project. 
+
+## Getting Started with the AI AssistView Component
+
+Before integrating Open AI, ensure that the Syncfusion AI AssistView is correctly rendered in your application:
+
+[ Blazor Getting Started Guide](../getting-started)
+
+## Install Dependencies
+
+Install the Syncfusion Blazor package in the application.
+
+```bash
+
+Install-Package Syncfusion.Blazor.InteractiveChat
+
+```
+
+Install the Open AI AI package in the application.
+
+```bash
+
+Install-Package OpenAI
+
+```
+
+## Generate API Key
+
+1. Go to [Open AI](https://platform.openai.com/docs/overview) and sign in with your Google account. If you don’t have one, create a new account. 
+
+2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu.  
+
+3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key. 
+
+4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again.
+
+> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
+
+##  Integration Open AI with AI AssistView
+
+* Add your generated `API Key` at the line 
+
+```bash
+
+const string openaiApiKey  = 'Place your API key here';
+
+```
+
+{% tabs %}
+{% highlight razor %}
+
+<div class="aiassist-container" style="height: 350px; width: 650px;">
+    <SfAIAssistView @ref="sfAIAssistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@OnPromptRequest">
+        <AssistViews>
+            <AssistView>
+                <BannerTemplate>
+                    <div class="banner-content">
+                        <div class="e-icons e-assistview-icon"></div>
+                        <h3>AI Assistance</h3>
+                        <i>To get started, provide input or choose a suggestion.</i>
+                    </div>
+                </BannerTemplate>
+            </AssistView>
+        </AssistViews>
+        <AssistViewToolbar ItemClicked="ToolbarItemClicked">
+            <AssistViewToolbarItem Type="ItemType.Spacer"></AssistViewToolbarItem>
+            <AssistViewToolbarItem IconCss="e-icons e-refresh"></AssistViewToolbarItem>
+        </AssistViewToolbar>
+    </SfAIAssistView>
+</div>
+
+@code {
+    private SfAIAssistView sfAIAssistView = new SfAIAssistView();
+    private List<string> promptSuggestions = new List<string>
+    {
+        "What are the best tools for organizing my tasks?",
+        "How can I maintain work-life balance effectively?"
+    };
+    private string openaiApiKey = "";
+    private async Task OnPromptRequest(AssistViewPromptRequestedEventArgs args)
+    {
+        try
+        {
+            var openAiClient = new OpenAIClient(openaiApiKey);
+            var chatClient = openAiClient.GetChatClient("gpt-4o-mini");
+
+            OpenAI.Chat.ChatCompletion completion = await chatClient.CompleteChatAsync(args.Prompt);
+            string responseText = completion.Content[0].Text;
+            var pipeline = new MarkdownPipelineBuilder()
+                .UseAdvancedExtensions()
+                .UsePipeTables()
+                .UseTaskLists()
+                .Build();
+            // Add the response to the AIAssistView
+            await Task.Delay(1000); // Simulate delay as in original code
+            args.Response = Markdown.ToHtml(responseText, pipeline);
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error fetching Open AI response: {ex.Message}");
+            await Task.Delay(1000);
+            args.Response = "⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.";
+        }
+    }
+
+    private void ToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
+    {
+        sfAIAssistView.Prompts.Clear();
+        StateHasChanged();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor AI AssistView Open AI Integration](./images/openai-integration.png)