Agent→Render→Chat

@ngaf/render

Agents that render UI — without coupling to your frontend

Built on Vercel's json-render spec and Google's A2UI protocol — open standards you already trust. @ngaf/render brings both to Angular with streaming JSON patches, component registries, and signal-native state.

Download the Guide View Docs

Angular 20+Vercel json-renderGoogle A2UIJSON Patch streaming

Without @ngaf/render

Every new agent output means a new frontend deploy.

✗ Hardcoded component logic per agent
✗ Tight coupling blocks iteration
✗ Can't swap UI without rewriting agent
✗ No streaming for progressive updates
✗ Every new agent capability requires frontend work

With @ngaf/render

The agent emits a spec. Your registry renders it.

✓ Declarative UI specs — Vercel json-render + Google A2UI
✓ Hot-swappable component registry with extensible handlers
✓ No frontend deploy for new capabilities
✓ Progressive JSON patch streaming
✓ 18 built-in A2UI components with v0.9 CheckRule validation
✓ Two open standards, one rendering engine

Features

Every json-render capability, production-ready

Spec Rendering

Render declarative UI specs from agent output. The agent emits JSON, your Angular components materialize it.

Element Rendering

Map spec elements to Angular components. Each element type resolves to a registered component automatically.

State Management

Signal-native state store for spec data. Reactive updates flow through your component tree via signalStateStore().

Component Registry

Register Angular components by type. defineAngularRegistry() maps spec types to your components — swap without touching the agent.

Repeat Loops

Render lists from spec arrays. Dynamic list rendering with automatic add/remove as streaming data arrives.

Computed Functions

Derive values reactively from spec state. Computed properties update automatically as upstream data changes.

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"
  [state]="stateStore"
/>

Head to Head

Hardcoded agent UI vs @ngaf/render

Capability

Hardcoded Approach

@ngaf/render

New agent output

Frontend deploy required

✓Spec change only, no deploy

Component swapping

Rewrite agent + frontend

✓Swap registry entry

Streaming updates

Manual DOM manipulation

✓JSON patch streaming, automatic

Testing specs

Integration tests only

✓Unit test specs in isolation

Frontend/agent coupling

Tight — changes break both

✓Decoupled via spec contract

Iteration speed

Days per change

✓Minutes per change

Open standards

Proprietary format

✓Vercel json-render + Google A2UI

A2UI components

Build from scratch

✓18 built-in, extensible catalog

Render Guide

The Enterprise Guide to Generative UI in Angular

Five chapters covering the coupling problem, declarative UI specs with Vercel's json-render standard and Google's A2UI protocol, the component registry, streaming JSON patches, and signal-native state management.

Part of the Cacheplane Angular Agent Framework.

↓ Download PDF

Optional — Get notified of updates

The Cacheplane Stack

This library is part of a cohesive three-layer architecture.

Agent

@ngaf/langgraph

The reactive bridge to LangGraph

Explore Agent →

Chat

@ngaf/chat

Production chat UI in days, not sprints

Explore Chat →

AG-UI

@ngaf/ag-ui

Run any AG-UI compatible backend

Explore AG-UI →