ak-render plugin
A page compiler: the agent writes a short YAML spec and the compiler builds an offline self-contained HTML file.
- 53 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The compiler runs locally and offline, and a script cannot be embedded in the finished page.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/ak-renderDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The compiler runs locally and offline, and a script cannot be embedded in the finished page.
This is third-party code. Review the repository files before installing.
What it does
ak-render takes a short Page Spec in YAML or JSON from an agent and compiles it into one deterministic interactive HTML file. The agent describes meaning and composition, while the compiler owns markup, styles, interaction, accessibility, responsive layout, themes, fonts and security policy. Tokens go to content, not to layout. The file opens from disk and makes no network requests, with fonts embedded. A spec cannot carry raw HTML, CSS or JavaScript, so a page stays inside the design system. The `validate`, `describe`, `recipes` and `compose` commands check a spec, show block contracts and give ready starters: a dashboard, a report, an architecture review, an incident report, an implementation plan. A plugin for Claude Code and Codex registers an MCP server.
Who it is for. Developers and analysts whose agent should produce tidy report pages, plans and dashboards as a single file.
Good fit when
- An agent lays out a migration plan as a page with steps and a rollback block.
- A report with charts and tables is sent as one HTML file that opens without internet.
- An incident write up is built from a ready recipe with your data.
- The result must be reproduced byte for byte from the same spec.
Not a fit when
- The page needs arbitrary HTML, CSS or JavaScript.
- The page must call external APIs or load data from the network.
- Node.js 20.11 cannot be installed.
Example request
Build a migration plan page from plan.yaml and check the spec with validate before compiling.Limitations
You need Node.js 20.11 or newer. A spec carries no arbitrary code, so nonstandard layout and scripts cannot be added to the page. The Claude plugin works in Claude Code sessions on your computer, while a remote MCP server is provided for the claude.ai chat. The compiler gives the same file for one version and one spec, and output may change after a version update. Open and review finished pages before sending them out.
How to disable. Remove the plugin through the Claude Code or Codex plugin commands, and the package if you installed it globally with npm.
FAQ
How do I build a page?
Write `plan.yaml`, check it with `npx -y @bestagentkits/render validate plan.yaml` and compile with `npx -y @bestagentkits/render plan.yaml --out plan.html`.
How do I install the plugin in Claude Code?
With `claude plugin marketplace add bestagentkits/ak-render` and `claude plugin install ak-render@ak-render`. The plugin also registers the MCP server.
What are recipes?
Ready starter specs for common pages. `ak-render recipes` lists them and `ak-render recipe dashboard > page.yaml` prints a dashboard starter.
How do I find out which blocks exist?
With `ak-render search-catalog` and keywords, and `ak-render describe` for a specific block contract.
Do I need an account or API key?
No. It works locally with no account, server or API key.
Discussion
No questions or reviews yet.
Related
PluginsA CLI that sets up a canvas where an AI agent builds dashboards and reports as React artifacts, revised block by block
A skill and CLI that make dependency-free single-file HTML: shadcn tokens, seven layouts, SVG charts and an agent self-check
An accessibility scanner for agents and CI: renders a page in Chromium with axe-core or lints React, Vue and Angular source.
A local visual editor for an HTML page: edit with the mouse, preview scripts, save back to the same file.
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
A design studio for people and agents: dsa CLI, MCP endpoint and skill to edit layouts, slides, reports and 3D together.
README in short
The project describes a page compiler, a block language, icons, datasets and state, recipes and a `compose` mode. Separate sections explain plugin install and MCP modes.