syncfusion-react-chat-ui

Q: How do I install syncfusion-react-chat-ui?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-chat-ui/ (personal) or .claude/skills/syncfusion-react-chat-ui/ (project).

by syncfusionFrontend & Design

Implement the Syncfusion React Chat UI component. Use this skill to create and customize messaging interfaces, including chat setup, message rendering, file attachments, typing indicators, conversation layout, theming, event handling, and real-time updates in React applications.

Installs: 716
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-react-chat-ui automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Syncfusion React Chat-UI in Syncfusion React

Component Overview

The Chat-UI component provides a complete conversational interface with real-time messaging, file attachments, user presence, and extensive customization options. This skill guides you through implementing chat interfaces for customer support, team collaboration, and interactive applications.

Key Capabilities

The Chat-UI component is an interactive messaging interface featuring:

Rich Message Support: Text, markdown, formatted content
User Management: Multi-user conversations, presence status, avatars
File Attachments: Upload, preview, download with restrictions
Event System: Lifecycle, interaction, and attachment events
Templates: Customizable UI for messages, suggestions, footer
Internationalization: Multi-language and RTL support

Documentation Navigation

Getting Started

📄 Read: references/getting-started.md

Package installation
Basic component initialization
CSS theming and imports

Message Management

📄 Read: references/message-management.md

Adding and updating messages
Auto-scroll to latest messages
Progressive message loading (on-demand)
Message configuration (pinned, reply, forward)
Message status tracking
Message toolbar customization

User Configuration

📄 Read: references/user-configuration.md

User model setup
Avatar customization
User presence status
CSS class customization

Events and Interactions

📄 Read: references/events-and-interactions.md

Component lifecycle events
Message sending events
User typing events (with complete event arguments)
Attachment upload and click events
Toolbar click events

Templating System

📄 Read: references/templating-system.md

Empty chat template
Message custom rendering
Time break template
Typing indicator template
Suggestion template
Footer template customization

File Attachments

📄 Read: references/file-attachments.md

Enable attachment support
Configure upload endpoints
File type and size restrictions
Drag-and-drop support
Attachment templates (preview and footer)
Handle attachment click events

Header Customization

📄 Read: references/header-customization.md

Header visibility and text
Header icon styling
Toolbar configuration
Toolbar item types and events

Appearance and Styling

📄 Read: references/appearance-styling.md

Pompact mode layout for dense conversations
Claceholder text configuration
Width and height customization
CSS class application
Component-level styling

Timestamp and Time Breaks

📄 Read: references/timestamp-and-timebreaks.md

Show/hide timestamps
Timestamp format customization
Time break separators
Date-wise organization

Typing Indicator

📄 Read: references/typing-indicator.md

Show/hide typing indicator
Multi-user typing display
Typing indicator template customization

Mention Integration

📄 Read: references/mention-integration.md

Configure mentionable users
Customize mention trigger character
Predefined mentions in messages
Mention selection events

Globalization and RTL

📄 Read: references/globalization-rtl.md

Localization and language support
Right-to-Left (RTL) layout
Typing indicator localization

Quick Start Example

import { ChatUIComponent, MessagesDirective, MessageDirective, UserModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const currentUserModel: UserModel = {
        id: "user1",
        user: "Albert"
    };

    const otherUserModel: UserModel = {
        id: "user2",
        user: "Michale Suyama"
    };

    return (
        <ChatUIComponent user={currentUserModel} headerText="Chat Support">
            <MessagesDirective>
                <MessageDirective text="Hello, how can I help?" author={currentUserModel} />
                <MessageDirective text="I need assistance with my order." author={otherUserModel} />
            </MessagesDirective>
        </ChatUIComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Common Patterns

Create a Support Chat Interface

<ChatUIComponent 
  user={currentUser}
  headerText="Support Chat"
  enableAttachments={true}
  showTimeStamp={true}
  showHeader={true}
  messageToolbarSettings={{ items: ['Copy', 'Reply', 'Delete'] }}
>
  <MessagesDirective>
    {/* messages populate here */}
  </MessagesDirective>
</ChatUIComponent>

Add Message Dynamically

const chatRef = useRef<ChatUIComponent>(null);

const addNewMessage = () => {
  chatRef.current.addMessage({
    author: userModel,
    text: "Your message here",
    timeStamp: new Date()
  });
};

Configure Multiple Templates

Implement messageTemplate, emptyChatTemplate, timeBreakTemplate, and suggestionTemplate for complete customization.

Key Props

Prop	Type	Purpose
`user`	UserModel	Current logged-in user
`messages`	MessageModel[]	Initial message list
`headerText`	string	Header title
`placeholder`	string	Input field hint
`enableAttachments`	boolean	File upload support
`showTimeStamp`	boolean	Display message timestamps
`showHeader`	boolean	Show header section
`showFooter`	boolean	Show input footer
`autoScrollToBottom`	boolean	Auto-scroll to latest message
`loadOnDemand`	boolean	Progressive message loading
`enableCompactMode`	boolean	Left-aligned compact layout
`enableRtl`	boolean	Right-to-left layout
`locale`	string	Language/culture code

Common Use Cases

Use Case 1: Customer Support Chat

Multiple support agents handling customer queries
File attachment for screenshots and auto-scroll
Typing indicators to show agent engagement
Progressive loading for long conversation histories
Typing indicators to show agent engagement

Use Case 2: Team Collaboration

Mention team members with @
Compact mode for group conversations
Pin important discussions
Forward messages for reference
Message editing and deletion

Use Case 3: Multilingual Chat Application

RTL support for Arabic/Hebrew
Localized UI strings
Support for multiple cultures

For complete examples and advanced scenarios, explore individual reference files above.

FAQ

What does the syncfusion-react-chat-ui skill do?

How do I install syncfusion-react-chat-ui?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-chat-ui/ (personal) or .claude/skills/syncfusion-react-chat-ui/ (project).

Which AI agents can use syncfusion-react-chat-ui?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-react-chat-ui safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-react-chat-ui?

It is published by syncfusion in syncfusion/react-ui-components-skills. It has 716 recorded installs.