Agent-HTML CLI
A CLI that sets up a canvas where an AI agent builds dashboards and reports as React artifacts, revised block by block
- 347 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- The agent writes executable React code that a local dev server runs and the browser executes during review
- The init command adds new files with rules and resources to the project that the agent reads as instructions
Install
- Works in
Manual install
npm install agent-htmlInstalls the package into the project.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent writes executable React code that a local dev server runs and the browser executes during review
- The init command adds new files with rules and resources to the project that the agent reads as instructions
This is third-party code. Review the repository files before installing.
What it does
Agent-HTML gives an agent a place for answers that do not fit Markdown: dashboards, tables and charts, kanban boards, comparisons and product mockups. The npx agent-html init command creates an agent-html workspace in the project with rules, resources and an artifacts folder. The agent writes React and TypeScript artifacts there, and npx agent-html dev starts the Canvas host on Vite. The host discovers the artifacts, renders them, shows validation diagnostics and overlays controls for inspecting blocks. The @agent-html/react package defines the Artifact and Block protocol: each visible region of a page has a stable address. A revision can therefore target one block: the prompt goes to the agent together with the block id, the implementation file and a short interaction history. Themes switch with host presets, while artifact sources stay on semantic tokens and Canvas classes. Rules, examples, data and components sit beside the artifacts in the file system, so context does not vanish with the chat.
Who it is for. Developers and analysts who ask Claude Code or Codex for an interactive report, dashboard or mockup and want to revise it piece by piece.
Good fit when
- A roadmap should be shown as lanes by team, and a Markdown list does not carry the structure
- A data report should hold filterable tables and charts that a client can browse
- Only one block of a mockup needs a change and you want to hand it to the agent with that block's address
- An agent's output should live in project files and open after the chat is closed
- An internal tool with a kanban board needs a sketch in one session and a look in the browser
Not a fit when
- The answer is text and code: plain Markdown is simpler and needs no dev server
- You need a finished production site: Canvas is for artifacts and reviewing them, not for publishing
- You need one license for all the code: terms differ by package, so open the LICENSE file in each package first
- The environment has no Node.js and npm, or running Vite is not allowed
Example request
Read agent-html/README.md and agent-html/AGENTS.md and build a sales dashboard with a table and a chart in agent-html/artifactsLimitations
- License terms differ by package: the root LICENSE names Apache-2.0, but the author advises checking the folder you use.
- The repository was reworked: the former app and runtime moved to _archive and are kept for reference only, so they should not be used.
- The Canvas host runs as a local Vite dev server. Viewing artifacts requires npx agent-html dev to be running.
- Canvas documentation lives in the repository's apps/docs folder, and after init the agent's working rules appear in agent-html/AGENTS.md.
How to disable. npm uninstall agent-html removes the package. Delete the workspace together with the agent-html folder in the project, saving any artifacts you need first.
FAQ
How do I install Agent-HTML?
Run npm install agent-html, then npx agent-html init in the project root and npx agent-html dev. The first command creates the agent-html folder with rules and artifacts, the second starts the Canvas host in the browser.
What are Artifact and Block?
An Artifact is a React page that the agent writes. A Block is a named region inside it with a stable id. The host shows such regions during review and can send the agent a prompt about one block rather than the whole page.
Where are the agent's results stored?
In the project file system, in the agent-html/artifacts folder. Rules, examples, data, schemas and helper components sit beside them, so the next agent session reads them again.
How is Agent-HTML different from a plain HTML answer?
An HTML file stays a static document, while an Agent-HTML artifact is validated by the host, gets themes and accepts block-level revisions. Artifact source is kept apart from host internals and privileged APIs.
Which agents does Agent-HTML work with?
The host is not tied to one agent: the rules sit in agent-html/README.md and AGENTS.md, and any agent with file and terminal access, such as Claude Code or Codex, reads them and writes artifacts. The README prompt is the same for every agent.
Discussion
No questions or reviews yet.
Related
CLI toolsLocal WebUI for Claude Code, Codex, OpenCode, pi, Hermes and OpenClaw: agents reply with live, interactive React components
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
The skill teaches an agent to build an AI agent chat from 26 Agent Elements components: tool cards, input bar, streaming
A CLI that lets an agent inspect a running React app: component tree, props, state, hooks and render profiling
An accessibility scanner for agents and CI: renders a page in Chromium with axe-core or lints React, Vue and Angular source.
Offline Ant Design reference for agents: props, tokens, demos and changelogs for antd v3 to v6, queried by command.
README in short
The README starts from the idea that Markdown limits an agent and presents Canvas as a layer for rich answers. It lists the agent-html and @agent-html/react packages, the host's capabilities and examples: kanban, charts, tables, themes. The quick start is three commands. The end gives links to docs and development commands.