ASP.NET MVC Chat Overview
Starting with version 2025.3.825, the Chat component has been completely redesigned. The API is updated accordingly to support the newly introduced features.
The Telerik UI Chat HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Chat widget.
The Chat component delivers a modern conversational interface designed to enhance user interaction and communication within web applications. It facilitates seamless communication between users, chatbots, and AI-powered systems through an intuitive and highly customizable interface. The component offers extensive functionality, including message threading, file attachments, user avatars, quick action suggestions, and comprehensive accessibility support. Built with flexibility in mind, it enables easy integration with various messaging services, machine learning models, and custom business workflows to meet diverse application requirements.
Initializing the Chat
The following example demonstrates how to define a Chat.
@(Html.Kendo().Chat()
// The name of the Chat is mandatory.
// It specifies the "id" and the "name" attributes of the widget.
.Name("chat")
.Height("600px")
.Width("400px")
.AuthorId("1")
)Basic Configuration
The following example demonstrates how to define header items, predefined suggestions, and configure attachments and message actions.
@(Html.Kendo().Chat()
.Name("chat")
.HeaderItems(items => {
items.Add().Type(AppBarItemType.ContentItem).Template("<strong>Customer Support Chat</strong>");
items.Add().Type(AppBarItemType.Spacer);
items.Add().Type(AppBarItemType.ContentItem).Template("<button>Export</button>");
})
.FileActions(actions =>
{
actions.Add().Name("download").Text("Download").Icon("download");
})
.MessageToolbarActions(actions =>
{
actions.Add().Name("settings").Icon("gear");
actions.Add().Name("share").Icon("share");
})
.MessageActions(actions =>
{
actions.Add().Name("copy").Text("Copy").Icon("copy");
actions.Add().Name("pin").Text("Pin").Icon("pin");
actions.Add().Name("delete").Text("Delete").Icon("trash");
})
.Suggestions(suggestions => {
suggestions.Add().Text("Analyse a file");
suggestions.Add().Text("Generate a cover letter");
})
)Functionality and Features
| Feature | Description |
|---|---|
| Data Binding | Bind the Chat either to a local data collection or to data retrieved from a remote endpoint. |
| AI Integration | Configure the Chat to interact with a large language model through a streaming AI chat service. |
| Tools | Utilize the available context menu actions and toolbar commands. |
| File Uploads and Media | Enable file uploads, media sharing, and speech-to-text functionality of the Chat component. |
| Quick Actions | Define quick response suggestions that appear above the message box. |
| Templates | Use template options to customize the rendering of the messages, attachments, quick actions, and more. |
| Peer-to-Peer Chat | Create a peer-to-peer Chat application using SignalR. |
| Events | Subscribe to the available client-side events to implement any custom logic. |
| Accessibility | The Chat is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation. |