ngx-json-render 0.7.2 → 0.7.3

package/README.md

@@ -14,6 +14,13 @@ This is an Angular **adapter over the official core**, not a second implementati
 
 ## Install
 
+```bash
+ng add ngx-json-render
+```
+
+`ng add` installs the package and adds its peers, `@json-render/core` and
+`zod`, at the ranges it admits. By hand, that is
+
 ```bash
 npm install ngx-json-render @json-render/core zod
 ```
@@ -52,11 +59,14 @@ ships 28 Angular Material components already registered, so a generated spec
 renders with nothing else wired up:
 
 ```bash
-npm install ngx-json-render-material @angular/material
+ng add ngx-json-render-material
 ```
 
 Those are real Material components, so the app needs a Material theme and the
-icon font as usual.
+icon font; `ng add` sets both up through Material's own `ng add` when the
+workspace has no Material yet (see the
+[catalog's README](https://github.com/shteynu/ngx-json-render/tree/main/projects/ngx-json-render-material#install)
+for installing by hand).
 
 ```ts
 import { Component, signal } from '@angular/core';
@@ -90,6 +100,28 @@ export class App {
 vocabulary. Everything below is the other path — your own components, which is
 what the catalog API is for.
 
+## ngx-json-render or Hashbrown?
+
+[Hashbrown](https://hashbrown.dev) is the other generative-UI library for
+Angular. Both let a model compose your components; they differ in what the
+model emits and in how much of the agent around it they provide. Compared
+against `@hashbrownai/angular` 0.6.1, as published on 2026-09-30:
+
+|                      | ngx-json-render                                                                                                                                                          | Hashbrown                                                                                                                                            |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| What the model emits | A json-render spec, streamed as RFC 6902 patches — the format the React, Vue, Svelte and Solid renderers read, so a catalog and a spec move between frameworks unchanged | Hashbrown's own JSON, generated against a schema built from the components you expose; read by Hashbrown's Angular and React clients                 |
+| Server               | Anything that streams text: the [AI SDK](https://ai-sdk.dev) in a few lines, or your own endpoint; `catalog.prompt()` writes the system prompt                           | An [AG-UI](https://docs.ag-ui.com) endpoint, built with Hashbrown's adapters (OpenAI, Anthropic, Google, Azure, Bedrock, Ollama) or your own mapping |
+| Angular              | 20, 21 and 22, each tested in CI                                                                                                                                         | 22 only since 0.6 (0.5 supported 20 and 21)                                                                                                          |
+| Components           | Your own, or 28 ready-made Angular Material ones ([`ngx-json-render-material`](https://www.npmjs.com/package/ngx-json-render-material))                                  | Your own (`exposeComponent`, UI kits)                                                                                                                |
+| Beyond rendering     | Rendering-focused: state and two-way bindings in the spec, actions, visibility, repeat, watch, confirmation dialogs                                                      | An agent toolkit: client-side tools, a QuickJS sandbox for model-written code, shared agent state, interrupts, streaming Markdown                    |
+| License              | Apache-2.0                                                                                                                                                               | MIT                                                                                                                                                  |
+
+Reach for Hashbrown when you want the agent loop — tools, a sandbox, AG-UI —
+from one library and are on Angular 22. Reach for this one when you want an
+open spec format that is not tied to Angular or to one vendor's client, a
+server you already have, Angular 20 or 21, or a UI that renders from a
+ready-made Material catalog before you have written a component.
+
 ## Quick start
 
 **1. Define a catalog** — the vocabulary the model (or your server) is allowed to use:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-json-render",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Angular renderer for json-render — stream AI-generated JSON specs into real Angular components with signals.",
   "keywords": [
     "angular",
@@ -31,6 +31,10 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
+  "schematics": "./schematics/collection.json",
+  "ng-add": {
+    "save": "dependencies"
+  },
   "module": "fesm2022/ngx-json-render.mjs",
   "typings": "types/ngx-json-render.d.ts",
   "exports": {

package/schematics/collection.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Adds ngx-json-render's peer dependencies (@json-render/core and zod) to the workspace.",
+      "factory": "./ng-add/index.cjs#ngAdd"
+    }
+  }
+}

package/schematics/ng-add/index.cjs

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+const schematics_1 = require("@angular-devkit/schematics");
+const utility_1 = require("@schematics/angular/utility");
+const self = require('../../package.json');
+/** Peers a workspace has to declare itself; `@angular/*` is already there. */
+const PEERS = ['@json-render/core', 'zod'];
+const README = 'https://github.com/shteynu/ngx-json-render/tree/main/projects/ngx-json-render#readme';
+/**
+ * `ng add ngx-json-render`: declares the peers the renderer needs, at the
+ * ranges its own manifest admits, and leaves any the workspace already has
+ * untouched. The CLI installs the package itself; npm would install the peers
+ * too, but without a `package.json` entry nothing pins them.
+ */
+function ngAdd() {
+    return (tree, context) => {
+        const workspace = readManifest(tree);
+        warnOnOldAngular(workspace, (message) => context.logger.warn(message));
+        const rules = [];
+        for (const name of PEERS) {
+            if (declares(workspace, name))
+                continue;
+            const range = self.peerDependencies?.[name];
+            if (!range)
+                throw new schematics_1.SchematicsException(`ngx-json-render declares no peer range for ${name}.`);
+            rules.push((0, utility_1.addDependency)(name, range));
+            context.logger.info(`Adding ${name}@${range}`);
+        }
+        context.logger.info([
+            '',
+            'ngx-json-render is ready. Next: describe your components in a catalog,',
+            `register them, and render a spec with <json-render> — see ${README}`,
+            'No components of your own yet? `ng add ngx-json-render-material` adds',
+            '28 ready-made Angular Material ones.',
+        ].join('\n'));
+        return (0, schematics_1.chain)(rules);
+    };
+}
+function readManifest(tree) {
+    if (!tree.exists('/package.json')) {
+        throw new schematics_1.SchematicsException('No package.json at the workspace root.');
+    }
+    return tree.readJson('/package.json');
+}
+function declares(manifest, name) {
+    return !!(manifest.dependencies?.[name] ?? manifest.devDependencies?.[name]);
+}
+function warnOnOldAngular(manifest, warn) {
+    const range = manifest.dependencies?.['@angular/core'];
+    const major = range ? Number(/\d+/.exec(range)?.[0]) : NaN;
+    if (major < 20) {
+        warn(`ngx-json-render needs Angular 20 or newer; this workspace has @angular/core ${range}.`);
+    }
+}