[Realtimekit]: Meeting agent websocket beta docs

public/__redirects

@@ -620,13 +620,23 @@
 /realtime/changelog/ /realtime/sfu/platform/changelog/ 302
 /realtime/realtimekit/get-started/ /realtime/realtimekit/quickstart/ 302
 /realtime/realtimekit/core/ai/ /realtime/realtimekit/ai/ 302
-/realtime/realtimekit/core/remote-participant/ /realtime/realtimekit/core/remote-participants/ 302
-/realtime/realtimekit/ui-kit/meeting-lifecycle/ /realtime/realtimekit/ui-kit/state-management/ 302
-/realtime/realtimekit/core/video-background/ /realtime/realtimekit/core/video-effects/ 302
+/realtime/realtimekit/core/remote-participant/ /realtime/realtimekit/humans/core/remote-participants/ 302
+/realtime/realtimekit/ui-kit/meeting-lifecycle/ /realtime/realtimekit/humans/ui-kit/state-management/ 302
+/realtime/realtimekit/core/video-background/ /realtime/realtimekit/humans/core/video-effects/ 302
 /realtime/realtimekit/voice-meetings/ /realtime/realtimekit/audio-calls/ 302
-/realtime/realtimekit/core/manage-other-participants-in-a-session/ /realtime/realtimekit/core/manage-participants-in-a-session/ 302
-/realtime/realtimekit/core/api-reference/rtkparticipantmap/ /realtime/realtimekit/core/api-reference/rtkparticipants/ 301
+/realtime/realtimekit/core/manage-other-participants-in-a-session/ /realtime/realtimekit/humans/core/manage-participants-in-a-session/ 302
+/realtime/realtimekit/core/api-reference/rtkparticipantmap/ /realtime/realtimekit/humans/core/api-reference/rtkparticipants/ 301
+/realtime/realtimekit/sdk-selection/ /realtime/realtimekit/humans/sdk-selection/ 301
 /realtime/realtimekit/getting-started/ /realtime/realtimekit/quickstart/ 302
+/realtime/realtimekit/pricing/ /realtime/realtimekit/platform/pricing/ 301
+/realtime/realtimekit/limits/ /realtime/realtimekit/platform/limits/ 301
+/realtime/realtimekit/data-retention/ /realtime/realtimekit/platform/data-retention/ 301
+/realtime/realtimekit/network-allowlist/ /realtime/realtimekit/platform/network-allowlist/ 301
+/realtime/realtimekit/legal/ /realtime/realtimekit/platform/legal/ 301
+/realtime/realtimekit/legal/3rdparty/ /realtime/realtimekit/platform/legal/3rdparty/ 301
+/realtime/realtimekit/collaborative-stores/ /realtime/realtimekit/collaboration/meeting-key-value-store/ 301
+/realtime/realtimekit/broadcast-apis/ /realtime/realtimekit/collaboration/message-broadcast/ 301
+/realtime/realtimekit/collaborative-stores/broadcast/ /realtime/realtimekit/collaboration/message-broadcast/ 301
 /realtime/introduction/ /realtime/realtimekit/introduction/ 302
 /realtime/agents/ /realtime/ 301
 /realtime/agents/getting-started/ /realtime/ 301
