Skip to content
Original file line number Diff line number Diff line change
Expand Up @@ -8,61 +8,62 @@ publishingplatform: ##Platform_Name##
documentation: ug
---

# Gemini AI With AI AssistView control

The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your MVC applications.

## Getting Started With the AI AssistView control

Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your MVC application:

[ MVC Getting Started Guide](../getting-started)
# Integrate Gemini AI with ASP.NET MVC AI AssistView control

The AI AssistView control integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs) 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**: For generating a Gemini API key.

* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed.

* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses.

## Set Up the AI AssistView control

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

## Install Dependencies

* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs).
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application

## Install Packages

Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console.
1. Install the `Gemini AI` nuget package in the application.

```bash

NuGet\Install-Package Syncfusion.EJ2.MVC5
NuGet\Install-Package Mscc.GenerativeAI

```
Install the Gemini AI package in the application using Package Manager Console.

2. Install the `Markdig` nuget packages in the application.

```bash
NuGet\Install-Package Mscc.GenerativeAI

Nuget\Install-Package Markdig

```

## Generate API Key

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. **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. **Project Selection**: Choose an existing Google Cloud project or create a new one.

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: Advises against committing the API key to version control and recommends using environment variables or a secret manager in production.

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.

## Configure Gemini AI with AI AssistView

You can add the below respective files in your application:

* Add your generated `API Key` at the line
## Gemini AI with AI AssistView

Modify the `index.cshtml` file to integrate the Gemini AI with the AI AssistView control.

* Add your Gemini API key securely in the configuration:

```bash

string apiKey = 'Place your API key here';

```

{% tabs %}
Expand All @@ -75,11 +76,3 @@ string apiKey = 'Place your API key here';
{% endtabs %}

![Gemini AI](../images/gemini-ai.png)

## Run and Test

Run the application in the browser using the following command.

Build and run the app (Ctrl + F5).

Open the hosted link to interact with the Gemini AI for dynamic response
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
---
layout: post
title: LLM Model in ##Platform_Name## AI AssistView Control | Syncfusion
description: Checkout and learn about Integration of LLM Model in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: LLM Model
publishingplatform: ##Platform_Name##
documentation: ug
---

# Integrate LLM via Ollama with ASP.NET MVC AI AssistView control

The AI AssistView control integrates with [LLM via Ollama](https://ollama.com) to enable advanced conversational AI features in your ASP.NET MVC application. The control acts as a user interface where user prompts are sent to the selected LLM model via API calls, providing natural language understanding and context-aware responses.

## Prerequisites

Before starting, ensure you have the following:

* [Ollama](https://ollama.com) installed to run and manage LLM models locally.

* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed.

* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses.

## Set Up the AI AssistView control

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

## Install Dependency

To install the Markdig package by run `NuGet\Install-Package Markdig` in Package Manager Console.

## Configuring Ollama

Install the LLM Model package in the application using Package Manager Console.

```bash

NuGet\Install-Package Microsoft.Extensions.AI

NuGet\Install-Package Microsoft.Extensions.AI.Ollama

```

## Configure AI AssistView with Ollama in ASP.NET MVC

Modify the `index.cshtml` file to integrate the Ollama with the AI AssistView control.

Add services in `Program.cs` file

```bash

using Microsoft.Extensions.AI;

builder.Services.AddControllersWithViews();
builder.Services.AddCors(options =>
{
options.AddPolicy("AllowAll",
builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
});
builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11434/"), "deepseek-r1"))
.UseDistributedCache()
.UseLogging();

```

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/ai-assistview/ai-integrations/llm-model/razor %}
{% endhighlight %}
{% highlight c# tabtitle="llm-model.cs" %}
{% include code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-mvc.cs %}
{% endhighlight %}
{% endtabs %}

![LLM Model](../images/llm-model.png)
Original file line number Diff line number Diff line change
@@ -1,65 +1,76 @@
---
layout: post
title: Azure Open AI in ##Platform_Name## AI AssistView Control | Syncfusion
description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
title: Azure OpenAI in ##Platform_Name## AI AssistView Control | Syncfusion
description: Checkout and learn about Integration of Azure OpenAI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Azure Open AI
control: Azure OpenAI
publishingplatform: ##Platform_Name##
documentation: ug
---

# Azure Open AI With AI AssistView control
# Integrate Azure OpenAI with ASP.NET MVC AI AssistView control

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 MVC applications.

## Getting Started With the AI AssistView control

Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your MVC application:

[ MVC Getting Started Guide](../getting-started)
The AI AssistView control 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 control 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.
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application

## Install Packages

Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console.

```bash

NuGet\Install-Package Syncfusion.EJ2.MVC5

```

Install the Open AI and Azure Open AI package in the application using Package Manager Console.
Before starting, ensure you have the following:

* **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.

* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed.

* [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 control

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

## Install Dependencies

Install the required packages:

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

```bash

NuGet\Install-Package OpenAI
NuGet\Install-Package Azure.AI.OpenAI
NuGet\Install-Package Azure.Core

```

2. Install the `Markdig` nuget packages in the application.

```bash

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 (for example, https://<resource-name>.openai.azure.com/)
- 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.

> `Security Note`: expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely.

## Azure OpenAI with AI AssistView

Modify the `index.cshtml` file to integrate the Azure OpenAI with the AI AssistView control.

## Configure Azure Open AI with AI AssistView

You can add the below respective files in your application:

* Update the following configuration values with your Azure Open AI details:
* Update the following configuration values with your Azure OpenAI details:

```bash

Expand All @@ -78,12 +89,4 @@ string deploymentName = "Your_Deployment_Name";
{% endhighlight %}
{% endtabs %}

![Azure Open AI](../images/open-ai.png)

## Run and Test

Run the application in the browser using the following command.

Build and run the app (Ctrl + F5).

Open the Hosted link to interact with your Azure Open AI for dynamic response.
![Azure OpenAI](../images/open-ai.png)
Loading