Skip to content
Cloudflare Docs

Build using UI Kit

The default RealtimeKit Meeting UI component gives you a complete meeting experience out of the box, with all the essential features built in. Just drop it into your app and you are ready to go.

Select a framework based on the platform you are building for.

Please install the following dependencies into your project repository:

Terminal window
npm i @cloudflare/realtimekit-react @cloudflare/realtimekit-react-ui

Optional: You can also build on top of our ready-made template:

Terminal window
  git clone https://github.com/cloudflare/realtimekit-web-examples.git cd
  realtimekit-web-examples/react-examples/examples/default-meeting-ui

To Initialise your SDK, add the following code to your React application:

App.tsx
import { useEffect } from 'react';
import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';


export default function App() {
const [meeting, initMeeting] = useRealtimeKitClient();
useEffect(() => {
  initMeeting({ authToken: '<auth-token>' });
}, []);


return <div></div>
}

Use the Create Participant API to fetch the authToken.

Now, Create a meeting component using the RtkMeeting component and the useRealtimeKitMeeting hook (this hook provides access to the meeting object that contains all the meeting state and methods).

MyMeetingUI.tsx
import { useRealtimeKitMeeting } from '@cloudflare/realtimekit-react';
import { RtkMeeting } from '@cloudflare/realtimekit-react-ui';


export default function MyMeetingUI() {
  const { meeting } = useRealtimeKitMeeting();
  return (
    <RtkMeeting mode="fill" meeting={meeting} showSetupScreen={true} />
  );
}

Use the Meeting component like so:

App.tsx
import { useEffect } from 'react';
import { useRealtimeKitClient, RealtimeKitProvider } from '@cloudflare/realtimekit-react';
import MyMeetingUI from './MyMeetingUI.tsx'


export default function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();


  useEffect(() => {
    initMeeting({ authToken: '<auth-token>' });
  }, []);


  return (
    <RealtimeKitProvider value={meeting}>
      <MyMeetingUI />
    </RealtimeKitProvider>
  );
}

Next steps

You have successfully integrated RealtimeKit with the default meeting UI. Participants can now see and hear each other in sessions.

Building Custom Meeting Experiences

While the default UI provides a complete meeting experience, you may want to build a custom interface using individual UI Kit components. This approach gives you full control over the layout, design, and user experience.

To build your own custom meeting UI, follow these guides in order:

  1. UI Kit Components Library - Browse available components and their visual representations
  2. UI Kit Meeting Lifecycle - Lifecycle of a meeting and how components communicate and synchronize with each other
  3. Session Lifecycle - Understand different peer states and transitions
  4. Meeting Object Explained - Access meeting data and participant information using the Core SDK
  5. Build Your Own UI - Put everything together to create a custom meeting interface