Quickstart

import { Render, YouTube } from "/components"; import RTKSDKSelector from "/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro"; import RTKCodeSnippet from "~/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro";

Prerequisites

To integrate RealtimeKit in your application, you must have a Cloudflare account.

1. Follow the Create API token guide to create a new token via the Cloudflare dashboard.
2. When configuring permissions, ensure that Realtime / Realtime Admin permissions are selected.
3. Configure any additional access policies and restrictions as needed for your use case.

Optional: Alternatively, create tokens programmatically via the API. Please ensure your access policy includes the Realtime permission.

Installation

Create a RealtimeKit App

You can create an application from the Cloudflare Dashboard, by clicking on Create App.

Optional: You can also use our API reference for creating an application:

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/apps' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <api_token>' \
--data '{"name": "My First Cloudflare RealtimeKit app"}'

Note: We recommend creating different apps for staging and production environments.

Create a Meeting

Use our Meetings API to create a meeting. We will use the ID from the response in subsequent steps.

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <api_token>' \
--data '{"title": "My First Cloudflare RealtimeKit meeting"}'

Add Participants

Create a Preset

Presets define what permissions a user should have. Learn more in the Concepts guide. You can create new presets using the Presets API or via the RealtimeKit dashboard.

Note: Skip this step if you created the app in the dashboard—default presets are already set up for you.

Note: Presets can be reused across multiple meetings. Define a role (for example, admin or viewer) once and apply it to participants in any number of meetings.

Add a Participant

A participant is added to a meeting using the Meeting ID created above and selecting a Preset Name from the available options.

The response includes an authToken which the Client SDK uses to add this participant to the meeting room.

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings/<meeting_id>/participants' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <api_token>' \
--data '{
  "name": "Mary Sue",
  "preset_name": "<preset_name>",
  "custom_participant_id": "<uuid_of_the_user_in_your_system>"
}'

Learn more about adding participants in the API reference.

Frontend Integration

You can now add the RealtimeKit Client SDK to your application.

Inside your react application, add the following code: ```ts

import { useEffect } from "react"; import { useRealtimeKitClient, useRealtimeKitMeeting, RealtimeKitProvider, } from "@cloudflare/realtimekit-react"; import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";

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

useEffect(() => { initMeeting({ authToken: '' }); }, []);

return (

); }

export default function MyMeetingUI() { const { meeting } = useRealtimeKitMeeting(); return ( );

}

Replace `<auth-token>` with the authToken obtained from the previous step.

Run the application and navigate to the meeting page to see the RealtimeKit Client SDK in action.
```bash
npm run dev

Optional: If you are using our ready-made template, run the following command to start the application:

npm i -g vite && npm run dev

Open the app in your browser. To join the meeting, append your auth token to the preview URL:

http://localhost:5173?authToken=<auth_token>

Inside your html application, add the following code: ```html

<!-- Import helper to load UI Kit components -->
<script type="module">
  import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js';
  defineCustomElements();
</script>

<!-- Import RealtimeKit Core via CDN -->
<script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>

<script>
  const searchParams = new URL(window.location.href).searchParams;

  const authToken = searchParams.get('authToken');

  if (!authToken) {
    alert(
      "An authToken wasn't passed, please pass an authToken in the URL query to join a meeting."
    );
  }

  // Initialize a meeting
  RealtimeKitClient.init({
    authToken,
  }).then((meeting) => {
    document.getElementById('my-meeting').meeting = meeting;
  });
</script>

Replace `<auth-token>` with the authToken obtained from the previous step.

Run the application and navigate to the meeting page to see the RealtimeKit Client SDK in action.
```bash
npm run dev

Optional: If you are using our ready-made template, run the following command to start the application:

npm i -g vite && npm run dev

Open the app in your browser. To join the meeting, append your auth token to the preview URL:

http://localhost:5173?authToken=<auth_token>

Load the RealtimeKitComponentsModule into your app module. This is typically the app.module.ts file. This allows you to use the UI components in your component HTML files.

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RealtimeKitComponentsModule } from '@cloudflare/realtimekit-angular-ui';
import { AppComponent } from './app.component';
import { ViewChild } from '@angular/core';
import RealtimeKitClient from '@cloudflare/realtimekit';
import { RtkMeeting } from '@cloudflare/realtimekit-angular-ui';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, RealtimeKitComponentsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {};

```
_Optional:_ If you are using TypeScript, set allowSyntheticDefaultImports as true in your tsconfig.json.

```ts
{
	"compilerOptions": {
		"allowSyntheticDefaultImports": true
	}
}
```

Load the RtkMeeting component to your template file (component.html).

```html
<rtk-meeting #myid></rtk-meeting>
```
Initialise the Meeting

```ts
	class AppComponent {
	title = 'MyProject';
	@ViewChild('myid') meetingComponent: RtkMeeting;
	rtkMeeting: RealtimeKitClient;

	async ngAfterViewInit() {
		const meeting = await RealtimeKitClient.init({
		authToken: '<auth-token>',
		});
		meeting.join();
		this.rtkMeeting = meeting;
		if (this.meetingComponent) this.meetingComponent.meeting = meeting;
	}
	}
```

Replace `<auth-token>` with the authToken obtained from the previous step.

Run the application and navigate to the meeting page to see the RealtimeKit Client SDK in action.
```bash
npm run dev
```

_Optional:_ If you are using our ready-made template, run the following command to start the application:
```bash
npm i -g vite && npm run dev
```
Open the app in your browser. To join the meeting, append your auth token to the preview URL:

```bash
http://localhost:5173?authToken=<auth_token>
```