Send your first message

Sendbird UIKit for React is a set of prebuilt UI components that allows you to easily craft an in-app chat with all the essential messaging features. Our development kit includes light and dark themes, fonts, colors and more. You can customize these components to create an interactive messaging interface unique to your brand identity.

Sendbird UIKit supports both open channels and group channels. Follow the guide below to start sending a message from scratch with React. This library isn't designed to work with other frameworks such as Vue or Angular.

To view the image in full screen, click on the

The dependencies for UIKit for React are:

• react 16.8.6 or higher
• react-dom 16.8.6 or higher

In this quickstart guide, you will be installing Sendbird SDK, implementing codes to create a open channel with a user, and send a message within a few minutes. Before you start, you need to have the following:

• Sendbird application on Sendbird Dashboard
• A user in the Sendbird application

A Sendbird application comprises everything required in a chat service including users, messages, and channels. You need the Application ID of your Sendbird application from the dashboard when initializing the Chat SDK.

1. Go to Sendbird Dashboard and create an account for a free trial. If you already have a Sendbird account, sign into your account.

2. Create a new application by clicking Create + at the bottom right of your screen.

3. Enter a name for your application. Choose a Product Type and Region. Then, click Confirm.

4. Click the application you just created under Applications. You will see the application's Application ID which you will need when initializing the Chat SDK.

Note: Each Sendbird application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.

In order to send a message, you need a user in a channel. You can either create a user on the Sendbird dashboard first or you can use a new unique ID that hasn’t been taken by any of your Sendbird application users. In the latter case, a new user is automatically created in your Sendbird application before being connected.

In this guide, we will create a user on the Sendbird dashboard first.

1. Go to the Users menu on the left-hand side of the dashboard and click Create user+.

2. Enter the User ID and Nickname. It is recommended that you check the box next to Issue access token for user authentication. Then, click Create.

Note: Sendbird supports user authentication through access token for stronger security. However, on the dashboard, you can also configure the token permission in Settings > Application > Security > Access token permission to allow users without a token to access our functionalities.

3. Copy and store the user ID. You will use it to connect to the Sendbird server.

You can start building a modern messaging experience in your app by first installing Sendbird UIKit. This developer kit is an add-on feature to Sendbird Chat SDK so installing it will also install the core Chat SDK.

The easiest way to set up a new project is by using Vite, which allows you to create a boilerplate React application that you can run locally with just a few simple commands.

First, let's create a new React project called uikit-react-example using Vite with the TypeScript template:

npm create vite uikit-react-example -- --template react-ts
cd uikit-react-example
npm install

You can install UIKit for React through npm or yarn. The minimum requirements listed above must be installed on your system. Enter the following code on the command line.

npm i @sendbird/uikit-react

Once you're done installing Sendbird UIKit, you can now implement it to your web app by using the App component. The App component is a group of essential UI components needed to build a functioning chat interface. You can also use our core components to your web app if you wish to make the interface more tailored to your needs.

Here, you will need to specify a few properties such as appId and userId in the App component.

• appId: you can find this on the Overview page on Sendbird Dashboard.

• userId: the unique ID set to the user you've created on the dashboard. If you haven't created a user in advance, specifying a unique userId in the code snippet provided will automatically generate a new user in the specified Sendbird application and connect it to the Sendbird server.

Note: Sendbird supports user authentication via access tokens, but defaults to allowing access without a token for ease of initial use. For enhanced security, we recommend adjusting the access settings of new users under Settings > Application > Security > Access token permission on the dashboard.

Add the following pattern to your app.jsx file to use the App component:

import { App as SendbirdApp } from '@sendbird/uikit-react';
import '@sendbird/uikit-react/dist/index.css';

function App() {
  return (
    // The chat interface can expand up to the dimensions of your parent component.
    // To achieve a full-screen mode, apply the following CSS rules to the parent element.
    <div style={{ width:'100vw', height:'100vh' }}>
      <SendbirdApp
        // You can find your Sendbird application ID on the Sendbird dashboard. 
        appId={'YOUR_APP_ID'}
        // Specify the user ID you've created on the dashboard.
        // Or you can create a user by specifying a unique userId.  
        userId={'USER_ID'}
      />
    </div>
  )
}

export default App;

You can now run the app to send a message. First, create a group channel by clicking on the icon in the top-left corner. Then, you can select users you wish to invite as members to your channel. Once the channel has been created, enter your first message and send.

You've successfully sent your first message with Sendbird.

You can use UIKit with SSR frameworks such as Gatsby or NextJS by importing it dynamically on the client side. These frameworks support the following plug-in and workflow:

• Loadable components of Gatsby
• Dynamic imports of NextJS

You may refer to NextJS' sample for better understanding. You will need your own Sendbird application ID and user ID to use the sample.

The App component is a collection of all UIKit components needed to quickly implement a basic chat, and only requires the app ID and user ID to be configured.

// Create a chat application.
import SendbirdApp from '@sendbird/uikit-react/App';

const MyApp = () => {
  return (
    <div>
      <SendbirdApp 
        appId={appId}
        userId={userId}
        nickname={nickname}
        profileUrl={profileUrl}
        accessToken={accessToken}
        theme={theme}
        userListQuery={userListQuery}
      />
    </div>
  )
}

Explore the components of Sendbird UIKit for React through our Storybook. This platform allows you to view and interact with various UI components, helping you understand how to integrate and customize them within your application.