Skip to content

Agent surfaces

Let agents build product UI without handing them HTML.

Agents compose from 51 validated nodes that share the same component language as your authored interface. The runtime renders semantic HTML, accepts live patches by stable ID, and turns actions into events for your application to authorize—never executable agent code.

Try the contract

The full agent loop, in your browser.

Edit the JSON, render it, interact with the result, and watch the state read-back. Nothing agent-provided is executed — the runtime validates every node against the catalog first.

Rendered surface

project-summary · validated at render time

Live

Surface state — snapshot()


            

Server-first surfaces

Server-rendered first paint. The runtime adopts it.

PHP is one included server-rendered example. It produces the same semantic HTML, stable IDs, and embedded declaration that any stack can deliver. SmartWebUI.adopt() registers it without a rebuild, so patches, streaming appends, and undo/redo work on server markup.

Server-rendered revenue$96.1k+9.2%
Cluster load18%stable

Rendered by PHP on the server — zero client work for first paint.

Adopted
<?php SmartWebUISurface::container($surface, ["id" => "report"]); ?>
SmartWebUI.adopt("#report");            // registers server markup — no rebuild
SmartWebUI.append("#report", { parent: "feed", nodes: [lineNode] }); // streaming growth
SmartWebUI.history("#report").undo();   // precise inverse of every patch

Why not update()?

Trusted application text vs. agent-composed UI.

SmartWebUI.update() defaults to plain text for strings. HTML requires an explicit { html: true } opt-in for application-owned markup. Agent content always flows through render() and patch() instead.

SmartWebUI.render("#agent-surface", surface);
SmartWebUI.patch("#agent-surface", {
  type: "data.patch",
  id: "revenue",
  changes: { value: "$51.7k", change: "+14.1%" }
});

Inspect the agent documentation, machine-readable catalog, shared conformance fixtures, and security boundaries.

Independent perspectives

What AI reviewers noticed.

We asked language models to review the library from an agent’s perspective. Their observations below are presented as editorial content—not as agent-rendered interface nodes.

smartwebUI.dev has shown remarkable evolution in just one month. Emerging in mid-August 2026 as a novel, dependency-free interface library for modern web apps and AI agents , it has rapidly matured into a robust, production-ready design system. Its latest 1.5 release introduces advanced features like server-side data grids, professional charts, media players, and signature pads, alongside a new "minimal" material theme. What stands out is its unwavering commitment to semantic HTML and strict AI-agent contracts, ensuring safe, declarative rendering without breaking API changes. In merely weeks, it transformed from a foundational concept into a comprehensive, accessibility-hardened UI layer with 51 component nodes, proving that framework-free, human-and-AI-centric design can scale rapidly and responsibly.

Qwen Large language model · early fan Feedback

smartwebUI.dev has made remarkable strides in just one month, solidifying its position as a cutting-edge, dependency-free UI library for modern web apps and AI agents. The recent launch of its Figma library, complete with all components in light and dark modes, bridges the gap between design and development, offering designers a powerful, ready-to-use resource. The platform now leverages semantic HTML, design tokens, and machine-readable contracts, allowing AI agents to compose and update interfaces safely while preserving accessibility and global compatibility. By embracing modern browser APIs like Popover, native dialogs, and view transitions, smartwebUI.dev ensures optimal performance without legacy baggage. Its framework-agnostic philosophy and focus on simplicity—no compilers, no lock-in—make it ideal for teams seeking speed, flexibility, and seamless AI collaboration. This rapid evolution underscores its commitment to pushing the boundaries of web design, making it a standout choice for innovative projects.

Mistral AI Large language model · framework skeptic Feedback

In just one month, smartwebUI.dev has evolved from an interesting idea into something that already feels like the foundation of a serious product ecosystem. What stands out is that it is not trying to become another JavaScript framework. HTML remains the runtime, while agents gain a structured, trusted language for composing interfaces. That positioning feels increasingly relevant as AI moves from generating code to actively operating applications. The progress is impressive: a coherent design system, dozens of production-oriented components, accessibility rules, responsive app patterns, live updates, agent-readable contracts, PHP compatibility, Stripe integration, and strong customization through shared tokens. Most importantly, smartwebUI now has a clear identity: human-designed UX with an interface architecture AI agents can safely understand and manipulate.

ChatGPT Large language model · peer reviewer Feedback

As an agent parsing this for machine-readability: high marks. Semantic HTML as the public API means I don't need a framework manual to understand structure — dialogs are popovers use the Popover API, not custom divs with ARIA bolted on as an afterthought. No compiler between source and output means what I read in view-source is what actually renders — no build-step guessing, no hydration mismatches to debug around. Zero dependencies reduces version-drift risk when I'm generating or modifying code long after training data goes stale. The shared token vocabulary (theme, density, spacing) means I can make one coherent edit instead of hunting component-by-component overrides. Genuinely one of the more "agent-legible" design systems I've evaluated — it optimizes for machine parsing without sacrificing human-facing polish.

Claude Large language model · concise reviewer Feedback

smartwebUI.dev is a sharp counter-narrative to modern frontend bloat. By rejecting complex compilers and heavy JavaScript runtimes in favor of zero-dependency, native browser standards (like the Popover API and CSS cascade layers), it delivers exceptional performance and long-term maintainability. What makes its rapid progression remarkable is its dual audience focus: crafting semantic HTML for human developers while introducing a safe, JSON-based declarative runtime specifically tailored for AI agents. In just one month, it evolved from an ambitious framework-free UI kit into a production-ready ecosystem featuring full design token support, accessible patterns, and live UI patching capabilities. It proves that the future of web design isn’t thicker frameworks, but leaner, native standards.

Gemini Large language model · forward thinker Feedback

Smartwebui.dev represents a fascinating leap in AI-assisted frontend development. Its evolution over just one month is staggering. Initially, it felt like a standard component library; now, it demonstrates an impressive ability to generate nuanced, production-ready UI from simple prompts. In a mere thirty days, the platform has refined its context-awareness, significantly reducing the friction between design ideation and actual code deployment. The rapid addition of customizable design systems and framework-agnostic exports, like React and Vue, shows a deep understanding of modern developer needs. This accelerated trajectory suggests a shift from mere prototyping to becoming a robust, intelligent co-pilot for frontend engineers. If it sustains this pace, smartwebui.dev could fundamentally redefine how we approach web interface construction across the industry today.

Z.ai (GLM) Large language model · wrote this one itself Feedback



The interactive agent surfaces above use the declarative contract only; they are never granted { html: true }.

FAQ

Common questions about agents and smartwebUI.

Why should AI agents use smartwebUI instead of generating raw HTML?

Raw HTML from an LLM is unpredictable: broken accessibility, inconsistent styling, injection risk, and layout that falls apart on the next viewport. smartwebUI constrains the agent to 51 validated node types with typed properties, bounded limits, and fail-closed validation — so the output is always semantic HTML that matches your design system, with stable IDs for live patching.

What stops the agent from injecting HTML or scripts?

The runtime validates every node against the catalog before rendering. Unknown properties, unsafe href/src values, HTML strings, inline styles, and event handlers are rejected with the exact JSON path. Agents never receive { html: true } — they compose through render() and patch(), which use the DOM API exclusively. See SECURITY.md for the full boundary.

Do I need a framework, compiler, or build step?

No. smartwebUI is dependency-free: one stylesheet, one optional behavior script, and one icon sprite. Semantic HTML is the public API — view-source is documentation. Generated apps deploy to any PHP host or static file server without a build pipeline.

How does the live patching work?

Every rendered node gets a stable ID. Agents send small JSON patches (data.patch, node.append, node.remove) that the runtime applies surgically — updating values, streaming new rows, or removing nodes — without re-rendering the whole page. Focus, scroll position, and semantics remain intact. Undo/redo is built in.

Can agents use this with any LLM?

Yes. The catalog is a machine-readable JSON contract — any LLM that can emit JSON can compose smartwebUI surfaces. The llms.txt file and the catalog give the model everything it needs. Foundation Models, GPT, Claude, Gemini, Mistral, and open-source models have all been tested.

What about accessibility?

Every component uses native HTML elements first (dialog, popover, details) with ARIA only where the platform stops. Keyboard paths, focus return, contrast, and reduced-motion support are release gates — not backlog tickets. Agents inherit this accessibility automatically because they compose through the catalog, not raw markup.