Night Builder

[Independent · 2026]

How might AI become a collaborative creative medium rather than a chatbot? A prototype where a typed intent becomes a living canvas with visible AI states, steering by levers, proposals you apply or undo, and no chat bubbles anywhere. Try it live ↗

The Night Builder canvas for Sunday Rooftop Sessions: direction signature, the Ready activity bar with five decisions open, the stage switch, the rail of sections, and the experience statement with its working assumptions

Product brief

Night Builder is an interaction design study with one question behind it: how might AI become a collaborative creative medium rather than a chatbot? The demonstration domain is planning a music driven night, chosen because the content makes the prototype specific and believable while the interaction model stays the subject.

The user never messages an assistant. They type an intent, and it becomes a canvas of eleven connected sections. The system proposes, connects, revises, and acts in the open; the user edits, steers, approves, adjusts, interrupts, and undoes. Music is the connected demonstration system: change one musical variable and the statement, journey, timeline, energy curve, environment, and DJ direction update in ways you can follow.

Everything runs on one typed schema. Generated content varies; the interface structure never does. The model never generates UI.

The solution

01 / 05 1

Intent becomes a canvas

Type a sentence and the system listens while you type: intent tags (Mood, Music, Setting, Scale, Energy, Avoid) appear live under the input. Build, and it interprets the direction tag by tag, builds a numbered plan that names the sections each step will fill, and generates the experience as a wireframe of the real canvas filling in. Then eleven connected sections appear, ordered by what the request emphasised: describe a cinematic night and Creative Direction leads; emphasise the music and Music Direction rises.

Listening: typed intent tags appear under the input as the sentence is typed, Music Disco, Setting Rooftop, Energy Dancing, Theme Sunday

02 / 05 2

The visible mind

Thirteen distinct AI states, each with its own treatment in typography, motion, and emphasis, and status labels instead of spinners: Listening, Interpreting, Building a plan, Generating, Proposed update, Acting, Ready for review, Reading, Uncertain, Reconsidering the statement, Needs decision, Stopped, Error. A persistent activity bar above the rail mirrors the current state from anywhere on the canvas, with the current action and the Stop or Review control, so agentic work is visible even when the active section is elsewhere. During an action it shows Changed → Affected; while reading it shows what the section under review feeds.

Acting: the activity bar reads Format set to Vinyl, updating Environment, with a Stop control, while the Music Direction section updates

03 / 05 3

Steering, not prompting

Four continuous levers, Warmth, Social, Experimental, Energy, live inside the sections they most shape: Energy under the curve, Social under the journey, Warmth and Experimental as the environment axes. Visuals respond live while dragging; language changes only at named zone boundaries (Ambient, Grooving, Peak-driven), marked by ticks. While a drag crosses a zone, the canvas shows which sections will be revised before you commit. A signature strip in the header shows all four values and jumps to each lever.

The Energy lever pushed to Peak-driven: the Music Journey curve redraws live and the activity bar lists the sections that will be revised

04 / 05 4

Proposed, applied, what changed

Before a meaningful connected change, the system proposes: what it noticed ("You changed the format to Vinyl"), the updates it suggests, and Apply all, Review individually, or Ignore. Applying is interruptible, section by section with a Stop control, never a silent bulk update. Every action ends in structured feedback, never a message: the changes made, the revised sections as jump links, any decision the change surfaces, and a collapsed Why this changed. Simple, reversible actions skip the proposal and act immediately with Keep or Undo. That is calibrated autonomy.

Proposed update: You changed the format to Vinyl, with the suggested updates listed and Apply all, Review individually, Ignore

05 / 05 5

Honest about the seams

Provenance is visible. Working assumptions carry a dashed marker and are editable, never presented as facts. The DJ Direction carries a Derived marker, states what it derives from, and recomputes live. Check conflicts runs a visible scan down the rail, then deterministic rules show where inputs pull against each other: a candlelit brief against a peak-driven arc, side by side, with options to choose between, never one forced answer, plus Log as open decision when neither is right. Any applying change can be stopped; the last stable state is kept and the canvas says so.

