agent-html

agent-html turns semantic .agent.html documents into realtime previews and stable, shareable HTML artifacts for dense agent work.

Docs: agent-html.pages.dev/docs

Desktop workbench source: apps/agent-html-app

Quick Start

1. Install the CLI

npm install -g @agent-html/ahtml
ahtml

2. Optional: install the ahtml skill

If you use the skills CLI with Codex or other agents, install the ahtml skill:

npx skills add Sayhi-bzb/Agent-HTML --skill ahtml

3. Get the writing prompt and write a document

ahtml prompt

<meta-agent profile-ref="shadcn-default" />

<page title="Review">
  <card title="Summary">
    This review is a stable HTML artifact instead of a long Markdown note.
  </card>
</page>

4. Preview locally, then export when needed

ahtml preview artifact.agent.html
ahtml build artifact.agent.html
ahtml gallery

Open the preview URL printed by ahtml preview to review the live session and keep it open while editing the document. Use ahtml build when you need a portable output directory for delivery, sharing, or archive. Use ahtml gallery when you want to open the artifact profile editor and showcase canvas, manage local profile ids, and pick the current default profile for later preview/build.

How It Works

agent work
  -> semantic .agent.html
  -> public agent contract
  -> runtime contract
  -> realtime preview session
  -> portable HTML artifact

The schema is the public contract. Agents write content structure, not raw HTML, CSS, JavaScript, Tailwind classes, or renderer props. Public visual choice is limited to approved artifact profile choices, selected through profile-ref values such as shadcn-default, not free-form theme, density, tone, or width inputs.

Published npm package: @agent-html/ahtml

Shared schema, sanitization, and contract code still live in packages/core inside this repository, and the published CLI carries the internal runtime pieces it needs.

More

╭────── Roadmap
│
●       ·Architecture optimization
├──╮
●  │    ·Support more UI foundations
│  │
│  ●    ·app
│  │
●  │    ·Separation of static and interactive component data structures
│  │
│  ●    ·request-response -> interact-interact
│  │
│  ●    ·Custom component panel
╭──╯
●       ·Cloud service
│
╰──────────────

thanks:

• Linux DO

Ref

• Quick Start
• Best Practice
• Dev Docs
• Examples