One self-contained file
Opens from file://
Zero network requests by default
Same spec, same bytes
Nonce-locked styles and script
Embedded OFL fonts
Light and dark
Reduced-motion aware
Keyboard first

Why a compiler instead of hand-written HTML

An agent that writes markup pays for layout, CSS and script on every page, and gets a slightly different page every run. With AK Render the agent writes only what the page says. Presentation, accessibility and security are the compiler's job.

The agent hand-writes HTML

Every page re-spends output tokens on layout, CSS and script
Two runs of the same prompt produce two different files
CDN fonts, chart libraries and remote images break offline
Dark mode, focus order and reduced motion depend on the prompt

The agent writes a Page Spec

The explain gallery page is a 2.6 kB spec; the compiler emits the other 124.4 kB
The same spec and compiler version produce identical bytes and hash
One file that opens from disk, with fonts embedded and the network denied
Keyboard, reduced motion, print and the dark scheme come from the compiler

The agent loop

Find
ak-render catalog lists all 83 block types and every action in 7,228 bytes. search-catalog ranks block types by intent words, and catalog --category lists one group.
Describe
ak-render describe <type...> --compact returns one line per prop for several blocks at once. The full hero contract with --json is 2,612 bytes.
Validate
ak-render validate <spec> --json returns diagnostics with a stable code and the JSON path to fix. Exit code 1 means fix and retry.
Compile
ak-render <spec> --out page.html writes the file and prints bytes, hash and runtime features. A spec path of - reads from stdin.

~/plans

# discover once
ak-render catalog | head -1
Page Spec v1 — 83 blocks
ak-render describe hero --json | wc -c
2612
# a typo in the spec comes back with the path to fix
ak-render validate plan.yaml
error: $.blocks[0].title: required value is missing
error: $.blocks[0].titl: unknown property "titl" for this block
ak-render validate plan.yaml
ok: plan.yaml
  blocks: 8 (nodes: 9)
ak-render plan.yaml --out plan.html
wrote 111479 bytes to plan.html (3 runtime features, hash 12524sw1xvd176)
# same spec from stdin, same bytes
cat plan.yaml | ak-render - --out again.html
wrote 111479 bytes to again.html (3 runtime features, hash 12524sw1xvd176)
cmp plan.html again.html && echo identical
identical

What it saves your agent

A hand-written page costs an agent three times. It reads presentation guidance, writes markup, CSS and script, and then carries the finished file in its context. With AK Render it reads a small catalog, writes a short spec, and gets back a one-line summary.

Presentation context
−64%
Benchmarked: 64–68%. 23.7k–26.6k tokens of legacy guidance against 7.9k–8.5k for contract, skill, catalog and blocks
Typical task, estimated
−54%
38.9k → 17.9k tokens with full contracts, 13.1k (−66%) with compact ones; 4 characters per token
Output on real pages
−52%
Median projected saving over 12 HTML pages agents wrote in real projects
Compiled page in context
0 bytes
The HTML goes to disk; the agent reads a summary of under 800 characters

Estimated tokens per page task, in thousands

Hand-written HTML: Guidance read 33.7, Written 13.9, Returned 0. AK Render, full contracts: Guidance read 9.1, Written 7.2, Returned 0.1. AK Render, compact contracts: Guidance read 4.5, Written 7.2, Returned 0.1

Chart data table

Estimated tokens per page task, in thousands
Series	Guidance read	Written	Returned
Hand-written HTML	33.7	13.9	0
AK Render, full contracts	9.1	7.2	0.1
AK Render, compact contracts	4.5	7.2	0.1

Where the HTML goes

Agent
Reads the catalog once and the contracts of the blocks it uses.
Page Spec
Writes only what the page says, as YAML or JSON.
Compiler
Writes the HTML to disk. The page never passes through the model's context.

Where the savings come from

Context
The 7.2 kB catalog and per-block contracts replace pages of HTML style guidance.
Generation
The agent stops writing CSS, script and markup. The median legacy page was 26% visible text.
Validation
A failed check returns a stable code and the JSON path to fix, not a broken page to inspect.
Context shielding
A compiled page is 111–246 kB. The summary the agent reads back is under 800 characters.
Determinism
The same spec compiles to the same bytes, so a rerun gives the agent nothing new to review.
Edits
A change is a line in the spec. The agent does not regenerate or re-read the page to fix a label.