Uncertain: one conflict needs your input, a candlelit brief with a peak-driven arc, the two inputs side by side with options

Not a chat.
A canvas
that thinks out loud.

By the numbers

Building a plan: five numbered steps, each naming the sections it will fill

visible AI states, each with its own treatment, no spinners

connected sections on one typed schema

direction levers instead of prompts

My role

I framed the design question and built the prototype: the interaction model, the visual language for AI states, the adaptive canvas and its stage switch, the direction levers with their zones, the proposal and What Changed pipeline, the conflict rules and the Uncertain state, provenance marking, the typed schema and three authored experiences, and the accessibility work that makes every lever, curve point, and tab keyboard operable.

Role

Product Designer, Engineer

Timeframe

2026

Disciplines

Interaction Design, AI Product Design, Design Systems

Current state

Phase 4 of the roadmap, live. Generation is local by design: the intent selects between three authored experiences by keyword, and steering, connected updates, and conflict findings are deterministic rule tables, so the interaction patterns can be judged without generation noise. Real generation into the same schema is the next phase; none of the contracts change shape.

Link

night.natethousandlabs.xyz ↗

Stack

Next.js 15, React 19, TypeScript, Bootstrap 5 grid, Inter

Palette

Black, white, one purple. No gradients, no glow, no AI iconography

Platform

Desktop first web app, responsive to a phone; no account, no network

Thirteen states

Every frame captured off the running app

Night Builder AI state: Listening — 01 · Listening

Night Builder AI state: Interpreting your direction — 02 · Interpreting your direction

Night Builder AI state: Building a plan — 03 · Building a plan

Night Builder AI state: Generating the experience — 04 · Generating the experience

Night Builder AI state: Proposed update — 05 · Proposed update

Night Builder AI state: Acting, with Stop — 06 · Acting, with Stop

Night Builder AI state: Ready for review: What Changed — 07 · Ready for review · What Changed

Night Builder AI state: Reading: the conflict scan — 08 · Reading

Night Builder AI state: Uncertain: conflicting inputs found — 09 · Uncertain

Night Builder AI state: Reconsidering the statement — 10 · Reconsidering

Night Builder AI state: Needs decision — 11 · Needs decision

Night Builder AI state: Stopped, the canvas is unchanged — 12 · Stopped

Night Builder AI state: Error, a calm failure — 13 · Error

Eleven sections

One schema · content varies, structure never does

Canvas section: Music Direction — Music Direction

Canvas section: Music Journey — Music Journey · the energy curve

Canvas section: Creative Direction — Creative Direction

Canvas section: Environment — Environment · Warmth and Experimental axes

Canvas section: Guest Journey — Guest Journey · the Social lever

Canvas section: Open Decisions — Open Decisions · option chips, never a form

Canvas section: DJ Direction — DJ Direction · fully derived

Canvas section: Production — Production · a derived readiness checklist

Canvas section: Next Actions — Next Actions

Steering and connected updates

Direct manipulation in, structured feedback out

After the lever commit: Music Journey marked Revised, Energy set to Peak-driven, Keep changes or Undo — Zone commit · Revised, Keep changes or Undo

What Changed after applying: the individual changes, the revised sections as jump links, and Why this changed — What Changed · jump links and Why this changed

Reviewed 11 sections, no conflicts found — Check conflicts · reviewed 11 sections, none found

The Planning stage: the rail reorganised so the journey, timeline, and open decisions lead — Stage switch · Planning reorganises the rail

The Production stage: venue, sound and lighting, staffing, and a derived readiness checklist — Stage switch · Production closes the loop

Three intents, one structure

Rooftop party · Listening bar · Gallery opening

Midnight Listening Room: the same canvas structure generated from the Listening bar intent — Midnight Listening Room

First Light Opening: the same canvas structure generated from the Gallery opening intent — First Light Opening

Night Builder on a phone: intent, listening, building a plan, and the canvas — On a phone · intent to canvas

