Chat

• Oct 02, 2025
• 4 minutes to read

Chat is a UI component that allows users to send and receive messages in real time.

Run Demo: Chat Read Tutorial

Getting Started

The Chat UI Control is based on the DevExtreme Chat component.

To add this control to your project, follow instructions in the following help topics:

• Configure a Visual Studio Project or Configure a non Visual Studio Project
• Add Controls to a Project
• Razor Syntax

Basic Syntax

ChatBasics.cshtml

@model ASP.NET_Core.Models.Chat.ChatModel

@(Html.DevExtreme().Chat()
    .DataSource(Model.Messages)
    .ReloadOnChange(false)
    .User(u => u
        .Id(Model.CurrentUser.Id)
        .Name(Model.CurrentUser.Name)
    )
    .OnMessageEntered("onMessageEntered")
)

<script>
    function onMessageEntered({ component, message }) {
        component.renderMessage(message)
    }
</script>

ChatController.cs

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using ASP.NET_Core.Models.Chat;

namespace ASP.NET_Core.Controllers {
    public class ChatController : Controller {
        public IActionResult GettingStarted() {
            return View(new ChatModel {
                CurrentUser = ChatData.CurrentUser,
                SupportAgent = ChatData.SupportAgent,
                Messages = ChatData.Messages,
            });
        }
    }
}

namespace ASP.NET_Core.Models.Chat
{
    public class ChatData
    {
        public static ChatUser CurrentUser = new ChatUser { Id = "1", Name = "User" };
        public static ChatUser SupportAgent = new ChatUser { Id = "2", Name = "Support" };
        private static readonly DateTime todayDate = DateTime.Now.Date;
        private static DateTime GetTimestamp(DateTime date, int offsetMinutes = 0) {
            DateTime adjustedDate = date.AddMinutes(offsetMinutes);
            return adjustedDate;
        }
        public static readonly IEnumerable<Message> Messages = new[] {
            new Message {
                Id = Guid.NewGuid().ToString("N"),
                Timestamp = GetTimestamp(todayDate, -9),
                Author = SupportAgent,
                Text = "Hello, John!\nHow can I assist you today?",
            },
            new Message {
                Id = Guid.NewGuid().ToString("N"),
                Timestamp = GetTimestamp(todayDate, -7),
                Author = CurrentUser,
                Text = "Hi, I'm having trouble accessing my account.",
            },
            new Message {
                Id = Guid.NewGuid().ToString("N"),
                Timestamp = GetTimestamp(todayDate, -7),
                Author = CurrentUser,
                Text = "It says my password is incorrect."
            },
            new Message {
                Id = Guid.NewGuid().ToString("N"),
                Timestamp = GetTimestamp(todayDate, -7),
                Author = SupportAgent,
                Text = "I can help you with that. Can you please confirm your UserID for security purposes?"
            },
            new Message {
                Id = Guid.NewGuid().ToString("N"),
                Timestamp = GetTimestamp(todayDate, 0),
                Author = CurrentUser,
                Text = "john.doe1357"
            },
            new Message {
                Id = Guid.NewGuid().ToString("N"),
                Timestamp = GetTimestamp(todayDate, 0),
                Author = SupportAgent,
                Text = "✅ Instructions to restore access have been sent to the email address associated with your account."
            }
        };
    }
}

ChatModels.cs

using System;
using System.Collections.Generic;
using System.Text.Json.Serialization;

namespace ASP.NET_Core.Models.Chat
{
    public class ChatUser
    {
        [JsonPropertyName("id")] public string Id { get; set; }
        [JsonPropertyName("name")] public string Name { get; set; }
        [JsonPropertyName("avatarUrl")] public string AvatarUrl { get; set; }
    }

    public class Message
    {
        [JsonPropertyName("id")] public string Id { get; set; }
        [JsonPropertyName("timestamp")] public DateTime Timestamp { get; set; }
        [JsonPropertyName("author")] public ChatUser Author { get; set; }
        [JsonPropertyName("text")] public string Text { get; set; }
        [JsonPropertyName("isDeleted")] public bool IsDeleted { get; set; }
        [JsonPropertyName("isEdited")] public bool IsEdited { get; set; }
    }

    public class ChatModel {
        public IEnumerable<Message> Messages { get; set; }
        public ChatUser CurrentUser { get; set; }
        public ChatUser SupportAgent { get; set; }
    }
}

Built-in Capabilities and Configuration Guides

• Control Message Feed
  Set initial Chat messages and display new ones with the items array, renderMessage method, or dataSource CRUD operations. Use onMessageEntered to define actions after a message is entered.

• Integrate AI and Chatbots
  The DevExtreme Chat component allows you to add AI assistants by configuring AI services in the backend.

Run Demo

• Typing Status
  Typing triggers typingStart, while stopping or sending a message raises typingEnd. Use these events to manage the typingUsers array, indicating who is typing in the Chat.

• UI Customization
  Customize Chat messages with messageTemplate. Display runtime issues with the alerts array. Control UI elements with properties like showAvatar, and adjust date/time formats with options like messageTimestampFormat.

Run Demo

API

Server-Side API

Initialization

Call the Chat() method to create a Chat control. This action initializes a ChatBuilder instance. Use the instance methods to specify Chat options and event handlers.

Options

For a complete option list, see Options. For details on how to specify control options, refer to the following help topic: Specify Options.

Events

For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

Options

If you need to specify the Chat options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme Chat options.

Methods

For a list of available methods, see DevExtreme Chat methods. For details on how to call methods, refer to the following help topic: Call Methods.

Accessibility

For more information on Chat accessibility compliance, refer to the following help topic: Accessibility.

Demos

Run Demo: Chat