Collaborative

A multiplayer composer: two windows editing the same PromptArea with live presence and typing indicators. It runs on Vercel WebSockets and syncs the same Segment[] document model you already use everywhere else.

Live demo

Click Open 2nd window (or copy the link into another tab) and type in both — edits, chips, presence, and typing all sync in real time.

How it works

Because the document is a plain serializable Segment[] array, syncing is just broadcasting that array. The component stays unchanged — only the value/onChange wiring is swapped for a hook that reads from and writes to a WebSocket.

The Vercel WebSocket route

Next.js has no native upgrade API, so Vercel exposes experimental_upgradeWebSocket() from @vercel/functions (it needs the ws package installed and Fluid compute enabled):

// app/api/collab/route.ts
import { experimental_upgradeWebSocket, type WebSocketData } from '@vercel/functions'

// WebSockets run on a Node.js Function with Fluid compute; keep it dynamic.
export const runtime = 'nodejs'
export const dynamic = 'force-dynamic'

const rooms = new Map<string, Set<WebSocket>>() // in-memory — see note below

export async function GET(request: Request) {
  const roomId = new URL(request.url).searchParams.get('room') ?? 'lobby'

  return experimental_upgradeWebSocket((ws) => {
    const room = rooms.get(roomId) ?? new Set()
    rooms.set(roomId, room.add(ws))

    ws.on('message', (data: WebSocketData) => {
      // Fan the edit out to everyone else in the room (last-writer-wins).
      for (const peer of room) if (peer !== ws) peer.send(data)
    })

    ws.on('close', () => room.delete(ws))
  })
}

The full implementation — room registry, presence, and the useCollaborativePromptArea client hook — lives in app/api/collab/route.ts and lib/use-collaborative-prompt-area.ts.

Production notes

New to the document model? See PromptArea Props and the Vercel AI SDK example for another realtime integration.