Annotated HTML Builder
Author HTML. Convert to React. Proven by the compiler.
Annotate your HTML with a lightweight data-* contract, hit Convert, and a Claude Agent SDK loop writes production TypeScript components — then runs tsc --noEmit to prove they compile.
How it works
Four stages, zero guesswork, one clean typecheck.
01
AnnotateAuthor
Write HTML with data-component, data-prop, data-state, and data-handler annotations. The AI assistant helps you get the contract right.
02
GateValidate
A fast client-side gate checks that every root element has a data-component and at least one annotation before anything is sent to the agent.
03
Agent SDKAgent Convert
The Claude Agent SDK drives a query() loop in your project sandbox. The agent reads your primitives, writes .tsx files, and runs tsc --noEmit itself.
04
TypecheckVerify
After the agent self-reports success, the server runs an independent tsc --noEmit check. Both must pass before the result is flagged clean.
Architecture
Why the Agent SDK?
Why the Agent SDK?
Unlike a bare Messages API call, the Agent SDK's query() loop runs inside a real project shell. The agent can read existing source files, write new ones, and invoke the TypeScript compiler — then read the errors and fix them before reporting back. The pipeline doesn't declare victory until both the agent and an independent server-side check agree.
Agent reads your existing primitives before writing any imports
One .tsx file per data-component annotation, matching your conventions
Agent runs npx tsc --noEmit and reads the output directly
Repairs TypeScript errors up to a configurable budget
Features
Annotation Contract
Ten data-* attributes map HTML semantics directly to React props, state, handlers, repeat blocks, and slots — no guesswork for the agent.
Self-Verifying Loop
The agent runs the compiler and fixes its own errors, up to a configurable repair budget. You see every tool call in the SSE stream.
SSE Progress
Every agent event — tool calls, typecheck results, cost — streams back to the browser in real time via Server-Sent Events.
Reviewed via Pull Request
A verified run is pushed to an isolated claude/ahb-* branch and opened as a pull request against the default branch — never straight to production. You review the diff and Vercel preview before merging.
Start building
Open the builder, paste your annotated HTML, and watch the agent write — and prove — your React components.