diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index e5b475a67..7bc8cbed6 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -76,3 +76,5 @@ jobs:
           R2_ACCESS_KEY_SECRET: ${{ secrets.R2_ACCESS_KEY_SECRET }}
 
           APP_ORIGIN: ${{ vars.APP_ORIGIN }}
+
+          NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER: ${{ vars.NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER }}
diff --git a/apps/dotcom/src/pages/public-touchscreen-side-panel.tsx b/apps/dotcom/src/pages/public-touchscreen-side-panel.tsx
index 59127424b..c66e4ea95 100644
--- a/apps/dotcom/src/pages/public-touchscreen-side-panel.tsx
+++ b/apps/dotcom/src/pages/public-touchscreen-side-panel.tsx
@@ -1,28 +1,58 @@
-import { useEffect } from 'react'
+import { CreateRoomRequestBody, ROOM_PREFIX, Snapshot } from '@tldraw/dotcom-shared'
+import { schema } from '@tldraw/tlsync'
+import { useState } from 'react'
 import { Helmet } from 'react-helmet-async'
+import { TldrawUiButton } from 'tldraw'
 import '../../styles/globals.css'
+import { getParentOrigin } from '../utils/iFrame'
 
 export function Component() {
-	useEffect(() => {
-		async function createSession() {
-			if ('meet' in window === false) {
-				setTimeout(createSession, 100)
-				return
-			}
+	const [isCreating, setIsCreating] = useState(false)
+	const [isSessionStarted, setIsSessionStarted] = useState(false)
 
-			const session = await (window as any).meet.addon.createAddonSession({
-				cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER || '745824656017'}`,
-			})
-			const sidePanelClient = await session.createSidePanelClient()
-			await sidePanelClient.setCollaborationStartingState({
-				sidePanelUrl: `${window.location.origin}/ts-side`,
-				mainStageUrl: `${window.location.origin}/new`,
-				additionalData: undefined,
-			})
+	async function createSession() {
+		setIsCreating(true)
+		if ('meet' in window === false) {
+			setTimeout(createSession, 100)
+			return
 		}
 
-		createSession()
-	})
+		const snapshot = {
+			schema: schema.serialize(),
+			snapshot: {},
+		} satisfies Snapshot
+
+		const res = await fetch(`/api/new-room`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				origin: getParentOrigin(),
+				snapshot,
+			} satisfies CreateRoomRequestBody),
+		})
+
+		const response = (await res.json()) as { error: boolean; slug?: string }
+		if (!res.ok || response.error) {
+			console.error(await res.text())
+			throw new Error('Failed to upload snapshot')
+		}
+		const mainStageUrl = `${window.location.origin}/${ROOM_PREFIX}/${response.slug}`
+
+		const session = await (window as any).meet.addon.createAddonSession({
+			cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER}`,
+		})
+		const sidePanelClient = await session.createSidePanelClient()
+		await sidePanelClient.setCollaborationStartingState({
+			sidePanelUrl: `${window.location.origin}/ts-side`,
+			mainStageUrl: mainStageUrl,
+			additionalData: undefined,
+		})
+
+		setIsCreating(false)
+		setIsSessionStarted(true)
+	}
 
 	return (
 		<>
@@ -30,7 +60,29 @@ export function Component() {
 				{/* eslint-disable @next/next/no-sync-scripts */}
 				<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.js"></script>
 			</Helmet>
-			Starting a new session…
+
+			<div
+				style={{
+					flexDirection: 'column',
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					height: '100%',
+				}}
+			>
+				<TldrawUiButton
+					type="primary"
+					disabled={isCreating || isSessionStarted}
+					onClick={createSession}
+					style={{
+						color: isCreating || isSessionStarted ? 'hsl(210, 6%, 45%)' : 'hsl(214, 84%, 56%)',
+					}}
+				>
+					{isSessionStarted ? 'Room created' : 'Create a new room'}
+				</TldrawUiButton>
+				{isCreating && <div>Starting a new session…</div>}
+				{isSessionStarted && <div>Room created, click Start Activity below.</div>}
+			</div>
 		</>
 	)
 }