Everything a page needs, as data

Chart
Charts that read at a glance
Sixteen kinds, from bar and line to scatter, heatmap, waterfall and treemap, bound to shared datasets, each with a data table behind it.
83
Block types in the catalog
From hero and bento to data tables, kanban boards and pricing, including the page root.
11
Built-in theme presets
Each with a light and a dark token set, an embedded display face and its own component recipes.
Diff
Diffs with intent
Before and after, side by side, with the risk spelled out.
Plan
Plans that track themselves
Milestones, owners and status on one timeline.
Diagram
Diagrams without an engine
Structured flows render as accessible markup.
Theme
Charts follow the scheme
Every chart stop recolors from theme tokens in dark mode.
Interaction
12
Declarative actions
Copy, toggle, tabs, filter, theme and download are bound in the spec. No page-authored script, no inline handler.

The YAML behind each visual

Each picture below is an element crop of a compiled gallery page. Next to it is the Page Spec block that produced it, copied from the fixture in this repository. The agent writes the right-hand side; the compiler draws the left.

The kpi block from the showcase gallery page: four metric cards with deltas and sparklines — KPI cards with a verdict and a sparkline

fixtures/pages/showcase.yaml, first two of four itemsyaml

- type: kpi
  items:
    - label: Test cases
      value: '363'
      delta: '+21 this round'
      trend: up
      good: up
      series: [15, 198, 278, 305, 308, 313, 342, 363]
      caption: Declared it() and test() cases across the git history
    - label: Fixture pages
      value: '11'
      delta: '+1'
      trend: up
      good: up
      series: [7, 8, 9, 9, 10, 10, 11]
      caption: Pages in fixtures/pages at each milestone

The terminal block from the showcase gallery page in dark mode, a typed validate and compile session — A typed terminal session with a copy control

fixtures/pages/showcase.yamlyaml

- type: terminal
  title: ~/project
  lines:
    - kind: comment
      text: '# validate the spec, then compile it'
    - kind: command
      text: ak-render validate explain.yaml
    - kind: success
      text: 'ok: explain.yaml'
    - kind: output
      text: '  blocks: 8 (nodes: 9)'
    - kind: command
      text: ak-render explain.yaml --out explain.html
    - kind: output
      text: wrote 124500 bytes to explain.html (4 runtime features, hash 0w5t9z60ka9un7)
    - kind: command
      text: ak-render themes
    - kind: output
      text: blueprint  editorial  paper-ink  swiss-clean  terminal-mono  warm-signal

The checklist block from the showcase gallery page: four of five release gates done, with a progress meter — A checklist that counts itself

fixtures/pages/showcase.yamlyaml

- type: checklist
  title: Release gates for this page
  items:
    - text: Unit tests, lint, typecheck, and build pass
      done: true
    - text: Theme snapshots and the gallery regenerate byte-identical
      done: true
    - text: Browser tests pass, including the before/after slider
      done: true
    - text: No horizontal overflow at 375 and 1440 pixels
      done: true
    - text: Visual regression baselines for the showcase blocks
      done: false

The file-tree block from the showcase gallery page in dark mode, with added and modified files — A file tree built from flat paths

fixtures/pages/showcase.yaml, first four of eight itemsyaml

- type: file-tree
  title: What this round touched
  items:
    - path: src/render/font-faces.ts
      status: added
      note: inlines the bundled faces
    - path: src/render/embedded-fonts.generated.ts
      status: added
    - path: src/render/surface-styles.ts
      status: added
      note: the night band
    - path: assets/fonts/geist/OFL.txt
      status: added

The timeline block from the plan gallery page with three weekly milestones — A timeline from three list items

fixtures/pages/plan.yamlyaml

- type: timeline
  title: Schedule
  items:
    - when: Week 1
      title: Schema freeze
      text: Page Spec v1 accepted with migration policy.
    - when: Week 2
      title: Compiler and themes
      text: Deterministic output under every built-in preset.
    - when: Week 3
      title: Runtime
      text: Browser-tested interactions across input methods.

The comparison block from the diff gallery page in dark mode, before and after side by side — A before and after comparison

fixtures/pages/diff.yamlyaml