Try the live prototype

Open full screen ↗

Tap a seed chip or type your own night, watch the tags parse as you type, and Build. Then push the Energy lever past a zone tick and watch the canvas tell you what it will revise before it does. Open Music Direction and change the format: the system proposes, you apply, review, or ignore, and you can stop it mid-way.

Check conflicts on the Listening bar night after pushing Energy to Peak-driven, and the Uncertain state shows the two inputs side by side with options instead of an answer. Type exactly "fail" as the intent to see the calm failure state.

Problems & decisions

Show that an AI product can propose, act, and explain itself on a canvas without a single chat bubble, and that the user keeps authorship the whole way.

Every AI product defaults to a chat box: a side panel, a message thread, a spinner, then a wall of text. It is the cheapest interface to ship and the weakest for creative work, because the system's thinking is hidden, its actions are invisible, and the user's only tool is another sentence. Night Builder is the alternative, built far enough to be judged: the AI as a collaborator on a shared canvas rather than a correspondent in a thread.

Someone planning a night has a feeling, not a spec: warm, social, a slow build into dancing. They need the system to understand that, propose a coherent whole, and let them steer it directly, without translating every adjustment into a prompt. They need to see what the system is doing and why, to say no or stop, to know which claims are facts and which are assumptions, and to keep their own edits when they decline the system's suggestions.

One strongly typed EventExperience schema carries everything: the statement, eleven sections, assumptions, decisions, the derived DJ direction, the direction values. Generated content fills the schema; the interface is built from the schema and never from the model's output. Content is non-deterministic, the interface is deterministic, and that is what makes the AI states, the What Changed summaries, and the jump links possible: the system always knows what it changed because the change is a diff on typed data, not a rewrite of a document.

Phase 3 dissolved the steering buttons into four continuous levers that live inside the sections they shape. The rule that makes them feel honest: visuals respond continuously while dragging, but language only changes at named zone boundaries, and the canvas shows which sections will be revised before the user commits. A lever crossing a zone is a simple, reversible action, so it acts immediately with Keep or Undo; a direct edit with wider consequences (moving a timeline moment thirty minutes, changing the music format) gets a proposal first. Calibrated autonomy, decided per action, not per product.

Check conflicts runs a visible Reading scan down the rail, then deterministic rules report where inputs pull against each other: the brief's guest count against the plan's capacity, moments with no room to breathe, a quiet brief against a peak-driven arc, wide-open social against peak energy, decisions still open once production is underway. Each finding shows the conflicting inputs side by side with options to choose between, plus Log as open decision when neither is right. A "keep it as planned" resolution marks the tension as intentional so the next check respects the call instead of nagging. The user's own edit is never undone by declining a suggestion; authorship stays separate from assistance.

Next.js 15 App Router, React 19, TypeScript. One page: intent → AI states → canvas or error, as a state machine. Bootstrap 5 grid and card primitives, Inter, a strict palette of black, white, and one purple. No gradients, no glow, no AI iconography; state is communicated through typography, motion, and emphasis.
The EventExperience schema and three authored experiences (Rooftop party, Listening bar, Gallery opening) in one content module; the intent selects a variant by keyword.
Deterministic rule tables for steering (lever zones and their transforms), connected updates from direct edits, conflict findings, a static section dependency map, and the derived DJ direction. Markdown export of the current canvas.
Accessibility: semantic headings and tablists with arrow keys and roving tabindex; every lever, axis, and curve point is a keyboard operable slider; all feedback regions are aria-live; visible focus rings; reduced motion collapses all animation. Every frame on this page was captured by driving the app through those same controls.

Generation is local: free-form ideas outside the three authored themes land on the default. Steering language, connected update suggestions, and conflict findings are rule tables, not model output, deliberately, so the interaction patterns can be evaluated without generation noise. Zone recompositions overwrite manual edits to the fields they manage, and undo is one level. The one second applying window on local operations is honest scaffolding: it is the exact seam real model latency will occupy. Next is real generation into the same schema, with none of the contracts changing shape.