How to Build a Calculator Website With AI: What 9 Sites Taught Me

To build a calculator website with AI, describe each calculator to an AI coding tool in plain terms: the inputs, the formula, where the formula comes from, the edge cases and a few worked answers to test against. The AI writes the page in minutes. That part is easy. Getting the numbers right and building pages Google wants to keep is where calculator sites actually fail.

I know because I’ve done it nine times. Since August 22, 2026 I’ve built nine calculator sites with Claude Code, Anthropic’s coding agent: tip, paycheck, UK salary, GPA, concrete, TDEE, snow-day, PC bottleneck and restaurant-nutrition calculators. Between them they have 336 git commits, 291 of them co-written by Claude. This guide is what those sites taught me, including the mistakes. They’re young sites, so this isn’t a traffic success story. It’s a build record.

The nine sites at a glance

Site	Started	Commits	Pages	The lesson it taught
GPA calculator	Aug 31	144	109	Build what people search for, not what seems logical
US paycheck calculator	Sep 19	46	90	Every number on the page must come from the engine
TDEE / nutrition calculators	Sep 18	42	13	Delete credibility claims you can’t prove
Tip calculator	Aug 22	33	42	Near-duplicate pages get you hit, not ranked
Snow-day predictor	Aug 29	22	36	Demand can be in a different country than you expect
Concrete calculator	Sep 21	18	24	Check the shared FAQ maths, not just the calculator
PC bottleneck calculator	Sep 5	14	24	When porting a calculator, prove the new one matches
UK salary calculator	Sep 21	9	23	Never trust figures in a design mockup
Restaurant nutrition calculator	Sep 4	8	33	Never type a data figure by hand

Pages are counted from each repository’s page files, or from its sitemap where pages don’t live in their own folders (the snow-day and TDEE sites). Commit counts come from git as of October 28, 2026.

Step 1: Pick calculators from search data, not instinct

On the GPA site I first built conversion pages for the values a calculator produces, like 3.67 and 3.33. Keyword data later showed almost nobody searches those. People search “3.7 GPA to percentage” (about 1,560 searches a month) because universities print one-decimal grades on transcripts. The pages that seemed precise were the wrong pages.

The snow-day site had a bigger surprise. I assumed the audience was American. The keyword export showed Ontario alone at 9,340 searches a month, Barrie at 1,910 and Sudbury at 1,000, while Boston, New York City and Ohio added up to fewer than 100. I built Canadian pages and skipped US city pages entirely.

What to do: before you prompt anything, export keywords for your niche from a tool like Semrush or Ahrefs and group them by the calculation people want. AI is good at building whatever you ask for, so asking for the right thing is your job.

Step 2: Get every formula and figure from the source

This is the step that matters most, and the one AI can’t do for you.

The UK salary site started from a polished design mockup made with an AI design tool. It looked finished, numbers included. They were wrong: the mockup showed £4,574 of National Insurance on a £50,000 salary, when the real figure is £2,994, and its student-loan thresholds were out of date. Had I wired the calculator to match the design, it would have been off by more than £1,500 on its main example. The engine instead uses 2026/27 rates checked against GOV.UK.

The paycheck site’s federal tax figures were checked against the IRS’s own revenue procedure for 2026 (Rev. Proc. 2025-32), and 18 bracket test cases match to the cent. The nutrition site’s 152 menu items were collected from the restaurant’s published calculator, and nothing on the site is typed by hand.

What to do: find the official source for every rate, threshold and formula: a tax authority, a standards body, a manufacturer’s spec sheet. Paste it into your prompt and tell the AI to use only that. If the AI “knows” a tax rate, assume it’s last year’s.

Step 3: Write a brief, not a wish

The prompt that builds a calculator should read like a spec. This is the shape I use with Claude Code:

Build a [name] calculator page.

Inputs: [each field, its unit, allowed range, default value]
Formula: [exact formula, with the source URL it came from]
Output: [what to show, rounding rules, currency/units]
Edge cases: [zero, negative, blank, very large values, what to do with each]
Test cases: [3-5 inputs with the correct answer worked out by hand]

Rules:
- Put the calculation in one JavaScript file the whole site can reuse.
- Don't hard-code any result into the page text.
- Explain your plan before writing code.

The test cases are the most important line. They give the AI a way to check its own work, and they give you a way to check the AI. If you’re new to coding agents, installing Claude Code takes a few minutes, and our guide to writing AI prompts covers why the brief matters more than the tool.

Step 4: Let one engine produce every number

A calculator page has numbers in more places than the calculator: worked examples, comparison tables, FAQ answers. Those get written once and forgotten.

On the paycheck site, an audit found guides that showed 2025 tax brackets labelled as 2026, a child tax credit of $2,000 when the engine used $2,200, and wrong worked examples on ten guides. The calculator itself was right. The text around it had drifted. The fix was structural: every figure in the copy is now a placeholder that the build script fills by running the real calculation engine. When a rate changes, every page updates with it.

The nutrition site goes further, with two scripts that must both report zero mismatches before anything ships. One checks each single item against the source data. The other re-adds every meal from the ingredients named in its own label. That second check caught burrito entries whose label left out the tortilla while the total included it, an error no human reviewer had noticed.

Step 5: Test it the way a bug would find it

Each site has its own checks, and I run them before every release. Today’s output from two of them:

UK salary engine (npm test):
ℹ tests 20
ℹ pass 20
ℹ fail 0

US paycheck site (python scripts/audit.py):
pages 85
ALL CLEAN

The bottleneck calculator was a different kind of test. It started as a WordPress plugin, and I had Claude Code port the engine to plain JavaScript for a faster static site. Before switching, the new engine was run against the live plugin and matched on all 900 test combinations. Without that, “it looks right” would have been the only evidence.

What to do: ask the AI to write the tests along with the calculator, using the hand-worked answers from your brief. Then try the inputs real people get wrong: blanks, zeros, commas in numbers, huge values.

Step 6: Build pages around the calculator, not page farms

AI makes it trivially easy to generate hundreds of pages. That’s the trap.

The tip site had 38 programmatic pages like “tip on $40” and “15 percent of 60”. They were about 80% identical text, and most sat in Search Console as “Discovered – currently not indexed”. After a drop around Google’s September 2026 spam update, I kept four genuinely useful ones and redirected the rest to a single tip chart.

The paycheck site’s state pages had the same problem in a subtler form: a median of 71% shared text. Each was rebuilt with its own facts, including that state’s minimum wage and payday rules from the Department of Labor and wage data from the Bureau of Labor Statistics, which brought shared text down to a median of 21%. The same thinking explains why the UK salary site launched with 15 pages instead of the 70 on its plan.

What to do: before generating a set of similar pages, ask what each page tells the reader that the others don’t. If the honest answer is “a different number in the title,” build one good page instead. This matters even more now; we explain why in is AI content bad for SEO.

Step 7: Delete anything you can’t back up

Pre-launch audits on two sites turned up claims nobody could support. The concrete calculator carried “ACI/ASTM compliant” badges and a “field verified” stamp, and its shared FAQ had wrong bag maths: it gave 1.23 cubic yards as the with-waste figure when that’s the volume without waste (1.36 with 10% extra). The TDEE site credited its guides to a clinical reviewer who had never reviewed them, alongside “clinically proven” claims. All of it came out, and the health guides were rewritten with real citations.

AI-generated templates and site copy love this kind of filler because it sounds trustworthy. For anything touching money or health, it’s a liability. Only state what you can source.

Step 8: Ship it static and fast

All nine sites are static HTML, CSS and JavaScript: no database, no CMS, nothing to patch. Calculators run in the visitor’s browser, so a static host is enough. Four of the sites scored 100 in all four PageSpeed Insights categories on mobile after two fixes: self-hosting fonts (one icon font was 3.9 MB, cut by more than 95%) and reserving space for the calculator so the page didn’t jump when the JavaScript loaded. That jump is a Cumulative Layout Shift problem, and calculator pages are especially prone to it.

Mistakes that cost me time

• Generator scripts going stale: on two sites the page generator fell out of sync with hand edits made later. On the GPA site, re-running one old script would have overwritten all 54 university pages with the wrong branding. Pick one: edit the generator, or edit the pages, never both.
• Browsers caching the old calculator: after fixing a formula, returning visitors still ran the old JavaScript. Add a version tag to script URLs (calc.js?v=2) and change it on every fix.
• More than one tool pushing to the same repository: a second AI agent committed to two of the sites while I worked locally. Pull before you change anything.
• Misreading your own domain: one domain was baked into canonical tags with an extra letter, which is somebody else’s site. Check spelling against the registry before it goes into the code.

Three ways to build one

Route	Good for	Watch out for
No-code calculator widget builder	One calculator on an existing site, such as a quote estimator on a business page	Monthly fees, and the page belongs to the platform
Chat assistant (ChatGPT, Claude) writing a single HTML page	A first calculator, to learn how the parts fit	Copy-pasting gets messy past two or three calculators
AI coding agent (Claude Code, Cursor, Codex) building the whole site	A real calculator site with shared code, tests and many pages	You still own the maths, the sources and the review

All nine of my sites used the third route. Our AI coding tools comparison covers the agents, and vibe coding explains the wider approach and its risks.

How long it takes and what it costs

The snow-day site went from first commit to 36 live pages in four days, August 29 to September 1. The UK salary calculator’s first 15 pages took two. The GPA site, with 144 commits, has been worked on for two months, because the long tail of verified detail is where the time goes.

The running costs are small. The AI tool is the main one: Claude Code needs a paid Claude plan, from $20 a month for Pro. Static hosting is free or cheap on hosts like Vercel, Netlify and Cloudflare Pages, but read the plan terms if the site will carry ads, because some free tiers are for non-commercial use only. Add a domain, and that’s the whole bill.

Questions people ask

Can AI build a calculator website if I can’t code? Yes, but you’ll need to check the maths yourself. The AI writes working code; it doesn’t know whether the rate you gave it is current or whether a figure in a design is real.

Which calculators are worth building? The ones your keyword data shows people searching for, where you can get the formula from an official source. Money, health and construction calculators get steady searches, but they’re also where errors matter most.

Should a calculator site use WordPress or static pages? Static, if you’re building with an AI coding tool. It’s faster, cheaper and safer, and calculators run in the browser anyway. WordPress makes sense if you already run a WordPress site and need one calculator on it.

How do calculator sites make money? Usually display ads, and ad networks like Google AdSense want real, useful content around the tool, not thin pages. That’s one more reason to build fewer, better pages.