Getting started with React Chat UI component

19 May 20267 minutes to read

This section explains how to create a simple Chat UI component and configure its essential functionalities in React.

Create a React Application

Run the following commands to set up a React application:

npm create vite@latest my-app -- --template react-ts

This command will prompt you to install the required packages and start the application. Select the options as shown below.

As Syncfusion packages are not installed yet, currently, the No option will be selected. Then, navigate to the project directory and install the dependencies using the following commands:

cd my-app
npm install

Note: To set up a React application with Nextjs or Remix, refer to this documentation for more details.

Adding Syncfusion^® packages

All the available Essential^® JS 2 packages are published in npmjs.com public registry. You can choose the component that you want to install.

To install Chat UI component, use the following command

npm install @syncfusion/ej2-react-interactive-chat --save

Adding CSS reference

Import the Chat UI component required CSS references as follows in src/App.css.

/* import the Chat UI dependency styles */

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-react-interactive-chat/styles/tailwind3.css";

Adding Chat UI component

Now, you can start adding Chat UI component in the application. For getting started, add the Chat UI component by using <ChatUIComponent> tag directive in src/App.tsx file using following code. Now place the below Chat UI code in the src/App.tsx.

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

function App() {
    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent ></ChatUIComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('chat-ui'));

Configure user

Enhance your Chat UI by configuring users. The user property configures the current user for the chat interface.

App.tsx

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 michaleUserModel: UserModel = {
        id: "user2",
        user: "Michale Suyama"
    };

    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent user={currentUserModel} >
            <MessagesDirective>
                <MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} ></MessageDirective>
                <MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} ></MessageDirective>
                <MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} ></MessageDirective>
            </MessagesDirective>
        </ChatUIComponent>
    );
}

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

App.jsx

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

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

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


    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent user={currentUserModel}>
            <MessagesDirective>
                <MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} ></MessageDirective>
                <MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} ></MessageDirective>
                <MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} ></MessageDirective>
            </MessagesDirective>
        </ChatUIComponent>
    );
}

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

Run the application

After completing the basic configuration, run the following command to display the Chat UI component in your default browser:

npm start

App.tsx

import { ChatUIComponent, 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"
    };

    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent user={currentUserModel} id="chat-ui"></ChatUIComponent>
    );
}

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

App.jsx

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

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

    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent user={currentUserModel} id="chat-ui"></ChatUIComponent>
    );
}

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