Blazor Chat Component Overview

Updated on Jan 27, 2026

The Telerik UI for Blazor Chat component enables developers to build modern conversational interfaces in Blazor applications. It supports rich messaging, AI integrations, custom templates, file uploads, and accessibility features. The component is designed for extensibility, allowing integration with chatbots, LLMs, and custom business logic.

The Chat component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

Creating Blazor Chat

Add the <TelerikChat> tag to your page.
Set the Data parameter to a collection of messages.
Set the AuthorId parameter to identify the current user.
Subscribe to the OnSendMessage event to handle new messages.
(optional) Configure additional settings like dimensions and speech-to-text support.
(optional) Define the Chat model property names if they don't match the defaults.

Basic configuration of the Telerik Chat

<TelerikChat Data="@ChatData"
             AuthorId="@CurrentUserId"
             EnableSpeechToText="@ChatSpeechToTextEnabled"
             OnSendMessage="@OnChatSendMessage"
             Height="90vh"
             Width="400px">
</TelerikChat>

@code {
    private List<Message> ChatData { get; set; } = new();
    private string CurrentUserId { get; set; } = "user1";
    private bool ChatSpeechToTextEnabled { get; set; } = true;
    
    private async Task OnChatSendMessage(ChatSendMessageEventArgs args)
    {
        var newMessage = new Message
        {
            AuthorId = CurrentUserId,
            Text = args.Message
        };
        
        ChatData.Add(newMessage);
    }

    protected override void OnInitialized()
    {
        ChatData = new List<Message>();
        
        for (int i = 1; i <= 2; i++)
        {
            ChatData.Add(new Message
            {
                Text = i == 1 ? "Hello! How can I help you today?" : "Hi there! I'm looking for information about the new features.",
                AuthorId = i == 1 ? "assistant" : "user1",
                Timestamp = DateTime.Now.AddMinutes(-5 + i)
            });
        }
    }
 
    public class Message
    {
        public string Id { get; set; } = Guid.NewGuid().ToString();
        public string AuthorId { get; set; } = string.Empty;
        public string AuthorName { get; set; } = string.Empty;
        public string AuthorImageUrl { get; set; } = string.Empty;
        public IEnumerable<FileSelectFileInfo> Files { get; set; } = new List<FileSelectFileInfo>();
        public bool IsDeleted { get; set; }
        public bool IsPinned { get; set; }
        public bool IsTyping { get; set; }
        public string ReplyToId { get; set; } = string.Empty;
        public string Status { get; set; } = string.Empty;
        public List<string> SuggestedActions { get; set; } = new();
        public string Text { get; set; } = string.Empty;
        public DateTime Timestamp { get; set; } = DateTime.Now;
    }
}

Parameter	Type and Default Value	Description
`AttachmentsField`	`string` (`"Attachments"`)	The name of the field containing message file attachments.
`AuthorId`	`string`	The ID of the current user sending messages.
`AuthorIdField`	`string` (`"AuthorId"`)	The name of the field containing the author identifier.
`AuthorImageUrlField`	`string` (`"AuthorImageUrl"`)	The name of the field containing the author's avatar image URL.
`AuthorNameField`	`string` (`"AuthorName"`)	The name of the field containing the author display name.
`Data`	`IEnumerable<TItem>`	The data source for chat messages.
`EnableFileUpload`	`bool` (`false`)	Enables file upload functionality in the chat input.
`EnableSpeechToText`	`bool` (`true`)	Enables speech-to-text functionality with microphone input.
`Height`	`string`	The height of the chat component in CSS units.
`IsTypingField`	`string`	The name of the field that indicates whether a message represents a typing indicator.
`MessageFilesLayoutMode`	`ChatMessageFilesLayoutMode` enum (`Vertical`)	Controls how file attachments are displayed (Vertical, Horizontal, or Wrap).
`MessageWidthMode`	`MessageWidthMode` enum (`Standard`)	Controls the width behavior of messages (Standard or Full).
`SuggestedActionsLayoutMode`	`ChatSuggestedActionsLayoutMode` enum (`Wrap`)	Controls how suggested actions are displayed (Wrap, Scroll, or ScrollButtons).
`Suggestions`	`IEnumerable<string>`	Collection of quick reply suggestions.
`SuggestionsLayoutMode`	`ChatSuggestionsLayoutMode` enum (`Wrap`)	Controls how message suggestions are displayed (Wrap, Scroll, or ScrollButtons).
`TextField`	`string` (`"Text"`)	The name of the field containing the message content.
`TimestampField`	`string` (`"Timestamp"`)	The name of the field containing the message timestamp.
`Width`	`string`	The width of the chat component in CSS units.

Chat Reference and Methods

The Chat component exposes a Refresh() method that refreshes the component and scrolls to the latest messages. To execute the method, obtain a reference to the Chat instance via @ref.

How to obtain a Chat reference and call methods

RAZOR

<TelerikChat @ref="@ChatRef" 
             Data="@ChatData"
             OnSendMessage="@OnChatSendMessage">
</TelerikChat>

<TelerikButton OnClick="@OnRefreshChatClick">Refresh Chat</TelerikButton>

@code {
    private TelerikChat<ChatMessage>? ChatRef { get; set; }
    
    private void OnRefreshChatClick()
    {
        ChatRef?.Refresh();
    }
}

Blazor Chat Component Overview

Creating Blazor Chat

Data Binding

Messages

Templates and Customization

Integrations

File Uploads and Media

Events

Chat Parameters

Chat Reference and Methods

Next Steps

See Also