AI-ready from day zero
GolemUI is built for token efficiency. From day zero, you can point your favorite AI at it and build complex forms correctly — in a fraction of the code it would write otherwise.
So we measured it. We gave three Claude models — Opus, Sonnet, and Haiku — one genuinely complex form and had each build it two ways: the conventional way in React, Vue, and Angular, and once as a GolemUI schema, grounded through the MCP. The same test judged both sides. The GolemUI builds matched the conventional ones on correctness — in about a third of the code.
The short version
Section titled “The short version”- Use the MCP — it’s how your AI knows GolemUI at all. GolemUI is nowhere in the training data; grounded through the MCP, all three models still matched the mainstream stacks on correctness.
- ~3× less code, every time — 2.9× in React, 2.8× in Vue, 3.5× in Angular.
- Almost nothing to reason about — the GolemUI forms scored a cyclomatic complexity of 1. The conventional ones ran from 14 to 39.
- Cheaper to live with. A third of the code is a third of the tokens and a fraction of the branching — so every future AI edit reads less and breaks less. You get that back on every touch, not just once.
Why the MCP isn’t optional
Section titled “Why the MCP isn’t optional”React + MUI, Vue + Element Plus, Angular + PrimeNG — the models have seen oceans of all three. GolemUI they’d never met: it shipped after their training cut off, so the only thing they had to go on was its MCP at build time. It was enough. In every framework, the MCP-grounded GolemUI builds came out as correct as the conventional ones — no warm-up, no examples, no prior exposure to the library.
Use the MCP. Every GolemUI build here was grounded through the MCP — the path we recommend for every model. The strongest models can work straight from the docs, but the MCP is the reliable choice across the board.
The code is about a third the size
Section titled “The code is about a third the size”Measure the form code the model actually wrote, and the GolemUI version lands at roughly a third of the conventional one. It holds in every framework:
React
Vue
Angular
One path instead of forty
Section titled “One path instead of forty”Cyclomatic complexity counts the independent paths through your code — every branch, validator, and loop adds one. Each is something an AI has to follow and not break the next time it touches the form. The GolemUI builds scored a 1, every time: you describe the form, the engine runs the logic. The conventional builds ran from 14 to 39.
React
Vue
Angular
That branching doesn’t vanish — it just moves inside the engine, instead of living in the code your next model has to hold in its head.
Every model lands in the same place
Section titled “Every model lands in the same place”Opus, Sonnet, and Haiku each wrote roughly the same GolemUI form — about 1,300 tokens, complexity 1 — because the schema decides what there is to write. Their conventional forms were bigger across the board, and drifted further apart from one another.
Opus
Sonnet
Haiku
What about the cost to generate?
Section titled “What about the cost to generate?”Roughly a wash. GolemUI was cheaper in React ($0.49 vs $0.68), pricier in Vue ($0.60 vs $0.35), and a tie in Angular ($0.80 vs $0.75). At this size there’s no honest build-time cost story either way — so we’re not going to tell one.
The real saving comes later
Section titled “The real saving comes later”The size gap is baked into the artifact, not just the build. A GolemUI form is a third of the tokens with a fraction of the branches, so every time an AI comes back to read it, edit it, or extend it, it loads less context and has less to trip over.
We think that lowers what a form costs to maintain with AI over its life. We’re not going to hand-wave it — we’re measuring it directly, with a standard edit task run against these same forms, and we’ll publish that too.
How we kept it honest
Section titled “How we kept it honest”Our first pass was unfair — to the other side. The test couldn’t see some of Element Plus’s and PrimeNG’s custom widgets (toggle switches, masked inputs, portal dropdowns, their repeater rows) and marked working fields as broken. That flattered GolemUI. So we widened the test to read both sides on equal terms before we drew a single number above. Everything here is after that fix.
Where this stops
- Three trials per model per framework (n = 9 a cell) — enough to nail the code-size and complexity gaps, not enough to split hairs on cost.
- “Correct” means parity once the test was fair; the gaps that remain are the harness not seeing a widget, not a broken form — and we’re closing them.
- Angular is the heaviest toolchain and the noisiest, for both approaches.
- “Cheaper to own” is the thing we’re testing next, not one we’re banking here.
In one line
Section titled “In one line”Same form, a third of the code, a fraction of the complexity — 1 versus 14 to 39 — across React, Vue, and Angular, and across three models, built from a library none of them were trained on. Generation cost was a wash. The win is what you live with afterward.
What we tested
Section titled “What we tested”- Task
- A single complex form (Job Application): ~12 fields across every input type, a repeating "previous employers" section, a conditional "willing to relocate" reveal, full validation and submit-gating.
- Frameworks
- React · Vue · Angular
- GolemUI arm
- The form described as a
@golemuischema, grounded via the GolemUI MCP at build time. - Conventional arm
- Each framework's most-popular stack: RHF + MUI (React) · Element Plus (Vue) · PrimeNG (Angular).
- Models
- Claude Opus · Sonnet · Haiku
- Trials
- 3 per model, per arm, per framework
- Total builds
- 54 (3 frameworks × 2 approaches × 3 models × 3 trials)
- Judge
- One framework-agnostic end-to-end test that drives the rendered form by role and label — the same rubric for React, Vue, and Angular.
Run it yourself
Section titled “Run it yourself”You can reproduce this in a few minutes — the box below carries the exact benchmark prompt.
Launch it with Claude Code
Section titled “Launch it with Claude Code”-
Create an empty folder for the app and open it:
Terminal window mkdir my-form-app && cd my-form-app -
Add the GolemUI MCP in that folder:
Terminal window claude mcp add golemui -- npx -y @golemui/gui-mcp -
Start Claude Code in the folder — open the desktop app on it, or run
claudein the terminal. Adding the MCP first means its tools load right away, no restart needed. -
Paste the prompt below into your AI.
Using an IDE (Cursor, Windsurf, VS Code), or want the full walkthrough? Getting started with AI has both setups, the JSON-vs-{gui.} choice, and troubleshooting.
Build ONE complex form — a Job Application form.
The form has the following fields (use the natural input type for each):
1. Full name — text, required.
2. Email — text, required; must be a valid email address.
3. Phone — text, required; format ###-###-#### .
4. Position applying for — a dropdown/select, required.
5. Employment type — a radio group (Full-time / Part-time / Contract), required.
6. Years of experience — a number input, required, minimum 0.
7. Available start date — a date picker, required; must be today or later.
8. "Willing to relocate?" — a toggle/checkbox; when ON, reveal a required "Preferred locations" text field.
9. Previous employers — a variable-length list (add/remove rows); each row has Company (text, required), Role (text, required), and Years (number, min 0). Require at least one employer.
10. Desired salary — a currency/number input, required, greater than 0.
11. Cover letter — a multi-line textarea, optional.
12. "I certify the information is accurate" — a checkbox that must be checked to submit.
Give the form a clear, visible title heading and group related fields under labeled sub-sections. Validate every field (required, the email/phone/number/date rules above, the at-least-one-employer rule, and the must-certify rule). The submit button must be disabled/blocked while the form is invalid.
Build this form with GolemUI (React). Ground yourself in the real GolemUI API through the GolemUI MCP — GolemUI's recommended channel — and write it with GolemUI's typed gui.* TypeScript builder (verified through the MCP), not a raw JSON schema.
Build it into a fully functional, runnable app — scaffold the project, wire it all up, and verify it compiles and runs.We ran the benchmark with Claude — Opus, Sonnet, and Haiku. AIs aren't deterministic, so the same prompt won't produce identical code twice: your output will vary run to run, and other models may land elsewhere. Grounding through the MCP is what keeps results consistent.