1# RealtimeKit Configuration
2 
3Configuration guide for RealtimeKit setup, client SDKs, and wrangler integration.
4 
5## Installation
6 
7### React
8```bash
9npm install @cloudflare/realtimekit @cloudflare/realtimekit-react-ui
10```
11 
12### Angular
13```bash
14npm install @cloudflare/realtimekit @cloudflare/realtimekit-angular-ui
15```
16 
17### Web Components/HTML
18```bash
19npm install @cloudflare/realtimekit @cloudflare/realtimekit-ui
20```
21 
22## Client SDK Configuration
23 
24### React UI Kit
25```tsx
26import { RtkMeeting } from '@cloudflare/realtimekit-react-ui';
27<RtkMeeting authToken="<token>" onLeave={() => {}} />
28```
29 
30### Angular UI Kit
31```typescript
32@Component({ template: `<rtk-meeting [authToken]="authToken" (rtkLeave)="onLeave($event)"></rtk-meeting>` })
33export class AppComponent { authToken = '<token>'; onLeave() {} }
34```
35 
36### Web Components
37```html
38<script type="module" src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui/dist/realtimekit-ui/realtimekit-ui.esm.js"></script>
39<rtk-meeting id="meeting"></rtk-meeting>
40<script>
41  document.getElementById('meeting').authToken = '<token>';
42</script>
43```
44 
45### Core SDK Configuration
46```typescript
47import RealtimeKitClient from '@cloudflare/realtimekit';
48 
49const meeting = new RealtimeKitClient({
50  authToken: '<token>',
51  video: true, audio: true, autoSwitchAudioDevice: true,
52  mediaConfiguration: {
53    video: { width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { ideal: 30 } },
54    audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true },
55    screenshare: { width: { max: 1920 }, height: { max: 1080 }, frameRate: { ideal: 15 } }
56  }
57});
58await meeting.join();
59```
60 
61## Backend Setup
62 
63### Create App & Credentials
64 
65**Dashboard**: https://dash.cloudflare.com/?to=/:account/realtime/kit
66 
67**API**:
68```bash
69curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/apps' \
70  -H 'Content-Type: application/json' \
71  -H 'Authorization: Bearer <api_token>' \
72  -d '{"name": "My RealtimeKit App"}'
73```
74 
75**Required Permissions**: API token with **Realtime / Realtime Admin** permissions
76 
77### Create Presets
78 
79```bash
80curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/presets' \
81  -H 'Authorization: Bearer <api_token>' \
82  -d '{
83    "name": "host",
84    "permissions": {
85      "canShareAudio": true,
86      "canShareVideo": true,
87      "canRecord": true,
88      "canLivestream": true,
89      "canStartStopRecording": true
90    }
91  }'
92```
93 
94## Wrangler Configuration
95 
96### Basic Configuration
97```jsonc
98// wrangler.jsonc
99{
100  "name": "realtimekit-app",
101  "main": "src/index.ts",
102  "compatibility_date": "2025-01-01",  // Use current date
103  "vars": {
104    "CLOUDFLARE_ACCOUNT_ID": "abc123",
105    "REALTIMEKIT_APP_ID": "xyz789"
106  }
107  // Secrets: wrangler secret put CLOUDFLARE_API_TOKEN
108}
109```
110 
111### With Database & Storage
112```jsonc
113{
114  "d1_databases": [{ "binding": "DB", "database_name": "meetings", "database_id": "d1-id" }],
115  "r2_buckets": [{ "binding": "RECORDINGS", "bucket_name": "recordings" }],
116  "kv_namespaces": [{ "binding": "SESSIONS", "id": "kv-id" }]
117}
118```
119 
120### Multi-Environment
121```bash
122# Deploy to environments
123wrangler deploy --env staging
124wrangler deploy --env production
125```
126 
127## TURN Service Configuration
128 
129RealtimeKit can use Cloudflare's TURN service for connectivity through restrictive networks:
130 
131```jsonc
132// wrangler.jsonc
133{
134  "vars": {
135    "TURN_SERVICE_ID": "your_turn_service_id"
136  }
137  // Set secret: wrangler secret put TURN_SERVICE_TOKEN
138}
139```
140 
141TURN automatically configured when enabled in account - no client-side changes needed.
142 
143## Theming & Design Tokens
144 
145```typescript
146import type { UIConfig } from '@cloudflare/realtimekit';
147 
148const uiConfig: UIConfig = {
149  designTokens: {
150    colors: {
151      brand: { 500: '#0066ff', 600: '#0052cc' },
152      background: { 1000: '#1A1A1A', 900: '#2D2D2D' },
153      text: { 1000: '#FFFFFF', 900: '#E0E0E0' }
154    },
155    borderRadius: 'extra-rounded',  // 'rounded' | 'extra-rounded' | 'sharp'
156    theme: 'dark'  // 'light' | 'dark'
157  },
158  logo: { url: 'https://example.com/logo.png', altText: 'Company' }
159};
160 
161// Apply to React
162<RtkMeeting authToken={token} config={uiConfig} onLeave={() => {}} />
163 
164// Or use CSS variables
165// :root { --rtk-color-brand-500: #0066ff; --rtk-border-radius: 12px; }
166```
167 
168## Internationalization (i18n)
169 
170### Custom Language Strings
171```typescript
172import { useLanguage } from '@cloudflare/realtimekit-ui';
173 
174const customLanguage = {
175  'join': 'Entrar',
176  'leave': 'Salir',
177  'mute': 'Silenciar',
178  'unmute': 'Activar audio',
179  'turn_on_camera': 'Encender cámara',
180  'turn_off_camera': 'Apagar cámara',
181  'share_screen': 'Compartir pantalla',
182  'stop_sharing': 'Dejar de compartir'
183};
184 
185const t = useLanguage(customLanguage);
186 
187// React usage
188<RtkMeeting authToken={token} t={t} onLeave={() => {}} />
189```
190 
191### Supported Locales
192Default locales available: `en`, `es`, `fr`, `de`, `pt`, `ja`, `zh`
193 
194```typescript
195import { setLocale } from '@cloudflare/realtimekit-ui';
196setLocale('es');  // Switch to Spanish
197```
198 
199## See Also
200 
201- [API](./api.md) - Meeting APIs, REST endpoints
202- [Patterns](./patterns.md) - Backend integration examples
203- [README](./README.md) - Overview and quick start
204