- type: comparison
  title: Escaping strategy
  left:
    label: Before
    items:
      - Escape applied while parsing
      - Context assumed safe after validation
      - Attribute values escaped once
  right:
    label: After
    items:
      - Escape applied at emission per context
      - URL schemes allowlisted per action
      - Embedded JSON serialized for script context

Eleven presets, light and dark

A theme is typed data, never CSS. Pick a preset, or extend one with validated tokens and component recipes; every preset ships both schemes and its fonts inside the file.

blueprint
Technical drawing with cool slate surfaces and monospace labels. Set in Geist.
editorial
Serif headlines, generous whitespace, deep navy with gold. Set in Fraunces.
paper-ink
Warm cream paper with terracotta and sage. Set in Bricolage Grotesque.
terminal-mono
Near-black terminal with green and amber, monospace throughout. Set in JetBrains Mono.
swiss-clean
Neutral high-contrast grid with one red accent. Set in Inter Tight.
warm-signal
Warm neutral surfaces signalling with amber and emerald. Set in Plus Jakarta Sans.
data-console
Dense operations console with a cyan accent, ledger tables and quiet charts. Set in Geist and JetBrains Mono.
executive-report
White and ink with a navy accent, headline metrics and outlined cards. Set in Inter Tight.
product-studio
Soft neutral surfaces, a violet accent, framed media and raised cards. Set in Plus Jakarta Sans.
research-notebook
Paper with an oxblood accent, serif reading type, ledger tables and outlined notes. Set in Fraunces.
crimson-press
Cream paper, black ink and a crimson accent, with square ledger rules. Set in Fraunces, Inter Tight and JetBrains Mono.

The explain gallery page in light mode — Drag the divider, or focus it and use the arrow keys. Both images are screenshots of the same compiled file.

The explain gallery page in dark mode — Drag the divider, or focus it and use the arrow keys. Both images are screenshots of the same compiled file.

Use it in three steps

Write a spec
Describe the page in YAML or JSON. Blocks carry meaning, such as hero, steps, timeline, chart or comparison; there is no field for HTML, CSS or script.
Validate
Diagnostics name the JSON path to fix, so an agent repairs a spec in one more turn instead of rereading a page.
Compile and open
One HTML file that opens from disk, offline, in light and dark, and reads the same in print and in a screenshot.

plan.yamlyaml

version: 1
meta:
  title: Migration plan
theme:
  preset: editorial
blocks:
  - type: hero
    eyebrow: Plan
    title: Migration plan
    description: Move the public API to the new gateway without downtime.
  - type: section
    title: Steps
    blocks:
      - type: steps
        items:
          - title: Mirror traffic
            text: Send a copy of production requests to the new gateway.
          - title: Switch reads
            text: Route read endpoints once error rates match.
  - type: callout
    tone: info
    title: Rollback
    text: Point DNS back to the old gateway; no data migrates.

Validate, compile, openbash

npx -y @bestagentkits/render validate plan.yaml
npx -y @bestagentkits/render plan.yaml --out plan.html
open plan.html

Give your agent the skill

The ak-render skill teaches an agent the whole loop, from catalog to compiled file. Install it with the skills CLI for any agent, or as a plugin that also registers the MCP server.

Any agent, with the skills CLIbash

npx skills add bestagentkits/ak-render

Claude Code pluginbash

claude plugin marketplace add bestagentkits/ak-render
claude plugin install ak-render@ak-render

Codex and ChatGPT pluginbash

codex plugin marketplace add bestagentkits/ak-render
codex plugin add ak-render@ak-render

ak-render mcp serves the same loop over stdio as MCP tools: catalog, search-catalog, describe, recipes, recipe, validate, render and themes. The render tool writes the file and returns only a summary, so the page never enters the context.

MCP client configurationjson

{
  "mcpServers": {
    "ak-render": {
      "command": "npx",
      "args": ["-y", "@bestagentkits/render", "mcp"]
    }
  }
}

Connect the hosted MCP server

https://render.agentkit.best/mcp serves the same tools over Streamable HTTP, so an agent that cannot run Node still compiles pages. render stores the page and returns a link instead of writing a file. Add only the URL and the client signs you in to agentkit.best with OAuth; the sign-in lasts up to a year while the client keeps using it.

