feat: add QR code audience pick flow for live presentations

Adds a QR button in the top banner that opens a modal with a scannable
QR code. Audience members scan it, pick from 3 random visualization
options, and the selected prompt is sent to the AI agent on the big
screen.

Author: NathanTarbert

apps/app/package.json

@@ -16,6 +16,7 @@
     "@copilotkit/runtime": "next",
     "@copilotkitnext/shared": "next",
     "next": "16.1.6",
+    "qrcode.react": "^4.2.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-rnd": "^10.5.2",

apps/app/src/app/api/pick/ip/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { networkInterfaces } from "os";
+
+/** Returns the machine's LAN IPv4 address so phones on the same network can connect. */
+export async function GET() {
+  const nets = networkInterfaces();
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name] ?? []) {
+      if (!net.internal && net.family === "IPv4") {
+        return NextResponse.json({ ip: net.address });
+      }
+    }
+  }
+  return NextResponse.json({ ip: null });
+}

apps/app/src/app/api/pick/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSession, setSession } from "./store";
+
+/** GET — poll session status (desktop polls this) */
+export async function GET(req: NextRequest) {
+  const sessionId = req.nextUrl.searchParams.get("sessionId");
+  if (!sessionId) return NextResponse.json({ error: "missing sessionId" }, { status: 400 });
+
+  const session = getSession(sessionId);
+  if (!session) return NextResponse.json({ status: "waiting" });
+
+  return NextResponse.json(session);
+}
+
+/** PUT — mark session as scanned (mobile calls this on page load) */
+export async function PUT(req: NextRequest) {
+  const { sessionId } = await req.json();
+  if (!sessionId) return NextResponse.json({ error: "missing sessionId" }, { status: 400 });
+
+  const existing = getSession(sessionId);
+  if (!existing || existing.status === "waiting") {
+    setSession(sessionId, { status: "scanned" });
+  }
+
+  return NextResponse.json({ ok: true });
+}
+
+/** POST — submit picked prompt (mobile calls this when user picks an option) */
+export async function POST(req: NextRequest) {
+  const { sessionId, prompt } = await req.json();
+  if (!sessionId || !prompt) {
+    return NextResponse.json({ error: "missing sessionId or prompt" }, { status: 400 });
+  }
+
+  setSession(sessionId, { status: "picked", prompt });
+  return NextResponse.json({ ok: true });
+}

apps/app/src/app/api/pick/store.ts

@@ -0,0 +1,34 @@
+/**
+ * Simple in-memory session store for QR pick flow.
+ * Shared across API route handlers via module-level state.
+ */
+
+export type PickSession = {
+  status: "waiting" | "scanned" | "picked";
+  prompt?: string;
+};
+
+const sessions = new Map<string, PickSession>();
+
+// Auto-expire sessions after 10 minutes
+const EXPIRY_MS = 10 * 60 * 1000;
+const timers = new Map<string, ReturnType<typeof setTimeout>>();
+
+export function getSession(sessionId: string): PickSession | undefined {
+  return sessions.get(sessionId);
+}
+
+export function setSession(sessionId: string, data: PickSession) {
+  sessions.set(sessionId, data);
+
+  // Reset expiry timer
+  const existing = timers.get(sessionId);
+  if (existing) clearTimeout(existing);
+  timers.set(
+    sessionId,
+    setTimeout(() => {
+      sessions.delete(sessionId);
+      timers.delete(sessionId);
+    }, EXPIRY_MS),
+  );
+}

apps/app/src/app/page.tsx

@@ -7,13 +7,17 @@ import { ExplainerCardsPortal } from "@/components/explainer-cards";
 import { DemoGallery, type DemoItem } from "@/components/demo-gallery";
 import { GridIcon } from "@/components/demo-gallery/grid-icon";
 import { DesktopTipModal } from "@/components/desktop-tip-modal";
+import { QrButton, QrModal } from "@/components/qr-modal";
 import { CopilotChat, useAgent, useCopilotKit } from "@copilotkit/react-core/v2";
 
 export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
 
   const [demoDrawerOpen, setDemoDrawerOpen] = useState(false);
+  const [qrOpen, setQrOpen] = useState(false);
+  const [qrSessionId] = useState(() => typeof crypto !== "undefined" ? crypto.randomUUID().slice(0, 12) : "fallback");
+  const [scanStatus, setScanStatus] = useState<"waiting" | "scanned" | "picked">("waiting");
   const { agent } = useAgent();
   const { copilotkit } = useCopilotKit();
 
@@ -23,6 +27,35 @@ export default function HomePage() {
     copilotkit.runAgent({ agent });
   };
 
+  // Reset scan status when QR modal opens
+  useEffect(() => {
+    if (qrOpen) setScanStatus("waiting");
+  }, [qrOpen]);
+
+  // Poll for QR pick status
+  useEffect(() => {
+    if (!qrOpen) return;
+    const interval = setInterval(async () => {
+      try {
+        const res = await fetch(`/api/pick?sessionId=${qrSessionId}`);
+        const data = await res.json();
+        if (data.status === "scanned") {
+          setScanStatus("scanned");
+        } else if (data.status === "picked" && data.prompt) {
+          setScanStatus("picked");
+          setTimeout(() => {
+            setQrOpen(false);
+            agent.addMessage({ id: crypto.randomUUID(), content: data.prompt, role: "user" });
+            copilotkit.runAgent({ agent });
+          }, 800);
+        }
+      } catch {
+        // ignore polling errors
+      }
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [qrOpen, qrSessionId, agent, copilotkit]);
+
   // Widget bridge: handle messages from widget iframes
   useEffect(() => {
     const handler = (e: MessageEvent) => {
@@ -68,6 +101,7 @@ export default function HomePage() {
                 </p>
               </div>
               <div className="flex items-center gap-1.5 sm:gap-2">
+                <QrButton onClick={() => setQrOpen(true)} />
                 <button
                   onClick={() => setDemoDrawerOpen(true)}
                   className="inline-flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm font-medium no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px cursor-pointer"
@@ -118,6 +152,13 @@ export default function HomePage() {
       />
 
       <DesktopTipModal />
+
+      <QrModal
+        isOpen={qrOpen}
+        onClose={() => setQrOpen(false)}
+        sessionId={qrSessionId}
+        scanStatus={scanStatus}
+      />
     </>
   );
 }