57 production-ready web components. Zero dependencies. One script tag.
-None-2ea44f){kind=icon}
<au-card variant="elevated">
<h2>Hello AgentUI!</h2>
<au-button variant="filled">Get Started</au-button>
</au-card>Standard HTML. No framework. No build step.
57 components covering everything you need:
| Category | Components |
|---|---|
| Layout | au-stack, au-grid, au-container, au-layout, au-page, au-navbar, au-sidebar, au-drawer, au-drawer-item, au-bottom-nav, au-divider |
| Form | au-button, au-input, au-textarea, au-form, au-dropdown, au-checkbox, au-switch, au-radio, au-chip, au-prompt-input |
| Display | au-card, au-tabs, au-alert, au-badge, au-callout, au-progress, au-table, au-datatable, au-avatar, au-skeleton, au-code, au-message-bubble |
| Feedback | au-spinner, au-modal, au-confirm, au-toast, au-tooltip, au-error-boundary, au-splash |
| Structural | au-if, au-show, au-repeat, au-lazy, au-virtual-list, au-fetch, au-router, au-portal, au-intersection, au-media, au-transition, au-timer |
| Utility | au-icon, au-theme-toggle, au-schema-form |
| Dev Tools | au-api-table, au-doc-page, au-example |
No Virtual DOM. No runtime framework overhead. Just native Custom Elements.
- 61KB total — All 57 components, JS + CSS, gzipped. Smaller than most frameworks' "hello world".
- Lighthouse 100/100/100/100 — Verify it yourself →
- DOM Speed — 500 instantiations <8ms, 500 updates <3ms.
- Zero Config — One
<script>tag. No bundler, no build step, no npm required.
Security isn't an add-on — it's baked into every component from day one.
- XSS-safe
htmltemplate — All interpolated values are auto-escaped. Details → - CSP-compatible — No
eval(), noFunction(), nodocument.write. - Zero dependencies — Nothing in
node_modules. No supply chain risk.
Built on W3C Web Components — native browser APIs with zero abstraction tax.
- W3C Custom Elements — Not a framework. Not a compiler. Native browser APIs.
- Light DOM — No Shadow DOM. Full
querySelectoraccess. Agents can inspect and modify any element directly. - Zero build step — Works with a
<script>tag. No bundler required.
| Decision | AgentUI Approach | Trade-off |
|---|---|---|
| Bundle | All 57 components in 61KB gzipped | No tree-shaking — you load everything |
| XSS | Auto-escape html tagged template |
Custom template syntax, not JSX |
| Dependencies | Zero | No ecosystem — you build what you need |
| DOM | Light DOM (no Shadow DOM) | Full access, but no style encapsulation |
| Standard | W3C Web Components | Newer ecosystem, smaller community |
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://unpkg.com/agentui-wc@latest/dist/agentui.css">
</head>
<body>
<au-card variant="elevated">
<h2>Hello AgentUI! 👋</h2>
<au-button variant="filled">Get Started</au-button>
</au-card>
<script type="module" src="https://unpkg.com/agentui-wc@latest/dist/agentui.esm.js"></script>
</body>
</html>💡 For Lighthouse 100 scores, use the optimized template in llms.txt (non-blocking CSS, font preload, async JS).
No npm. No config. No build step. Just HTML.
| Metric | Value |
|---|---|
| Tests | 2436 (unit + E2E), 0 failures, 141 isolated test files |
| Security | XSS-audited, CSP-compatible, no eval(), full policy → |
| Memory | Managed listeners (AbortController), zero leaks verified |
| DOM Speed | 500 instantiations <8ms, 500 updates <3ms |
| Stability | W3C Web Components — no framework version churn |
| Resource | Description |
|---|---|
| 🤖 Agent Guide | Framework concepts and component discovery |
| 🧩 Skill Guide | Build recipes, templates, and patterns |
| 🛠️ Dev Guide | Extending framework with new components |
| 📋 llms.txt | Quick reference for LLMs/agents |
| 💡 Philosophy | The deeper "why" behind the design |
| 🔒 Security | Security policy |
| 📈 Roadmap | Planned features and next steps |
Contributions of all kinds are welcome — bug reports, feature ideas, documentation improvements, and code.
See CONTRIBUTING.md to get started, or open a discussion if you want to talk first.
AgentUI is an experimental library (v0.1.x) — 57 components, 2436 tests, built by a single developer. Functional and tested, but still a work in progress.
Feedback, criticism, and stress-testing are welcome — open a discussion.
Apache-2.0 © 2026 Giuseppe Scotto Lavina
Built for a world where humans and AI agents code together.