svelte-a2ui — a Svelte 5 renderer for A2UI

[ChaliceForAuri]

svelte-a2ui — a Svelte 5 renderer for A2UI

Hi all — the roadmap has listed "Svelte/Kit — Community interest" for a while, so I built it: svelte-a2ui, a Svelte 5 renderer for A2UI.

Live demo (30 seconds, watch it stream): https://chaliceforauri.github.io/a2ui-svelte/
GitHub: https://github.com/ChaliceForAuri/a2ui-svelte · npm: npm install svelte-a2ui

The whole integration is one component:

<script>
	import { A2uiClient, Surface, createCatalogRegistry, basicCatalog, createHttpTransport } from 'svelte-a2ui';
	import 'svelte-a2ui/theme.css';

	const catalog = createCatalogRegistry([basicCatalog]);
	const client = new A2uiClient({ transport: createHttpTransport({ url: '/api/agent' }), supportedCatalogIds: catalog.ids });
	client.start();
</script>

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

A few things I tried to get right:

• Svelte 5 the way Svelte 5 wants to be used. The protocol is a pure reducer (reduce(state, message) → { state, outbound }) with structural sharing; the client holds it in $state.raw and every node reads its spec through $derived — so a data-model patch re-renders only the components it touched. The protocol layer has zero Svelte imports and runs its 83 tests on node --test with no build step.
• Spec-faithfulness over invention. v1.0 Candidate wire format (inline createSurface, null-deletes, a2uiRendererDataModel, capability advertisement on every outbound message), all 18 Basic Catalog components with v0.9/v1.0 property names, the full 59-name Icon enum + {svgPath}, and a test that replays the spec's own contact_form_example.jsonl end to end.
• Hostile-agent threat model. Catalog allowlist, on* keys and function values stripped unconditionally, prototype-pollution refusal on JSON Pointer writes, escape-then-markup for Text markdown, bounded recursion on both rendering and expression evaluation, callableFrom enforced for remote calls.
• Transports: HTTP JSONL/SSE, the A2A extension binding (application/a2ui+json DataParts with metadata lifting), and AG-UI activities including the middleware's a2ui-surface type. A transport is a 4-method interface — the demo's static build runs on a ~25-line replay transport.

Listing PR: #2290. Feedback very welcome — especially from anyone running A2UI over A2A or AG-UI in production, since I'd love to validate the bindings against more real backends. Custom catalogs are where I'm heading next.

— Hugo Pretorius

svelte-a2ui-demo.webm

[ChaliceForAuri]

Update: the "custom catalogs are where I'm heading next" line above is now real — auri ships agent-facing catalogs (ops dashboards, approvals, charts) as contract + prompt-pack + Svelte implementation. The playground replays unedited GPT-5.6 emissions into live surfaces — a nice demo of what the protocol looks like when a model speaks a richer vocabulary cold.