Skip to content

Commit 26cf19a

Browse files
KaviBharathi-SF5060KaviBharathi-SF5060
committed
979100: Added gemini and openai samples
1 parent 59c380f commit 26cf19a

File tree

16 files changed

+1088
-0
lines changed

16 files changed

+1088
-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 Vue 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: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: post
3+
title: Open AI in ##Platform_Name## AI AssistView Control | Syncfusion
4+
description: Checkout and learn about Integration of Open AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Open AI
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Integration of Open AI With AI AssistView control
12+
13+
The Syncfusion AI AssistView supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your MVC applications.
14+
15+
## Getting Started With the AI AssistView control
16+
17+
Before integrating Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your Vue application:
18+
19+
[ MVC Getting Started Guide](../getting-started)
20+
21+
## Prerequisites
22+
23+
* OpenAI account to generate an API key for accessing the `OpenAI` API
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 package in the application using Package Manager Console.
37+
38+
```bash
39+
40+
NuGet\Install-Package OpenAI
41+
42+
```
43+
44+
## Generate API Key
45+
46+
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.
47+
48+
2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu.
49+
50+
3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key.
51+
52+
4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again.
53+
54+
> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
55+
56+
## Integration Open 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 in .cs file
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/open-ai/razor %}
71+
{% endhighlight %}
72+
{% highlight c# tabtitle="Gemini.cs" %}
73+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs %}
74+
{% endhighlight %}
75+
{% endtabs %}
76+
77+
![Open AI](../../images/open-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 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 Vue 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: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: post
3+
title: Open AI in ##Platform_Name## AI AssistView Control | Syncfusion
4+
description: Checkout and learn about Integration of Open AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Open AI
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Integration of Open AI With AI AssistView control
12+
13+
The Syncfusion AI AssistView supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your Core applications.
14+
15+
## Getting Started With the AI AssistView control
16+
17+
Before integrating Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your Vue application:
18+
19+
[ CORE Getting Started Guide](../getting-started)
20+
21+
## Prerequisites
22+
23+
* OpenAI account to generate an API key for accessing the `OpenAI` API
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 package in the application using Package Manager Console.
37+
38+
```bash
39+
40+
NuGet\Install-Package
41+
42+
```
43+
44+
## Generate API Key
45+
46+
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.
47+
48+
2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu.
49+
50+
3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key.
51+
52+
4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again.
53+
54+
> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
55+
56+
## Integration Open 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 in .cs file
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/open-ai/tagHelper %}
71+
{% endhighlight %}
72+
{% highlight c# tabtitle="Gemini.cs" %}
73+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs %}
74+
{% endhighlight %}
75+
{% endtabs %}
76+
77+
![Open AI](../../images/open-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 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)