ngx-json-render 0.9.10 → 0.9.12

package/README.md

@@ -8,6 +8,8 @@ Built on `@json-render/core` (the same spec format, expressions, state store, ac
 
 This is an Angular **adapter over the official core**, not a second implementation of it — `@json-render/core` is a peer dependency, and the spec your model emits is the same one the React, Vue, Solid and Svelte renderers consume. A catalog and a spec written here move to another framework unchanged.
 
+**Works with:** [AG-UI agents, CopilotKit and LangGraph among them](#from-an-ag-ui-agent) · [MCP Apps in Claude, ChatGPT and VS Code](#inside-an-mcp-app-host) · [the Vercel AI SDK](#reading-an-ai-sdk-message) · [Genkit](#with-genkit) · any endpoint that streams text. The AG-UI and AI SDK paths run against the real clients in CI.
+
 **[Live demo](https://shteynu.github.io/ngx-json-render/)** — opens on a sales dashboard streaming in patch by patch, which you can stop mid-generation; plus a playground, an interactive spec (bindings, repeat, confirm, watch), and a chat where prose and UI patches arrive in one reply. Both streaming tabs replay a recording, or call a real model on your own key ([source](https://github.com/shteynu/ngx-json-render/tree/main/projects/demo)) — or [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/shteynu/ngx-json-render)
 
 ![A SpecStream of RFC 6902 patches rendering progressively into an Angular dashboard](https://raw.githubusercontent.com/shteynu/ngx-json-render/main/docs/streaming.gif)
@@ -519,6 +521,9 @@ have not arrived. An activity already on screen stays checked while a later
 run builds another. CopilotKit mounts the activity mid-run, after the run has
 fixed its subscribers, so the end of that run is read from the agent's
 `isRunning` flag.
+[`examples/copilotkit-angular`](https://github.com/shteynu/ngx-json-render/tree/main/examples/copilotkit-angular)
+is the whole path, CopilotKit runtime to rendered activity, and runs without
+a model key.
 
 **On the server**, the model's output — prose with ` ```spec ` fenced JSONL,
 as `catalog.prompt({ mode: 'inline' })` asks for — splits into text-message
@@ -797,7 +802,7 @@ A host loads the view as one HTML document with nowhere to fetch chunks from, so
 }
 ```
 
-`ng run mcp-view:mcp` runs the application build, then writes `dist/mcp-app/view.html` with every script and stylesheet inlined, and the fonts and images the stylesheets use as data URLs, and `dist/mcp-app/server.mjs` with its dependencies bundled in, so `node dist/mcp-app/server.mjs` runs anywhere without `node_modules`. Files the page cannot reach, such as an image referenced only from a template, are listed as a warning: point at them from a stylesheet or from an `https:` origin in `csp`. The server bundle is not type-checked; run `tsc --noEmit` on it first if you want that. Options: `server` (leave it out to build the view only), `tsConfig` for the server, and `externalPackages: true` to keep `node_modules` packages out of `server.mjs`.
+`ng run mcp-view:mcp` runs the application build, then writes `dist/mcp-app/view.html` with every script and stylesheet inlined, and the fonts and images the stylesheets use as data URLs, and `dist/mcp-app/server.mjs` with its dependencies bundled in, so `node dist/mcp-app/server.mjs` runs anywhere without `node_modules`. Files the page cannot reach, such as an image referenced only from a template, are listed as a warning: point at them from a stylesheet or from an `https:` origin in `csp`. The server bundle is not type-checked; run `tsc --noEmit` on it first if you want that. Options: `server` (leave it out to build the view only), `tsConfig` for the server, `externalPackages: true` to keep `node_modules` packages out of `server.mjs`, and `keepZodLocales: true` if the view switches zod to another language: by default the builder leaves zod's translations other than English out of `view.html`, about 250 kB that `import { z } from 'zod'` otherwise pulls in.
 
 [`projects/mcp-app`](https://github.com/shteynu/ngx-json-render/tree/main/projects/mcp-app) is a complete example with the Material catalog: the view, built with this builder, and this server, the one behind `https://ngx-json-render.vercel.app/mcp`.
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ngx-json-render",
-  "version": "0.9.10",
-  "description": "Generative UI for Angular: a json-render renderer that streams AI-generated JSON specs into real Angular components with signals.",
+  "version": "0.9.12",
+  "description": "Generative UI for Angular: a json-render renderer that streams AI-generated JSON specs into real Angular components with signals. Works with AG-UI agents and CopilotKit, MCP Apps and the Vercel AI SDK.",
   "keywords": [
     "angular",
     "json-render",
@@ -22,6 +22,12 @@
     "chat-ui",
     "mcp",
     "mcp-apps",
+    "ag-ui",
+    "copilotkit",
+    "langgraph",
+    "ai-agents",
+    "ai-sdk",
+    "genkit",
     "zoneless",
     "json-renderer",
     "dynamic-ui"

package/schematics/mcp-app/index.cjs

@@ -187,7 +187,7 @@ function writeFiles(name, source) {
         const from = (file, specifier) => source.kind === 'material' ? specifier : relativeImport(file, specifier);
         const appFile = node_path_1.posix.join(appDir, 'app.ts');
         tree.create(appFile, viewComponent(name, source.registryExport, from(appFile, registry)));
-        overwrite(tree, node_path_1.posix.join(src, 'main.ts'), mainFile(material));
+        overwrite(tree, node_path_1.posix.join(src, 'main.ts'), mainFile(material, zonelessProvider(readManifest(tree))));
         overwrite(tree, node_path_1.posix.join(src, 'index.html'), indexFile(name, material));
         tree.create(node_path_1.posix.join(src, material ? 'styles.scss' : 'styles.css'), material ? MATERIAL_STYLES : PLAIN_STYLES);
         const serverFile = node_path_1.posix.join(root, 'server.ts');
@@ -262,24 +262,26 @@ ${registry}
   template: \`
     @if (mcp.error(); as error) {
       <p class="status error">Could not connect to the host: {{ error.message }}</p>
-    } @else if (mcp.spec(); as spec) {
-      <json-render
-        [spec]="spec"
-        [loading]="mcp.loading()"
-        [registry]="registry"
-        [handlers]="mcp.handlers"
-      />
-      @if (mcp.lastMessage(); as outcome) {
-        @if (outcome.ok) {
-          <p class="status" role="status">Message passed to the chat.</p>
-        } @else {
-          <p class="status error" role="alert">
-            Could not send the message: {{ outcome.error.message }}
-          </p>
+    } @else {
+      @if (mcp.spec(); as spec) {
+        <json-render
+          [spec]="spec"
+          [loading]="mcp.loading()"
+          [registry]="registry"
+          [handlers]="mcp.handlers"
+        />
+        @if (mcp.lastMessage(); as outcome) {
+          @if (outcome.ok) {
+            <p class="status" role="status">Message passed to the chat.</p>
+          } @else {
+            <p class="status error" role="alert">
+              Could not send the message: {{ outcome.error.message }}
+            </p>
+          }
         }
+      } @else {
+        <p class="status">Waiting for the model's spec…</p>
       }
-    } @else {
-      <p class="status">Waiting for the model's spec…</p>
     }
   \`,
   styles: \`
@@ -319,21 +321,32 @@ export class App {
 }
 `;
 }
-function mainFile(material) {
+/**
+ * Angular 19 has zoneless change detection only as
+ * `provideExperimentalZonelessChangeDetection`; 20 renamed it.
+ */
+function zonelessProvider(manifest) {
+    const range = manifest.dependencies?.['@angular/core'];
+    const major = range ? Number(/\d+/.exec(range)?.[0]) : NaN;
+    return major === 19
+        ? 'provideExperimentalZonelessChangeDetection'
+        : 'provideZonelessChangeDetection';
+}
+function mainFile(material, zoneless) {
     if (!material) {
-        return `import { provideZonelessChangeDetection } from '@angular/core';
+        return `import { ${zoneless} } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { App } from './app/app';
 
 bootstrapApplication(App, {
-  providers: [provideZonelessChangeDetection()],
+  providers: [${zoneless}()],
 }).catch((err) => console.error(err));
 `;
     }
     return `import {
   inject,
   provideEnvironmentInitializer,
-  provideZonelessChangeDetection,
+  ${zoneless},
 } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { bootstrapApplication } from '@angular/platform-browser';
@@ -341,7 +354,7 @@ import { App } from './app/app';
 
 bootstrapApplication(App, {
   providers: [
-    provideZonelessChangeDetection(),
+    ${zoneless}(),
     // The Material catalog names icons as Material Symbols ligatures.
     provideEnvironmentInitializer(() =>
       inject(MatIconRegistry).setDefaultFontSetClass('material-symbols-outlined'),

package/schematics/mcp-app-builder/index.cjs

@@ -6,6 +6,11 @@ const node_fs_1 = require("node:fs");
 const node_module_1 = require("node:module");
 const node_path_1 = require("node:path");
 const inline_cjs_1 = require("./inline.cjs");
+/** The application builders whose build this one can run in-process. */
+const APPLICATION_BUILDERS = [
+    '@angular/build:application',
+    '@angular-devkit/build-angular:application',
+];
 /**
  * `ngx-json-render:mcp-app`: runs the view's application build, folds its
  * browser output into one `view.html` (an MCP Apps host loads the view as a
@@ -15,9 +20,7 @@ const inline_cjs_1 = require("./inline.cjs");
 async function buildMcpApp(options, context) {
     const root = context.workspaceRoot;
     const target = (0, architect_1.targetFromTargetString)(options.buildTarget, context.target?.project);
-    const run = await context.scheduleTarget(target);
-    const result = await run.result;
-    await run.stop();
+    const result = await buildView(options, context, target);
     if (!result.success)
         return result;
     const esbuild = loadEsbuild(root);
@@ -69,6 +72,50 @@ async function buildMcpApp(options, context) {
     }
     return { success: true, outputPath: out };
 }
+/**
+ * Runs the view's application build. For an application target in this
+ * project it runs in-process, so it can leave zod's translations out (see
+ * `zodLocalesPlugin`); any other target is scheduled as it is.
+ */
+async function buildView(options, context, target) {
+    const builderName = await context.getBuilderNameForTarget(target);
+    if (options.keepZodLocales ||
+        target.project !== context.target?.project ||
+        !APPLICATION_BUILDERS.includes(builderName)) {
+        const run = await context.scheduleTarget(target);
+        const result = await run.result;
+        await run.stop();
+        return result;
+    }
+    const { buildApplication } = (0, node_module_1.createRequire)((0, node_path_1.join)(context.workspaceRoot, 'package.json'))('@angular/build');
+    const targetOptions = await context.validateOptions(await context.getTargetOptions(target), builderName);
+    for await (const output of buildApplication({ ...targetOptions, watch: false }, context, { codePlugins: [zodLocalesPlugin()] })) {
+        return output;
+    }
+    return { success: false, error: 'The application build produced no result.' };
+}
+/**
+ * zod 4 re-exports all of its translations as `z.locales`, and `import { z }`
+ * keeps every one of them in the bundle — about 250 kB of a view that only
+ * shows English errors. The English one, which zod loads on its own, stays
+ * reachable as `z.locales.en`.
+ */
+function zodLocalesPlugin() {
+    const namespace = 'ngx-json-render-zod-locales';
+    return {
+        name: namespace,
+        setup(build) {
+            build.onResolve({ filter: /^\.\.\/locales\/index\.js$/ }, (args) => /[\\/]zod[\\/]v4[\\/](classic|mini|core)$/.test(args.resolveDir)
+                ? { path: (0, node_path_1.join)(args.resolveDir, '..', 'locales'), namespace }
+                : undefined);
+            build.onLoad({ filter: /.*/, namespace }, (args) => ({
+                contents: "export { default as en } from './en.js';",
+                resolveDir: args.path,
+                loader: 'js',
+            }));
+        },
+    };
+}
 /** Where the application build wrote its browser files. */
 async function browserOutput(context, target) {
     const options = await context.getTargetOptions(target);

package/schematics/mcp-app-builder/schema.json

@@ -24,6 +24,11 @@
       "type": "boolean",
       "default": false,
       "description": "Leave node_modules packages out of server.mjs, to be installed next to it. By default the server is one self-contained file."
+    },
+    "keepZodLocales": {
+      "type": "boolean",
+      "default": false,
+      "description": "Keep zod's translations (z.locales) in view.html. By default only English stays, which saves about 250 kB; set this if the view calls z.config with another locale."
     }
   },
   "required": ["buildTarget", "outputPath"],

package/schematics/ng-add/index.cjs

@@ -56,7 +56,7 @@ function declares(manifest, 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}.`);
+    if (major < 19) {
+        warn(`ngx-json-render needs Angular 19 or newer; this workspace has @angular/core ${range}.`);
     }
 }