The hidden cost of generating React
A mid-sized insurance carrier asked us to estimate what it would cost to rebuild 740 internal screens using a general-purpose coding assistant. The math was uncomfortable. At roughly 8,000 output tokens per screen for a free-form React component, and a second pass for tests, the bill landed north of $180,000 in inference alone. The same job against a JSON descriptor schema came in under $22,000.
That ratio isn’t unusual. It’s the default outcome when the model has to re-derive structure on every call.
What the model is actually paying for
When GPT-4 or Claude writes a React component from scratch, most of the output is ceremony. Imports. JSX scaffolding. Hook boilerplate. Prop typing. Error boundaries. The model knows all of it, and it writes it correctly, but it still pays the token cost each time.
We looked at a sample of 200 free-form generations for CRUD screens and found that fewer than 15% of the output tokens encoded anything that varied between screens. The other 85% was shape the model reconstructed from memory.
Structured output changes the budget
When the target is a JSON document validated against a schema, the model stops writing scaffolding. It writes decisions. Field names, validation rules, layout regions, the specific columns on a grid, the handler attached to a button. Everything else is supplied by the runtime.
Our internal estimate, across roughly 1,200 descriptor generations run during development, puts the reduction at 5-10x depending on screen complexity. Simple lookup forms land near 10x. Dense dashboards with conditional logic land closer to 5x.
Fewer tokens, fewer failure modes
Token efficiency is the easy win to measure. The harder one is reliability. Free-form generation fails in interesting ways: a missing import, a hallucinated library version, a hook called inside a conditional. Each failure requires a retry, which costs more tokens, which raises the real per-screen price well above the headline number.
Structured generation fails earlier and cheaper. A JSON Schema validator rejects a malformed descriptor in milliseconds, before any code runs. The model sees the validation error and corrects in the next turn. We see roughly one retry per twenty generations, compared to one per three for equivalent free-form runs.
Why this matters for enterprise builders
Enterprise app generation isn’t one screen. It’s hundreds, then thousands, each touching RBAC, audit logs, and data contracts the organization has already agreed on. Tools like Vercel v0, Bolt, and Lovable optimize for the first screen. They generate beautiful output and expensive bills.
The economics flip once the descriptor and runtime are in place. New screens cost cents. Variants cost less. A product manager can iterate on a layout twenty times in an afternoon without anyone noticing the inference line item.
The takeaway
Token efficiency isn’t a clever trick. It’s what happens when the model stops being asked to write things it has already written a million times. Give the LLM a schema, a runtime, and a clear decision surface, and the cost curve bends by an order of magnitude. That’s the difference between AI as a demo and AI as production infrastructure.