All work
Company product · live

G2 Build Room

Describe a business in one sentence and watch a working app get written, compiled and sandboxed.

Role
Co-founder and lead engineer
Year
2026
Stack
Next.js 16, React 19, Claude Opus and Sonnet, Server-sent events, Babel compile gate, Sandboxed iframe, Vercel Blob, Resend
g2builds.com
Demo dataType a sentence and the homepage console retunes to your trade. This part runs without a model call, and the console labels its sample data.
measured cost of a full Opus build, 489 linesMeasured · source
$0.43
AI edits per visitor, counted in a signed cookieCounted in the repo · source
5
tests, including WCAG contrast pinned to the tokensCounted in the repo · source
33

The problem

Selling custom software to a small business starts with showing what they would get. A mockup does not answer whether it would work for them, and a live demo usually means a sales call.

What I built

  1. 01Streaming generation over server-sent events with a delimited text protocol, so code appears as it is written and a delimiter split across chunks is handled.
  2. 02A compile gate: every file passes Babel on the server before the browser sees it, and a failed build is not charged against the visitor's five changes.
  3. 03A sandbox with scripts allowed and same-origin denied, a tiny module loader over a virtual file system, and one boot path shared by the preview and the download.
  4. 04Cost and abuse controls labeled for what they are: an HMAC-signed budget cookie, per-IP rate limits, a soft daily ceiling, and Origin checks on every POST.
  5. 05An SSRF-hardened 'import my current website' endpoint: HTTPS only, private and metadata ranges refused, no off-host redirects, capped reads.
  6. 06Deterministic first: the page is written from a pure template before any model call, so a missing key degrades to a working page, never a spinner.

More screens

The G2 homepage on a phone, with the brief box above the live sample console
Demo dataThe same console on a phone.
g2builds.com/build
Demo dataA one-line brief and an email address, then the instant first render mounts in a sandbox and takes clicks. Recorded without an API key, so the chat shows the real no-key message and the streaming Claude rewrite is not shown.
g2builds.com/work
The G2 Work index, opening on the C2J Auto Spa case study band: 'A detailing business that books itself.'
The Work index. Each project gets its own room in its own colors, the idea this site borrows.
g2builds.com/system
The G2 design system page showing four button variants in three sizes, plus disabled and loading states, over a soft blue glow
The /system page renders the real components. Four variants, three sizes, one shape.

Decisions

Opus for the first build, Sonnet for edits

Measured on the same brief, Sonnet was faster and a third of the cost. The first build is what a visitor judges, so quality won there and speed won for edits.

Structured output through a forced tool call

The response schema is a tool's input schema, so the API rejects malformed output instead of the app's JSON parser.

Not claimed

  • The console on the homepage uses labeled sample data.
  • Voice mode is built and tested and switched off.
  • The streaming Claude build needs a live key, so the films here show the deterministic first render, not the model writing code.

Links