diff --git a/blazor/ai-assistview/ai-integrations/gemini-integration.md b/blazor/ai-assistview/ai-integrations/gemini-integration.md
new file mode 100644
index 0000000000..4e57b47c57
--- /dev/null
+++ b/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 %}
+
+
+
+
+
+
+
+
+
AI Assistance
+ To get started, provide input or choose a suggestion.
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfAIAssistView sfAIAssistView = new SfAIAssistView();
+ private List promptSuggestions = new List
+ {
+ "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 %}
+
+
\ No newline at end of file
diff --git a/blazor/ai-assistview/ai-integrations/openai-integration.md b/blazor/ai-assistview/ai-integrations/openai-integration.md
new file mode 100644
index 0000000000..7c176e548b
--- /dev/null
+++ b/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 %}
+
+
+
+
+
+
+
+
+
AI Assistance
+ To get started, provide input or choose a suggestion.
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfAIAssistView sfAIAssistView = new SfAIAssistView();
+ private List promptSuggestions = new List
+ {
+ "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 %}
+
+
\ No newline at end of file
diff --git a/blazor/ai-assistview/images/gemini-integration.png b/blazor/ai-assistview/images/gemini-integration.png
new file mode 100644
index 0000000000..baf6321dab
Binary files /dev/null and b/blazor/ai-assistview/images/gemini-integration.png differ
diff --git a/blazor/ai-assistview/images/openai-integration.png b/blazor/ai-assistview/images/openai-integration.png
new file mode 100644
index 0000000000..baf6321dab
Binary files /dev/null and b/blazor/ai-assistview/images/openai-integration.png differ
diff --git a/blazor/chat-ui/ai-integrations/gemini-integration.md b/blazor/chat-ui/ai-integrations/gemini-integration.md
new file mode 100644
index 0000000000..0aacc456f7
--- /dev/null
+++ b/blazor/chat-ui/ai-integrations/gemini-integration.md
@@ -0,0 +1,135 @@
+---
+layout: post
+title: Gemini Integration with Blazor Chat UI Component | Syncfusion
+description: Checkout and learn about gemini integration with Blazor Chat UI component in Blazor WebAssembly Application.
+platform: Blazor
+control: Chat UI
+documentation: ug
+---
+
+# Integration of Gemini AI With Blazor Chat UI component
+
+The Syncfusion Chat UI 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 Chat UI for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project.
+
+## Getting Started with the Chat UI Component
+
+Before integrating Gemini AI, ensure that the Syncfusion Chat UI 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 Chat UI
+
+* Add your generated `API Key` at the line
+
+```bash
+
+const string GeminiApiKey = 'Place your API key here';
+
+```
+
+{% tabs %}
+{% highlight razor %}
+
+
+
+
+
+
+
+
+
+
+
+
+
Just a second, we're preparing your chat...
+
+
+
+
+
+@code {
+ private UserModel currentUser = new() { ID = "user1", User = "You" };
+ private UserModel aiUser = new() { ID = "ai", User = "Gemini" };
+ private List Messages { get; set; } = new();
+ private List typingUsers = new();
+
+ private async Task OnMessageSend(ChatMessageSendEventArgs args)
+ {
+ typingUsers = new List { aiUser };
+ StateHasChanged();
+
+ try
+ {
+ await Task.Delay(500);
+ var userPrompt = args.Message.Text ?? "hi";
+ const string GeminiApiKey = "";
+ var gemini = new GoogleAI(apiKey: GeminiApiKey);
+ var model = gemini.GenerativeModel(model: "gemini-1.5-flash");
+ var response = await model.GenerateContent(userPrompt);
+ var responseText = response.Text;
+ var pipeline = new MarkdownPipelineBuilder()
+ .UseAdvancedExtensions()
+ .UsePipeTables()
+ .UseTaskLists()
+ .Build();
+ Messages.Add(new Syncfusion.Blazor.InteractiveChat.ChatMessage { Text = Markdown.ToHtml(responseText, pipeline), Author = aiUser });
+ }
+ catch (Exception ex)
+ {
+ Console.WriteLine($"Error fetching Gemini response: {ex.Message}");
+ Messages.Add(new Syncfusion.Blazor.InteractiveChat.ChatMessage { Text = "Error generating response. Please try again.", Author = aiUser });
+ StateHasChanged();
+ }
+ finally
+ {
+ typingUsers.Clear();
+ StateHasChanged();
+ }
+ }
+
+ private void ToolbarItemClicked(ChatToolbarItemClickedEventArgs args)
+ {
+ Messages.Clear();
+ StateHasChanged();
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
\ No newline at end of file
diff --git a/blazor/chat-ui/ai-integrations/openai-integration.md b/blazor/chat-ui/ai-integrations/openai-integration.md
new file mode 100644
index 0000000000..bab0d0898b
--- /dev/null
+++ b/blazor/chat-ui/ai-integrations/openai-integration.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: Open AI Integration with Blazor Chat UI Component | Syncfusion
+description: Checkout and learn about Open AI integration with Blazor Chat UI component in Blazor WebAssembly Application.
+platform: Blazor
+control: Chat UI
+documentation: ug
+---
+
+# Integration of Open AI With Blazor Chat UI component
+
+The Syncfusion Chat UI 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 Chat UI for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project.
+
+## Getting Started with the Chat UI Component
+
+Before integrating Open AI, ensure that the Syncfusion Chat UI 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 Chat UI
+
+* Add your generated `API Key` at the line
+
+```bash
+
+const string openaiApiKey = 'Place your API key here';
+
+```
+
+{% tabs %}
+{% highlight razor %}
+
+
+
+
+
+
+
+
+
+
+
+
+
Just a second, we're preparing your chat...
+
+
+
+
+
+@code {
+ private UserModel currentUser = new() { ID = "user1", User = "You" };
+ private UserModel aiUser = new() { ID = "ai", User = "Open AI" };
+ private List Messages { get; set; } = new();
+ private List typingUsers = new();
+ private string openaiApiKey = "";
+
+ private async Task OnMessageSend(ChatMessageSendEventArgs args)
+ {
+ // Indicate AI is typing
+ typingUsers = new List { aiUser };
+ await Task.Delay(500); // Simulate typing delay
+
+ try
+ {
+ var openAiClient = new OpenAIClient(openaiApiKey);
+ var chatClient = openAiClient.GetChatClient("gpt-4o-mini");
+
+ OpenAI.Chat.ChatCompletion completion = await chatClient.CompleteChatAsync(args.Message.Text);
+ string responseText = completion.Content[0].Text;
+ var pipeline = new MarkdownPipelineBuilder()
+ .UseAdvancedExtensions()
+ .UsePipeTables()
+ .UseTaskLists()
+ .Build();
+ // Add AI response to messages
+ Messages.Add(new ChatMessage
+ {
+ Text = Markdown.ToHtml(responseText, pipeline),
+ Author = aiUser
+ });
+ }
+ catch (Exception ex)
+ {
+ Console.WriteLine($"Error fetching OpenAI response: {ex.Message}");
+ Messages.Add(new ChatMessage
+ {
+ Text = "Error generating response. Please try again.",
+ Author = aiUser
+ });
+ StateHasChanged();
+ }
+ finally
+ {
+ typingUsers.Clear();
+ StateHasChanged();
+ }
+ }
+
+ private async Task ToolbarItemClicked()
+ {
+ Messages.Clear();
+ StateHasChanged();
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
\ No newline at end of file
diff --git a/blazor/chat-ui/images/gemini-integration.png b/blazor/chat-ui/images/gemini-integration.png
new file mode 100644
index 0000000000..8691c98d69
Binary files /dev/null and b/blazor/chat-ui/images/gemini-integration.png differ
diff --git a/blazor/chat-ui/images/openai-integration.png b/blazor/chat-ui/images/openai-integration.png
new file mode 100644
index 0000000000..9562f86e71
Binary files /dev/null and b/blazor/chat-ui/images/openai-integration.png differ