Skip to content

Commit c4c51df

Browse files
IndrajithSrinivasanIndrajithSrinivasan
authored
Merge pull request #4544 from syncfusion-content/982586-ollama-chatUI
config(982586): Added UG for the Lightweight LLM integration with the AI assistview component in Core and MVC platforms.
2 parents 33d5750 + f0269e0 commit c4c51df

File tree

19 files changed

+556
-50
lines changed

19 files changed

+556
-50
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,22 @@ documentation: ug
1010

1111
# Integration of Gemini AI With AI AssistView control
1212

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

1515
## Getting Started With the AI AssistView control
1616

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

19-
[ CORE Getting Started Guide](../getting-started)
19+
[ MVC Getting Started Guide](../getting-started)
2020

2121
## Prerequisites
2222

2323
* 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 Core application
24+
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application
2525

2626
## Install Packages
2727

28-
Install the Syncfusion ASP.NET Core package in the application using Package Manager Console.
28+
Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console.
2929

3030
```bash
3131

@@ -57,7 +57,7 @@ NuGet\Install-Package Mscc.GenerativeAI
5757

5858
You can add the below respective files in your application:
5959

60-
N> Add your generated `API Key` at the line
60+
* Add your generated `API Key` at the line
6161

6262
```bash
6363

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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+
# Integration of LLM via Ollama With AI AssistView component
12+
13+
The Syncfusion AI AssistView supports integration with [LLM via Ollama](https://ollama.com), enabling advanced conversational AI features in your applications. The component acts as a UI for a support bot, where user prompts are sent to the selected AI service via API calls.
14+
15+
## Getting Started With the AI AssistView control
16+
17+
Before integrating LLM Model, 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+
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application
24+
25+
## Install Packages
26+
27+
Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console.
28+
29+
```bash
30+
31+
NuGet\Install-Package Syncfusion.EJ2.MVC5
32+
33+
```
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+
## Integration LLM Model with AI AssistView
46+
47+
Add services in `Program.cs` file
48+
49+
```bash
50+
51+
using Microsoft.Extensions.AI;
52+
53+
builder.Services.AddControllersWithViews();
54+
builder.Services.AddCors(options =>
55+
{
56+
options.AddPolicy("AllowAll",
57+
builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
58+
});
59+
builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11434/"), "deepseek-r1"))
60+
.UseDistributedCache()
61+
.UseLogging();
62+
63+
```
64+
65+
{% tabs %}
66+
{% highlight razor tabtitle="CSHTML" %}
67+
{% include code-snippet/ai-assistview/ai-integrations/llm-model/razor %}
68+
{% endhighlight %}
69+
{% highlight c# tabtitle="llm-model.cs" %}
70+
{% include code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-mvc.cs %}
71+
{% endhighlight %}
72+
{% endtabs %}
73+
74+
![LLM Model](../../images/llm-model.png)
75+
76+
## Run and Test
77+
78+
Run the application in the browser using the following command.
79+
80+
Build and run the app (Ctrl + F5).
81+
82+
Open `https://localhost:7121/` to interact with your LLM Model for dynamic response.

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,22 @@ documentation: ug
1010

1111
# Integration of Open AI With AI AssistView control
1212

13-
The Syncfusion AI AssistView supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your Core applications.
13+
The Syncfusion AI AssistView supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your MVC applications.
1414

1515
## Getting Started With the AI AssistView control
1616

1717
Before integrating Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your Vue application:
1818

19-
[ CORE Getting Started Guide](../getting-started)
19+
[ MVC Getting Started Guide](../getting-started)
2020

2121
## Prerequisites
2222

2323
* 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
24+
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create MVC application
2525

2626
## Install Packages
2727

28-
Install the Syncfusion ASP.NET Core package in the application using Package Manager Console.
28+
Install the Syncfusion ASP.NET MVC package in the application using Package Manager Console.
2929

3030
```bash
3131

@@ -57,7 +57,7 @@ NuGet\Install-Package OpenAI
5757

5858
You can add the below respective files in your application:
5959

60-
N> Add your generated `API Key` at the line in .cs file
60+
* Add your generated `API Key` at the line in .cs file
6161

6262
```bash
6363

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Install the Syncfusion ASP.NET Core package in the application using Package Ma
2929

3030
```bash
3131

32-
NuGet\Install-Package Syncfusion.EJ2.MVC5
32+
NuGet\Install-Package Syncfusion.EJ2.AspNet.Core
3333

3434
```
3535

@@ -57,7 +57,7 @@ NuGet\Install-Package Mscc.GenerativeAI
5757

5858
You can add the below respective files in your application:
5959

60-
N> Add your generated `API Key` at the line
60+
* Add your generated `API Key` at the line
6161

6262
```bash
6363

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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+
# Integration of LLM via Ollama With AI AssistView component
12+
13+
The Syncfusion AI AssistView supports integration with [LLM via Ollama](https://ollama.com), enabling advanced conversational AI features in your applications. The component acts as a UI for a support bot, where user prompts are sent to the selected AI service via API calls.
14+
15+
## Getting Started With the AI AssistView control
16+
17+
Before integrating LLM Model, 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+
* [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) to create Core application
24+
25+
## Install Packages
26+
27+
Install the Syncfusion ASP.NET Core package in the application using Package Manager Console.
28+
29+
```bash
30+
31+
NuGet\Install-Package Syncfusion.EJ2.AspNet.Core
32+
33+
```
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+
## Integration LLM Model with AI AssistView
46+
47+
Add services in `Program.cs` file
48+
49+
```bash
50+
51+
using Microsoft.Extensions.AI;
52+
53+
builder.Services.AddControllersWithViews();
54+
builder.Services.AddCors(options =>
55+
{
56+
options.AddPolicy("AllowAll",
57+
builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
58+
});
59+
builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11434/"), "deepseek-r1"))
60+
.UseDistributedCache()
61+
.UseLogging();
62+
63+
```
64+
65+
{% tabs %}
66+
{% highlight tagHelper tabtitle="CSHTML" %}
67+
{% include code-snippet/ai-assistview/ai-integrations/llm-model/tagHelper %}
68+
{% endhighlight %}
69+
{% highlight c# tabtitle="llm-model.cs" %}
70+
{% include code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-core.cs %}
71+
{% endhighlight %}
72+
{% endtabs %}
73+
74+
![LLM Model](../../images/llm-model.png)
75+
76+
## Run and Test
77+
78+
Run the application in the browser using the following command.
79+
80+
Build and run the app (Ctrl + F5).
81+
82+
Open `https://localhost:7121/` to interact with your LLM Model for dynamic response.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Install the Syncfusion ASP.NET Core package in the application using Package Man
2929

3030
```bash
3131

32-
NuGet\Install-Package Syncfusion.EJ2.MVC5
32+
NuGet\Install-Package Syncfusion.EJ2.AspNet.Core
3333

3434
```
3535

@@ -57,7 +57,7 @@ NuGet\Install-Package
5757

5858
You can add the below respective files in your application:
5959

60-
N> Add your generated `API Key` at the line in .cs file
60+
* Add your generated `API Key` at the line in .cs file
6161

6262
```bash
6363

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

25 KB
Loading

‎ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ public IActionResult Index()
1111
{
1212
Items.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" });
1313
ViewBag.Items = Items;
14+
var PromptSuggestionData = new string[]
15+
{
16+
"What are the best tools for organizing my tasks?",
17+
"How can I maintain work-life balance effectively?"
18+
};
19+
ViewBag.PromptSuggestionData = PromptSuggestionData;
1420
return View();
1521
}
1622

‎ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/razor‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@
33

44
@{
55
ViewData["Title"] = "AI Assistance with OpenAI";
6-
var defaultSuggestions = new string[] { "Best practices for clean, maintainable code?", "How to optimize code editor for speed?" };
76
}
87

98
<div class="aiassist-container" style="height: 350px; width: 650px;">
10-
@Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").PromptSuggestions(@defaultSuggestions).PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings()
9+
@Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").PromptSuggestions(ViewBag.PromptSuggestionData).PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings()
1110
{
1211
Items = ViewBag.Items,
1312
ItemClicked = "toolbarItemClicked"
@@ -22,19 +21,12 @@
2221
</div>
2322
</script>
2423

25-
<script id="bannerContent" type="text/x-jsrender">
26-
<div class="banner-content">
27-
<div class="e-icons e-assistview-icon"></div>
28-
<h3>AI Assistance with OpenAI</h3>
29-
<div>Your everyday AI companion.</div>
30-
</div>
31-
</script>
32-
3324
<script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
3425

3526
<script>
3627

3728
var assistObj = null;
29+
var suggestions = @Html.Raw(Json.Serialize(ViewBag.PromptSuggestionData));
3830

3931
function onCreated() {
4032
assistObj = this;
@@ -43,6 +35,7 @@
4335
function toolbarItemClicked(args) {
4436
if (args.item.iconCss === 'e-icons e-refresh') {
4537
this.prompts = [];
38+
this.promptSuggestions = suggestions;
4639
}
4740
}
4841

‎ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,6 @@
1919
</div>
2020
</script>
2121

22-
<script id="bannerContent" type="text/x-jsrender">
23-
<div class="banner-content">
24-
<div class="e-icons e-assistview-icon"></div>
25-
<h3>AI Assistance with Gemini</h3>
26-
<div>Your everyday AI companion.</div>
27-
</div>
28-
</script>
29-
3022
<script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
3123
<script>
3224
var assistObj = null;

0 commit comments

Comments
 (0)