A lightweight A2UI renderer and catalog for agent-driven web interfaces.

npm install a2ui-oat

a2ui-oat is an open-source community renderer that pairs Google's A2UI protocol with Kailash Nadh's Oat CSS library and its companion micro-libraries. It fills a gap in the A2UI renderer ecosystem: every maintained renderer today targets a framework (React, Angular, Lit, or Flutter). There is no lightweight, framework-free option for web-only deployments.

a2ui-oat provides two artifacts:

• Oat Catalog -- A custom A2UI catalog JSON schema exposing 37 UI components and 22 registered functions.
• Oat Renderer -- A minimal JavaScript renderer built on @a2ui/web-lib that converts A2UI JSON messages into semantic HTML styled automatically by Oat.

The project supports a dual-mode architecture: A2UI Mode for structured, catalog-constrained rendering with full security guarantees, and Direct Mode for trusted-agent scenarios where the LLM emits semantic HTML and Oat styles it with zero intermediary. Both modes share the same CSS, JS, and companion libraries. The choice between them is a security architecture decision.

• 37 components -- Full Basic Catalog (16) plus 21 Oat-native components: tables, pagination, progress, meter, skeleton loaders, toasts, tooltips, alerts, breadcrumbs, sidebars, accordions, switches, badges, avatars, video, audio, grid, dropdown, and more.
• 22 registered functions -- Data (fetchPage, fetchAndAppend, subscribeSSE, subscribeWebSocket), navigation (openUrl, navigateTo), UI (showToast, debounce), formatting (formatDate, formatNumber, formatString, formatCurrency, pluralize), logic (and, or, not), and validation (required, regex, length, numeric, email).
• ~13KB total client footprint -- Oat CSS + JS + companion libraries, minified and gzipped.
• Zero framework dependencies -- No React, Angular, Lit, or build tooling required. Deploy via CDN include.
• Dual-mode architecture -- A2UI Mode (structured, validated) and Direct Mode (HTML-native, zero intermediary).
• A2A integration -- Catalog negotiation, inline catalog support, multi-agent surface ownership.
• Autonomous surfaces -- Agents build a surface once; registered functions keep it running (pagination, streaming, routing) after the agent disconnects.

import { createOatRenderer, registerWithWebLib } from 'a2ui-oat';

const { renderer, functions } = createOatRenderer();
registerWithWebLib(webLib); // one-call setup for @a2ui/web-lib

Include Oat CSS, @a2ui/web-lib, and the Oat Renderer. The agent emits A2UI JSON against the Oat Catalog schema. The protocol engine parses the stream, manages state, and delegates to the renderer for HTML output.

<!-- Oat CSS + JS -->
<link rel="stylesheet" href="https://unpkg.com/@knadh/oat/oat.min.css">
<script src="https://unpkg.com/@knadh/oat/oat.min.js"></script>

<!-- A2UI Protocol Engine -->
<script src="https://unpkg.com/@a2ui/web-lib"></script>

<!-- Oat Renderer -->
<script type="module">
  import { createOatRenderer } from 'https://unpkg.com/a2ui-oat/renderer/index.js';
  const { renderer, functions } = createOatRenderer();
  // Connect to your agent transport (A2A, MCP, WebSocket, SSE)
</script>

Include only Oat CSS + JS. The agent emits semantic HTML directly. Oat styles it automatically.

<link rel="stylesheet" href="https://unpkg.com/@knadh/oat/oat.min.css">
<script src="https://unpkg.com/@knadh/oat/oat.min.js"></script>

<div id="agent-output"></div>

<script>
  // Agent sends semantic HTML; insert it into the DOM.
  // Oat CSS styles it automatically based on element semantics.
  // For untrusted input, run through the sanitizer first: see direct/sanitizer.js
  document.getElementById("agent-output").innerHTML = agentHtml;
</script>

See docs/when-to-use-which.md for guidance on choosing between modes.

Total: 37 components. The Basic Catalog's 16 are fully included. The additional 21 are native Oat primitives.

Agent (LLM)
  |  Generates A2UI JSON against Oat Catalog schema
  v
Transport (A2A / MCP / WebSocket / SSE)
  |  Delivers DataParts with mimeType: application/json+a2ui
  v
@a2ui/web-lib (Protocol Engine)
  |  Parses JSONL stream, manages surfaces, resolves data bindings
  v
Oat Renderer
  |  Maps component types -> semantic HTML elements
  v
Oat CSS + JS (~8KB)
  |  Styles semantic HTML automatically
  v
Browser DOM

For the full architecture document, see docs/architecture.md.

Total shared footprint: ~13KB minified and gzipped. This is the complete client-side runtime for both modes, excluding @a2ui/web-lib which is only required for A2UI Mode.

a2ui-oat provides three security tiers. The choice depends on the trust level of the agent producing UI.

A2UI Mode provides defense in depth: the catalog acts as an allowlist, two-phase validation catches hallucinated properties, registered functions are sandboxed, and data model isolation protects multi-agent scenarios.

Direct Mode has no catalog, no schema validation, and no sandboxing. It is appropriate only for trusted, internally-controlled agents.

OatHTML accepts sanitized HTML within A2UI's security model, bridging the gap between strict catalog constraints and full HTML freedom.

See docs/when-to-use-which.md for a detailed decision guide.

• A2UI Specification (v0.9)
• A2UI Component Gallery
• Oat UI
• Oat GitHub
• Architecture Document
• Mode Decision Guide
• Oat Catalog

MIT