AK Render: stop making AI write hundreds of lines of HTML just to present a report

Article 16 in the AgentKit v3 onboarding series. About an 8 minute read. Article 10 has a short intro; this one is the how-to.

Tell an AI "make me a report" and it sweats away writing HTML, CSS, JavaScript, responsive layout, dark mode, charts... a hundred KB or so. Next time you ask for a similar report, it writes almost everything from scratch again. Using an expensive model to do a job a compiler does better does not sound reasonable.

AK Render redistributes the responsibility: the AI decides the content, the compiler decides the presentation. The AI only writes a Page Spec (YAML or JSON) describing what the page should contain. The compiler compiles it into complete HTML.

1/ What it is, in three lines

• Input: a Page Spec, with no CSS and no JavaScript.

• Output: a self-contained HTML file, opens directly via file://, fonts embedded, no network requests by default.

• Same spec, same compiler version, same config gives byte-identical HTML (deterministic), so you can verify it with a hash.

At the time I checked (08/10/2026), the catalog had 83 block types in 8 groups, 16 chart types, 11 themes with light/dark, and 10 starter templates (dashboard, benchmark report, incident report, implementation plan, decision memo...). Article 10 says "about 90 blocks"; that number may have changed with releases, so run catalog to get the current count.

Interactions are declared with a limited set of actions. You cannot stuff JavaScript, CSS or raw HTML into the spec. That is a deliberate trade-off: less freedom, in exchange for predictable and safe results when handed to an agent.

2/ When to use it, when not to

A good fit: reports, dashboards, implementation plans, incident reports, comparisons, handoff documents, anything that is structured information an agent generates over and over.

Not a good fit: apps with complex business logic, backend integration, realtime sync, or pixel-level custom design. AK Render does not replace React or Next.js.

Also don't expect magical savings: across the 12 pages I analyzed, there was one case where the Page Spec was estimated to be 35% larger than hand-written. For pages that are all plain text, the compiler has nothing to help with.

3/ Using it, step by step (CLI)

You need Node.js 20.11 or higher. Every command below appears in the original post and in article 10.

Install the skill for your coding agent:

npx skills add bestagentkits/ak-render

Browse the block catalog:

npx -y @bestagentkits/render catalog

Write a spec in report.yaml. A shortened example:

version: 1
meta:
  title: "Báo cáo tiến độ"
theme:
  preset: editorial
blocks:
  - type: hero
    title: "Chuyển đổi AI trong doanh nghiệp"
  - type: callout
    tone: info
    title: "Lưu ý"
    text: "Số liệu trong ví dụ chỉ để minh hoạ."

Validate, then compile:

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

The standard flow for an agent: find a fitting block, read its contract, write the spec, validate, render. In my trial run through MCP, a Vietnamese spec validated with no errors and produced about 125 KB of HTML with the editorial theme, compiler 0.3.0. That byte count is a single run, not a benchmark.

4/ Using it via MCP, and via flags in AgentKit skills

Local MCP (stdio), no AgentKit account needed, no spec sent to any service:

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

The MCP set has 8 tools: catalog, search-catalog, describe, recipes, recipe, themes, validate, render. Locally, render writes the file to the out path and returns only a summary (bytes, hash, theme, warnings). Don't make the agent read the whole HTML back into context, that defeats the purpose.

Remote MCP (Streamable HTTP): https://render.agentkit.best/mcp, for ChatGPT and clients that cannot install Node. The hosted endpoint checks OAuth or an AgentKit API key. If you use an API key, put it in an environment variable (for example ${AGENTKIT_TOKEN}), and never write the real key into config that gets committed to a repo. Artifact links usually expire after about 1 hour; render with share: true creates a 30-day link under the current config. The config may change.

Inside AgentKit: there is no ak render command. The ak-brainstorm, ak-explain, ak-preview, ak-plan skills have an --ak-render flag (which implicitly turns on --html), for example:

/ak-explain payments module architecture --ak-render

This flag is also chosen automatically if the project has an .ak-render/ folder.

5/ Status and how much to trust the numbers

The line "saves 60% tokens" I once posted on X is shorthand for the estimate above, not a number measured on an API invoice. Treat it as early evidence, not a conclusion.

Wrap-up

1/ The agent writes a short Page Spec, the compiler outputs self-contained HTML that runs offline, with deterministic results.

2/ A good fit for reports and dashboards, not a replacement for custom frontends.

3/ Use it through npx @bestagentkits/render, local MCP, or the --ak-render flag.

4/ The token savings are an estimate. Re-measure on your own tasks before believing it.

Sources

• AK Render: Stop making AI write hundreds of lines of HTML just to present a report! (08/10/2026)

• render.agentkit.best, GitHub bestagentkits/ak-render

• The --ak-render flag in the SKILL.md of ak-brainstorm, ak-explain, ak-preview, ak-plan