@ngaf/render

Generative UI without a second framework.

Server-emitted JSON specs render into Angular components you already own. Vercel json-render and Google A2UI both supported. Per-component fallback, readiness gate, no surprises.

Get startedView source
MITVercel json-renderGoogle A2UI v0.9-compatible

Schemas

One spec. Your components.

The agent emits structured UI as JSON. @ngaf/render maps each spec node to one of your Angular components — so the design system stays yours, and the agent gets to assemble it.

  • Vercel json-render adapter
  • Google A2UI v0.9-compatible protocol
  • Component registry — declare once, use everywhere
  • Server schema, client validation
json-render
Vercel adapter.
A2UI v0.9-compatible
Google protocol.
registry
Spec → component.
See @ngaf/render docs →
render · spec → component
{ "type": "card", "props": { "title": "Q3 revenue", "value": "$4.2M", "delta": "+18%" } }
AI-rendered · YourCardComponent
Q3 revenue: $4.2M
+18% vs Q2

Fallbacks

Readiness gate + per-component fallback.

When the agent emits a spec your registry doesn't know how to render, @ngaf/render falls back gracefully — and surfaces it to your observability layer. No mystery white screens.

  • Per-component fallback API
  • Readiness gate holds renders until safe
  • Telemetry hook for render events
  • Streaming partial renders supported
fallback views
Per-component recovery.
readiness gate
Hold until safe.
render events
Telemetry surface.
Fallback patterns →

Developer Experience

Generative UI in a few lines

Registry Setup
import { defineAngularRegistry } from '@ngaf/render';
import { TableComponent } from './table.component';
import { ChartComponent } from './chart.component';

const registry = defineAngularRegistry({
  table: TableComponent,
  chart: ChartComponent,
  form: FormComponent,
});
Template Binding
<render-spec
  [spec]="agentOutput()"
  [registry]="registry"
  [store]="stateStore"
/>

Field report

The last-mile gap in Angular AI.

  • Six production-readiness dimensions for Angular AI
  • Concrete patterns — error boundaries, fallbacks, observability, deploy
  • No vendor pitch. Just what we learned shipping it.

Already on the list? Download the PDF directly.

angular-agent-readiness-guide.pdf
Field report · 18 pages
From Prototype to Production
Six production-readiness dimensions for Angular AI teams.
Agent UI for Angular

Stop stalling on agentic Angular.

Install the framework, read the docs, and have a streaming chat in your app this afternoon.

Try the demo →See each feature in action →

MIT · No signup required · App telemetry off by default