React UI Kit setup

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

Install

The React UI Kit is built on top of the Ably Chat SDK and requires 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-kit

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-kit';
  import '@ably/chat-react-ui-kit/dist/style.css';

Configure the Chat SDK

To use the React UI Kit, 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 Kit relies 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-kit';
  import '@ably/chat-react-ui-kit/dist/style.css';

  // Create Ably Realtime client
  const ablyClient = new Ably.Realtime({
    key: 'demokey:*****', // 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>
  );
API key:
DEMO ONLY

Next steps

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

Select...