@@ -3194,6 +3204,10 @@
 # Calls
 /calls/* /realtime/:splat 301
 
+# RealtimeKit SDK docs moved under Human participant
+/realtime/realtimekit/ui-kit/* /realtime/realtimekit/humans/ui-kit/:splat 301
+/realtime/realtimekit/core/* /realtime/realtimekit/humans/core/:splat 301
+
 # Magic Firewall renamed to Cloudflare Network Firewall
 /magic-firewall/* /cloudflare-network-firewall/:splat 301
 

src/components/config-explorer/config-reference.generated.ts

@@ -1,7 +1,7 @@
 // Generated by bin/generate-cf-config-reference.mjs from @cloudflare/config declarations.
 export const CONFIG_REFERENCE = {
 	package: "@cloudflare/config",
-	version: "0.23.0",
+	version: "0.25.0",
 	config: [
 		{
 			id: "Settings.accountId",
@@ -86,7 +86,7 @@ export const CONFIG_REFERENCE = {
 		{
 			id: "WorkerConfig.assets",
 			name: "assets",
-			type: '{ /** How to handle HTML requests. */ htmlHandling?: "auto-trailing-slash" | "drop-trailing-slash" | "force-trailing-slash" | "none"; /** How to handle requests that do not match an asset. */ notFoundHandling?: "single-page-application" | "404-page" | "none"; /** * Matches will be routed to the User Worker, and matches to negative rules will go to the Asset Worker. * * Can also be `true`, indicating that every request should be routed to the User Worker. */ runWorkerFirst?: string[] | boolean; }',
+			type: '{ /** How to handle HTML requests. */ htmlHandling?: "auto-trailing-slash" | "drop-trailing-slash" | "force-trailing-slash" | "none"; /** How to handle requests that do not match an asset. */ notFoundHandling?: "single-page-application" | "404-page" | "none"; /** * The public URL prefix under which the application is served. */ basePath?: string; /** * Matches will be routed to the User Worker, and matches to negative rules will go to the Asset Worker. * * Can also be `true`, indicating that every request should be routed to the User Worker. */ runWorkerFirst?: string[] | boolean; }',
 			required: false,
 			description:
 				"Specify the directory of static assets to deploy/serve. More details at https://developers.cloudflare.com/workers/frameworks/ For reference, see https://developers.cloudflare.com/workers/wrangler/configuration/#assets",
@@ -106,6 +106,14 @@ export const CONFIG_REFERENCE = {
 					description: "How to handle requests that do not match an asset.",
 					children: [],
 				},
