JavaScript Framework for AI Coding Agents: 2026 Cost Data

Choosing a JavaScript framework for AI coding agents is often based on claims, not data. Teams rewrite frontends because a framework is “better for agents”, usually without numbers. On October 28, 2026, Nolan Lawson published The AI cost of JavaScript frameworks, a benchmark that tests those claims. It reached 379 points on Hacker News.

This post breaks down what the benchmark measured, what the numbers show, and where its limits are. It also covers a gap that matters for any team using agents today: framework AI tooling that agents often ignore. Every figure below comes from the benchmark post, its repository, or official framework docs, and each is linked.

How was the JavaScript framework AI benchmark run?

Each framework got the same spec, tests, tools and one-line prompt, and the same app was built 5 times per framework. Per the repository README, every agent ran alone in a fresh Podman container, and the finished app was measured in another container with Lighthouse.

1. The app is a Pokédex backed by a local copy of PokeAPI, with search and filters.
2. The prompt was: implement the app in SPEC.md using the named framework, use the latest stable version, and work until npm test passes.
3. The model was Opus 5.5 at high effort, run through Claude Code.
4. Each framework’s official AI tooling (MCP servers, skills or plugins) was installed up front. Agents were never told to use it.
5. Tests check the accessibility tree, not raw DOM, and build-time data fetching is blocked so apps must call the API live.

Lighthouse ran mobile tests only, with 4x CPU throttling and “Slow 4G” networking, according to the post’s test environment notes. Angular failed to produce a measurable app twice, so some Angular metrics use 3 runs.

The setup is reproducible, which makes it useful for judging a JavaScript framework for AI coding agents on your own app. All raw results are in the benchmark results repository.

Which JavaScript framework is cheapest for AI coding agents?

Hono+htmx had the lowest median cost at $2.67 per build, followed by Astro at $2.76 and Nuxt at $2.82. Angular was highest at $4.97, per the benchmark results. Costs use Claude Code’s quoted API prices, not what the author actually paid.

JavaScript framework AI cost: full results

Median of 5 runs per framework (3 for some Angular metrics), from Nolan Lawson’s October 2026 benchmark

Framework	Cost	Time (min)	Tokens (M)	JS sent (KiB)	LCP (ms)	Lines of code
Hono+htmx	$2.67	8.6	4.26	18	978	1,370
Astro	$2.76	8.2	4.13	0	810	1,461
Nuxt	$2.82	9.0	3.85	84	1,727	1,415
Vanilla (Vite)	$2.98	10.1	5.00	7	1,667	1,492
Next.js	$3.14	10.9	4.99	142	2,090	1,539
Qwik	$3.27	10.7	5.64	40	979	1,744
TanStack Start	$3.54	10.3	7.07	118	2,028	1,697
SolidStart	$3.79	11.2	7.13	40	1,204	1,630
React Router	$3.81	12.5	7.58	115	1,729	1,564
SvelteKit	$4.28	10.8	8.53	36	1,130	1,611
Gracile+Lit	$4.65	12.1	9.04	8	956	1,717
Angular	$4.97	17.2	9.76	93	1,954	2,009

By those medians, Angular cost about 1.9 times as much as Hono+htmx. If cost is your main criterion for a JavaScript framework for AI coding agents, that gap is real. But variance was large. The author points out that React Router’s cheapest run, $2.82, was cheaper than Hono+htmx’s most expensive, $3.19.

Three frameworks were clearly more expensive: SvelteKit, Gracile+Lit and Angular. My recommendation is to read the ranges in the source, not just the medians, before drawing conclusions about the middle of the table.

Why do some JavaScript frameworks cost AI agents more tokens?

The benchmark points to two causes: frameworks newer than the model’s training data, and larger codebases. Both show up directly in the agent transcripts.

For SvelteKit, the author reports agents read the SvelteKit v3 migration guide in every run, likely because SvelteKit 3 was too new for Opus 5.5’s training data. For Gracile, agents did not know the framework well. They cloned its repository or read its compiled source from node_modules. For Angular, the author links the cost to total code size.

