Skip to main content

Build a React chat app with Sendbird UIKit

Eric kim profile
Eric Kim
Solutions Engineer
  • Tutorial Type: Getting Started
  • Reading Time: 10 mins
  • Building Time: 15 mins
U Ikit developer sidebar offer
No-code feature configuration for chat apps built with UIKit

Introduction

This getting started guide uses Sendbird UIKit, a set of rich, pre-built UI components that you can use to create a modern messenger experience in your app in under 10 minutes. You can also use the Sendbird Chat SDK with your own custom UI.

To send your first message, you will need to:

  1. Create a Sendbird account and add chat users in the Sendbird environment
  2. Import Sendbird UIKit dependencies and integrate the Sendbird UIKit component in your application

This guide will cover both steps in detail and is meant for developers of any level of proficiency so they can easily send the first message in their application. In this tutorial, we will cover how to:

  • Create a Sendbird account
  • Create users in the Sendbird dashboard
  • Add the UIKit dependencies
  • Connect the UIKit to your app
  • Test the integration

Let’s get started!

Step 1. Creating a Sendbird account

1.1 Sign up for a free Sendbird account.

Tutorial Sign up screen for Sendbird
Sign up screen for Sendbird

1.2. Create an account using your email address or click Continue with Google.

1.3. Set up your organization by filling out the Organization Name and Phone Number fields.

Tutorial Set up your organization
Set up your organization

1.4. Create your Sendbird application after choosing Product type and entering your Application name, Region.

Tutorial Create your Sendbird application
Create your Sendbird application

1.5. You will be directed to the main page of the Sendbird Dashboard to get started with implementing Sendbird Chat SDK and API in your product.

1.6. Copy your unique applicationID from the Application section and paste it into your clipboard.

Tutorial Copy your Sendbird applicationID
Copy your Sendbird applicationID

Step 2. Creating users in the Sendbird dashboard

2.1. Navigate to the Users section in the left navigation of the dashboard.

Tutorial Create users in Sendbird Dashboard
Create users in Sendbird Dashboard

2.2. Click the Create user + icon on the top right.

2.3. Create a new user by filling out the following fields:

  • ID
  • Nickname
  • Profile URL Optional
  • Issue access token – Optional
Tutorial Users in Sendbird Dashboard
Users in Sendbird Dashboard

Create at least two users in your application so that they can chat with one another.

Step 3. Adding Sendbird UIKit dependencies

We will use an online Integrated Development Environment (IDE) called codesandbox.io to mimic your development environment, but feel free to start adding Sendbird UIKit dependencies to your application directly.

3.1. Set up the environment.

3.1.1. You can either go to codesandbox.io > click Create sandbox > select React.

OR

If you’re building chat in your application, please run the following code to install sendbird-uikit.

npm install sendbird-uikit --save
Tutorial Create sandbox

3.1.2. You will be presented with 3 default files: App.js, index.css, and style.css.

App.js

Index.js

Style.css

3.2. Import the sendbird-uikit dependency.

3.2.1. Click Add dependency.

3.3.2. Search sendbird-uikit.

Tutorial Adding Sendbird UIKit dependencies
Adding Sendbird UIKit dependencies
Tutorial Sendbird UIKit dependencies are connected
Sendbird UIKit dependencies are connected

3.3. Import sendbird-uikit component.

3.3.1. In App.js, add the following code:

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

Step 4. Connect the Sendbird UIKit to your application and create a user

4.1. Add the following code in the App.js file.

This will create variables for applicationID and userID to be passed to the sendbird-uikit component.

  • Pass the applicationID of the Sendbird application you created earlier in the dashboard to initialize the Sendbird Chat SDK.
  • Note – Your applicationID will look similar to this: 45612F31-4304-4FC4-9FD9-C35B5FCDCE30
const APP_ID = "Your APP ID"
 const USER_ID = "Any User ID"

4.2. Populate the channel list and the channel view.

  • Add the following code to App.js.
  • For styling, add the following code in style.css.
height: 100vh;

Step 5. Test your integration

  • If you are working in the codesandbox.io environment, your code should compile automatically and run for you.
  • If you are working in your local application, you will need to run the npm command.
npm start run

5.1. Create a channel.

You can now create a channel for users to chat in your application.

  • Click the “+” button in the left section of the view to create a group channel.
  • Invite users to the channel.
Tutorial Create a channel
Create a channel
Tutorial Add users to the channel
Add users to the channel
Tutorial Open the channel
Open the channel

5.2. Send your first message.

Try typing a message and hit send. You should be able to successfully send your first message in the newly built chat in your application.

Tutorial Send your first message
Send your first message

Congratulations!

You are ready to send and receive messages in your application with the Sendbird UIKit.

For additional information on UIKit, the JavaScript SDK, and features, check out our docs.

That’s how easy it is to get chat up and running in your application. If you are also building for mobile, send your first message with Sendbird UIKit for Android and iOS.

We’re rooting for you as you build something great.

Happy chat building!