+				{
+					name: "basePath",
+					type: "string",
+					required: false,
+					description:
+						"The public URL prefix under which the application is served.",
+					children: [],
+				},
 				{
 					name: "runWorkerFirst",
 					type: "string[] | boolean",
@@ -604,10 +612,10 @@ export const CONFIG_REFERENCE = {
 		{
 			id: "WorkerConfig.env",
 			name: "env",
-			type: "Record<string, Binding>",
+			type: "Record<string, Binding | false | null | undefined>",
 			required: false,
 			description:
-				"Bindings exposed on the Worker's `env` object. Construct entries with `bindings.kv(...)`, `bindings.r2(...)`, etc.",
+				"Bindings exposed on the Worker's `env` object. Construct entries with `bindings.kv(...)`, `bindings.r2(...)`, etc. Entries set to `false`, `null`, or `undefined` are omitted, which allows bindings to be included conditionally.",
 			internal: false,
 			children: [],
 		},
@@ -871,11 +879,11 @@ export const CONFIG_REFERENCE = {
 			],
 		},
 		{
-			id: "Bindings.analyticsSQL.default",
-			name: "analyticsSQL",
+			id: "Bindings.analytics.default",
+			name: "analytics",
 			signature:
-				"analyticsSQL(options?: AnalyticsSQLBindingOptions): AnalyticsSQLBinding$1;",
-			description: "An Analytics SQL binding.",
+				"analytics(options?: AnalyticsSQLBindingOptions): AnalyticsSQLBinding$1;",
+			description: "An Analytics binding.",
 			parameterType: "AnalyticsSQLBindingOptions",
 			parameterOptional: true,
 			children: [

src/components/realtime/realtimekit/AgentCapabilities.astro

@@ -0,0 +1,106 @@
+---
+import RealtimeDiagramFrame from "../sfu/RealtimeDiagramFrame.astro";
+---
+
+<RealtimeDiagramFrame
+	ariaLabel="Meeting participants and the agent share a RealtimeKit meeting. The agent joins as a participant. Through the Agent Participant WebSocket, your Worker or Durable Object receives transcripts, participant presence, and broadcasts. Sending chat and broadcasts back is planned."
+	className="rt-agent-caps"
+>
+	<div class="rtac-desktop">
+		<div class="rt-diagram__node rtac-people">
+			<strong>Participants</strong>
+			<small>Browsers and apps using RealtimeKit SDKs</small>
+		</div>
+
+		<div class="rt-diagram__connector rt-diagram__connector--both rtac-link-1">
+			<span class="rt-diagram__connector-start" aria-hidden="true"></span>
+			<span class="rt-diagram__connector-label">
+				Audio, video, chats, polls, broadcasts
+			</span>
+		</div>
+
+		<div class="rt-diagram__boundary rt-diagram__boundary--accent rtac-meeting">
+			<span class="rt-diagram__boundary-label">RealtimeKit meeting</span>
+			<div class="rt-diagram__node rt-diagram__node--accent">
+				<strong>Agent participant</strong>
+				<small>Configured by preset</small>
+			</div>
+		</div>
+
+		<div class="rtac-links">
+			<div class="rt-diagram__connector rtac-listen">
+				<span class="rt-diagram__connector-label">
+					Listen: transcripts, presence, broadcasts
+				</span>
+			</div>
+			<div class="rt-diagram__connector rt-diagram__connector--left rt-diagram__connector--dashed rtac-send">
+				<span class="rt-diagram__connector-label">
+					Send: chat, broadcasts, stream audio (future-scope)
+				</span>
+			</div>
+		</div>
+
+		<div class="rt-diagram__node rt-diagram__node--blue rtac-backend">
+			<span class="rt-diagram__eyebrow">My code</span>
+			<strong>Durable Object</strong>
+			<small>WebSocket &harr; JSON</small>
+		</div>
+	</div>
+
+	<div class="rt-diagram__mobile-routes">
+		<div class="rt-diagram__mobile-route">
+			<span>Participants</span>
+			<small>↔</small>
+			<span>RealtimeKit meeting</span>
+		</div>
+		<div class="rt-diagram__mobile-route">
+			<span>Agent participant</span>
+			<small>Joins the meeting</small>
+			<span>RealtimeKit meeting</span>
+		</div>
+		<div class="rt-diagram__mobile-route">
+			<span>Agent Participant</span>
+			<small>Listen →</small>
+			<span>Worker or Durable Object</span>
+		</div>
+		<div class="rt-diagram__mobile-route">
+			<span>Worker or Durable Object</span>
+			<small>Send (planned) →</small>
+			<span>Agent Participant</span>
+		</div>
+	</div>
+</RealtimeDiagramFrame>
+
+<style>
+	.rtac-desktop {
+		display: grid;
+		grid-template-columns:
+			minmax(7rem, 1fr) minmax(4rem, 0.8fr) minmax(9rem, 1.2fr)
+			minmax(7rem, 1.2fr) minmax(8rem, 1fr);
+		align-items: center;
+		gap: 0;
+		max-width: 940px;
+		margin: 0 auto;
+	}
+
+	.rtac-meeting {
+		padding: 1.5rem 0.75rem 0.75rem;
+	}
+
+	.rtac-links {
+		display: grid;
+		gap: 1.75rem;
+		align-self: stretch;
+		align-content: center;
+	}
+
+	@container (max-width: 36rem) {
+		.rtac-desktop {
+			display: none;
+		}
+
+		.rt-diagram__mobile-routes {
+			display: grid;
+		}
+	}
+</style>

src/components/realtime/realtimekit/AgentPatternDiagram.astro

@@ -0,0 +1,163 @@
+---
+import RealtimeDiagramFrame from "../sfu/RealtimeDiagramFrame.astro";
+
+interface Props {
+	variant: "hidden" | "visible";
+}
+
+const { variant } = Astro.props;
+const hidden = variant === "hidden";
+
+const agentName = hidden ? "Monitor" : "Notes bot";
+const events = "Transcripts, joins, broadcasts";
+
+const ariaLabel = hidden
+	? "People join a RealtimeKit meeting from a browser or app. A hidden agent is also in the meeting, but the RealtimeKit SDKs filter it out of the participant list and video grid, so people see only each other. The agent forwards transcripts, joins and leaves, and broadcasts over a WebSocket to your Durable Object."
+	: "People join a RealtimeKit meeting from a browser or app. A visible agent named Notes bot is also in the meeting and appears as a tile in the video grid, even though it sends no audio or video. The agent forwards transcripts, joins and leaves, and broadcasts over a WebSocket to your Durable Object.";
+---
+
+<RealtimeDiagramFrame ariaLabel={ariaLabel} className="rt-agent-pattern">
+	<div class="rtap-desktop">
+		<div class="rt-diagram__node rtap-people">
+			<strong>People</strong>
+			<small>Browser or app with the RealtimeKit SDKs</small>
+		</div>
+
+		<div class="rt-diagram__connector rt-diagram__connector--both">
+			<span class="rt-diagram__connector-start" aria-hidden="true"></span>
+			<span class="rt-diagram__connector-label">Audio, video, chat</span>
+		</div>
+
+		<div class="rt-diagram__boundary rt-diagram__boundary--accent rtap-meeting">
+			<span class="rt-diagram__boundary-label">RealtimeKit meeting</span>
+
+			<div class="rtap-screen">
+				<span class="rtap-screen-label">What people see</span>
+				<div class="rtap-tiles">
+					<div class="rtap-tile">Alice</div>
+					<div class="rtap-tile">Bob</div>
+					{!hidden && <div class="rtap-tile rtap-tile--agent">{agentName}</div>}
+				</div>
+			</div>
+
+			<div
+				class:list={[
+					"rt-diagram__node",
+					"rt-diagram__node--accent",
+					"rtap-agent",
+					{ "rtap-agent--hidden": hidden },
+				]}
+			>
+				<span class="rt-diagram__eyebrow">
+					{hidden ? "Hidden agent" : "Visible agent"}
+				</span>
+				<strong>{agentName}</strong>
+				<small>
+					{hidden
+						? "Filtered out of the list and grid"
+						: "Shows as a tile, with no audio or video"}
+				</small>
+			</div>
+		</div>
+
+		<div class="rt-diagram__connector">
+			<span class="rt-diagram__connector-label">{events}</span>
+		</div>
+
+		<div class="rt-diagram__node rt-diagram__node--blue rtap-backend">
+			<span class="rt-diagram__eyebrow">My code</span>
+			<strong>Durable Object</strong>
+			<small>WebSocket &harr; JSON</small>
+		</div>
+	</div>
+
+	<div class="rt-diagram__mobile-routes">
+		<div class="rt-diagram__mobile-route">
+			<span>People</span>
+			<small>Audio, video, chat ↔</small>
+			<span>RealtimeKit meeting</span>
+		</div>
+		<div class="rt-diagram__mobile-route">
+			<span>{agentName}</span>
+			<small>{hidden ? "Hidden from people" : "Tile in the grid"}</small>
+			<span>RealtimeKit meeting</span>
+		</div>
+		<div class="rt-diagram__mobile-route">
+			<span>{agentName}</span>
+			<small>{events} →</small>
+			<span>Durable Object</span>
+		</div>
+	</div>
+</RealtimeDiagramFrame>
+
+<style>
+	.rtap-desktop {
+		display: grid;
+		grid-template-columns:
+			minmax(6.5rem, 1fr) minmax(4.5rem, 0.8fr) minmax(13rem, 1.8fr)
+			minmax(5rem, 0.9fr) minmax(7rem, 1fr);
+		align-items: center;
+		max-width: 940px;
+		margin: 0 auto;
+	}
+
+	.rtap-meeting {
+		display: grid;
+		gap: 0.75rem;
+	}
+
+	.rtap-screen {
+		display: grid;
+		gap: 0.4rem;
+		padding: 0.5rem;
+		border: 1px solid var(--rtd-border);
+		border-radius: 0.5rem;
+		background: var(--rtd-card);
+	}
+
+	.rtap-screen-label {
+		color: var(--rtd-muted);
+		font-family:
+			ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+		font-size: 0.5625rem;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+
+	.rtap-tiles {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 0.35rem;
+	}
+
+	.rtap-tile {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		aspect-ratio: 16 / 10;
+		border-radius: 0.3rem;
+		background: var(--rtd-head);
+		color: var(--rtd-text);
+		font-size: 0.625rem;
+	}
+
+	.rtap-tile--agent {
+		border: 1px solid var(--rtd-accent);
+		background: var(--rtd-accent-soft);
+	}
+
+	.rtap-agent--hidden {
+		border-style: dashed;
+		opacity: 0.85;
+	}
+
+	@container (max-width: 40rem) {
+		.rtap-desktop {
+			display: none;
+		}
+
+		.rt-diagram__mobile-routes {
+			display: grid;
+		}
+	}
+</style>