Getting Started with Blazor Chat UI in a Blazor Web App

10 Oct 20258 minutes to read

This section explains how to add the Blazor Chat UI component to your Blazor Web App using Visual Studio or Visual Studio Code.

To get started quickly with the Blazor Chat UI component, refer to the following video guide:

Prerequisites

Create a New Blazor Web App in Visual Studio

A Blazor Web App can be created using Visual Studio 2022 with either the official Microsoft Templates or the Syncfusion® Blazor Extension.

Ensure you configure the appropriate Interactive render mode and Interactivity location when creating the Blazor Web Application.

Install Syncfusion® Blazor InteractiveChat and Themes NuGet in the App

To add the Blazor Chat UI component to your app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install Syncfusion.Blazor.InteractiveChat and Syncfusion.Blazor.Themes.

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.

Alternatively, the required packages can be installed using the Package Manager Console commands.

Install-Package Syncfusion.Blazor.InteractiveChat -Version 31.2.2
Install-Package Syncfusion.Blazor.Themes -Version 31.2.2

NOTE

Syncfusion® Blazor components are available at nuget.org. Refer to the NuGet packages documentation for a complete list of available packages.

Prerequisites

Create a New Blazor Web App in Visual Studio Code

A Blazor Web App can be created using Visual Studio code with either the official Microsoft Templates or the Syncfusion® Blazor Extension.

To ensure proper functionality of a Blazor Web App, configure the appropriate Interactive render mode and Interactivity location during application setup.

For example, to create a Blazor Web App with Auto interactive render mode, use the following commands:

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

NOTE

For more information on creating a Blazor Web App with various interactive modes and locations, refer to this link.

Install Syncfusion® Blazor InteractiveChat and Themes NuGet in the App

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.

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure you’re in the project root directory where your .csproj file is located.
  • Run the following command to install a Syncfusion.Blazor.InteractiveChat and Syncfusion.Blazor.Themes NuGet package and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.InteractiveChat -v 31.2.2
dotnet add package Syncfusion.Blazor.Themes -v 31.2.2
dotnet restore

NOTE

Syncfusion® Blazor components are available at nuget.org. Refer to the NuGet packages documentation for a complete list of available packages.

Register Syncfusion® Blazor Service

First, import the Syncfusion.Blazor and Syncfusion.Blazor.InteractiveChat namespace.

  • WebAssembly or Auto Mode: Open the ~/_Imports.razor file from the .Client project.
  • Server Mode: Open the ~/_Imports.razor file located in the main project’s Components folder.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.InteractiveChat

Next, register the Syncfusion® Blazor service in your ~/Program.cs file.

If the Interactive Render Mode is set to WebAssembly or Auto, the Syncfusion® Blazor service must be registered in both ~/Program.cs files of the Blazor Web App.

...
...
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
....
...
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

If the Interactive Render Mode is set to Server, your project will contain a single ~/Program.cs file. So, you should register the Syncfusion® Blazor Service only in that ~/Program.cs file.

...
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
....

Add Stylesheet and Script Resources

The theme stylesheet and script can be accessed from NuGet through 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:

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

<body>
    ....
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

NOTE

Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add Syncfusion® Blazor Chat UI Component

Add the Syncfusion® Blazor Chat UI 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:

Interactivity Location Render Mode Code Example
Per page/component Auto @rendermode InteractiveAuto
  WebAssembly @rendermode InteractiveWebAssembly
  Server @rendermode InteractiveServer

NOTE

If the Interactivity Location is set to Global, the Render Mode is configured globally in the App.razor file and does not need to be specified on each component.

@* desired render mode define here *@
@rendermode InteractiveAuto
<div style="height: 400px; width: 400px;">
    <SfChatUI></SfChatUI>
</div>

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Chat UI component will be rendered in your browser.

Blazor Chat UI Component

Configure Messages and User

Use the Messages property to populate the chat with an initial set of messages and the User property to define the current user.

<div style="height: 400px; width: 400px;">
    <SfChatUI ID="chatUser" User="CurrentUserModel" Messages="ChatUserMessages"></SfChatUI>
</div>

@code {
    private static UserModel CurrentUserModel = new UserModel() { ID = "User1", User = "Albert" };
    private static UserModel MichaleUserModel = new UserModel() { ID = "User2", User = "Michale Suyama" };

    private List<ChatMessage> ChatUserMessages = new List<ChatMessage>()
    {
        new ChatMessage() { Text = "Want to get coffee tomorrow?", Author = CurrentUserModel },
        new ChatMessage() { Text = "Sure! What time?", Author = MichaleUserModel },
        new ChatMessage() { Text = "How about 10 AM?", Author = CurrentUserModel }
    };
}

Blazor Chat UI default prompt