# Syncfusion Aspnetmvc Chat UI > Implement a real-time Chat UI with Syncfusion ASP.NET MVC ChatUI component. Use when building chat interfaces, messaging apps, bot integrations, or interactive conversations. Covers messages, header/footer, templates, events, methods, file attachments, typing indicators, mentions, globalization, speech-to-text, and bot integrations. - Skill: `syncfusion/syncfusion-aspnetmvc-chat-ui` (Agent Skill, multi-file: 11 files) - Install (CLI): `npx skillmds@latest add syncfusion/syncfusion-aspnetmvc-chat-ui` - Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-aspnetmvc-chat-ui/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: syncfusion (https://skillmd.com/u/syncfusion) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/syncfusion/syncfusion-aspnetmvc-chat-ui --- # Syncfusion ASP.NET MVC Chat UI The Syncfusion ASP.NET MVC Chat UI (`Syncfusion.EJ2.InteractiveChat.ChatUI`) is a feature-rich conversational interface component for building real-time chat applications, AI assistants, and bot integrations. It supports structured messages, user avatars, typing indicators, file attachments, mention tagging, markdown rendering, and extensive template customization. ## Navigation Guide ### Getting Started πŸ“„ **Read:** [references/getting-started.md](references/getting-started.md) - NuGet package installation (`Syncfusion.EJ2.MVC5`) - Namespace, stylesheet, and script references - Script manager registration - Basic Chat UI rendering with `@Html.EJS().ChatUI()` - Configuring initial messages and current user ### Messages πŸ“„ **Read:** [references/messages.md](references/messages.md) - `ChatUIMessage` model: `Text`, `Id`, `Author`, `Timestamp`, `Status`, `AttachedFile` - Pinned messages, reply-to threading (`ChatUIReplyTo` with `Timestamp`, `TimestampFormat`, `MentionUsers`), forwarded messages - Compact mode, auto-scroll, quick reply suggestions - Message toolbar with `MessageToolbarItemClickedEventArgs` (`item`, `message`, `cancel`, `event`) - Message status: `IconCss`, `Text`, `Tooltip` usage - Markdown content rendering with `marked` + `DOMPurify` ### User Configuration πŸ“„ **Read:** [references/user-configuration.md](references/user-configuration.md) - `ChatUIUser` model: `Id`, `User`, `AvatarUrl`, `AvatarBgColor`, `CssClass`, `StatusIconCss` - Defining the current user with the `User` property - Avatar images, fallback initials, background color - Presence status icons (online, offline, busy, away) ### Header and Toolbar πŸ“„ **Read:** [references/header-and-toolbar.md](references/header-and-toolbar.md) - Show/hide header (`ShowHeader`), header text and icon - `ChatUIToolbarSettings` β€” header toolbar items - Toolbar item properties: `IconCss`, `Type`, `Text`, `Visible`, `Disabled`, `Tooltip`, `CssClass`, `Align`, `TabIndex`, `Template` - `ItemClicked` event handler ### Footer and Templates πŸ“„ **Read:** [references/footer-and-templates.md](references/footer-and-templates.md) - Show/hide footer (`ShowFooter`), custom footer template - Empty chat template, message template, suggestion template - Typing users template, time break template - Template context variables (`message`, `index`, `users`, `messageDate`, `suggestion`) ### Events and Methods πŸ“„ **Read:** [references/events-and-methods.md](references/events-and-methods.md) - `Created`, `MessageSend`, `UserTyping` events with full event args (`cancel`, `isTyping`, `message`, `user`, `itemData`) - `addMessage()` β€” add message as string or object - `updateMessage()` β€” edit an existing message by ID - `scrollToBottom()` β€” programmatic scroll to latest message - `scrollToMessage(messageId)` β€” scroll to a specific message by ID - `focus()` β€” programmatically focus the chat input textarea - Accessing the ChatUI instance via `ej.base.getInstance()` ### Appearance and Layout πŸ“„ **Read:** [references/appearance-and-layout.md](references/appearance-and-layout.md) - Placeholder, `Width`, `Height`, `CssClass` - Timestamps (`ShowTimeStamp`, `TimeStampFormat`) - Time breaks (`ShowTimeBreak`, `TimeBreakTemplate`) - Typing indicator (`TypingUsers`) - Load on demand (`LoadOnDemand`) for long conversation histories - Persistence (`EnablePersistence`) β€” save and restore state across page reloads ### File Attachments πŸ“„ **Read:** [references/file-attachments.md](references/file-attachments.md) - Enable file attachments (`EnableAttachments`) - `AttachmentSettings`: `SaveUrl`, `RemoveUrl`, `AllowedFileTypes`, `MaxFileSize`, `SaveFormat`, `Path` - Drag-and-drop, maximum file count - Custom attachment and preview templates - Pre-populating attachments on messages at initial render (`AttachedFile`) - Attachment lifecycle events and `ChatAttachmentClickEventArgs` (`file`, `cancel`, `event`) ### Mentions and Globalization πŸ“„ **Read:** [references/mentions-and-globalization.md](references/mentions-and-globalization.md) - `MentionUsers` list, `@` mention trigger popup - Custom trigger character (`MentionTriggerChar`) - Predefined mentions in message text using `{0}`, `{1}` placeholders - `MentionSelect` event - Localization (`Locale`, `ej.base.L10n.load`) and RTL (`EnableRtl`) ### Bot Integrations and Speech-to-Text πŸ“„ **Read:** [references/bot-integrations.md](references/bot-integrations.md) - Microsoft Bot Framework (Direct Line) integration - Google Dialogflow integration - Speech-to-Text via Web Speech API + `SpeechToText` component - Secure token server pattern - `MessageSend` + `addMessage()` integration pattern - Troubleshooting common bot connection issues --- ## Quick Start Example **Controller (`HomeController.cs`):** ```csharp using Syncfusion.EJ2.InteractiveChat; public ActionResult Index() { var currentUser = new ChatUIUser { Id = "user1", User = "Albert" }; var otherUser = new ChatUIUser { Id = "user2", User = "Michale Suyama" }; var messages = new List { new ChatUIMessage { Text = "Hi Michale, are we on track for the deadline?", Author = currentUser }, new ChatUIMessage { Text = "Yes, the design phase is complete.", Author = otherUser }, new ChatUIMessage { Text = "I'll review it and send feedback by today.", Author = currentUser } }; ViewBag.CurrentUser = currentUser; ViewBag.Messages = messages; return View(); } ``` **View (`Index.cshtml`):** ```razor @using Syncfusion.EJ2.InteractiveChat
@Html.EJS().ChatUI("chatUI") .User(ViewBag.CurrentUser) .Messages(ViewBag.Messages) .HeaderText("Team Chat") .Render()
``` **Required layout references (`_Layout.cshtml`):** ```html ... @Html.EJS().ScriptManager() ``` --- ## Common Patterns ### Programmatically Add a Message (Bot Reply) ```javascript function onMessageSend(args) { var chatUI = ej.base.getInstance(document.getElementById('chatUI'), ejs.interactivechat.ChatUI); fetch('/api/bot/reply', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: args.message.text }) }) .then(r => r.json()) .then(data => chatUI.addMessage({ text: data.reply, author: botUser })); } ``` ### Enable File Attachments ```razor @Html.EJS().ChatUI("chatUI") .User(ViewBag.CurrentUser) .EnableAttachments(true) .AttachmentSettings(new ChatUIFileAttachmentSettings { SaveUrl = Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }) .Render() ``` ### Show Typing Indicator (Client-Side) ```javascript function onCreated() { var chatUI = ej.base.getInstance(document.getElementById('chatUI'), ejs.interactivechat.ChatUI); chatUI.typingUsers = [{ id: "user2", user: "Michale Suyama" }]; chatUI.dataBind(); } ``` --- ## Key Properties Reference | Property | Type | Default | Description | |----------|------|---------|-------------| | `User` | `ChatUIUser` | β€” | Current logged-in user | | `Messages` | `List` | `[]` | Initial message collection | | `HeaderText` | `string` | β€” | Text shown in header | | `HeaderIconCss` | `string` | β€” | CSS class for header icon | | `ShowHeader` | `bool` | `true` | Show or hide the header | | `ShowFooter` | `bool` | `true` | Show or hide the footer | | `Placeholder` | `string` | `"Type your message…"` | Textarea placeholder | | `Width` | `string` | `"100%"` | Component width | | `Height` | `string` | `"100%"` | Component height | | `CssClass` | `string` | β€” | Custom CSS class | | `AutoScrollToBottom` | `bool` | `false` | Auto-scroll on new message | | `ShowTimeStamp` | `bool` | `true` | Show message timestamps | | `TimeStampFormat` | `string` | `"dd/MM/yyyy hh:mm a"` | Global timestamp format | | `ShowTimeBreak` | `bool` | `false` | Show date separators | | `EnableCompactMode` | `bool` | `false` | Align all messages left | | `LoadOnDemand` | `bool` | `false` | Lazy-load messages on scroll | | `EnablePersistence` | `bool` | `false` | Persist state across page reloads via localStorage | | `EnableAttachments` | `bool` | `false` | Enable file attachments | | `MentionUsers` | `List` | β€” | Users available for `@` mention | | `TypingUsers` | `List` | β€” | Users currently typing | | `EnableRtl` | `bool` | `false` | Right-to-left layout | | `Locale` | `string` | `"en"` | Localization culture code |