DEV Community

Cover image for I built a zero-dependency web compiler in Rust for LLM coding agents: ~34 ms builds
Chris
Chris

Posted on Edited on

I built a zero-dependency web compiler in Rust for LLM coding agents: ~34 ms builds

#webdev #javascript #ai #rust

BRAINLLM — The web compiler for LLMs

If an LLM builds your frontend, give it a language built for LLMs.

Your agent came to build a button. Your stack handed it a committee: a framework, a bundler, a transpiler, a minifier and a dozen config files. Every one of them is a decision the model has to reconstruct, and context it spends on tooling instead of on your product.

I built BRAINLLM to shorten that path: a compact component language (.brain), one canonical spec and a native compiler written in Rust that tells the agent exactly how to fix its mistakes.

  • 🦀 One native binary: parser, checker, codegen, bundler and minifier. No Vite, webpack, esbuild or Babel in the build pipeline.
  • ⚡ Warm production builds in ~34 ms on our open benchmark.
  • 🤖 Agent-ready diagnostics with exact fix edits, plus CLI and MCP tools.
  • 🍦 Zero runtime dependencies. The output is vanilla JavaScript and CSS. A new app's package.json has no dependencies at all, just the compiler as its only devDependency.

Try it in one command (Node 22+, no Rust install, no npm account):

npm create @christianirack/brainll@latest my-app
Enter fullscreen mode Exit fullscreen mode

The code your agent handles

Components, state and styling live together in .brain files:

<meta props="start:num=0 label:str='Clicks'">

<script>
  let n = sig(start)
  let dbl = drv(() => n * 2)
</script>

<button on:click={n++}>{label}: {n} × 2 = {dbl}</button>
Enter fullscreen mode Exit fullscreen mode

The compiler handles signal reads and writes, derived values update when their inputs change, and styles are scoped to the component. The output is direct-DOM JavaScript: signals update only the affected nodes.

The agent loop

An agent reads the BRAINLLM contract, writes a component and uses compiler feedback to validate the app

  1. Understand. brain spec serves the implemented language contract. brain map --json maps the project.
  2. Build & correct. The agent writes components with brain add. brain check --json returns diagnostics with the file, location, rule and a proposed fix. Mechanical fixes carry exact replacement edits, and brain fix applies them.
  3. Verify & ship. brain doctor runs checks, tests and diagnostics; brain build compiles production output. Chrome screenshots, accessibility outlines and visual baselines give the agent eyes on the UI it built.

Everything is also exposed over stdio with brain mcp, and brain guide <topic> serves task playbooks (views, data, forms, server, SEO, accessibility, tests, i18n, performance).

Batteries included, zero libraries

A form shouldn't need an ecosystem. Everything below ships in the same toolchain, and the browser runtime has no third-party dependencies:

Built in What you get
Components and reactive state .brain files with markup, BrainScript and scoped styles; sig, drv and fx
Routes and layouts Views, layouts, loaders and guards
Forms and data Form validation, HTTP resources and server contracts
Bundler and minifier Written in Rust, inside the same binary. No Vite, webpack, esbuild or Babel
Diagnostics and repairs JSON diagnostics plus brain fix for mechanical edits
Browser checks Chrome screenshots, accessibility outlines and visual baselines
Size budgets Per-route JS, CSS and HTML budgets that fail oversized builds
Agent tooling Project map, task playbooks (brain guide), CLI and MCP

Show me the numbers

Seven stacks, the same dashboard workflow, 140 measured builds. All seven passed the same nine Chrome interaction checks.

Warm production build Median, 20 runs
BRAINLLM 34.32 ms
React + Vite 155.49 ms
Vue + Vite 211.76 ms
Svelte + Vite 243.53 ms
Astro + React island 504.78 ms
Angular CLI 1,262.50 ms
React + webpack 1,334.54 ms

Apple M5, 24 GiB RAM, two warmups per stack. These are fixture results, not a universal speed claim: output strategies differ. Don't trust the headline, run the benchmark. The method, versions, raw timings and the script to reproduce it are in the repo.

Let your LLM make it better

An LLM turns an observed problem into an isolated fix, runs validation and submits a contribution for human review

Every run is a chance to spot a compiler bug, an expensive step or a confusing diagnostic. The agent can turn that finding into a tested proposal and push it to a review branch. Maintainers decide what merges. You stay in control.

Try it

Requires Node 22+. No Rust installation needed.

npm create @christianirack/brainll@latest my-app
cd my-app
npm run dev        # brain run
npx brain spec     # the language contract your agent reads
npm run build      # production build
Enter fullscreen mode Exit fullscreen mode

Or paste the starter brief from the README into your coding agent and describe the app you want.

I'd love feedback on the language design and on the diagnostics format. What would your agent need from a frontend toolchain?

Top comments (0)