Token use tracked cost closely. Nuxt used the fewest tokens at a 3.85 million median, and Angular the most at 9.76 million, per the token chart. Those counts include cache reads, uncached input and output, as reported by Claude Code.

The practical lesson: a framework release that just shipped can cost more with agents until models catch up. Factor that in before an upgrade sprint.

Do framework MCP servers and skills actually help AI agents?

In this benchmark, agents often did not use them. The tools were installed, but agents were never told to use them, and usage was recorded from the transcripts.

• Nuxt: the Nuxt MCP was never used by the agents.
• Next.js: agents read the skill file in 1 of 5 runs and AGENTS.md in 2 of 5 runs.
• TanStack Start: agents found its skill files in node_modules in 2 of 5 runs.
• SvelteKit: the MCP was used in 5 of 5 runs, yet SvelteKit was still among the costliest.
• Hono and React Router: the skill tool was used in 5 of 5 runs.

The README explains one cause for Next.js. Agents usually wrote package.json by hand instead of running a generator, and Next.js writes its AGENTS.md when next dev detects a coding agent. The author writes that he has “a strong suspicion” the current MCPs and skills may be doing more harm than good, and labels it as a suspicion.

Framework vendors report different results in their own tests. The Next.js AI agents guide says Next.js 16.2 and later bundle version-matched docs at node_modules/next/dist/docs/. It says 16.3 and later write managed AGENTS.md instructions by default. Vercel’s own research reports a 100% pass rate with bundled docs, against up to 79% for skill-based approaches, and publishes Next.js agent evals.

Both can be true: the docs help when read. Whichever JavaScript framework for AI coding agents you use, the tooling only works if the agent opens it. My recommendation is to tell your agent explicitly where your framework’s docs or AGENTS.md live, rather than assuming it will find them.

Does the framework affect performance of AI-built apps?

For this app, Lighthouse performance and accessibility scores barely differed. Every framework scored 97 to 100 on performance and 100 on accessibility. Only Vanilla had layout shift, with a CLS of 0.111, per the quality results.

Cost is only half the picture when you compare a JavaScript framework for AI coding agents, because users still download what ships. JavaScript size separated them clearly. Astro sent a median of 0 KiB of JavaScript, Hono+htmx 18 KiB, and Next.js 142 KiB, the most of the 12. Largest Contentful Paint broadly favoured multi-page apps: Astro’s median LCP was 810 ms, Next.js’s 2,090 ms. Qwik was the exception the author notes: technically a single-page app, it scored among the multi-page frameworks.

The author attributes the wide Next.js LCP range to image loading. One run avoided lazy-loading images; the other four did not. Our JavaScript performance checklist covers lazy-loading and other fixes that apply here.

A surprise: the “Vanilla” agent was free to choose its architecture with Vite, yet built a single-page app all 5 times.

What does lines of code mean for AI maintenance cost?

More code means more tokens on every future edit, so code size is a running cost. Hono+htmx produced a median of 1,370 non-blank lines, against 2,009 for Angular, per the maintainability chart. That is about 68% of the code for roughly the same app.

The author quotes Rich Harris: frameworks “are tools for organizing your mind.” In agent-driven work, the author argues, code size affects “the literal cost to maintain a codebase over time.”

If you work outside JavaScript, the author’s framing helps: he picked Hono+htmx as a JavaScript alternative to Rails or Django. If your team builds server-rendered apps in Django or PHP, I’d treat that row as the closest comparison, while remembering it is still JavaScript.

What are the limits of this JavaScript framework for AI coding agents benchmark?

The author lists the main limits himself. Read them before picking a JavaScript framework for AI coding agents from this data.

• One app type. A content-heavy Pokédex, closer to Wikipedia than to Figma or Gmail.
• Lighthouse favours multi-page apps. The README notes only page loads are measured, not interactions where single-page apps can win back ground.
• One model and agent. Opus 5.5 at high effort in Claude Code; other agents may differ.
• High variance. The author calls the results “very stochastic”; the README says one iteration is an anecdote.
• Unpinned versions. Each framework used its latest release at run time, so results are a dated snapshot.

