Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blazor-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -496,7 +496,7 @@
<li>AI Integrations
<ul>
<li><a href="/blazor/ai-assistview/ai-integrations/gemini-integration">Google Gemini</a></li>
<li><a href="/blazor/ai-assistview/ai-integrations/openai-integration">Azure Open AI</a></li>
<li><a href="/blazor/ai-assistview/ai-integrations/openai-integration">Azure OpenAI</a></li>
</ul>
</li>
<li><a href="/blazor/ai-assistview/toolbar-items">Toolbar items</a></li>
Expand Down
49 changes: 29 additions & 20 deletions blazor/ai-assistview/ai-integrations/gemini-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,55 +7,61 @@ control: AI AssistView
documentation: ug
---

# Gemini AI With Blazor AI AssistView component
# Integrate 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 applications.
The AI AssistView component integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs/quickstart) 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 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).
Before starting, ensure you have the following:

## Getting Started with the AI AssistView Component
* **Google Account**: For generating a Gemini API key.

Before integrating Gemini AI, ensure that the Syncfusion AI AssistView renders correctly in the application and that prerequisites are met:
* **Syncfusion AI AssistView**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed.

[Blazor Getting Started Guide](../getting-started)
* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses.

## Set Up the AI AssistView Component

Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView component in the application and that prerequisites are met.

## Install Dependencies

Install the Syncfusion Blazor package in the application.
Install the required packages:

1. Install the `Gemini AI` nuget package in the application.

```bash

Nuget\Install-Package Syncfusion.Blazor.InteractiveChat
Nuget\Install-Package Mscc.GenerativeAI

```

Install the Gemini AI package in the application.
2. Install the `Markdig` nuget packages in the application.

```bash

Nuget\Install-Package Mscc.GenerativeAI
Nuget\Install-Package Markdig

```

## Generate API Key

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.
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. Select `Get API key` from the left menu or the top-right of the dashboard.
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. Choose `Create API key`. Select an existing google cloud project or create a new one, then proceed.
3. **Project Selection**: Choose an existing Google Cloud project or create a new one.

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.
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: Do not commit API keys to version control. Use environment variables, a secret manager, or a server-side proxy in production.
> Security note: Advises against committing the API key to version control and recommends using environment variables or a secret manager in production.

## Gemini AI with AI AssistView

* Add the generated API key in the following line.
Modify the razor file to integrate the Gemini AI with the AI AssistView component.

* update your Gemini API key securely in the configuration:

```bash

Expand All @@ -72,6 +78,7 @@ const string GeminiApiKey = 'Place your API key here';
@using Markdig

<div class="aiassist-container" style="height: 350px; width: 650px;">
// Initializes the AI Assist component
<SfAIAssistView @ref="sfAIAssistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@OnPromptRequest">
<AssistViews>
<AssistView>
Expand All @@ -98,13 +105,15 @@ const string GeminiApiKey = 'Place your API key here';
"What are the best tools for organizing my tasks?",
"How can I maintain work-life balance effectively?"
};
// Initialize Gemini API
private readonly string geminiApiKey = "";
// Handle user prompt: call Gemini model
private async Task OnPromptRequest(AssistViewPromptRequestedEventArgs args)
{
try
{
var gemini = new GoogleAI(apiKey: geminiApiKey);
var model = gemini.GenerativeModel(model: "gemini-1.5-flash");
var gemini = new GoogleAI(apiKey: geminiApiKey); // Replace with your Gemini API key
var model = gemini.GenerativeModel(model: "gemini-2.5-flash"); // Select the Gemini model (update model name as needed)
var response = await model.GenerateContent(args.Prompt);
var responseText = response.Text;
var pipeline = new MarkdownPipelineBuilder()
Expand Down
55 changes: 34 additions & 21 deletions blazor/ai-assistview/ai-integrations/openai-integration.md
Original file line number Diff line number Diff line change
@@ -1,57 +1,65 @@
---
layout: post
title: Azure Open AI with Blazor AI AssistView Component | Syncfusion
description: Checkout and learn about Azure Open AI with Blazor AI AssistView component in Blazor WebAssembly Application.
title: Azure OpenAI with Blazor AI AssistView Component | Syncfusion
description: Checkout and learn about Azure OpenAI with Blazor AI AssistView component in Blazor WebAssembly Application.
platform: Blazor
control: AI AssistView
documentation: ug
---

# Azure OpenAI With Blazor AI AssistView component
# Integrate Azure OpenAI with Blazor AI AssistView 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 applications.
The AI AssistView component 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 component 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.
- Syncfusion AI AssistView for Blazor [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed in the project
Before starting, ensure you have the following:

## Getting Started with the AI AssistView Component
* **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.

Before integrating Azure OpenAI, ensure the Syncfusion AI AssistView component renders correctly in the application:
* **Syncfusion AI AssistView**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed.

[Blazor Getting Started Guide](../getting-started)
* [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 Component

Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView component in the application and that prerequisites are met.

## Install Dependencies

Install the Syncfusion Blazor package in the application.
Install the required packages:

1. Install the `OpenAI` and `Azure` nuget packages in the application.

```bash

Nuget\Install-Package Syncfusion.Blazor.InteractiveChat
NuGet\Install-Package OpenAI
NuGet\Install-Package Azure.AI.OpenAI
NuGet\Install-Package Azure.Core

```

Install the `Open AI` and `Markdig` nuget packages in the application.
2. Install the `Markdig` nuget packages in the application.

```bash

NuGet\Install-Package OpenAI
NuGet\Install-Package Azure.AI.OpenAI
NuGet\Install-Package Azure.Core
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
- 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.

Expand All @@ -65,6 +73,8 @@ Note: The sample below uses HttpClient directly and does not require the Azure/O

- Inject and use the service in your Razor component.

Modify the razor file to integrate the Azure OpenAI with the AI AssistView component.

{% tabs %}
{% highlight c# tabtitle="razor" %}

Expand All @@ -73,6 +83,7 @@ Note: The sample below uses HttpClient directly and does not require the Azure/O
@using Syncfusion.Blazor.Navigations
@inject AzureOpenAIService OpenAIService

// Initialize AI AssistView component
<div class="aiassist-container" style="height: 450px; width: 650px;">
<SfAIAssistView @ref="assistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@PromptRequest">
<AssistViews>
Expand Down Expand Up @@ -101,7 +112,8 @@ Note: The sample below uses HttpClient directly and does not require the Azure/O
"What are the best tools for organizing my tasks?",
"How can I maintain work-life balance effectively?"
};


// Handle user prompt: call Azure OpenAI Chat Completions
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
{
// Reset the response for this prompt
Expand Down Expand Up @@ -233,11 +245,12 @@ namespace AIAssistView_AzureAI.Components.Services
{% endhighlight %}
{% highlight c# tabtitle="Server(~/_Program.cs)" %}

// Initialize Azure OpenAI
var endpoint = "https://azure-testresource.openai.azure.com";
var apiKey = "<Your API Key>"; // Replace with your API key;
var deploymentName = "gpt-4o-mini";

{% endhighlight %}
{% endtabs %}

![Blazor AI AssistView Azure Open AI Integration](../images/openai-integration.png)
![Blazor AI AssistView Azure OpenAI Integration](../images/openai-integration.png)