agentui-wc

v0.1.151

Published

7 days ago

AI-First Web Components Framework - 50 Material Design 3 components optimized for AI agents

Downloads

7,795

0High
0Medium
0Low

giuseppe-scotto-lavina

ai-agents ai-first web-components material-design-3 ui-framework light-dom zero-dependencies accessibility wcag custom-elements md3 design-system

<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.

What's Included

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 |

⚡ Performance by Default

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.

🔒 Secure by Default

Security isn't an add-on — it's baked into every component from day one.

XSS-safe html template — All interpolated values are auto-escaped. Details →
CSP-compatible — No eval(), no Function(), no document.write.
Zero dependencies — Nothing in node_modules. No supply chain risk.

🏛️ Built on Standards

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 querySelector access. Agents can inspect and modify any element directly.
Zero build step — Works with a <script> tag. No bundler required.

Design Choices

| 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 |

Try It — Zero Setup

<!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.

Engineering

| 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 |

📚 Resources

| 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 |

Contributing

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.

Status

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme