Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions blazor/ai-assistview/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Accessibility in Blazor AI AssistView Component | Syncfusion
title: Accessibility in Blazor AI AssistView Component | Syncfusion®
description: Checkout and learn about Accessibility and Keyboard interaction with Blazor AI AssistView component and more details.
platform: Blazor
control: AI AssistView
Expand Down Expand Up @@ -72,4 +72,4 @@ The Blazor AI AssistView component's accessibility levels are ensured through an

## See also

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
* [Accessibility in Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
2 changes: 1 addition & 1 deletion blazor/ai-assistview/ai-integrations/gemini-integration.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Gemini Integration with Blazor AI AssistView Component | Syncfusion
title: Gemini Integration with Blazor AI AssistView Component | Syncfusion®
description: Checkout and learn about gemini integration with Blazor AI AssistView component in Blazor WebAssembly Application.
platform: Blazor
control: AI AssistView
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: LiteLLM Integration with Blazor AI AssistView Component | Syncfusion
title: LiteLLM Integration with Blazor AI AssistView Component | Syncfusion®
description: Checkout and learn about LiteLLM integration with Blazor AI AssistView component in Blazor WebAssembly Application.
platform: Blazor
control: AI AssistView
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: LLM Model with Blazor AI AssistView Component | Syncfusion
title: LLM Model with Blazor AI AssistView Component | Syncfusion®
description: Checkout and learn about Integration of LLM Model with Blazor AI AssistView component in Blazor WebAssembly Application.
platform: Blazor
control: AI AssistView
Expand Down Expand Up @@ -80,9 +80,9 @@ ollama serve

## Configure AI AssistView with Ollama

To integrate Ollama with the Syncfusion Blazor AI AssistView component in your Blazor application:
To integrate Ollama with the Blazor AI AssistView component in your Blazor application:

* Configure the AI services in the `Program.cs` file to register the Ollama client and Syncfusion Blazor services.
* Configure the AI services in the `Program.cs` file to register the Ollama client and Blazor services.

{% tabs %}
{% highlight cs tabtitle="Program.cs" %}
Expand Down
2 changes: 1 addition & 1 deletion blazor/ai-assistview/ai-integrations/openai-integration.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Azure OpenAI with Blazor AI AssistView Component | Syncfusion
title: Azure OpenAI with Blazor AI AssistView Component | Syncfusion®
description: Checkout and learn about Azure OpenAI with Blazor AI AssistView component in Blazor WebAssembly Application.
platform: Blazor
control: AI AssistView
Expand Down
4 changes: 2 additions & 2 deletions blazor/ai-assistview/appearance.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Style and Appearance in Blazor AI AssistView Component | Syncfusion
description: Checkout and learn here all about Style and Appearance with Syncfusion Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
title: Style and Appearance in Blazor AI AssistView Component | Syncfusion®
description: Checkout and learn here all about Style and Appearance with Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
platform: Blazor
control: AI AssistView
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/ai-assistview/assist-view.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Assist view in Blazor AI AssistView Component | Syncfusion
description: Checkout and learn here all about Assist view with Syncfusion Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
title: Assist view in Blazor AI AssistView Component | Syncfusion®
description: Checkout and learn here all about Assist view with Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
platform: Blazor
control: AI AssistView
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/ai-assistview/custom-view.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Custom views in Blazor AI AssistView Component | Syncfusion
description: Checkout and learn here all about Custom views with Syncfusion Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
title: Custom views in Blazor AI AssistView Component | Syncfusion®
description: Checkout and learn here all about Custom views with Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
platform: Blazor
control: AI AssistView
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/ai-assistview/events.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Events in Blazor AI AssistView Component | Syncfusion
description: Checkout and learn here all about Events with Syncfusion Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
title: Events in Blazor AI AssistView Component | Syncfusion®
description: Checkout and learn here all about Events with Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
platform: Blazor
control: AI AssistView
documentation: ug
Expand Down
4 changes: 2 additions & 2 deletions blazor/ai-assistview/file-attachments.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Attachments in Blazor AI AssistView Component | Syncfusion
description: Checkout and learn here all about Attachments with Syncfusion Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
title: Attachments in Blazor AI AssistView Component | Syncfusion®
description: Checkout and learn here all about Attachments with Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
platform: Blazor
control: AI AssistView
documentation: ug
Expand Down
22 changes: 11 additions & 11 deletions blazor/ai-assistview/getting-started-webapp.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Getting started with Syncfusion AI AssistView in Blazor Web App
description: Check out the documentation for getting started with Syncfusion Blazor AI AssistView Components in Blazor Web App.
title: Getting started with AI AssistView in Blazor Web App | Syncfusion®
description: Check out the documentation for getting started with Blazor AI AssistView Components in Blazor Web App.
platform: Blazor
control: AI AssistView
documentation: ug
---

# Getting Started with Blazor AI AssistView in Blazor Web App

This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView](https://www.syncfusion.com/blazor-components/blazor-ai-assistview) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
This section briefly explains about how to include [Blazor AI AssistView](https://www.syncfusion.com/blazor-components/blazor-ai-assistview) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).

{% tabcontents %}

Expand All @@ -21,7 +21,7 @@ This section briefly explains about how to include [Syncfusion<sup style="font-s

## Create a new Blazor Web App in Visual Studio

Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.

{% endtabcontent %}

Expand All @@ -33,7 +33,7 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https:

## Create a new Blazor Web App in Visual Studio Code

Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.

For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):

Expand Down Expand Up @@ -85,7 +85,7 @@ cd BlazorWebApp.Client

N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
## Install required Blazor packages

Install [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.

Expand Down Expand Up @@ -117,9 +117,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie
{% endhighlight %}
{% endtabs %}

## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
## Register Blazor service

Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App.
Register the Blazor service in the **Program.cs** file of your Blazor Web App.

{% tabs %}
{% highlight c# tabtitle="Program.cs" %}
Expand All @@ -133,7 +133,7 @@ builder.Services.AddSyncfusionBlazor();
{% endhighlight %}
{% endtabs %}

N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App.
N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App.

## Add stylesheet and script resources

Expand All @@ -149,9 +149,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A

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.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView component
## Add Blazor AI AssistView component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`). Use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to generate responses based on the entered prompts.
Add the Blazor AI AssistView component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`). Use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to generate responses based on the entered prompts.

N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.

Expand Down
Loading