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
21 changes: 13 additions & 8 deletions blazor/ai-assistview/ai-integrations/gemini-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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.

Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions blazor/ai-assistview/ai-integrations/openai-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.

Expand Down
17 changes: 11 additions & 6 deletions blazor/chat-ui/ai-integrations/gemini-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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.

Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions blazor/chat-ui/ai-integrations/openai-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.

Expand Down