Start your first live

Sendbird Live UIKit for React is a set of prebuilt UI components that allows you to easily craft an in-app live stream with the essential streaming features including real-time chat. Our development kit includes UI components which you can customize to create an engaging live event experience for users.

Follow the guide below to start your live event with our easy to use UI components in React. This library isn't designed to work with other frameworks such as Vue or Angular. If you would like to build using the Live SDK only, refer to Sendbird Live SDK.

To view the image in full screen, click on the

Live Studio is available on Sendbird Dashboard for you to try Sendbird Live in the quickest manner. You can use the Live Studio to test and demonstrate the functionalities to see what it's like to go live using Sendbird Live. Go to Sendbird Dashboard and create an application by selecting Calls+Live in product type and start Live Studio on the left navigation bar. Learn more about how to use it in this detailed guide.

The minimum requirements for the Live UIKit for React are:

• React 16.8.0 or higher
• React DOM 16.8.0 or higher
• WebRTC API supported browsers

Sendbird Live UIKit is an add-on to Sendbird Live SDK which provides live streaming feature and uses open channels for chat from Sendbird Chat SDK. Installing the Live UIKit will automatically install the Live SDK and the Chat SDK.

Before installing the Live UIKit, create a Sendbird account to acquire an application ID which you will need to initialize the Live UIKit. Go to Sendbird Dashboard and create an application by selecting Calls+Live in product type. Once you have created an application, go to Overview and you will see the Application ID.

You can start building your first live event by installing the Live UIKit. When you install the Live UIKit, Sendbird Live SDK will be installed implicitly.

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

Note: If you have already been using Sendbird Chat or want to know the minimum version of the Chat SDK to use the Live UIKit, you can check the information in Sendbird Live SDK.

npm i @sendbird/live-uikit-react

When using yarn, enter the following command.

yarn add @sendbird/live-uikit-react

An example of a tsconfig.json file should look like the following.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "esModuleInterop": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Next, import the Live UIKit components to your app.

import { App as SendbirdLiveApp } from "@sendbird/live-uikit-react";

Once you're done installing Sendbird Live 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 streaming interface.

Add the following pattern to your project to use the App component.

import { App as SendbirdLiveApp } from "@sendbird/live-uikit-react";

const App = () => {
    return (
        <div className="App">
            <SendbirdLiveApp
                // Add the two lines below.
                appId={YOUR_APP_ID}     // Specify your Sendbird application ID.
                userId={USER_ID}        // Specify your user ID.
            />
        </div>
    );
};

Specify the dimensions of your chat interface.

.App {
    height: 100vh;  // Add this line.
    width: 100vw;       // Add this line.
}

You can now run the web app to start streaming. First, create a live event by selecting the Create button in the top-left corner. Then, you can set the title and cover image, and add users who can take turns being a host for your live event. After the live event has been created, start the live event by selecting the Start live event button in the bottom-right corner. Once the live event has started, you can share your media stream and chat with the participants.

The App component is a collection of all the Live UIKit components needed to quickly implement a basic live event, and only requires appId and userId to configure.

import { App as SendbirdLiveApp } from "@sendbird/live-uikit-react";

/* example 'customize' object.
const CUSTOMIZE = {
    LiveEventList: {
        showHostNickname: false
    }
};
*/

const App = () => {
    return (
        <div className="App">
            <SendbirdLiveApp
                // Add the two lines below.
                appId={YOUR_APP_ID}     // Specify your Sendbird application ID.
                userId={USER_ID}        // Specify your user ID.
                accessToken={ACCESS_TOKEN}
                stringSet={STRING_SET}
                customize={CUSTOMIZE}
            />
        </div>
    );
};