GLASSBOX

Build guide

How this was built

The honest version. What the brief actually asked, what runs where, and how to stand the whole thing up yourself in under a minute.

01

The thesis

The NexCell brief is a reasoning task: eleven prompts about how you would design and build a dashboard for watching live AI conversations. Code was not required, and most candidates answer with a one to two page document.

We did both. We answered all eleven prompts in a senior voice, and we built the dashboard they describe as a working product, so every claim in the reasoning has a live element you can click into. The name is the argument: a glass box is the opposite of a black box.

The eleven prompts ->The live dashboard ->
02

The stack

FrameworkNext.js 16 App Router with React Server Components, React 19, TypeScript. tsc clean.
StateTanStack Query for the cold store, Zustand for hot UI state, react-virtual for the list and transcript. The socket writes the Query cache; UI state never mirrors server state.
StylingNative CSS with @layer and design tokens. CSS Modules per component. Radius 0, 8px grid, no utility framework.
TypePixelify Sans, JetBrains Mono and VT323, self-hosted via next/font. No runtime font CDN.
BackendA FastAPI reference app in /backend that implements the exact REST + WebSocket contract. Runnable, not deployed.
TestsA Vitest suite asserts the engine invariants (seq contiguity, idempotent send, takeover compare-and-set, empty-text rejection) via pnpm test. RTL, MSW and Playwright are the planned UI-layer checks.
03

Three data modes

The same UI runs against three sources, labelled honestly. It codes against the ConversationSource interface, so switching modes changes nothing in the components.

01default

Simulation

A seeded engine drives 240 conversations client-side and streams replies token by token. Zero cost, no key, no backend, always works. This is what the deployed demo runs.

02your key

Live AI

Bring your own Groq or OpenRouter key. The key is stored only in your browser and sent straight to the provider, never to our server. Real AI text, streamed over SSE.

03local

Reference backend

The FastAPI + WebSocket app in /backend. Run it locally to exercise the real REST + WS contract: seq, idempotency, takeover, resume replay.

04

The honest Vercel note

Why the deployed demo simulates

Vercel has no persistent WebSocket server on any plan. Serverless and edge functions are request-scoped; there is no long-lived process to hold socket state. A dashboard whose whole point is a live push stream cannot run its socket layer there, so the deployed site runs the simulation client-side. The WebSocket design is real and lives in /backend and on the architecture page.

This limitation does not touch the live-AI path. That path is browser to provider directly, so it needs no server of ours whether the site is deployed or running on your machine.

05

Zero cost

No paid APIs. No accounts required to use the demo. The default simulation runs on nothing but the browser; live AI is optional and uses your own key on a free model tier.

No paid APIsNo sign-upNo server for the demoKey stays in your browser
06

Run it yourself

The frontend needs only the two commands. The reference backend is optional and stands up on its own.

Frontendthe deployed simulation, running locally
pnpm install
pnpm dev
Reference backend (optional)FastAPI REST + WebSocket, port 8000
cd backend
python -m venv .venv
pip install -r requirements.txt
uvicorn app.main:app --reload --port 8000