ngx-json-render 0.9.5 → 0.9.7

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

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inlineView = inlineView;
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const MIME = {
+    '.woff2': 'font/woff2',
+    '.woff': 'font/woff',
+    '.ttf': 'font/ttf',
+    '.otf': 'font/otf',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.avif': 'image/avif',
+    '.svg': 'image/svg+xml',
+    '.ico': 'image/x-icon',
+};
+/**
+ * The browser output of an Angular application build as one HTML document.
+ * MCP Apps hosts load a view's `ui://` resource as a single document with no
+ * origin to fetch from, so every module script (main, polyfills, and the
+ * chunks they import) is bundled and inlined, every local stylesheet is
+ * inlined, and fonts and images the stylesheets point at become data URLs.
+ * External URLs stay as they are; the view's CSP has to allow them.
+ */
+async function inlineView(browserDir, bundle) {
+    const indexPath = (0, node_path_1.join)(browserDir, 'index.html');
+    if (!(0, node_fs_1.existsSync)(indexPath)) {
+        throw new Error(`No index.html in ${browserDir}. Is the build target an @angular/build:application build?`);
+    }
+    let html = (0, node_fs_1.readFileSync)(indexPath, 'utf8');
+    const used = new Set(['index.html']);
+    // Preloads point at chunks that are about to be inlined.
+    html = html.replace(/<link\b[^>]*\brel="modulepreload"[^>]*>/g, '');
+    // A view lives in an iframe, which shows no icon; `ng new` links one.
+    html = html.replace(/<link\b[^>]*\brel="(?:shortcut )?icon"[^>]*>\s*/g, (tag) => {
+        const href = attribute(tag, 'href');
+        const file = href && local(browserDir, href);
+        if (!file)
+            return tag;
+        used.add((0, node_path_1.relative)(browserDir, file));
+        return '';
+    });
+    for (const tag of html.match(/<script\b[^>]*\bsrc="[^"]*"[^>]*><\/script>/g) ?? []) {
+        const src = attribute(tag, 'src');
+        const file = src && local(browserDir, src);
+        if (!file)
+            continue;
+        used.add((0, node_path_1.relative)(browserDir, file));
+        const isModule = attribute(tag, 'type') === 'module';
+        const code = isModule ? await bundle(file) : (0, node_fs_1.readFileSync)(file, 'utf8');
+        html = html.replace(tag, () => `<script${isModule ? ' type="module"' : ''}>${escapeTag(code, 'script')}</script>`);
+    }
+    // Angular may load the stylesheet as `media="print" onload=…` with a
+    // <noscript> fallback, so it does not block the first paint.
+    const stylesheet = /<link\b[^>]*\brel="stylesheet"[^>]*>(\s*<noscript>[\s\S]*?<\/noscript>)?/g;
+    for (const [match] of html.matchAll(stylesheet)) {
+        const href = attribute(match, 'href');
+        const file = href && local(browserDir, href);
+        if (!file)
+            continue;
+        used.add((0, node_path_1.relative)(browserDir, file));
+        const css = inlineUrls((0, node_fs_1.readFileSync)(file, 'utf8'), file, browserDir, used);
+        html = html.replace(match, () => `<style>${escapeTag(css, 'style')}</style>`);
+    }
+    // Inline <style> blocks (critical CSS) can point at media files too.
+    html = html.replace(/(<style\b[^>]*>)([\s\S]*?)(<\/style>)/g, (_, open, css, close) => open + inlineUrls(css, indexPath, browserDir, used) + close);
+    const leftOut = files(browserDir)
+        .map((file) => (0, node_path_1.relative)(browserDir, file))
+        .filter((file) => !used.has(file) && !isBuildArtifact(file));
+    return { html, leftOut };
+}
+/** `url(...)` references to files of the build, as data URLs. */
+function inlineUrls(css, from, browserDir, used) {
+    return css.replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/g, (match, quote, url) => {
+        const base = (0, node_path_1.join)(from, '..');
+        const file = local(base, url) ?? local(browserDir, url);
+        const mime = file && MIME[(0, node_path_1.extname)(file).toLowerCase()];
+        if (!file || !mime)
+            return match;
+        used.add((0, node_path_1.relative)(browserDir, file));
+        const data = (0, node_fs_1.readFileSync)(file).toString('base64');
+        return `url(${quote}data:${mime};base64,${data}${quote})`;
+    });
+}
+/** The file `url` names under `dir`, or undefined for anything external. */
+function local(dir, url) {
+    if (/^(?:[a-z][a-z\d+.-]*:|\/\/|#)/i.test(url))
+        return undefined;
+    const path = decodeURIComponent(url.split(/[?#]/)[0]).replace(/^\/+/, '');
+    const file = (0, node_path_1.resolve)(dir, path);
+    if (file !== (0, node_path_1.resolve)(dir) && !file.startsWith((0, node_path_1.resolve)(dir) + node_path_1.sep)) {
+        return undefined;
+    }
+    return (0, node_fs_1.existsSync)(file) && (0, node_fs_1.statSync)(file).isFile() ? file : undefined;
+}
+function attribute(tag, name) {
+    return new RegExp(`\\b${name}="([^"]*)"`).exec(tag)?.[1];
+}
+/** Keeps `</script>` or `</style>` inside the code from closing the tag. */
+function escapeTag(code, tag) {
+    return code.replace(new RegExp(`</${tag}`, 'gi'), `<\\/${tag}`);
+}
+/** Chunks and maps the inlined scripts already carry, and build metadata. */
+function isBuildArtifact(file) {
+    return (/\.(?:js|mjs|map)$/.test(file) ||
+        file === '3rdpartylicenses.txt' ||
+        file === 'prerendered-routes.json');
+}
+function files(dir) {
+    return (0, node_fs_1.readdirSync)(dir, { withFileTypes: true }).flatMap((entry) => {
+        const path = (0, node_path_1.join)(dir, entry.name);
+        return entry.isDirectory() ? files(path) : [path];
+    });
+}

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

@@ -0,0 +1,31 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "ngx-json-render MCP App builder",
+  "description": "Builds an MCP App view into one view.html and bundles its server into server.mjs.",
+  "type": "object",
+  "properties": {
+    "buildTarget": {
+      "type": "string",
+      "description": "The view's @angular/build:application target, such as \"my-app:build:production\" or \":build:production\" for this project."
+    },
+    "outputPath": {
+      "type": "string",
+      "description": "Directory for view.html and server.mjs, relative to the workspace root."
+    },
+    "server": {
+      "type": "string",
+      "description": "The server's entry file, bundled into server.mjs. Leave it out to build the view only."
+    },
+    "tsConfig": {
+      "type": "string",
+      "description": "The tsconfig esbuild reads for the server (paths, decorators). By default, the nearest one to each file."
+    },
+    "externalPackages": {
+      "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."
+    }
+  },
+  "required": ["buildTarget", "outputPath"],
+  "additionalProperties": false
+}

package/types/ngx-json-render-mcp-server.d.ts

@@ -1,7 +1,24 @@
 import { Catalog } from '@json-render/core';
+import { z } from 'zod';
 import { McpUiResourceCsp } from '@modelcontextprotocol/ext-apps';
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
-import { z } from 'zod';
+
+/**
+ * `sendMessage`: post a message to the chat as the user, so the conversation
+ * carries on from what was clicked in the view.
+ */
+declare const sendMessageAction: {
+    params: z.ZodObject<{
+        text: z.ZodString;
+        data: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    }, z.core.$strip>;
+    description: string;
+};
+/**
+ * `catalog` plus the {@link sendMessageAction}, the same object for the same
+ * catalog, so the input schema built from it is built once.
+ */
+declare function withSendMessage<C extends Catalog>(catalog: C): C;
 
 /** Options for {@link createRenderUiServer}. */
 interface RenderUiServerOptions {
@@ -19,6 +36,12 @@ interface RenderUiServerOptions {
     title?: string;
     /** The tool's description. Default: {@link renderUiDescription} for the catalog. */
     description?: string;
+    /**
+     * Add the `sendMessage` action to the catalog the model sees, so a button
+     * in the view can post a message to the chat as the user. The view handles
+     * it with `injectJsonRenderApp().handlers` from `ngx-json-render/mcp`.
+     */
+    sendMessage?: boolean;
     /**
      * The origins the view may load from (`resourceDomains`) and connect to
      * (`connectDomains`). Left out, the host's default applies, which the MCP
@@ -103,5 +126,5 @@ declare const specOutputSchema: z.ZodObject<{
  */
 declare function specProblems(spec: object): string | undefined;
 
-export { DESCRIPTION_LIMIT, createRenderUiServer, handleRenderUiRequest, renderUiDescription, specInputSchema, specOutputSchema, specProblems };
+export { DESCRIPTION_LIMIT, createRenderUiServer, handleRenderUiRequest, renderUiDescription, sendMessageAction, specInputSchema, specOutputSchema, specProblems, withSendMessage };
 export type { RenderUiDescriptionOptions, RenderUiServerOptions };

package/types/ngx-json-render-mcp.d.ts

@@ -1,5 +1,5 @@
 import { Signal } from '@angular/core';
-import { Spec } from '@json-render/core';
+import { Spec, ActionHandler } from '@json-render/core';
 import { App } from '@modelcontextprotocol/ext-apps';
 import { Transport } from '@modelcontextprotocol/sdk/shared/transport.js';
 
@@ -30,6 +30,13 @@ interface JsonRenderAppOptions {
      */
     autoResize?: boolean;
 }
+/** How the last {@link JsonRenderApp.sendMessage} from an action went. */
+type MessageOutcome = {
+    ok: true;
+} | {
+    ok: false;
+    error: Error;
+};
 /**
  * What {@link injectJsonRenderApp} returns — the fields of
  * `UseJsonRenderAppReturn` from `@json-render/mcp/app`, as signals.
@@ -59,6 +66,20 @@ interface JsonRenderApp {
      * one down, so an action's `onError` runs.
      */
     sendMessage(text: string, data?: Record<string, unknown>): Promise<void>;
+    /**
+     * Handlers for the actions the server adds for MCP Apps hosts
+     * (`createRenderUiServer({ sendMessage: true })` in
+     * `ngx-json-render/mcp/server`): pass them to `<json-render [handlers]>`.
+     * `sendMessage` takes `{ text, data? }` and posts it with
+     * {@link JsonRenderApp.sendMessage}.
+     */
+    readonly handlers: Record<string, ActionHandler>;
+    /**
+     * How the last `sendMessage` action went, `null` before the first. A host
+     * may decline a message or take none at all; show this so a press does not
+     * look like it did nothing.
+     */
+    readonly lastMessage: Signal<MessageOutcome | null>;
 }
 /** The text of a {@link JsonRenderApp.sendMessage} message. */
 declare function messageText(text: string, data?: Record<string, unknown>): string;
@@ -77,7 +98,8 @@ declare function parseSpecFromToolResult(result: ToolResultLike): Spec | null;
  * Connect an Angular app running inside an MCP Apps iframe to its host and
  * keep the json-render spec the model sent in a signal. The Angular
  * counterpart of `useJsonRenderApp` from `@json-render/mcp/app`; the server
- * side is `createMcpApp` from `@json-render/mcp`, unchanged.
+ * side is `createRenderUiServer` from `ngx-json-render/mcp/server`, or
+ * `createMcpApp` from `@json-render/mcp`.
  *
  * Call it in an injection context. The connection closes when the injector
  * that created it is destroyed.
@@ -90,4 +112,4 @@ declare function parseSpecFromToolResult(result: ToolResultLike): Spec | null;
 declare function injectJsonRenderApp(options?: JsonRenderAppOptions): JsonRenderApp;
 
 export { injectJsonRenderApp, messageText, parseSpecFromToolResult };
-export type { JsonRenderApp, JsonRenderAppOptions };
+export type { JsonRenderApp, JsonRenderAppOptions, MessageOutcome };