React UI Components setup

Use these instructions to install, configure and instantiate the Chat React UI Components.

Install

The React UI Components are built on top of the Ably Chat SDK and require both the Ably Pub/Sub SDK and the Chat SDK to be installed.

NPM

Install the required packages:

  npm install ably @ably/chat @ably/chat-react-ui-components

Import the packages into your project:

React

1

2

3

4

5

  import * as Ably from 'ably';
  import { ChatClient } from '@ably/chat';
  import { ChatClientProvider } from '@ably/chat/react';
  import { App, ChatWindow, Sidebar, ThemeProvider, AvatarProvider, ChatSettingsProvider } from '@ably/chat-react-ui-components';
  import '@ably/chat-react-ui-components/dist/style.css';

Configure the Chat SDK

To use the React UI Components, you need to configure the Ably Chat client. This involves creating an instance of the ChatClient and passing it to the ChatClientProvider.

For more information on how to configure the Ably Chat client, see the Ably Chat SDK documentation.

Setup providers

The React UI Components rely on several context providers to function properly. These providers manage state, theming, avatars, and chat settings.

Basic provider setup

Set up the required providers in your application's entry point:

React

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

  import * as Ably from 'ably';
  import { ChatClient } from '@ably/chat';
  import { ChatClientProvider } from '@ably/chat/react';
  import { ThemeProvider, AvatarProvider, ChatSettingsProvider } from '@ably/chat-react-ui-components';
  import '@ably/chat-react-ui-components/dist/style.css';

  // Create Ably Realtime client
  const ablyClient = new Ably.Realtime({
    key: '{{API_KEY}}', // Replace with your Ably API key
    clientId: '<clientId>',
  });

  const chatClient = new ChatClient(ablyClient);

  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <ThemeProvider>
        <AvatarProvider>
          <ChatSettingsProvider>
            <ChatClientProvider client={chatClient}>
              {/* Your components will go here */}
            </ChatClientProvider>
          </ChatSettingsProvider>
        </AvatarProvider>
      </ThemeProvider>
    </React.StrictMode>
  );

Next steps

Now that you have set up the React UI Components, you can:

Select...