ngx-json-render 0.9.4 → 0.9.6

package/README.md

@@ -734,7 +734,54 @@ export class App {
 
 The spec renders while the model is still writing the tool call, from the host's `toolinputpartial` notifications; pass `streamPartialInput: false` to wait for the result. `mcp.sendMessage(text, data)` posts a user message to the chat, so a button can continue the conversation, and `mcp.callServerTool(name, args)` replaces the spec with another tool's result. The connection closes with the injector that created it.
 
-The server side is upstream's `@json-render/mcp`, which serves the view as a single HTML resource. [`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, the build that inlines it into one page, and a server that works around two `createMcpApp` problems.
+### The server
+
+`ngx-json-render/mcp/server` is the other half: an MCP server with one `render-ui` tool for your catalog, and the view as its `ui://` resource. It needs no Angular, so it runs in plain Node or on an edge function, and it takes the same two optional peers.
+
+```ts
+import { readFileSync } from 'node:fs';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { createRenderUiServer } from 'ngx-json-render/mcp/server';
+import { catalog } from './catalog'; // defineCatalog(schema, …) from ngx-json-render/schema
+
+const server = createRenderUiServer({
+  catalog,
+  html: readFileSync(new URL('./view.html', import.meta.url), 'utf8'), // the view above, built into one page
+  name: 'my-app',
+  version: '1.0.0',
+});
+await server.connect(new StdioServerTransport());
+```
+
+Over HTTP, `handleRenderUiRequest(options, request)` takes a web `Request` and returns a `Response`. It serves each request statelessly with a fresh server, as a serverless or edge function needs, and answers CORS for browser-based clients such as MCP Inspector.
+
+What it does on top of upstream's `createMcpApp` from `@json-render/mcp`, whose tool and resource it registers the same way:
+
+- **A description Claude reads whole.** `createMcpApp` describes the tool with `catalog.prompt()`, about 26 000 characters, and Claude cuts a tool description off after roughly 2 000, before the first component. `renderUiDescription(catalog)` stays under that limit (`DESCRIPTION_LIMIT`) and leaves the components to the input schema.
+- **An input schema that keeps the spec whole.** `catalog.zodSchema()` has no `state`, `on` or `watch`, so the MCP SDK strips them from the arguments before the tool sees them, and it types no props. `specInputSchema(catalog)` declares them and gives each component its own props, with dynamic values allowed and unknown props rejected, and checks each action's params.
+- **Errors the model can fix.** A spec with a missing child or root, or a `$template` that reads a repeat item as `${$item/field}`, goes back as a tool error that says what to write instead (`specProblems`).
+- **The structured result ChatGPT asks for:** the spec as `structuredContent`, with an output schema (`specOutputSchema`).
+
+Options: `name`, `version`, `toolName` (default `render-ui`), `title`, `description`, `csp` (the origins the view may load from and connect to; left out, the host allows none) and `widgetDomain` (the view's origin for ChatGPT's plugin directory). If your catalog has a `sendMessage` action, the description tells the model how to use it; the view's handler for it calls `mcp.sendMessage()`.
+
+### Building it
+
+A host loads the view as one HTML document with nowhere to fetch chunks from, so the Angular build has to be folded into a single page. The `ngx-json-render:mcp-app` builder does that, and bundles the server next to it. Give the view its own application project (`ng generate application mcp-view`), then add a target to it in `angular.json`:
+
+```json
+"mcp": {
+  "builder": "ngx-json-render:mcp-app",
+  "options": {
+    "buildTarget": "mcp-view:build:production",
+    "outputPath": "dist/mcp-app",
+    "server": "projects/mcp-view/server.ts"
+  }
+}
+```
+
+`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`.
+
+[`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`.
 
 ## Devtools
 
@@ -1176,6 +1223,10 @@ Schema alone (`ngx-json-render/schema`): `schema`, `AngularSchema`, `AngularSpec
 
 MCP Apps (`ngx-json-render/mcp`): `injectJsonRenderApp`, `parseSpecFromToolResult`, `messageText`, and the types `JsonRenderApp`, `JsonRenderAppOptions`. Needs the optional peers `@modelcontextprotocol/ext-apps` and `@modelcontextprotocol/sdk`.
 
+MCP App server (`ngx-json-render/mcp/server`): `createRenderUiServer`, `handleRenderUiRequest`, `renderUiDescription`, `specInputSchema`, `specOutputSchema`, `specProblems`, `DESCRIPTION_LIMIT`, and the types `RenderUiServerOptions`, `RenderUiDescriptionOptions`. No Angular; the same optional peers.
+
+MCP App builder (`ngx-json-render:mcp-app`): the view's application build as one `view.html`, and the server bundled into `server.mjs`.
+
 Router (`ngx-json-render/router`): `injectRouterNavigate`, and the type `RouterNavigateOptions`. Needs the optional peer `@angular/router`, which an Angular app on the router already has.
 
 AG-UI (`ngx-json-render/ag-ui`): `injectAgentUI`, `applyAgUiEvent`, `surfacesFromMessages`, `isJsonRenderSpec`, `JsonRenderActivity` (`<json-render-activity>`), `jsonRenderActivityRenderer`, `JSON_RENDER_ACTIVITY_TYPE`, and the types `AgUiAgent`, `AgUiEvent`, `AgUiMessage`, `AgUiSubscriber`, `AgUiSurface`, `AgentUIOptions`, `AgentUIReturn`, `JsonRenderActivityRendererConfig`, `JsonRenderActivityRendererOptions`. No peer: any agent and event of the right shape will do.

package/fesm2022/ngx-json-render-mcp-server.mjs

@@ -0,0 +1,424 @@
+import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from '@modelcontextprotocol/ext-apps/server';
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { WebStandardStreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js';
+import { validateSpec } from '@json-render/core';
+import { z } from 'zod';
+
+// What the model sees of the `render-ui` tool: a short description and an
+// input schema that carries the catalog.
+//
+// `catalog.prompt()` is written to be a system prompt, and it is about 26 000
+// characters long. Claude shows a tool's description to the model cut off
+// after roughly 2 000 characters, which `catalog.prompt()` spends on its
+// JSON Patch streaming instructions: the model never saw a component, a prop
+// or an action. So the description here stays short, and each component's
+// props and each action's params go into the input schema, where they are
+// also enforced.
+/** Claude cuts a tool description off after roughly this many characters. */
+const DESCRIPTION_LIMIT = 2000;
+/**
+ * The `render-ui` tool description for `catalog`: how a spec is put
+ * together, in under {@link DESCRIPTION_LIMIT} characters. The components,
+ * props and actions are left to the input schema. The paragraph on
+ * `sendMessage` is included only when the catalog defines that action, since
+ * the view has to handle it.
+ */
+function renderUiDescription(catalog, { ui = 'UI' } = {}) {
+    const actions = catalog.data.actions ?? {};
+    const lines = [
+        `Render an interactive ${ui} inline in the chat. Pass \`spec\`: one complete json-render spec object (not JSON Patch lines). The input schema lists every component, its props and allowed values, and every action; use only those.`,
+        '',
+        '- `root` is the key of the top element. `elements` is a flat map of key → { type, props, children: [child keys] }; every child key must exist in `elements`.',
+        '- `state` holds the data. Read it with {"$state":"/path"} rather than repeating values in props. Data-backed UI always needs `state`; use realistic sample data.',
+        '- A prop can be dynamic: {"$state":"/p"} reads, {"$bindState":"/p"} binds a form field both ways, {"$template":"Hi ${/name}"} interpolates, {"$cond":{"$state":"/p"},"$then":a,"$else":b} picks.',
+        '- Lists: on a container, "repeat":{"statePath":"/items","key":"id"}; its children render once per item and read {"$item":"field"}, or ${field} inside a $template.',
+        '- `visible` and `on` sit next to `props`, never inside: "visible":{"$state":"/tab","eq":"home"}, "on":{"press":{"action":"setState","params":{"statePath":"/tab","value":"home"}}}.',
+        '- Forms: give inputs props.validation {"checks":[{"type":"required","message":"..."}]} and submit with submitForm, which runs its inner action only when every field is valid.',
+    ];
+    if ('sendMessage' in actions) {
+        lines.push('- To continue the conversation from a button, use sendMessage: {"action":"sendMessage","params":{"text":"Approve release 2.4.0","data":{"$state":"/release"}}}. The host puts `text` (and `data` as JSON) in the chat as the user\'s message, so write it in their voice. For a form: {"action":"submitForm","params":{"action":"sendMessage","params":{"text":"Sign me up","data":{"$state":"/form"}}}}.');
+    }
+    return lines.join('\n');
+}
+/** A prop value computed from state, such as `{ "$state": "/path" }`. */
+const dynamic = z
+    .looseObject({})
+    .refine((value) => Object.keys(value).some((key) => key.startsWith('$')), {
+    message: 'Expected a dynamic value such as {"$state": "/path"} or {"$bindState": "/path"}',
+})
+    .meta({
+    // An id makes the JSON Schema define it once and refer to it.
+    id: 'DynamicValue',
+    description: 'Dynamic value: {"$state"}, {"$bindState"}, {"$bindItem"}, {"$item"}, {"$index"}, {"$template"} or {"$cond","$then","$else"}.',
+});
+/**
+ * A union's error that says why its first branch failed (say, the allowed
+ * enum values), rather than just that no branch matched.
+ */
+function firstBranchError(suffix = '') {
+    return (issue) => {
+        if (issue.code !== 'invalid_union')
+            return undefined;
+        const reasons = issue.errors[0]?.map((error) => error.message);
+        return reasons?.length ? reasons.join('; ') + suffix : undefined;
+    };
+}
+/** `shape`'s fields, each of which may also be a dynamic value; nothing else. */
+function allowDynamic(schema) {
+    const shape = schema.shape ?? {};
+    return z.strictObject(Object.fromEntries(Object.entries(shape).map(([key, field]) => {
+        const optional = field instanceof z.ZodOptional;
+        const value = z.union([optional ? field.unwrap() : field, dynamic], {
+            error: firstBranchError(', or a dynamic value such as {"$state": "/path"}'),
+        });
+        return [key, optional ? value.optional() : value];
+    })));
+}
+/**
+ * An action binding, or several, with one branch per action so the params
+ * of the catalog's own actions are checked.
+ */
+function actionBinding(catalog) {
+    const common = {
+        confirm: z.unknown().optional(),
+        onSuccess: z.unknown().optional(),
+        onError: z.unknown().optional(),
+        preventDefault: z.boolean().optional(),
+    };
+    const builtIn = catalog.schema.builtInActions ?? [];
+    const actions = catalog.data.actions ?? {};
+    const bindings = Object.entries(actions).map(([name, action]) => z
+        .strictObject({
+        action: z.literal(name),
+        params: allowDynamic(action.params ?? z.object({})),
+        ...common,
+    })
+        .describe(`${name}: ${action.description}`));
+    if (builtIn.length > 0) {
+        const names = builtIn.map((action) => action.name);
+        bindings.push(z
+            .strictObject({
+            action: z.enum(names),
+            params: z.record(z.string(), z.unknown()).optional(),
+            ...common,
+        })
+            .describe(builtIn
+            .map((action) => `${action.name}: ${action.description}`)
+            .join('\n')));
+    }
+    const binding = z
+        .discriminatedUnion('action', bindings, {
+        error: `Unknown action. Use one of: ${[...Object.keys(actions), ...builtIn.map((action) => action.name)].join(', ')}.`,
+    })
+        .meta({ id: 'ActionBinding' });
+    return z.union([binding, z.array(binding)], { error: firstBranchError() });
+}
+/**
+ * The tool's input schema: a spec whose elements are typed per component.
+ *
+ * `catalog.zodSchema()` types an element's `type` but not its props, and it
+ * has no `state`, `on` or `watch`, so the MCP SDK, which parses tool
+ * arguments with the input schema, stripped those and let any prop through.
+ * Here each component's props are its catalog schema (with dynamic values
+ * allowed and unknown props rejected), and each action's params are checked.
+ */
+function specInputSchema(catalog) {
+    let schema = inputSchemas.get(catalog);
+    if (!schema) {
+        schema = buildSpecInputSchema(catalog);
+        inputSchemas.set(catalog, schema);
+    }
+    return schema;
+}
+/**
+ * The sentences every validatable component's description ends with, or ""
+ * when there are none worth sharing.
+ *
+ * The catalog repeats its validation hint on each form field because
+ * `catalog.prompt()` lists components one by one and shows no prop-level
+ * descriptions. In the input schema the same ~600 characters would arrive
+ * once per field component, so the schema says them once, on `elements`, and
+ * each field points there. Found as the descriptions' common tail, cut back
+ * to a sentence start, so the catalog does not have to export it.
+ */
+function sharedValidationHint(components) {
+    const descriptions = Object.values(components)
+        .filter((component) => component.props.shape?.['validation'] !==
+        undefined)
+        .map((component) => component.description);
+    if (descriptions.length < 2)
+        return '';
+    let tail = descriptions[0];
+    for (const description of descriptions.slice(1)) {
+        let n = 0;
+        while (n < tail.length &&
+            n < description.length &&
+            tail[tail.length - 1 - n] === description[description.length - 1 - n]) {
+            n++;
+        }
+        tail = tail.slice(tail.length - n);
+    }
+    // The shared tail usually starts part-way through the sentence before it.
+    const before = descriptions[0].slice(0, descriptions[0].length - tail.length);
+    if (before !== '' && !/[.!?] $/.test(before)) {
+        const next = tail.indexOf('. ');
+        tail = next === -1 ? '' : tail.slice(next + 2);
+    }
+    return tail.length >= 200 ? tail : '';
+}
+/**
+ * What `render-ui` returns as `structuredContent`: the spec it was given,
+ * after the input schema filled in missing `children`. Only its outline,
+ * since the input schema already carries the catalog and a second copy would
+ * double what every `tools/list` sends the model. ChatGPT flags a tool
+ * without an output schema ("Output schema recommended").
+ */
+const specOutputSchema = z
+    .looseObject({
+    root: z.string(),
+    elements: z.record(z.string(), z.looseObject({
+        type: z.string(),
+        props: z.record(z.string(), z.unknown()),
+        children: z.array(z.string()),
+    })),
+    state: z.record(z.string(), z.unknown()).optional(),
+})
+    .describe('The json-render spec that was rendered.');
+// The server is stateless, so it is created for every request; build each
+// catalog's schema once.
+const inputSchemas = new WeakMap();
+function buildSpecInputSchema(catalog) {
+    const bindings = actionBinding(catalog);
+    // The fields every element shares, defined once in the JSON Schema.
+    const shared = {
+        visible: z
+            .unknown()
+            .meta({
+            id: 'Visibility',
+            description: 'Show the element only when this holds: {"$state":"/p","eq":v} (or neq, gt, gte, lt, lte, not), an array of conditions (all), {"$or":[...]}, true or false.',
+        })
+            .optional(),
+        repeat: z
+            .strictObject({
+            statePath: z.union([z.string(), dynamic]),
+            key: z.string().optional(),
+        })
+            .meta({
+            id: 'Repeat',
+            description: 'Render the children once per item of the state array at statePath; they read {"$item":"field"} and {"$index":true}.',
+        })
+            .optional(),
+        on: z
+            .record(z.string(), bindings)
+            .meta({
+            id: 'Events',
+            description: 'Event name (such as "press", "change" or "submit") → action binding.',
+        })
+            .optional(),
+        watch: z
+            .record(z.string(), bindings)
+            .meta({
+            id: 'Watchers',
+            description: 'State path → action binding, run when the value at that path changes.',
+        })
+            .optional(),
+    };
+    const { components } = catalog.data;
+    const hint = sharedValidationHint(components);
+    const elements = Object.entries(components).map(([type, component]) => {
+        const description = hint && component.description.endsWith(hint)
+            ? `${component.description.slice(0, -hint.length)}Validation: see \`elements\`.`
+            : component.description;
+        return z
+            .strictObject({
+            type: z.literal(type),
+            props: allowDynamic(component.props),
+            children: z.array(z.string()).default([]),
+            ...shared,
+        })
+            .describe(`${type}: ${description}`);
+    });
+    return z.strictObject({
+        root: z.string().describe('Key of the top element in `elements`.'),
+        elements: z
+            .record(z.string(), z.discriminatedUnion('type', elements))
+            .describe(hint
+            ? `Elements by key. On every component that takes \`validation\`: ${hint}`
+            : 'Elements by key.'),
+        state: z
+            .record(z.string(), z.unknown())
+            .optional()
+            .describe('Initial state model; bindings read it with {"$state": "/path"}.'),
+    });
+}
+/**
+ * What the input schema cannot express: a root and children that exist,
+ * repeat with a template child, valid visibility conditions, and `$template`
+ * placeholders that read a repeat item. Returns the problems as text for the
+ * model, or `undefined` when there are none.
+ */
+function specProblems(spec) {
+    // The input schema has already checked the shape `Spec` describes.
+    const { issues } = validateSpec(spec);
+    const errors = issues.filter((issue) => issue.severity === 'error');
+    const messages = [
+        ...errors.map((issue) => issue.message),
+        ...itemTemplateProblems(spec),
+    ];
+    return messages.length > 0
+        ? [
+            'The generated UI spec has the following errors:',
+            ...messages.map((message) => `- ${message}`),
+        ].join('\n')
+        : undefined;
+}
+/**
+ * `${$item/field}` placeholders in a `$template`. A `$template` reads an
+ * absolute `${/path}` from state and a bare `${field}` from the repeat item
+ * first, so `$item/field` is looked up as the state path `/$item/field`,
+ * finds nothing and renders as an empty string, without an error anywhere.
+ */
+function itemTemplateProblems(spec) {
+    const problems = [];
+    for (const [key, { props, on, watch }] of Object.entries(spec.elements)) {
+        walk({ props, on, watch }, '', (template, path) => {
+            for (const [, placeholder, field] of template.matchAll(ITEM_PLACEHOLDER)) {
+                problems.push(`Element "${key}" ${path}: inside $template write \${${field.replaceAll('.', '/')}}, not \${${placeholder}}`);
+            }
+        });
+    }
+    return problems;
+}
+/** `${$item/field}` or `${$item.field}`; the groups are the placeholder and the field. */
+const ITEM_PLACEHOLDER = /\$\{(\$item[/.]([^}]+))\}/g;
+/** Calls `visit` with every `$template` string under `value` and where it sits. */
+function walk(value, path, visit) {
+    if (Array.isArray(value)) {
+        value.forEach((item, index) => walk(item, `${path}[${index}]`, visit));
+    }
+    else if (value !== null && typeof value === 'object') {
+        for (const [key, child] of Object.entries(value)) {
+            if (key === '$template' && typeof child === 'string') {
+                visit(child, path);
+            }
+            else {
+                walk(child, path ? `${path}.${key}` : key, visit);
+            }
+        }
+    }
+}
+
+/**
+ * An MCP server with a `render-ui` tool for `catalog` and its `ui://` view.
+ * Connect it to any transport: `StdioServerTransport` for a local host,
+ * or {@link handleRenderUiRequest} for Streamable HTTP.
+ *
+ * The tool checks a spec against the catalog before it echoes it back. A
+ * rejected spec goes back to the model as an error it can fix.
+ */
+function createRenderUiServer(options) {
+    const { catalog, html, name = 'ngx-json-render', version = '0.0.0', toolName = 'render-ui', title = 'Render UI', description = renderUiDescription(catalog), csp, widgetDomain, } = options;
+    const resourceUri = `ui://${toolName}/view.html`;
+    const server = new McpServer({ name, version });
+    registerAppTool(server, toolName, {
+        title,
+        description,
+        inputSchema: { spec: specInputSchema(catalog) },
+        outputSchema: { spec: specOutputSchema },
+        // It only echoes the spec back for the view to draw: nothing is read
+        // from or written to any system.
+        annotations: {
+            title,
+            readOnlyHint: true,
+            destructiveHint: false,
+            idempotentHint: true,
+            openWorldHint: false,
+        },
+        _meta: { ui: { resourceUri } },
+    }, 
+    // The SDK has already parsed `spec` against the input schema; what is
+    // left is the structure between elements. The text keeps upstream's
+    // shape, the bare spec, which is what views built on
+    // `@json-render/mcp/app` read.
+    async ({ spec }) => {
+        const problems = specProblems(spec);
+        return problems
+            ? { isError: true, content: [{ type: 'text', text: problems }] }
+            : {
+                content: [{ type: 'text', text: JSON.stringify(spec) }],
+                structuredContent: { spec },
+            };
+    });
+    const meta = {};
+    if (csp)
+        meta['ui'] = { csp };
+    if (widgetDomain)
+        meta['openai/widgetDomain'] = widgetDomain;
+    registerAppResource(server, resourceUri, resourceUri, { mimeType: RESOURCE_MIME_TYPE }, async () => ({
+        contents: [
+            {
+                uri: resourceUri,
+                mimeType: RESOURCE_MIME_TYPE,
+                text: html,
+                ...(Object.keys(meta).length > 0 && { _meta: meta }),
+            },
+        ],
+    }));
+    return server;
+}
+/**
+ * Serve one Streamable HTTP request, statelessly: a fresh server and
+ * transport per request, so it runs unchanged on a serverless or edge
+ * function (anything with web `Request` and `Response`). Answers CORS,
+ * because browser-based clients such as MCP Inspector call cross-origin.
+ */
+async function handleRenderUiRequest(options, request) {
+    if (request.method === 'OPTIONS') {
+        return new Response(null, { status: 204, headers: CORS_HEADERS });
+    }
+    const server = createRenderUiServer(options);
+    const transport = new WebStandardStreamableHTTPServerTransport({
+        sessionIdGenerator: undefined,
+        // One JSON body per request: nothing here streams, and a serverless
+        // function returns as soon as the response is complete.
+        enableJsonResponse: true,
+    });
+    await server.connect(transport);
+    try {
+        const response = await transport.handleRequest(request);
+        const headers = new Headers(response.headers);
+        for (const [key, value] of Object.entries(CORS_HEADERS)) {
+            headers.set(key, value);
+        }
+        return new Response(response.body, {
+            status: response.status,
+            statusText: response.statusText,
+            headers,
+        });
+    }
+    finally {
+        await transport.close();
+        await server.close();
+    }
+}
+const CORS_HEADERS = {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'GET, POST, DELETE, OPTIONS',
+    'Access-Control-Allow-Headers': 'Content-Type, Accept, Authorization, Mcp-Session-Id, Mcp-Protocol-Version, Last-Event-ID',
+    'Access-Control-Expose-Headers': 'Mcp-Session-Id',
+};
+
+/*
+ * Public API Surface of ngx-json-render/mcp/server
+ *
+ * The server half of an MCP App for a json-render catalog: the `render-ui`
+ * tool and the `ui://` view resource. Angular-free, so it runs in Node or on
+ * an edge function; the view it serves is built with `ngx-json-render/mcp`.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DESCRIPTION_LIMIT, createRenderUiServer, handleRenderUiRequest, renderUiDescription, specInputSchema, specOutputSchema, specProblems };
+//# sourceMappingURL=ngx-json-render-mcp-server.mjs.map

package/fesm2022/ngx-json-render-mcp-server.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-json-render-mcp-server.mjs","sources":["../../../projects/ngx-json-render/mcp/server/src/tool.ts","../../../projects/ngx-json-render/mcp/server/src/server.ts","../../../projects/ngx-json-render/mcp/server/src/public-api.ts","../../../projects/ngx-json-render/mcp/server/src/ngx-json-render-mcp-server.ts"],"sourcesContent":["// What the model sees of the `render-ui` tool: a short description and an\n// input schema that carries the catalog.\n//\n// `catalog.prompt()` is written to be a system prompt, and it is about 26 000\n// characters long. Claude shows a tool's description to the model cut off\n// after roughly 2 000 characters, which `catalog.prompt()` spends on its\n// JSON Patch streaming instructions: the model never saw a component, a prop\n// or an action. So the description here stays short, and each component's\n// props and each action's params go into the input schema, where they are\n// also enforced.\nimport { type Catalog, type Spec, validateSpec } from '@json-render/core';\nimport { z } from 'zod';\n\n/** Claude cuts a tool description off after roughly this many characters. */\nexport const DESCRIPTION_LIMIT = 2000;\n\n/** Options for {@link renderUiDescription}. */\nexport interface RenderUiDescriptionOptions {\n  /** What the tool draws, as the first sentence names it. Default `'UI'`. */\n  ui?: string;\n}\n\n/**\n * The `render-ui` tool description for `catalog`: how a spec is put\n * together, in under {@link DESCRIPTION_LIMIT} characters. The components,\n * props and actions are left to the input schema. The paragraph on\n * `sendMessage` is included only when the catalog defines that action, since\n * the view has to handle it.\n */\nexport function renderUiDescription(\n  catalog: Catalog,\n  { ui = 'UI' }: RenderUiDescriptionOptions = {},\n): string {\n  const actions = (catalog.data as CatalogData).actions ?? {};\n  const lines = [\n    `Render an interactive ${ui} inline in the chat. Pass \\`spec\\`: one complete json-render spec object (not JSON Patch lines). The input schema lists every component, its props and allowed values, and every action; use only those.`,\n    '',\n    '- `root` is the key of the top element. `elements` is a flat map of key → { type, props, children: [child keys] }; every child key must exist in `elements`.',\n    '- `state` holds the data. Read it with {\"$state\":\"/path\"} rather than repeating values in props. Data-backed UI always needs `state`; use realistic sample data.',\n    '- A prop can be dynamic: {\"$state\":\"/p\"} reads, {\"$bindState\":\"/p\"} binds a form field both ways, {\"$template\":\"Hi ${/name}\"} interpolates, {\"$cond\":{\"$state\":\"/p\"},\"$then\":a,\"$else\":b} picks.',\n    '- Lists: on a container, \"repeat\":{\"statePath\":\"/items\",\"key\":\"id\"}; its children render once per item and read {\"$item\":\"field\"}, or ${field} inside a $template.',\n    '- `visible` and `on` sit next to `props`, never inside: \"visible\":{\"$state\":\"/tab\",\"eq\":\"home\"}, \"on\":{\"press\":{\"action\":\"setState\",\"params\":{\"statePath\":\"/tab\",\"value\":\"home\"}}}.',\n    '- Forms: give inputs props.validation {\"checks\":[{\"type\":\"required\",\"message\":\"...\"}]} and submit with submitForm, which runs its inner action only when every field is valid.',\n  ];\n  if ('sendMessage' in actions) {\n    lines.push(\n      '- To continue the conversation from a button, use sendMessage: {\"action\":\"sendMessage\",\"params\":{\"text\":\"Approve release 2.4.0\",\"data\":{\"$state\":\"/release\"}}}. The host puts `text` (and `data` as JSON) in the chat as the user\\'s message, so write it in their voice. For a form: {\"action\":\"submitForm\",\"params\":{\"action\":\"sendMessage\",\"params\":{\"text\":\"Sign me up\",\"data\":{\"$state\":\"/form\"}}}}.',\n    );\n  }\n  return lines.join('\\n');\n}\n\n/** The parts of a catalog's data this file reads. */\ninterface CatalogData {\n  components: Record<string, { props: z.ZodType; description: string }>;\n  actions?: Record<string, { params?: z.ZodType; description: string }>;\n}\n\n/** A prop value computed from state, such as `{ \"$state\": \"/path\" }`. */\nconst dynamic = z\n  .looseObject({})\n  .refine((value) => Object.keys(value).some((key) => key.startsWith('$')), {\n    message:\n      'Expected a dynamic value such as {\"$state\": \"/path\"} or {\"$bindState\": \"/path\"}',\n  })\n  .meta({\n    // An id makes the JSON Schema define it once and refer to it.\n    id: 'DynamicValue',\n    description:\n      'Dynamic value: {\"$state\"}, {\"$bindState\"}, {\"$bindItem\"}, {\"$item\"}, {\"$index\"}, {\"$template\"} or {\"$cond\",\"$then\",\"$else\"}.',\n  });\n\n/**\n * A union's error that says why its first branch failed (say, the allowed\n * enum values), rather than just that no branch matched.\n */\nfunction firstBranchError(suffix = '') {\n  return (issue: z.core.$ZodRawIssue) => {\n    if (issue.code !== 'invalid_union') return undefined;\n    const reasons = issue.errors[0]?.map((error) => error.message);\n    return reasons?.length ? reasons.join('; ') + suffix : undefined;\n  };\n}\n\n/** `shape`'s fields, each of which may also be a dynamic value; nothing else. */\nfunction allowDynamic(schema: z.ZodType) {\n  const shape = (schema as z.ZodObject).shape ?? {};\n  return z.strictObject(\n    Object.fromEntries(\n      Object.entries(shape).map(([key, field]) => {\n        const optional = field instanceof z.ZodOptional;\n        const value = z.union([optional ? field.unwrap() : field, dynamic], {\n          error: firstBranchError(\n            ', or a dynamic value such as {\"$state\": \"/path\"}',\n          ),\n        });\n        return [key, optional ? value.optional() : value];\n      }),\n    ),\n  );\n}\n\n/**\n * An action binding, or several, with one branch per action so the params\n * of the catalog's own actions are checked.\n */\nfunction actionBinding(catalog: Catalog) {\n  const common = {\n    confirm: z.unknown().optional(),\n    onSuccess: z.unknown().optional(),\n    onError: z.unknown().optional(),\n    preventDefault: z.boolean().optional(),\n  };\n  const builtIn = catalog.schema.builtInActions ?? [];\n  const actions = (catalog.data as CatalogData).actions ?? {};\n  const bindings: z.ZodObject[] = Object.entries(actions).map(\n    ([name, action]) =>\n      z\n        .strictObject({\n          action: z.literal(name),\n          params: allowDynamic(action.params ?? z.object({})),\n          ...common,\n        })\n        .describe(`${name}: ${action.description}`),\n  );\n  if (builtIn.length > 0) {\n    const names = builtIn.map((action) => action.name) as [string, ...string[]];\n    bindings.push(\n      z\n        .strictObject({\n          action: z.enum(names),\n          params: z.record(z.string(), z.unknown()).optional(),\n          ...common,\n        })\n        .describe(\n          builtIn\n            .map((action) => `${action.name}: ${action.description}`)\n            .join('\\n'),\n        ),\n    );\n  }\n  const binding = z\n    .discriminatedUnion('action', bindings as [z.ZodObject, ...z.ZodObject[]], {\n      error: `Unknown action. Use one of: ${[...Object.keys(actions), ...builtIn.map((action) => action.name)].join(', ')}.`,\n    })\n    .meta({ id: 'ActionBinding' });\n  return z.union([binding, z.array(binding)], { error: firstBranchError() });\n}\n\n/**\n * The tool's input schema: a spec whose elements are typed per component.\n *\n * `catalog.zodSchema()` types an element's `type` but not its props, and it\n * has no `state`, `on` or `watch`, so the MCP SDK, which parses tool\n * arguments with the input schema, stripped those and let any prop through.\n * Here each component's props are its catalog schema (with dynamic values\n * allowed and unknown props rejected), and each action's params are checked.\n */\nexport function specInputSchema(catalog: Catalog) {\n  let schema = inputSchemas.get(catalog);\n  if (!schema) {\n    schema = buildSpecInputSchema(catalog);\n    inputSchemas.set(catalog, schema);\n  }\n  return schema;\n}\n\n/**\n * The sentences every validatable component's description ends with, or \"\"\n * when there are none worth sharing.\n *\n * The catalog repeats its validation hint on each form field because\n * `catalog.prompt()` lists components one by one and shows no prop-level\n * descriptions. In the input schema the same ~600 characters would arrive\n * once per field component, so the schema says them once, on `elements`, and\n * each field points there. Found as the descriptions' common tail, cut back\n * to a sentence start, so the catalog does not have to export it.\n */\nfunction sharedValidationHint(components: CatalogData['components']): string {\n  const descriptions = Object.values(components)\n    .filter(\n      (component) =>\n        (component.props as Partial<z.ZodObject>).shape?.['validation'] !==\n        undefined,\n    )\n    .map((component) => component.description);\n  if (descriptions.length < 2) return '';\n\n  let tail = descriptions[0];\n  for (const description of descriptions.slice(1)) {\n    let n = 0;\n    while (\n      n < tail.length &&\n      n < description.length &&\n      tail[tail.length - 1 - n] === description[description.length - 1 - n]\n    ) {\n      n++;\n    }\n    tail = tail.slice(tail.length - n);\n  }\n  // The shared tail usually starts part-way through the sentence before it.\n  const before = descriptions[0].slice(0, descriptions[0].length - tail.length);\n  if (before !== '' && !/[.!?] $/.test(before)) {\n    const next = tail.indexOf('. ');\n    tail = next === -1 ? '' : tail.slice(next + 2);\n  }\n  return tail.length >= 200 ? tail : '';\n}\n\n/**\n * What `render-ui` returns as `structuredContent`: the spec it was given,\n * after the input schema filled in missing `children`. Only its outline,\n * since the input schema already carries the catalog and a second copy would\n * double what every `tools/list` sends the model. ChatGPT flags a tool\n * without an output schema (\"Output schema recommended\").\n */\nexport const specOutputSchema = z\n  .looseObject({\n    root: z.string(),\n    elements: z.record(\n      z.string(),\n      z.looseObject({\n        type: z.string(),\n        props: z.record(z.string(), z.unknown()),\n        children: z.array(z.string()),\n      }),\n    ),\n    state: z.record(z.string(), z.unknown()).optional(),\n  })\n  .describe('The json-render spec that was rendered.');\n\n// The server is stateless, so it is created for every request; build each\n// catalog's schema once.\nconst inputSchemas = new WeakMap<\n  Catalog,\n  ReturnType<typeof buildSpecInputSchema>\n>();\n\nfunction buildSpecInputSchema(catalog: Catalog) {\n  const bindings = actionBinding(catalog);\n  // The fields every element shares, defined once in the JSON Schema.\n  const shared = {\n    visible: z\n      .unknown()\n      .meta({\n        id: 'Visibility',\n        description:\n          'Show the element only when this holds: {\"$state\":\"/p\",\"eq\":v} (or neq, gt, gte, lt, lte, not), an array of conditions (all), {\"$or\":[...]}, true or false.',\n      })\n      .optional(),\n    repeat: z\n      .strictObject({\n        statePath: z.union([z.string(), dynamic]),\n        key: z.string().optional(),\n      })\n      .meta({\n        id: 'Repeat',\n        description:\n          'Render the children once per item of the state array at statePath; they read {\"$item\":\"field\"} and {\"$index\":true}.',\n      })\n      .optional(),\n    on: z\n      .record(z.string(), bindings)\n      .meta({\n        id: 'Events',\n        description:\n          'Event name (such as \"press\", \"change\" or \"submit\") → action binding.',\n      })\n      .optional(),\n    watch: z\n      .record(z.string(), bindings)\n      .meta({\n        id: 'Watchers',\n        description:\n          'State path → action binding, run when the value at that path changes.',\n      })\n      .optional(),\n  };\n  const { components } = catalog.data as CatalogData;\n  const hint = sharedValidationHint(components);\n  const elements = Object.entries(components).map(([type, component]) => {\n    const description =\n      hint && component.description.endsWith(hint)\n        ? `${component.description.slice(0, -hint.length)}Validation: see \\`elements\\`.`\n        : component.description;\n    return z\n      .strictObject({\n        type: z.literal(type),\n        props: allowDynamic(component.props),\n        children: z.array(z.string()).default([]),\n        ...shared,\n      })\n      .describe(`${type}: ${description}`);\n  });\n  return z.strictObject({\n    root: z.string().describe('Key of the top element in `elements`.'),\n    elements: z\n      .record(\n        z.string(),\n        z.discriminatedUnion(\n          'type',\n          elements as unknown as [z.ZodObject, ...z.ZodObject[]],\n        ),\n      )\n      .describe(\n        hint\n          ? `Elements by key. On every component that takes \\`validation\\`: ${hint}`\n          : 'Elements by key.',\n      ),\n    state: z\n      .record(z.string(), z.unknown())\n      .optional()\n      .describe(\n        'Initial state model; bindings read it with {\"$state\": \"/path\"}.',\n      ),\n  });\n}\n\n/**\n * What the input schema cannot express: a root and children that exist,\n * repeat with a template child, valid visibility conditions, and `$template`\n * placeholders that read a repeat item. Returns the problems as text for the\n * model, or `undefined` when there are none.\n */\nexport function specProblems(spec: object): string | undefined {\n  // The input schema has already checked the shape `Spec` describes.\n  const { issues } = validateSpec(spec as Spec);\n  const errors = issues.filter((issue) => issue.severity === 'error');\n  const messages = [\n    ...errors.map((issue) => issue.message),\n    ...itemTemplateProblems(spec as Spec),\n  ];\n  return messages.length > 0\n    ? [\n        'The generated UI spec has the following errors:',\n        ...messages.map((message) => `- ${message}`),\n      ].join('\\n')\n    : undefined;\n}\n\n/**\n * `${$item/field}` placeholders in a `$template`. A `$template` reads an\n * absolute `${/path}` from state and a bare `${field}` from the repeat item\n * first, so `$item/field` is looked up as the state path `/$item/field`,\n * finds nothing and renders as an empty string, without an error anywhere.\n */\nfunction itemTemplateProblems(spec: Spec): string[] {\n  const problems: string[] = [];\n  for (const [key, { props, on, watch }] of Object.entries(spec.elements)) {\n    walk({ props, on, watch }, '', (template, path) => {\n      for (const [, placeholder, field] of template.matchAll(\n        ITEM_PLACEHOLDER,\n      )) {\n        problems.push(\n          `Element \"${key}\" ${path}: inside $template write \\${${field.replaceAll('.', '/')}}, not \\${${placeholder}}`,\n        );\n      }\n    });\n  }\n  return problems;\n}\n\n/** `${$item/field}` or `${$item.field}`; the groups are the placeholder and the field. */\nconst ITEM_PLACEHOLDER = /\\$\\{(\\$item[/.]([^}]+))\\}/g;\n\n/** Calls `visit` with every `$template` string under `value` and where it sits. */\nfunction walk(\n  value: unknown,\n  path: string,\n  visit: (template: string, path: string) => void,\n): void {\n  if (Array.isArray(value)) {\n    value.forEach((item, index) => walk(item, `${path}[${index}]`, visit));\n  } else if (value !== null && typeof value === 'object') {\n    for (const [key, child] of Object.entries(value)) {\n      if (key === '$template' && typeof child === 'string') {\n        visit(child, path);\n      } else {\n        walk(child, path ? `${path}.${key}` : key, visit);\n      }\n    }\n  }\n}\n","// The MCP server half of an MCP App: one `render-ui` tool that takes a\n// json-render spec, and the `ui://` view a host renders it in. Registered the\n// way upstream's `createMcpApp` (`@json-render/mcp`) does it, same tool name\n// and same view resource, with a short description and a typed input schema\n// (`tool.ts`) in place of `catalog.prompt()` and `catalog.zodSchema()`.\n//\n// Nothing here is Angular-specific: the Angular part is the view, passed in\n// as one HTML document.\nimport type { Catalog } from '@json-render/core';\nimport {\n  RESOURCE_MIME_TYPE,\n  registerAppResource,\n  registerAppTool,\n} from '@modelcontextprotocol/ext-apps/server';\nimport type { McpUiResourceCsp } from '@modelcontextprotocol/ext-apps';\nimport { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';\nimport { WebStandardStreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js';\nimport {\n  renderUiDescription,\n  specInputSchema,\n  specOutputSchema,\n  specProblems,\n} from './tool';\n\n/** Options for {@link createRenderUiServer}. */\nexport interface RenderUiServerOptions {\n  /** The components and actions the model may use. */\n  catalog: Catalog;\n  /** The view: one self-contained HTML document that renders the spec. */\n  html: string;\n  /** The server's name, as hosts list it. Default `'ngx-json-render'`. */\n  name?: string;\n  /** The server's version. Default `'0.0.0'`. */\n  version?: string;\n  /** The tool's name; the view resource is `ui://<toolName>/view.html`. Default `'render-ui'`. */\n  toolName?: string;\n  /** The tool's title, as hosts show it. Default `'Render UI'`. */\n  title?: string;\n  /** The tool's description. Default: {@link renderUiDescription} for the catalog. */\n  description?: string;\n  /**\n   * The origins the view may load from (`resourceDomains`) and connect to\n   * (`connectDomains`). Left out, the host's default applies, which the MCP\n   * Apps spec defines as none.\n   */\n  csp?: McpUiResourceCsp;\n  /**\n   * The origin ChatGPT derives the view's sandbox origin from, which its\n   * plugin directory requires, unique per plugin. Set through the OpenAI\n   * alias rather than `_meta.ui.domain`, because that key's format is up to\n   * each host and Claude expects a `{hash}.claudemcpcontent.com` value there.\n   */\n  widgetDomain?: string;\n}\n\n/**\n * An MCP server with a `render-ui` tool for `catalog` and its `ui://` view.\n * Connect it to any transport: `StdioServerTransport` for a local host,\n * or {@link handleRenderUiRequest} for Streamable HTTP.\n *\n * The tool checks a spec against the catalog before it echoes it back. A\n * rejected spec goes back to the model as an error it can fix.\n */\nexport function createRenderUiServer(options: RenderUiServerOptions) {\n  const {\n    catalog,\n    html,\n    name = 'ngx-json-render',\n    version = '0.0.0',\n    toolName = 'render-ui',\n    title = 'Render UI',\n    description = renderUiDescription(catalog),\n    csp,\n    widgetDomain,\n  } = options;\n  const resourceUri = `ui://${toolName}/view.html`;\n  const server = new McpServer({ name, version });\n  registerAppTool(\n    server,\n    toolName,\n    {\n      title,\n      description,\n      inputSchema: { spec: specInputSchema(catalog) },\n      outputSchema: { spec: specOutputSchema },\n      // It only echoes the spec back for the view to draw: nothing is read\n      // from or written to any system.\n      annotations: {\n        title,\n        readOnlyHint: true,\n        destructiveHint: false,\n        idempotentHint: true,\n        openWorldHint: false,\n      },\n      _meta: { ui: { resourceUri } },\n    },\n    // The SDK has already parsed `spec` against the input schema; what is\n    // left is the structure between elements. The text keeps upstream's\n    // shape, the bare spec, which is what views built on\n    // `@json-render/mcp/app` read.\n    async ({ spec }) => {\n      const problems = specProblems(spec);\n      return problems\n        ? { isError: true, content: [{ type: 'text', text: problems }] }\n        : {\n            content: [{ type: 'text', text: JSON.stringify(spec) }],\n            structuredContent: { spec },\n          };\n    },\n  );\n  const meta: Record<string, unknown> = {};\n  if (csp) meta['ui'] = { csp };\n  if (widgetDomain) meta['openai/widgetDomain'] = widgetDomain;\n  registerAppResource(\n    server,\n    resourceUri,\n    resourceUri,\n    { mimeType: RESOURCE_MIME_TYPE },\n    async () => ({\n      contents: [\n        {\n          uri: resourceUri,\n          mimeType: RESOURCE_MIME_TYPE,\n          text: html,\n          ...(Object.keys(meta).length > 0 && { _meta: meta }),\n        },\n      ],\n    }),\n  );\n  return server;\n}\n\n/**\n * Serve one Streamable HTTP request, statelessly: a fresh server and\n * transport per request, so it runs unchanged on a serverless or edge\n * function (anything with web `Request` and `Response`). Answers CORS,\n * because browser-based clients such as MCP Inspector call cross-origin.\n */\nexport async function handleRenderUiRequest(\n  options: RenderUiServerOptions,\n  request: Request,\n): Promise<Response> {\n  if (request.method === 'OPTIONS') {\n    return new Response(null, { status: 204, headers: CORS_HEADERS });\n  }\n  const server = createRenderUiServer(options);\n  const transport = new WebStandardStreamableHTTPServerTransport({\n    sessionIdGenerator: undefined,\n    // One JSON body per request: nothing here streams, and a serverless\n    // function returns as soon as the response is complete.\n    enableJsonResponse: true,\n  });\n  await server.connect(transport);\n  try {\n    const response = await transport.handleRequest(request);\n    const headers = new Headers(response.headers);\n    for (const [key, value] of Object.entries(CORS_HEADERS)) {\n      headers.set(key, value);\n    }\n    return new Response(response.body, {\n      status: response.status,\n      statusText: response.statusText,\n      headers,\n    });\n  } finally {\n    await transport.close();\n    await server.close();\n  }\n}\n\nconst CORS_HEADERS: Record<string, string> = {\n  'Access-Control-Allow-Origin': '*',\n  'Access-Control-Allow-Methods': 'GET, POST, DELETE, OPTIONS',\n  'Access-Control-Allow-Headers':\n    'Content-Type, Accept, Authorization, Mcp-Session-Id, Mcp-Protocol-Version, Last-Event-ID',\n  'Access-Control-Expose-Headers': 'Mcp-Session-Id',\n};\n","/*\n * Public API Surface of ngx-json-render/mcp/server\n *\n * The server half of an MCP App for a json-render catalog: the `render-ui`\n * tool and the `ui://` view resource. Angular-free, so it runs in Node or on\n * an edge function; the view it serves is built with `ngx-json-render/mcp`.\n */\n\nexport {\n  createRenderUiServer,\n  handleRenderUiRequest,\n  type RenderUiServerOptions,\n} from './server';\nexport {\n  DESCRIPTION_LIMIT,\n  renderUiDescription,\n  specInputSchema,\n  specOutputSchema,\n  specProblems,\n  type RenderUiDescriptionOptions,\n} from './tool';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-json-render",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "description": "Generative UI for Angular: a json-render renderer that streams AI-generated JSON specs into real Angular components with signals.",
   "keywords": [
     "angular",
@@ -52,6 +52,7 @@
   },
   "sideEffects": false,
   "schematics": "./schematics/collection.json",
+  "builders": "./schematics/builders.json",
   "ng-add": {
     "save": "dependencies"
   },
@@ -77,6 +78,10 @@
       "types": "./types/ngx-json-render-mcp.d.ts",
       "default": "./fesm2022/ngx-json-render-mcp.mjs"
     },
+    "./mcp/server": {
+      "types": "./types/ngx-json-render-mcp-server.d.ts",
+      "default": "./fesm2022/ngx-json-render-mcp-server.mjs"
+    },
     "./router": {
       "types": "./types/ngx-json-render-router.d.ts",
       "default": "./fesm2022/ngx-json-render-router.mjs"

package/schematics/builders.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/architect/src/builders-schema.json",
+  "builders": {
+    "mcp-app": {
+      "implementation": "./mcp-app-builder/index.cjs",
+      "schema": "./mcp-app-builder/schema.json",
+      "description": "Builds an MCP App: the view as one view.html, the server as server.mjs."
+    }
+  }
+}

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

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildMcpApp = buildMcpApp;
+const architect_1 = require("@angular-devkit/architect");
+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");
+/**
+ * `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
+ * single document), and bundles the server entry, if there is one, into
+ * `server.mjs` next to it.
+ */
+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();
+    if (!result.success)
+        return result;
+    const esbuild = loadEsbuild(root);
+    const browserDir = await browserOutput(context, target);
+    const view = await (0, inline_cjs_1.inlineView)(browserDir, async (entry) => {
+        const { outputFiles } = await esbuild.build({
+            entryPoints: [entry],
+            bundle: true,
+            format: 'esm',
+            minify: true,
+            write: false,
+            logLevel: 'warning',
+        });
+        return outputFiles[0].text;
+    });
+    const out = (0, node_path_1.resolve)(root, options.outputPath);
+    (0, node_fs_1.mkdirSync)(out, { recursive: true });
+    const viewPath = (0, node_path_1.join)(out, 'view.html');
+    (0, node_fs_1.writeFileSync)(viewPath, view.html);
+    context.logger.info(`Built ${(0, node_path_1.relative)(root, viewPath)} (${Math.round(view.html.length / 1024)} kB)`);
+    if (view.leftOut.length > 0) {
+        context.logger.warn(`Not in view.html, so the host cannot load them: ${view.leftOut.join(', ')}. ` +
+            'Reference assets from a stylesheet (they are inlined) or from an https: URL the view CSP allows.');
+    }
+    if (options.server) {
+        const serverPath = (0, node_path_1.join)(out, 'server.mjs');
+        await esbuild.build({
+            entryPoints: [(0, node_path_1.resolve)(root, options.server)],
+            outfile: serverPath,
+            bundle: true,
+            platform: 'node',
+            format: 'esm',
+            target: 'node20',
+            tsconfig: options.tsConfig ? (0, node_path_1.resolve)(root, options.tsConfig) : undefined,
+            packages: options.externalPackages ? 'external' : undefined,
+            // The view as text, for a server that imports it rather than reading
+            // the file next to it.
+            loader: { '.html': 'text' },
+            // Bundled CommonJS dependencies may call require(); give the ES module
+            // one.
+            banner: options.externalPackages
+                ? undefined
+                : {
+                    js: "import { createRequire as __createRequire } from 'node:module'; const require = __createRequire(import.meta.url);",
+                },
+            logLevel: 'warning',
+        });
+        context.logger.info(`Built ${(0, node_path_1.relative)(root, serverPath)}`);
+    }
+    return { success: true, outputPath: out };
+}
+/** Where the application build wrote its browser files. */
+async function browserOutput(context, target) {
+    const options = await context.getTargetOptions(target);
+    const outputPath = options['outputPath'];
+    const base = typeof outputPath === 'string'
+        ? outputPath
+        : (outputPath?.base ?? (0, node_path_1.join)('dist', target.project));
+    const browser = typeof outputPath === 'object' && outputPath.browser !== undefined
+        ? outputPath.browser
+        : 'browser';
+    return (0, node_path_1.resolve)(context.workspaceRoot, base, browser);
+}
+/**
+ * esbuild, from `@angular/build` (which every application build already
+ * installs at a version it was tested with), or else from the workspace.
+ */
+function loadEsbuild(root) {
+    const workspace = (0, node_module_1.createRequire)((0, node_path_1.join)(root, 'package.json'));
+    try {
+        const build = (0, node_path_1.dirname)(workspace.resolve('@angular/build/package.json'));
+        return (0, node_module_1.createRequire)((0, node_path_1.join)(build, 'package.json'))('esbuild');
+    }
+    catch {
+        return workspace('esbuild');
+    }
+}
+exports.default = (0, architect_1.createBuilder)(buildMcpApp);

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

@@ -0,0 +1,107 @@
+import { Catalog } from '@json-render/core';
+import { McpUiResourceCsp } from '@modelcontextprotocol/ext-apps';
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { z } from 'zod';
+
+/** Options for {@link createRenderUiServer}. */
+interface RenderUiServerOptions {
+    /** The components and actions the model may use. */
+    catalog: Catalog;
+    /** The view: one self-contained HTML document that renders the spec. */
+    html: string;
+    /** The server's name, as hosts list it. Default `'ngx-json-render'`. */
+    name?: string;
+    /** The server's version. Default `'0.0.0'`. */
+    version?: string;
+    /** The tool's name; the view resource is `ui://<toolName>/view.html`. Default `'render-ui'`. */
+    toolName?: string;
+    /** The tool's title, as hosts show it. Default `'Render UI'`. */
+    title?: string;
+    /** The tool's description. Default: {@link renderUiDescription} for the catalog. */
+    description?: string;
+    /**
+     * The origins the view may load from (`resourceDomains`) and connect to
+     * (`connectDomains`). Left out, the host's default applies, which the MCP
+     * Apps spec defines as none.
+     */
+    csp?: McpUiResourceCsp;
+    /**
+     * The origin ChatGPT derives the view's sandbox origin from, which its
+     * plugin directory requires, unique per plugin. Set through the OpenAI
+     * alias rather than `_meta.ui.domain`, because that key's format is up to
+     * each host and Claude expects a `{hash}.claudemcpcontent.com` value there.
+     */
+    widgetDomain?: string;
+}
+/**
+ * An MCP server with a `render-ui` tool for `catalog` and its `ui://` view.
+ * Connect it to any transport: `StdioServerTransport` for a local host,
+ * or {@link handleRenderUiRequest} for Streamable HTTP.
+ *
+ * The tool checks a spec against the catalog before it echoes it back. A
+ * rejected spec goes back to the model as an error it can fix.
+ */
+declare function createRenderUiServer(options: RenderUiServerOptions): McpServer;
+/**
+ * Serve one Streamable HTTP request, statelessly: a fresh server and
+ * transport per request, so it runs unchanged on a serverless or edge
+ * function (anything with web `Request` and `Response`). Answers CORS,
+ * because browser-based clients such as MCP Inspector call cross-origin.
+ */
+declare function handleRenderUiRequest(options: RenderUiServerOptions, request: Request): Promise<Response>;
+
+/** Claude cuts a tool description off after roughly this many characters. */
+declare const DESCRIPTION_LIMIT = 2000;
+/** Options for {@link renderUiDescription}. */
+interface RenderUiDescriptionOptions {
+    /** What the tool draws, as the first sentence names it. Default `'UI'`. */
+    ui?: string;
+}
+/**
+ * The `render-ui` tool description for `catalog`: how a spec is put
+ * together, in under {@link DESCRIPTION_LIMIT} characters. The components,
+ * props and actions are left to the input schema. The paragraph on
+ * `sendMessage` is included only when the catalog defines that action, since
+ * the view has to handle it.
+ */
+declare function renderUiDescription(catalog: Catalog, { ui }?: RenderUiDescriptionOptions): string;
+/**
+ * The tool's input schema: a spec whose elements are typed per component.
+ *
+ * `catalog.zodSchema()` types an element's `type` but not its props, and it
+ * has no `state`, `on` or `watch`, so the MCP SDK, which parses tool
+ * arguments with the input schema, stripped those and let any prop through.
+ * Here each component's props are its catalog schema (with dynamic values
+ * allowed and unknown props rejected), and each action's params are checked.
+ */
+declare function specInputSchema(catalog: Catalog): z.ZodObject<{
+    root: z.ZodString;
+    elements: z.ZodRecord<z.ZodString, z.ZodDiscriminatedUnion<[z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>, ...z.ZodObject<z.core.$ZodLooseShape, z.core.$strip>[]], "type">>;
+    state: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+}, z.core.$strict>;
+/**
+ * What `render-ui` returns as `structuredContent`: the spec it was given,
+ * after the input schema filled in missing `children`. Only its outline,
+ * since the input schema already carries the catalog and a second copy would
+ * double what every `tools/list` sends the model. ChatGPT flags a tool
+ * without an output schema ("Output schema recommended").
+ */
+declare const specOutputSchema: z.ZodObject<{
+    root: z.ZodString;
+    elements: z.ZodRecord<z.ZodString, z.ZodObject<{
+        type: z.ZodString;
+        props: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+        children: z.ZodArray<z.ZodString>;
+    }, z.core.$loose>>;
+    state: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+}, z.core.$loose>;
+/**
+ * What the input schema cannot express: a root and children that exist,
+ * repeat with a template child, valid visibility conditions, and `$template`
+ * placeholders that read a repeat item. Returns the problems as text for the
+ * model, or `undefined` when there are none.
+ */
+declare function specProblems(spec: object): string | undefined;
+
+export { DESCRIPTION_LIMIT, createRenderUiServer, handleRenderUiRequest, renderUiDescription, specInputSchema, specOutputSchema, specProblems };
+export type { RenderUiDescriptionOptions, RenderUiServerOptions };