Skip to content

Commit 85be423

Browse files
author
GopalakrishnanVeeraragavan
committed
Merge branch 'development' of https://github.com/syncfusion-content/blazor-docs into 902038-DocBlazor
2 parents 0ecada5 + d745af2 commit 85be423

34 files changed

+385
-64
lines changed

‎blazor-toc.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -600,6 +600,16 @@
600600
</li>
601601
</ul>
602602
</li>
603+
<li>AI AssistView
604+
<ul>
605+
<li>Getting Started
606+
<ul>
607+
<li> <a href="/blazor/ai-assistview/getting-started-webapp">Blazor Web App</a></li>
608+
<li> <a href="/blazor/ai-assistview/getting-started">Blazor Server and WASM App</a></li>
609+
</ul>
610+
</li>
611+
</ul>
612+
</li>
603613
<li>AppBar
604614
<ul>
605615
<li>Getting Started

‎blazor/ai-assistview/getting-started-webapp.md‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
---
2+
layout: post
3+
title: Getting started with Syncfusion AI AssistView in Blazor Web App
4+
description: Check out the documentation for getting started with Syncfusion Blazor AI AssistView Components in Blazor Web App.
5+
platform: Blazor
6+
control: AI AssistView
7+
documentation: ug
8+
---
9+
10+
# Getting Started with Blazor AI AssistView in Blazor Web App
11+
12+
This section briefly explains about how to include [Blazor AI AssistView](https://www.syncfusion.com/blazor-components/blazor-ai-assistview) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/).
13+
14+
## Prerequisites
15+
16+
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
17+
18+
## Create a new Blazor Web App
19+
20+
You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
21+
22+
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
23+
24+
## Install Syncfusion Blazor InteractiveChat and Themes NuGet in the App
25+
26+
To add **Blazor AI AssistView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install `Syncfusion.Blazor.InteractiveChat` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
27+
28+
If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion Blazor components NuGet packages within the client project.
29+
30+
Alternatively, you can utilize the following package manager command to achieve the same.
31+
32+
{% tabs %}
33+
{% highlight C# tabtitle="Package Manager" %}
34+
35+
Install-Package Syncfusion.Blazor.InteractiveChat -Version {{ site.releaseversion }}
36+
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
37+
38+
{% endhighlight %}
39+
{% endtabs %}
40+
41+
N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
42+
43+
## Register Syncfusion Blazor Service
44+
45+
Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace.
46+
47+
```cshtml
48+
49+
@using Syncfusion.Blazor
50+
@using Syncfusion.Blazor.InteractiveChat
51+
52+
```
53+
54+
Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Web App.
55+
56+
If you select an **Interactive render mode** as `WebAssembly` or `Auto`, you need to register the Syncfusion Blazor service in both **~/Program.cs** files of your Blazor Web App.
57+
58+
```cshtml
59+
60+
....
61+
using Syncfusion.Blazor;
62+
....
63+
builder.Services.AddSyncfusionBlazor();
64+
....
65+
66+
```
67+
68+
## Add stylesheet and script resources
69+
70+
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
71+
72+
```html
73+
<head>
74+
....
75+
<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />
76+
</head>
77+
78+
<body>
79+
....
80+
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
81+
</body>
82+
```
83+
84+
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
85+
86+
## Add Syncfusion Blazor AI AssistView component
87+
88+
Add the Syncfusion Blazor AI AssistView component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
89+
90+
{% tabs %}
91+
{% highlight razor %}
92+
93+
@* desired render mode define here *@
94+
@rendermode InteractiveAuto
95+
96+
{% endhighlight %}
97+
{% endtabs %}
98+
99+
{% tabs %}
100+
{% highlight razor %}
101+
102+
<div class="aiassist-container" style="height: 350px; width: 650px;">
103+
<SfAIAssistView></SfAIAssistView>
104+
</div>
105+
106+
{% endhighlight %}
107+
{% endtabs %}
108+
109+
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion Blazor AI AssistView component in your default web browser.
110+
111+
![Blazor AI AssistView Component](./images/ai-assistview-component.png)
112+
113+
## Configure suggestions and responses
114+
115+
You can use the `PromptSuggestions` property to add prompt suggestions and the `PromptRequested` event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed.
116+
117+
{% tabs %}
118+
{% highlight razor %}
119+
120+
@* desired render mode define here *@
121+
@rendermode InteractiveAuto
122+
123+
{% endhighlight %}
124+
{% endtabs %}
125+
126+
{% tabs %}
127+
{% highlight razor %}
128+
129+
<div class="aiassist-container" style="height: 350px; width: 650px;">
130+
<SfAIAssistView PromptSuggestions="@promptSuggestions" PromptRequested="@PromptRequest"></SfAIAssistView>
131+
</div>
132+
133+
@code {
134+
List<string> promptSuggestions = new List<string> { "How do I prioritize my tasks?", "How can I improve my time management skills?" };
135+
public class AssistModel
136+
{
137+
public string Prompt { get; set; }
138+
public string Response { get; set; }
139+
}
140+
private List<AssistModel> prompts = new List<AssistModel>()
141+
{
142+
new AssistModel() { Prompt = "How do I prioritize my tasks?", Response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!" },
143+
new AssistModel() { Prompt = "How can I improve my time management skills?", Response = "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency" }
144+
};
145+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
146+
{
147+
await Task.Delay(3000);
148+
var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
149+
var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
150+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
151+
args.Response = isPromptFound ? promptData.Response : defaultResponse;
152+
}
153+
}
154+
155+
{% endhighlight %}
156+
{% endtabs %}
157+
158+
![Blazor AI AssistView default prompt](./images/default-prompt.png)

‎blazor/ai-assistview/getting-started.md‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
---
2+
layout: post
3+
title: Getting Started with Blazor AI AssistView Component | Syncfusion
4+
description: Checkout and learn about getting started with Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
5+
platform: Blazor
6+
control: AI AssistView
7+
documentation: ug
8+
---
9+
10+
# Getting Started with Blazor AI AssistView Component
11+
12+
This section briefly explains about how to include [Blazor AI AssistView](https://www.syncfusion.com/blazor-components/blazor-ai-assistview) component in your Blazor Server App and Blazor WebAssembly App using Visual Studio.
13+
14+
## Prerequisites
15+
16+
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
17+
18+
## Create a new Blazor App in Visual Studio
19+
20+
You can create a **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
21+
22+
## Install Syncfusion Blazor InteractiveChat and Themes NuGet in the App
23+
24+
To add **Blazor AI AssistView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install `Syncfusion.Blazor.InteractiveChat` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
25+
26+
{% tabs %}
27+
{% highlight C# tabtitle="Package Manager" %}
28+
29+
Install-Package Syncfusion.Blazor.InteractiveChat -Version {{ site.releaseversion }}
30+
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
31+
32+
{% endhighlight %}
33+
{% endtabs %}
34+
35+
N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
36+
37+
## Register Syncfusion Blazor Service
38+
39+
Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace.
40+
41+
{% tabs %}
42+
{% highlight razor tabtitle="~/_Imports.razor" %}
43+
44+
@using Syncfusion.Blazor
45+
@using Syncfusion.Blazor.InteractiveChat
46+
47+
{% endhighlight %}
48+
{% endtabs %}
49+
50+
Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Server App or Blazor WebAssembly App.
51+
52+
{% tabs %}
53+
{% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %}
54+
55+
using Microsoft.AspNetCore.Components;
56+
using Microsoft.AspNetCore.Components.Web;
57+
using Syncfusion.Blazor;
58+
59+
var builder = WebApplication.CreateBuilder(args);
60+
61+
// Add services to the container.
62+
builder.Services.AddRazorPages();
63+
builder.Services.AddServerSideBlazor();
64+
builder.Services.AddSyncfusionBlazor();
65+
66+
var app = builder.Build();
67+
....
68+
69+
{% endhighlight %}
70+
{% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %}
71+
72+
using Microsoft.AspNetCore.Components.Web;
73+
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
74+
using Syncfusion.Blazor;
75+
76+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
77+
builder.RootComponents.Add<App>("#app");
78+
builder.RootComponents.Add<HeadOutlet>("head::after");
79+
80+
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
81+
82+
builder.Services.AddSyncfusionBlazor();
83+
await builder.Build().RunAsync();
84+
....
85+
86+
{% endhighlight %}
87+
{% endtabs %}
88+
89+
## Add stylesheet and script resources
90+
91+
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `<head>` of the main page as follows:
92+
93+
* For **.NET 6** Blazor Server app, include it in **~/Pages/_Layout.cshtml** file.
94+
95+
* For **.NET 7** Blazor Server app, include it in the **~/Pages/_Host.cshtml** file.
96+
97+
* For Blazor WebAssembly app, include it in the **~/index.html** file.
98+
99+
```html
100+
<head>
101+
....
102+
<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />
103+
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
104+
</head>
105+
```
106+
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
107+
108+
## Add Syncfusion Blazor AI AssistView component
109+
110+
Add the Syncfusion Blazor AI AssistView component in the **~/Pages/Index.razor** file.
111+
112+
{% tabs %}
113+
{% highlight razor %}
114+
115+
<div class="aiassist-container" style="height: 350px; width: 650px;">
116+
<SfAIAssistView></SfAIAssistView>
117+
</div>
118+
119+
{% endhighlight %}
120+
{% endtabs %}
121+
122+
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion Blazor AI AssistView component in your default web browser.
123+
124+
![Blazor AI AssistView Component](./images/ai-assistview-component.png)
125+
126+
## Configure suggestions and responses
127+
128+
You can use the `PromptSuggestions` property to add prompt suggestions and the `PromptRequested` event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed.
129+
130+
{% tabs %}
131+
{% highlight razor %}
132+
133+
@* desired render mode define here *@
134+
@rendermode InteractiveAuto
135+
136+
{% endhighlight %}
137+
{% endtabs %}
138+
139+
{% tabs %}
140+
{% highlight razor %}
141+
142+
<div class="aiassist-container" style="height: 350px; width: 650px;">
143+
<SfAIAssistView PromptSuggestions="@promptSuggestions" PromptRequested="@PromptRequest"></SfAIAssistView>
144+
</div>
145+
146+
@code {
147+
List<string> promptSuggestions = new List<string> { "How do I prioritize my tasks?", "How can I improve my time management skills?" };
148+
public class AssistModel
149+
{
150+
public string Prompt { get; set; }
151+
public string Response { get; set; }
152+
}
153+
private List<AssistModel> prompts = new List<AssistModel>()
154+
{
155+
new AssistModel() { Prompt = "How do I prioritize my tasks?", Response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!" },
156+
new AssistModel() { Prompt = "How can I improve my time management skills?", Response = "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency" }
157+
};
158+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
159+
{
160+
await Task.Delay(3000);
161+
var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
162+
var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
163+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
164+
args.Response = isPromptFound ? promptData.Response : defaultResponse;
165+
}
166+
}
167+
168+
{% endhighlight %}
169+
{% endtabs %}
170+
171+
![Blazor AI AssistView default prompt](./images/default-prompt.png)

‎blazor/ai-assistview/images/ai-assistview-component.png‎

7.07 KB
Loading

‎blazor/ai-assistview/images/default-prompt.png‎

13.4 KB
Loading

‎blazor/chart/how-to/threshold.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,4 +112,4 @@ The complete code snippet for the preceding steps is available below.
112112
}
113113
```
114114

115-
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap4) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
115+
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.

‎blazor/datagrid/templates.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -225,4 +225,4 @@ N> From `v17.4.39`,the `ModelType` property has been removed from the DataGrid C
225225
The following image represents the Row Template
226226
![Blazor DataGrid with Row Template](./images/blazor-datagrid-rows.png)
227227

228-
N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
228+
N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.

‎blazor/daterangepicker/customization.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,4 @@ Start day in a week will differ based on the culture, but you can also customize
2424

2525
![Customization in Blazor DateRangePicker](./images/blazor-daterangepicker-customization.png)
2626

27-
N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap4) to understand how to present and manipulate data.
27+
N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data.

0 commit comments

Comments
 (0)