auri

Beautiful, agent-facing component catalogs for A2UI.

See it live: chaliceforauri.github.io/auri — an agent builds an ops console in front of you, with the wire shown beside it.

A2UI renderers give agents a spartan 18-component baseline vocabulary. auri gives them the rest: ready-made catalogs — starting with @aurilabs/ops for agent dashboards, data display, and human-in-the-loop decisions — each shipped as three artifacts:

• the contract — a spec-style schema of what an agent may say (catalog.json, served at its own catalog id),
• the prompt-pack — the system-prompt text and examples that teach a model to say it (prompt.md — paste it into your agent),
• the implementation — Svelte 5 components for svelte-a2ui.

The design rule of the house: no component ships until language models emit its wire format cleanly, cold. Every contract passed a cross-family emission gate (Claude + GPT) before any Svelte was written; the harness (npm run eval in packages/ops) and the gate log are in this repo.

The ops catalog — 12 components

Stat · Badge · Callout · DataTable · ApprovalCard · Chart · Timeline · Sparkline · Progress · KeyValue · CodeBlock · ConfirmButton

One shared intent scale (good · bad · warning · info · neutral), raw values on the wire (components format via Intl in the host locale), skeleton/empty/error states designed in, motion as a system, a11y enforced by the contract itself. See the component pages — each replays its own contract fixture with a scrubbable wire — and the visual sheet.

Install

npm i @aurilabs/ops svelte-a2ui

<script lang="ts">
	import { A2uiClient, Surface, createCatalogRegistry, basicCatalog } from 'svelte-a2ui';
	import { opsCatalog } from '@aurilabs/ops';
	import 'svelte-a2ui/theme.css';
	import '@aurilabs/ops/theme.css';

	const catalog = createCatalogRegistry([basicCatalog, opsCatalog]);
	const client = new A2uiClient({ transport: /* your transport */ });
	client.start();
</script>

<Surface {client} {catalog} surfaceId="main" />

Then paste the prompt-pack into your agent's system prompt, and it speaks the vocabulary. svelte and svelte-a2ui are peers.

Theming your host: dark keys off the renderer's .a2ui-dark / .a2ui-light classes (no class follows the OS; an explicit pin always beats it). If your app themes with its own class — Tailwind's .dark, say — mirror it, or the page and the components will disagree:

document.documentElement.classList.toggle('a2ui-dark', dark);
document.documentElement.classList.toggle('a2ui-light', !dark);

Built by Hugo Pretorius (ChaliceForAuri), maintainer of the svelte-a2ui renderer.

Apache-2.0. Design language inspired by shadcn/ui (MIT — neutral foundation values adopted with thanks); docs site set in Geist (Vercel, SIL OFL 1.1, self-hosted; the full license and copyright notice ship beside the font files).