Pick your AI tool

Claude

claude.ai and Claude Desktop: open Settings → Connectors → Add custom connector. Name it AK Render, paste the URL, then choose Connect and sign in at agentkit.best.

Remote MCP server URLtext

https://render.agentkit.best/mcp

ChatGPT

Open Settings → Apps & Connectors, turn on Developer mode under Advanced settings, then choose Create. Name it AK Render, paste the URL, pick OAuth as the authentication and sign in at agentkit.best.

MCP server URLtext

https://render.agentkit.best/mcp

Claude Code

Add the serverbash

claude mcp add --transport http ak-render https://render.agentkit.best/mcp

Then run /mcp inside Claude Code, select ak-render and choose Authenticate.

Cursor

~/.cursor/mcp.jsonjson

{
  "mcpServers": {
    "ak-render": { "url": "https://render.agentkit.best/mcp" }
  }
}

Cursor lists the server under Settings → MCP; choose its login prompt to sign in at agentkit.best.

VS Code

.vscode/mcp.jsonjson

{
  "servers": {
    "ak-render": { "type": "http", "url": "https://render.agentkit.best/mcp" }
  }
}

Start the server from mcp.json or the MCP view, and allow the sign-in when VS Code asks.

Codex

Add the server and sign inbash

codex mcp add ak-render --url https://render.agentkit.best/mcp
codex mcp login ak-render

API key

For CI, scripts and clients without OAuth, create a personal key at agentkit.best/account/api-keys, export it as AGENTKIT_TOKEN and send it as a bearer. A key lasts until you revoke it or until the expiry you choose.

Any client that takes headersjson

{
  "mcpServers": {
    "ak-render": {
      "type": "http",
      "url": "https://render.agentkit.best/mcp",
      "headers": { "Authorization": "Bearer ${AGENTKIT_TOKEN}" }
    }
  }
}

Disconnect a client at any time under Account → Connected apps on agentkit.best. Revoke an API key on the same account's API Keys page.

Made by AgentKit, open to everyone

AK Render is built and hosted by AgentKit, a foundation of agents, skills and workflows for Claude Code, Codex, Cursor and other coding agents. The compiler, the CLI and the local MCP server are MIT-licensed and need no account; the hosted endpoint is the part reserved for customers.

AgentKit customers
Owners of AgentKit Engineer, AgentKit Marketing or the Bundle connect to render.agentkit.best/mcp with OAuth or an API key, with stored pages, share links and PNG or PDF export included.
Run it locally
npx @bestagentkits/render mcp serves every tool over stdio from your machine. It writes the page to disk, makes no network request and needs no account.
Deploy your own
apps/cloud in the GitHub repo is the same Cloudflare Worker that runs here. Its README covers the R2 bucket, rate limits, routes and deploy commands; point ENTITLEMENTS_URL at your own service that answers its token-check contract, and turn on OAuth only if you run an authorization server.

Demo pages, compiled from fixtures

Every page in the gallery is a fixture spec in fixtures/pages compiled by the current build. Open one, then view its source to see a single HTML file with no requests.

(open full size)
Every block type on one page
(open full size)
Explain: a concept walk-through
(open full size)
Dashboard: charts and metrics
(open full size)
Plan: timeline, diagram, risks
(open full size)
Diff: changes with intent
(open full size)
Showcase: the presentation blocks
(open full size)
Brainstorm: options and trade-offs
(open full size)
Recap, in dark mode
(open full size)
Interactive: tabs, filters, state
(open full size)
Media: video, images, before and after
(open full size)
Theme showcase: one spec under every preset

Measured in this repository

Catalog the agent reads once
7.2 kB
ak-render catalog prints 7,228 bytes
Spec the agent writes
2.6 kB
explain.yaml; the compiled page is 127.0 kB
Network requests on open
0
explain.html from file:// in Chromium
Runtime dependencies
1
yaml, for reading specs

A screen recording of compiled gallery pages: tabs, the theme toggle and chart hovers. Nothing in it is a mockup.

Open source · MIT

Write the spec. Ship the page.

This page is a Page Spec compiled by AK Render, and so is every page in the gallery.

Star on GitHub Install from npm Browse the gallery

Your agent writes YAML. The compiler ships HTML.