The author says he would be “sorely disappointed” if this were the last word, and invites forks. If you run React dashboards or complex interactive apps, run the benchmark against an app like yours before switching stacks.

• Nolan Lawson’s October 2026 benchmark built the same Pokédex app 5 times in each of 12 JavaScript frameworks using Claude Code with Opus 5.5.
• Median build cost ranged from $2.67 with Hono+htmx to $4.97 with Angular, using Claude Code’s quoted API prices.
• Agents read the SvelteKit v3 migration guide in every run because the release was likely newer than the model’s training data, raising cost.
• Framework AI tooling was often unused: the Nuxt MCP was never used, and Next.js agents read the skill file in 1 of 5 runs.
• Astro sent a median of 0 KiB of JavaScript and Next.js 142 KiB, while all 12 frameworks scored 97–100 on Lighthouse performance.
• Hono+htmx needed a median of 1,370 lines of code versus 2,009 for Angular, which affects token cost on every future edit.

Frequently Asked Questions

Which JavaScript framework is best for AI coding agents?

There is no single winner yet. In Nolan Lawson's October 2026 benchmark of 12 frameworks, Hono+htmx, Astro and Nuxt had the lowest median build cost for a content-heavy app, and Angular, Gracile+Lit and SvelteKit the highest. The benchmark used one app and one model, so treat it as evidence for that app type, not a universal ranking.

Does the JavaScript framework change how much an AI agent costs?

In that benchmark, yes. The median cost to build the same app ranged from $2.67 with Hono+htmx to $4.97 with Angular, using Claude Code's API prices. Token use ranged from 3.85 million with Nuxt to 9.76 million with Angular. The author notes results varied a lot between runs, so overlapping ranges are common.

Is Next.js a good choice for AI coding agents?

Next.js landed mid-table on build cost at a $3.14 median, and shipped the most JavaScript of the 12 frameworks at 142 KiB. Separately, Next.js 16.2 and later bundle version-matched docs in node_modules, and 16.3 and later write AGENTS.md instructions by default. Vercel reports bundled docs scored a 100% pass rate in its own agent evals.

Do MCP servers and skills help AI agents use a framework?

Only if the agent uses them, and in the benchmark they often did not. The Nuxt MCP was never used, Next.js agents read the skill file in 1 of 5 runs, and TanStack Start agents found its skill files in 2 of 5 runs. The author suspects the current MCPs and skills may be doing more harm than good, which he labels as a suspicion.

Why did SvelteKit cost more for AI agents to build?

The benchmark author reports that agents read the SvelteKit v3 migration guide in every run, likely because SvelteKit 3 was too new to be in the model's training data. That extra reading added tokens. Gracile was also costly because agents did not know it well and read its source or cloned its repository.

The real contribution of this benchmark is the method, not the ranking. It shows you can choose a JavaScript framework for AI coding agents with evidence: cost, tokens, code size and user-facing performance, on a spec you control. The numbers favour lean, server-rendered stacks for content sites. They also expose a gap between installed AI tooling and what agents actually read. If you’ve measured your own stack with agents, share the numbers in the comments below. You can also subscribe to NexGismo for more evidence-based posts on JavaScript and AI tooling, or read our Next.js 16 auth security guide and Node.js 24 LTS upgrade guide.

Sources

• Nolan Lawson — The AI cost of JavaScript frameworks (Oct 28, 2026)
• GitHub — nolanlawson/agent-framework-benchmark (README and method)
• GitHub — nolanlawson/agent-framework-benchmark-results (raw results)
• Next.js — How Next.js supports AI coding agents
• Vercel — AGENTS.md outperforms skills in our agent evals
• Next.js — Agent evals
• Svelte — Migrating to SvelteKit 3
• Hacker News — discussion thread