Install

Three artifacts, one install: the Svelte components from npm, the contract your wire validates against, and the prompt-pack that teaches your agent to speak the vocabulary.

1 · The components

npm i @aurilabs/ops svelte-a2ui

svelte (v5) and svelte-a2ui are peer dependencies.

2 · The integration

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

Layout primitives (Row, Column, Card, List) come from the basic catalog; auri's twelve ops components mix with them on one surface.

3 · The agent

Paste the prompt-pack into your agent's system prompt. That's the teaching text — every component, every rule, every trap, validated cold against multiple model families before anything shipped.

The artifacts, at stable URLs

• catalog.json — the contract; this URL is the catalog id agents reference
• prompt.md — the prompt-pack
• examples/*.jsonl — known-good streams, one per component
• llms.txt — the map of all of it, for agents

Theming

Everything is CSS custom properties at zero specificity — your stylesheet wins by default. Set --auri-seed for your accent; see colors for the full token surface.

Light and dark: three states

Dark keys off the renderer's classes, so one toggle drives both the basic catalog and auri's:

• No class — follows the operating system.
• .a2ui-light — pinned light, even on a dark OS. An explicit pin always outranks the system preference.
• .a2ui-dark — pinned dark.

If your app themes with its own class

Tailwind's .dark, a data-theme attribute, your own convention — auri doesn't see any of them. Mirror your toggle onto the two classes wherever you set it:

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

Skip this and your page and your components disagree: the page follows your class, the components follow the OS. The mismatch hides whenever the two happen to agree, so it tends to surface in front of an audience rather than in development — which is exactly how it was found.