AI agents describe intent. A renderer builds the interface.

A2TL-Web turns a compact UI specification into a complete standalone HTML page—charts, metrics, cards, tables, and theming included. Agents express what the page should communicate; the renderer owns the implementation details.

Relationship to SkillNet

A2TL-Web was built and evaluated as part of the SkillNet Generative UI research. It helped test compact, agent-authored interface descriptions and remains a useful reference for that line of work. SkillNet's current generated-interface path uses OpenUI, so A2TL-Web is related research rather than a current SkillNet dependency.

Compact by design	Renderer-owned polish	Ready for agents
A dashboard can use ~360 tokens instead of ~1,471 in raw HTML.	No generated CSS or hand-assembled component boilerplate.	Use it from the CLI, MCP server, or agent skill.

See the format

UIDL/1
theme dark

h1 "Q3 Revenue"
metrics 2
  "MRR" "$84.5k" green "+12%"
  "Churn" "2.1%" red "-0.4pp"
chart line "Growth"
  x "Apr" "May" "Jun" "Jul"
  series "Revenue" 62 71 78 84 blue

This ~360-token description renders to a standalone page with charts, metrics, and theming. The equivalent raw HTML typically needs ~1,471 tokens.

Quick start

npx a2tl-web render examples/analytics.uidl -o output/analytics.html

Or run the repository directly:

git clone https://github.com/JoseEstevez520/a2tl-web.git
cd a2tl-web
node tools/generate.js examples/analytics.uidl output/analytics.html

Use it your way

Interface	Best for	Start here
CLI	Generating HTML from a .uidl file.	a2tl-web render input.uidl -o output.html
MCP server	Letting an AI agent call render_page.	cd tools/mcp && npm install && npm run build
Agent skill	Teaching the format directly to an agent.	Copy skill/uidl.md into its prompt system.

Components

Component	Syntax	Use it for
Headings	h1, h2, h3	Clear page hierarchy.
Text	text "..." style	Supporting copy and insights.
Metrics	metrics N	KPI cards and trends.
Charts	chart line|bar|pie "Title"	Series data and comparison.
Tables	table "Title"	Structured rows and columns.
Cards / lists	cards N, list "Title"	Grouped content.
Code / collapse	code lang, collapse "Title"	Technical detail and progressive disclosure.

Theming without generated CSS

Branding lives in a preset, so the agent does not need to produce CSS:

UIDL/1
theme dark
brand skillnet

a2tl-web render input.uidl --brand skillnet

Built-in presets include default and skillnet; custom themes live in tools/mcp/themes/. Read the extension guide for details.

Format rules

1. Begin with UIDL/1.
2. Put components at column 0 and sub-items two spaces in.
3. Wrap strings containing spaces in double quotes.
4. Use named or hexadecimal colors.
5. Use blank lines to close blocks and // for comments.

Project map

• skill/ — prompt material for agents learning UIDL.
• tools/ — parser, renderer, CLI, MCP server, and themes.
• examples/ — sample UIDL specifications.
• tests/ — renderer and parser tests.
• docs/extending.md — component and theming reference.

Development

npm test

License

MIT