agentui-wc
Advanced tools
AI-First Web Components Framework - 50 Material Design 3 components optimized for AI agents
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.
<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.
html template — All interpolated values are auto-escaped. Details →eval(), no Function(), no document.write.node_modules. No supply chain risk.Built on W3C Web Components — native browser APIs with zero abstraction tax.
querySelector access. Agents can inspect and modify any element directly.<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.
FAQs
AI-First Web Components Framework - 50 Material Design 3 components optimized for AI agents
The npm package agentui-wc receives a total of 72 weekly downloads. As such, agentui-wc popularity was classified as not popular.
We found that agentui-wc demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.