Skip to content

Commit 654eeb8

Browse files
thangavelethangavele
authored
Merge pull request #4591 from syncfusion-content/986172-Concerns-MD-htfx
986172: Updated review concerns for AI integrations in core and mvc.
2 parents e2f0e92 + 76dccf4 commit 654eeb8

File tree

28 files changed

+785
-300
lines changed

28 files changed

+785
-300
lines changed

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

Lines changed: 40 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -8,61 +8,62 @@ publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

11-
# 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)
11+
# Integrate Gemini AI with ASP.NET MVC AI AssistView control
12+
13+
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.
2014

2115
## Prerequisites
16+
17+
* **Google Account**: For generating a Gemini API key.
18+
19+
* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed.
20+
21+
* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses.
22+
23+
## Set Up the AI AssistView control
24+
25+
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.
26+
27+
## Install Dependencies
2228

23-
* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs).
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+
1. Install the `Gemini AI` nuget package in the application.
2930

3031
```bash
3132

32-
NuGet\Install-Package Syncfusion.EJ2.MVC5
33+
NuGet\Install-Package Mscc.GenerativeAI
3334

3435
```
35-
36-
Install the Gemini AI package in the application using Package Manager Console.
37-
36+
37+
2. Install the `Markdig` nuget packages in the application.
38+
3839
```bash
39-
40-
NuGet\Install-Package Mscc.GenerativeAI
41-
40+
41+
Nuget\Install-Package Markdig
42+
4243
```
4344

4445
## Generate API Key
46+
47+
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.
48+
49+
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.
50+
51+
3. **Project Selection**: Choose an existing Google Cloud project or create a new one.
52+
53+
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.
54+
55+
> Security note: Advises against committing the API key to version control and recommends using environment variables or a secret manager in production.
4556
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-
## Configure 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
57+
## Gemini AI with AI AssistView
58+
59+
Modify the `index.cshtml` file to integrate the Gemini AI with the AI AssistView control.
6160

61+
* Add your Gemini API key securely in the configuration:
62+
6263
```bash
63-
64+
6465
string apiKey = 'Place your API key here';
65-
66+
6667
```
6768

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

7778
![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 the hosted link to interact with the Gemini AI for dynamic response

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
layout: post
3+
title: LLM Model in ##Platform_Name## AI AssistView Control | Syncfusion
4+
description: Checkout and learn about Integration of LLM Model in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: LLM Model
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Integrate LLM via Ollama with ASP.NET MVC AI AssistView control
12+
13+
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.
14+
15+
## Prerequisites
16+
17+
Before starting, ensure you have the following:
18+
19+
* [Ollama](https://ollama.com) installed to run and manage LLM models locally.
20+
21+
* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed.
22+
23+
* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses.
24+
25+
## Set Up the AI AssistView control
26+
27+
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.
28+
29+
## Install Dependency
30+
31+
To install the Markdig package by run `NuGet\Install-Package Markdig` in Package Manager Console.
32+
33+
## Configuring Ollama
34+
35+
Install the LLM Model package in the application using Package Manager Console.
36+
37+
```bash
38+
39+
NuGet\Install-Package Microsoft.Extensions.AI
40+
41+
NuGet\Install-Package Microsoft.Extensions.AI.Ollama
42+
43+
```
44+
45+
## Configure AI AssistView with Ollama in ASP.NET MVC
46+
47+
Modify the `index.cshtml` file to integrate the Ollama with the AI AssistView control.
48+
49+
Add services in `Program.cs` file
50+
51+
```bash
52+
53+
using Microsoft.Extensions.AI;
54+
55+
builder.Services.AddControllersWithViews();
56+
builder.Services.AddCors(options =>
57+
{
58+
options.AddPolicy("AllowAll",
59+
builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
60+
});
61+
builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11434/"), "deepseek-r1"))
62+
.UseDistributedCache()
63+
.UseLogging();
64+
65+
```
66+
67+
{% tabs %}
68+
{% highlight razor tabtitle="CSHTML" %}
69+
{% include code-snippet/ai-assistview/ai-integrations/llm-model/razor %}
70+
{% endhighlight %}
71+
{% highlight c# tabtitle="llm-model.cs" %}
72+
{% include code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-mvc.cs %}
73+
{% endhighlight %}
74+
{% endtabs %}
75+
76+
![LLM Model](../images/llm-model.png)

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

Lines changed: 47 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,76 @@
11
---
22
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.
3+
title: Azure OpenAI in ##Platform_Name## AI AssistView Control | Syncfusion
4+
description: Checkout and learn about Integration of Azure OpenAI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
6-
control: Azure Open AI
6+
control: Azure OpenAI
77
publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

11-
# Azure Open AI With AI AssistView control
11+
# Integrate Azure OpenAI with ASP.NET MVC AI AssistView control
1212

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 MVC 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)
13+
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.
2014

2115
## Prerequisites
22-
23-
* 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.
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
3316

34-
```
35-
36-
Install the Open AI and Azure Open AI package in the application using Package Manager Console.
17+
Before starting, ensure you have the following:
18+
19+
* **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.
20+
21+
* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed.
22+
23+
* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code).
24+
25+
## Set Up the AI AssistView control
26+
27+
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.
3728

29+
## Install Dependencies
30+
31+
Install the required packages:
32+
33+
1. Install the `OpenAI` and `Azure` nuget packages in the application.
34+
3835
```bash
39-
36+
4037
NuGet\Install-Package OpenAI
4138
NuGet\Install-Package Azure.AI.OpenAI
4239
NuGet\Install-Package Azure.Core
4340

4441
```
42+
43+
2. Install the `Markdig` nuget packages in the application.
44+
45+
```bash
46+
47+
Nuget\Install-Package Markdig
48+
49+
```
50+
51+
Note: The sample below uses HttpClient directly and does not require the Azure/OpenAI SDKs.
4552

46-
## Configure Azure Open AI
53+
## Configure Azure OpenAI
4754

48-
1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource.
55+
1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure OpenAI resource.
4956

50-
2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL.
57+
2. Under resource Management, select keys and endpoint to retrieve your API key and endpoint URL.
5158

52-
3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration.
59+
3. Note the following values:
60+
- API key
61+
- Endpoint (for example, https://<resource-name>.openai.azure.com/)
62+
- API version (must be supported by your resource)
63+
- Deployment name (for example, gpt-4o-mini)
5364

5465
4. Store these values securely, as they will be used in your application.
5566

5667
> `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.
68+
69+
## Azure OpenAI with AI AssistView
70+
71+
Modify the `index.cshtml` file to integrate the Azure OpenAI with the AI AssistView control.
5772

58-
## Configure 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:
73+
* Update the following configuration values with your Azure OpenAI details:
6374

6475
```bash
6576

@@ -78,12 +89,4 @@ string deploymentName = "Your_Deployment_Name";
7889
{% endhighlight %}
7990
{% endtabs %}
8091

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 the Hosted link to interact with your Azure Open AI for dynamic response.
92+
![Azure OpenAI](../images/open-ai.png)

0 commit comments

Comments
 (0)