Skip to content

Commit b3c8d64

Browse files
IndrajithSrinivasanIndrajithSrinivasan
authored
Merge pull request #4551 from syncfusion-content/979100-updated-aiAssistview-sample
979100: Added gemini and openai samples
2 parents 35a918a + 3baee0e commit b3c8d64

File tree

16 files changed

+1107
-0
lines changed

16 files changed

+1107
-0
lines changed

‎ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: post
3+
title: Gemini AI in ##Platform_Name## AI AssistView Control | Syncfusion
4+
description: Checkout and learn about Integration of Gemini AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Gemini AI
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Integration of Gemini AI With AI AssistView control
12+
13+
The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your MVC applications.
14+
15+
## Getting Started With the AI AssistView control
16+
17+
Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your MVC application:
18+
19+
[ MVC Getting Started Guide](../getting-started)
20+
21+
## Prerequisites
22+
23+
* Google account to generate API key on accessing `Gemini AI`.
24+
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application
25+
26+
## Install Packages
27+
28+
Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console.
29+
30+
```bash
31+
32+
NuGet\Install-Package Syncfusion.EJ2.MVC5
33+
34+
```
35+
36+
Install the Gemini AI package in the application using Package Manager Console.
37+
38+
```bash
39+
40+
NuGet\Install-Package Mscc.GenerativeAI
41+
42+
```
43+
44+
## Generate API Key
45+
46+
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.
47+
48+
2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard.
49+
50+
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.
51+
52+
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.
53+
54+
> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
55+
56+
## Integration Gemini AI with AI AssistView
57+
58+
You can add the below respective files in your application:
59+
60+
* Add your generated `API Key` at the line
61+
62+
```bash
63+
64+
string apiKey = 'Place your API key here';
65+
66+
```
67+
68+
{% tabs %}
69+
{% highlight razor tabtitle="CSHTML" %}
70+
{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/razor %}
71+
{% endhighlight %}
72+
{% highlight c# tabtitle="Gemini.cs" %}
73+
{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs %}
74+
{% endhighlight %}
75+
{% endtabs %}
76+
77+
![Gemini AI](../../images/gemini-ai.png)
78+
79+
## Run and Test
80+
81+
Run the application in the browser using the following command.
82+
83+
Build and run the app (Ctrl + F5).
84+
85+
Open `https://localhost:44321` to interact with your Gemini AI for dynamic response.

‎ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
layout: post
3+
title: Azure Open AI in ##Platform_Name## AI AssistView Control | Syncfusion
4+
description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Azure Open AI
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Integration of Azure Open AI With AI AssistView control
12+
13+
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 Angular applications.
14+
15+
## Getting Started With the AI AssistView control
16+
17+
Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your MVC application:
18+
19+
[ MVC Getting Started Guide](../getting-started)
20+
21+
## Prerequisites
22+
23+
* An Azure account with access to `Azure Open AI` services and a generated API key.
24+
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application
25+
26+
## Install Packages
27+
28+
Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console.
29+
30+
```bash
31+
32+
NuGet\Install-Package Syncfusion.EJ2.MVC5
33+
34+
```
35+
36+
Install the Open AI and Azure Open AI package in the application using Package Manager Console.
37+
38+
```bash
39+
40+
NuGet\Install-Package OpenAI
41+
NuGet\Install-Package Azure.AI.OpenAI
42+
NuGet\Install-Package Azure.Core
43+
44+
```
45+
46+
## Configure Azure Open AI
47+
48+
1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource.
49+
50+
2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL.
51+
52+
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.
53+
54+
4. Store these values securely, as they will be used in your application.
55+
56+
> `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.
57+
58+
## Integration Azure Open AI with AI AssistView
59+
60+
You can add the below respective files in your application:
61+
62+
* Update the following configuration values with your Azure Open AI details:
63+
64+
```bash
65+
66+
string endpoint = "Your_Azure_OpenAI_Endpoint";
67+
string apiKey = "Your_Azure_OpenAI_API_Key";
68+
string deploymentName = "Your_Deployment_Name";
69+
70+
```
71+
72+
{% tabs %}
73+
{% highlight razor tabtitle="CSHTML" %}
74+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/razor %}
75+
{% endhighlight %}
76+
{% highlight c# tabtitle="Gemini.cs" %}
77+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs %}
78+
{% endhighlight %}
79+
{% endtabs %}
80+
81+
![Azure Open AI](../../images/open-ai.png)
82+
83+
## Run and Test
84+
85+
Run the application in the browser using the following command.
86+
87+
Build and run the app (Ctrl + F5).
88+
89+
Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response.

‎ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: post
3+
title: Gemini AI in ##Platform_Name## AI AssistView Control | Syncfusion
4+
description: Checkout and learn about Integration of Gemini AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Gemini AI
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Integration of Gemini AI With AI AssistView control
12+
13+
The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your Core applications.
14+
15+
## Getting Started With the AI AssistView control
16+
17+
Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your Core application:
18+
19+
[ ASP.NET CORE Getting Started Guide](../getting-started)
20+
21+
## Prerequisites
22+
23+
* Google account to generate API key on accessing `Gemini AI`.
24+
* [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application
25+
26+
## Install Packages
27+
28+
Install the Syncfusion ASP.NET Core package in the application using Package Manager Console.
29+
30+
```bash
31+
32+
NuGet\Install-Package Syncfusion.EJ2.AspNet.Core
33+
34+
```
35+
36+
Install the Gemini AI package in the application using Package Manager Console.
37+
38+
```bash
39+
40+
NuGet\Install-Package Mscc.GenerativeAI
41+
42+
```
43+
44+
## Generate API Key
45+
46+
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.
47+
48+
2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard.
49+
50+
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.
51+
52+
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.
53+
54+
> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
55+
56+
## Integration Gemini AI with AI AssistView
57+
58+
You can add the below respective files in your application:
59+
60+
* Add your generated `API Key` at the line
61+
62+
```bash
63+
64+
string apiKey = 'Place your API key here';
65+
66+
```
67+
68+
{% tabs %}
69+
{% highlight razor tabtitle="CSHTML" %}
70+
{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper %}
71+
{% endhighlight %}
72+
{% highlight c# tabtitle="Gemini.cs" %}
73+
{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs %}
74+
{% endhighlight %}
75+
{% endtabs %}
76+
77+
![Gemini AI](../../images/gemini-ai.png)
78+
79+
## Run and Test
80+
81+
Run the application in the browser using the following command.
82+
83+
Build and run the app (Ctrl + F5).
84+
85+
Open `https://localhost:44321` to interact with your Gemini AI for dynamic response.

‎ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
layout: post
3+
title: Azure Open AI in ##Platform_Name## AI AssistView Control | Syncfusion
4+
description: Checkout and learn about Integration of Azure Open AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Azure Open AI
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Integration of Azure Open AI With AI AssistView control
12+
13+
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 Angular applications.
14+
15+
## Getting Started With the AI AssistView control
16+
17+
Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your Core app:
18+
19+
[ CORE Getting Started Guide](../getting-started)
20+
21+
## Prerequisites
22+
23+
* An Azure account with access to `Azure Open AI` services and a generated API key.
24+
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application
25+
26+
## Install Packages
27+
28+
Install the Syncfusion ASP.NET Core package in the application using Package Manager Console.
29+
30+
```bash
31+
32+
NuGet\Install-Package Syncfusion.EJ2.AspNet.Core
33+
34+
```
35+
36+
Install the Open AI and Azure Open AI package in the application using Package Manager Console.
37+
38+
```bash
39+
40+
NuGet\Install-Package OpenAI
41+
NuGet\Install-Package Azure.AI.OpenAI
42+
NuGet\Install-Package Azure.Core
43+
44+
```
45+
46+
## Configure Azure Open AI
47+
48+
1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource.
49+
50+
2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL.
51+
52+
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.
53+
54+
4. Store these values securely, as they will be used in your application.
55+
56+
> `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely.
57+
58+
## Integration Azure Open AI with AI AssistView
59+
60+
You can add the below respective files in your application:
61+
62+
* Update the following configuration values with your Azure Open AI details:
63+
64+
```bash
65+
66+
string endpoint = "Your_Azure_OpenAI_Endpoint";
67+
string apiKey = "Your_Azure_OpenAI_API_Key";
68+
string deploymentName = "Your_Deployment_Name";
69+
70+
```
71+
72+
{% tabs %}
73+
{% highlight razor tabtitle="CSHTML" %}
74+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper %}
75+
{% endhighlight %}
76+
{% highlight c# tabtitle="Gemini.cs" %}
77+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs %}
78+
{% endhighlight %}
79+
{% endtabs %}
80+
81+
![Azure Open AI](../../images/open-ai.png)
82+
83+
## Run and Test
84+
85+
Run the application in the browser using the following command.
86+
87+
Build and run the app (Ctrl + F5).
88+
89+
Open `https://localhost:44321` to interact with your Azure Open AI for dynamic response.

‎ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png‎

15.1 KB
Loading

‎ej2-asp-core-mvc/ai-assistview/images/open-ai.png‎

15.3 KB
Loading

0 commit comments

Comments
 (0)