ngx-json-render 0.9.5 → 0.9.7

package/schematics/mcp-app/index.cjs

@@ -0,0 +1,552 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mcpApp = mcpApp;
+const schematics_1 = require("@angular-devkit/schematics");
+const utility_1 = require("@schematics/angular/utility");
+const node_path_1 = require("node:path");
+const self = require('../../package.json');
+/** Peers the view and the server need. */
+const PEERS = [
+    '@json-render/core',
+    'zod',
+    '@modelcontextprotocol/ext-apps',
+    '@modelcontextprotocol/sdk',
+];
+/** Origins the Material view loads its fonts from. */
+const MATERIAL_FONTS = [
+    'https://fonts.googleapis.com',
+    'https://fonts.gstatic.com',
+];
+/**
+ * `ng generate ngx-json-render:mcp-app`: an MCP App for a catalog in one go.
+ * Adds an application project for the view, a `server.ts` with the
+ * `render-ui` tool next to it, and an `mcp` target that builds both with the
+ * `ngx-json-render:mcp-app` builder.
+ */
+function mcpApp(options) {
+    return async (tree, context) => {
+        const name = options.name || 'mcp-app';
+        const manifest = readManifest(tree);
+        const workspace = await (0, utility_1.readWorkspace)(tree);
+        if (workspace.projects.has(name)) {
+            throw new schematics_1.SchematicsException(`The workspace already has a project named "${name}". Pass another --name.`);
+        }
+        const material = declares(manifest, 'ngx-json-render-material');
+        const source = resolveSource(tree, options, material);
+        for (const warning of nodeUnsafeImports(tree, source)) {
+            context.logger.warn(warning);
+        }
+        const rules = [
+            (0, schematics_1.externalSchematic)('@schematics/angular', 'application', {
+                name,
+                routing: false,
+                style: source.kind === 'material' ? 'scss' : 'css',
+                skipTests: true,
+                ssr: false,
+                inlineStyle: true,
+                inlineTemplate: true,
+            }),
+            writeFiles(name, source),
+            (0, utility_1.updateWorkspace)((workspace) => {
+                const project = workspace.projects.get(name);
+                for (const target of ['build', 'test']) {
+                    dropZone(project.targets.get(target)?.options);
+                }
+                widenBudget(project.targets.get('build')?.configurations?.['production']);
+                project.targets.set('mcp', {
+                    builder: 'ngx-json-render:mcp-app',
+                    options: {
+                        buildTarget: `${name}:build:production`,
+                        outputPath: `dist/${name}`,
+                        server: node_path_1.posix.join(project.root, 'server.ts'),
+                    },
+                });
+            }),
+        ];
+        for (const peer of PEERS) {
+            if (declares(manifest, peer))
+                continue;
+            const range = self.peerDependencies?.[peer];
+            if (!range) {
+                throw new schematics_1.SchematicsException(`ngx-json-render declares no peer range for ${peer}.`);
+            }
+            rules.push((0, utility_1.addDependency)(peer, range));
+            context.logger.info(`Adding ${peer}@${range}`);
+        }
+        rules.push(() => {
+            context.logger.info([
+                '',
+                `The MCP App is in project "${name}". Build it, then run its server:`,
+                `  ng run ${name}:mcp`,
+                `  node dist/${name}/server.mjs          # stdio, for Claude Desktop or Claude Code`,
+                `  node dist/${name}/server.mjs --http   # http://localhost:3001/mcp`,
+            ].join('\n'));
+        });
+        return (0, schematics_1.chain)(rules);
+    };
+}
+function resolveSource(tree, options, material) {
+    if (!options.catalog !== !options.registry) {
+        throw new schematics_1.SchematicsException('Pass --catalog and --registry together: the server describes the catalog to the model, and the view renders it with the registry.');
+    }
+    if (options.catalog && options.registry) {
+        const catalog = reference(tree, options.catalog, 'catalog');
+        const registry = reference(tree, options.registry, 'registry');
+        return {
+            kind: 'own',
+            catalogFile: catalog.file,
+            catalogExport: catalog.name,
+            registryFile: registry.file,
+            registryExport: registry.name,
+        };
+    }
+    if (material) {
+        return {
+            kind: 'material',
+            catalogFile: 'ngx-json-render-material/catalog',
+            catalogExport: 'materialCatalog',
+            registryFile: 'ngx-json-render-material',
+            registryExport: 'materialRegistry',
+        };
+    }
+    return {
+        kind: 'starter',
+        catalogFile: '',
+        catalogExport: 'catalog',
+        registryFile: '',
+        registryExport: 'registry',
+    };
+}
+/** `<file>#<export>`, checked against the tree. */
+function reference(tree, value, fallback) {
+    const [path, name = fallback] = value.split('#');
+    const file = '/' + node_path_1.posix.normalize(path).replace(/^\/+/, '');
+    if (!tree.exists(file)) {
+        throw new schematics_1.SchematicsException(`No file at ${path} (from "${value}").`);
+    }
+    const content = tree.readText(file);
+    const exported = new RegExp(`export\\s+(?:const|let|var|function)\\s+(?:\\{[^}]*\\b${name}\\b[^}]*\\}|${name}\\b)|export\\s*\\{[^}]*\\b${name}\\b`);
+    if (!exported.test(content)) {
+        throw new schematics_1.SchematicsException(`${path} exports no "${name}".`);
+    }
+    return { file, name };
+}
+/**
+ * The server imports the catalog in Node, where Angular components cannot
+ * load. Flags the imports that would pull them in.
+ */
+function nodeUnsafeImports(tree, source) {
+    if (source.kind !== 'own')
+        return [];
+    const content = tree.readText(source.catalogFile);
+    const unsafe = [...content.matchAll(/from\s+['"]([^'"]+)['"]/g)]
+        .map((match) => match[1])
+        .filter((specifier) => specifier.startsWith('@angular/') ||
+        specifier === 'ngx-json-render' ||
+        specifier === 'ngx-json-render-material');
+    return unsafe.map((specifier) => `${source.catalogFile.slice(1)} imports ${specifier}, which needs Angular, and the MCP server loads the catalog in Node. ` +
+        'Keep the catalog in a file that imports only ngx-json-render/schema (or ngx-json-render-material/catalog), zod and @json-render/core.');
+}
+/** Replaces the application's generated sources with the view and adds the server. */
+function writeFiles(name, source) {
+    return async (tree) => {
+        const workspace = await (0, utility_1.readWorkspace)(tree);
+        const project = workspace.projects.get(name);
+        if (!project) {
+            throw new schematics_1.SchematicsException(`The project "${name}" was not created.`);
+        }
+        const root = '/' + project.root.replace(/^\/+/, '');
+        const src = '/' + (project.sourceRoot ?? node_path_1.posix.join(project.root, 'src'));
+        const appDir = node_path_1.posix.join(src, 'app');
+        tree.getDir(appDir).visit((file) => tree.delete(file));
+        // A view lives in an iframe, which shows no icon.
+        const favicon = node_path_1.posix.join(root, 'public', 'favicon.ico');
+        if (tree.exists(favicon))
+            tree.delete(favicon);
+        for (const style of ['styles.css', 'styles.scss']) {
+            const file = node_path_1.posix.join(src, style);
+            if (tree.exists(file))
+                tree.delete(file);
+        }
+        let catalog = source.catalogFile;
+        let registry = source.registryFile;
+        if (source.kind === 'starter') {
+            catalog = node_path_1.posix.join(appDir, 'catalog.ts');
+            registry = node_path_1.posix.join(appDir, 'registry.ts');
+            tree.create(catalog, STARTER_CATALOG);
+            tree.create(registry, STARTER_REGISTRY);
+        }
+        const material = source.kind === 'material';
+        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, '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');
+        tree.create(serverFile, serverModule(name, source.catalogExport, from(serverFile, catalog), material));
+    };
+}
+function overwrite(tree, file, content) {
+    if (tree.exists(file))
+        tree.overwrite(file, content);
+    else
+        tree.create(file, content);
+}
+/** An import specifier for `target` (a tree path) from `file`, without `.ts`. */
+function relativeImport(file, target) {
+    const path = node_path_1.posix
+        .relative(node_path_1.posix.dirname(file), target)
+        .replace(/\.(?:m|c)?ts$/, '');
+    return path.startsWith('.') ? path : `./${path}`;
+}
+/** The view is zoneless; `ng generate application` may still add zone.js. */
+function dropZone(options) {
+    const polyfills = options?.['polyfills'];
+    if (!options || !Array.isArray(polyfills))
+        return;
+    const kept = polyfills.filter((entry) => entry !== 'zone.js' && entry !== 'zone.js/testing');
+    if (kept.length)
+        options['polyfills'] = kept;
+    else
+        delete options['polyfills'];
+}
+/**
+ * The view carries the MCP Apps SDK and zod (about 750 kB, 1.6 MB with
+ * Material) and loads from the host as one inlined page, so the 500 kB
+ * initial budget of a web app would fail the build.
+ */
+function widenBudget(configuration) {
+    const budgets = configuration?.['budgets'];
+    if (!configuration || !Array.isArray(budgets))
+        return;
+    // A new array: the workspace writer cannot follow edits inside one.
+    configuration['budgets'] = budgets.map((budget) => budget['type'] === 'initial'
+        ? { ...budget, maximumWarning: '3MB', maximumError: '5MB' }
+        : budget);
+}
+function readManifest(tree) {
+    if (!tree.exists('/package.json')) {
+        throw new schematics_1.SchematicsException('No package.json at the workspace root.');
+    }
+    return tree.readJson('/package.json');
+}
+function declares(manifest, name) {
+    return !!(manifest.dependencies?.[name] ?? manifest.devDependencies?.[name]);
+}
+function viewComponent(name, registryExport, registryModule) {
+    const registry = registryExport === 'registry'
+        ? `import { registry } from '${registryModule}';`
+        : `import { ${registryExport} as registry } from '${registryModule}';`;
+    return `import { Component, effect } from '@angular/core';
+import type { McpUiTheme } from '@modelcontextprotocol/ext-apps';
+import { JsonRenderer } from 'ngx-json-render';
+import { injectJsonRenderApp } from 'ngx-json-render/mcp';
+${registry}
+
+/**
+ * The view an MCP host shows in its iframe: the spec the model passed to the
+ * \`render-ui\` tool, rendered with the registry. \`mcp.handlers\` handles the
+ * \`sendMessage\` action the server describes to the model.
+ */
+@Component({
+  selector: 'app-root',
+  imports: [JsonRenderer],
+  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 {
+      <p class="status">Waiting for the model's spec…</p>
+    }
+  \`,
+  styles: \`
+    :host {
+      display: block;
+      padding: 16px;
+    }
+    json-render + .status {
+      margin-top: 12px;
+    }
+    .status {
+      margin: 0;
+      opacity: 0.7;
+    }
+    .error {
+      color: #b3261e;
+      opacity: 1;
+    }
+  \`,
+})
+export class App {
+  readonly mcp = injectJsonRenderApp({ name: '${name}', version: '0.0.0' });
+  readonly registry = registry;
+
+  constructor() {
+    // Follow the host's light or dark theme.
+    const applyTheme = (theme: McpUiTheme | undefined) => {
+      if (theme) document.documentElement.style.colorScheme = theme;
+    };
+    this.mcp.app.addEventListener('hostcontextchanged', (context) =>
+      applyTheme(context.theme),
+    );
+    effect(() => {
+      if (this.mcp.connected()) applyTheme(this.mcp.app.getHostContext()?.theme);
+    });
+  }
+}
+`;
+}
+function mainFile(material) {
+    if (!material) {
+        return `import { provideZonelessChangeDetection } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { App } from './app/app';
+
+bootstrapApplication(App, {
+  providers: [provideZonelessChangeDetection()],
+}).catch((err) => console.error(err));
+`;
+    }
+    return `import {
+  inject,
+  provideEnvironmentInitializer,
+  provideZonelessChangeDetection,
+} from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { App } from './app/app';
+
+bootstrapApplication(App, {
+  providers: [
+    provideZonelessChangeDetection(),
+    // The Material catalog names icons as Material Symbols ligatures.
+    provideEnvironmentInitializer(() =>
+      inject(MatIconRegistry).setDefaultFontSetClass('material-symbols-outlined'),
+    ),
+  ],
+}).catch((err) => console.error(err));
+`;
+}
+function indexFile(name, material) {
+    const fonts = material
+        ? `
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&family=Roboto:wght@400;500&display=swap"
+      rel="stylesheet"
+    />`
+        : '';
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>${name}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />${fonts}
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
+`;
+}
+const PLAIN_STYLES = `html {
+  color-scheme: light dark;
+}
+
+body {
+  margin: 0;
+  background: transparent;
+  font: 14px/1.5 system-ui, sans-serif;
+}
+`;
+const MATERIAL_STYLES = `@use '@angular/material' as mat;
+
+// Both palettes in one pass; the view sets \`color-scheme\` from the host's
+// theme, which picks one.
+html {
+  color-scheme: light dark;
+
+  @include mat.theme(
+    (
+      color: mat.$azure-palette,
+      typography: Roboto,
+      density: 0,
+    )
+  );
+}
+
+body {
+  margin: 0;
+  background: transparent;
+  color: var(--mat-sys-on-surface);
+  font-family: Roboto, system-ui, sans-serif;
+}
+`;
+function serverModule(name, catalogExport, catalogModule, material) {
+    const catalog = catalogExport === 'catalog'
+        ? `import { catalog } from '${catalogModule}';`
+        : `import { ${catalogExport} as catalog } from '${catalogModule}';`;
+    const csp = material
+        ? `
+  // The Material view loads its fonts from Google Fonts.
+  csp: {
+    resourceDomains: [${MATERIAL_FONTS.map((origin) => `'${origin}'`).join(', ')}],
+  },`
+        : `
+  // Origins the view may load from or connect to; the host allows none
+  // without them: csp: { resourceDomains: [...], connectDomains: [...] }.`;
+    return `// The MCP server for the view: one \`render-ui\` tool for the catalog, and
+// the view as its \`ui://\` resource. \`ng run ${name}:mcp\` bundles it into
+// dist/${name}/server.mjs, next to view.html.
+//
+//   node dist/${name}/server.mjs          stdio, for Claude Desktop or Claude Code
+//   node dist/${name}/server.mjs --http   http://localhost:3001/mcp (PORT to change)
+import { readFileSync } from 'node:fs';
+import { createServer } from 'node:http';
+import { Readable } from 'node:stream';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import {
+  type RenderUiServerOptions,
+  createRenderUiServer,
+  handleRenderUiRequest,
+} from 'ngx-json-render/mcp/server';
+${catalog}
+
+const options: RenderUiServerOptions = {
+  catalog,
+  html: readFileSync(new URL('./view.html', import.meta.url), 'utf8'),
+  name: '${name}',
+  version: '0.0.0',
+  // Lets a button in the view post a message to the chat as the user.
+  sendMessage: true,${csp}
+};
+
+if (process.argv.includes('--http')) {
+  const port = Number(process.env['PORT'] ?? 3001);
+  createServer(async (req, res) => {
+    const hasBody = req.method !== 'GET' && req.method !== 'HEAD';
+    const request = new Request(\`http://localhost\${req.url}\`, {
+      method: req.method,
+      headers: req.headers as Record<string, string>,
+      body: hasBody ? (Readable.toWeb(req) as ReadableStream) : undefined,
+      duplex: 'half',
+    } as RequestInit);
+    const response = await handleRenderUiRequest(options, request);
+    res.writeHead(response.status, Object.fromEntries(response.headers));
+    res.end(Buffer.from(await response.arrayBuffer()));
+  }).listen(port, () => console.error(\`MCP on http://localhost:\${port}/mcp\`));
+} else {
+  await createRenderUiServer(options).connect(new StdioServerTransport());
+}
+`;
+}
+const STARTER_CATALOG = `// The components the model may use in the view. The MCP server imports this
+// file in Node, so it imports no Angular: components live in registry.ts.
+import { schema } from 'ngx-json-render/schema';
+import { z } from 'zod';
+
+export const catalog = schema.createCatalog({
+  components: {
+    Card: {
+      props: z.object({ title: z.string().optional() }),
+      slots: ['default'],
+      description: 'A card that groups its children under an optional title.',
+    },
+    Text: {
+      props: z.object({ content: z.string() }),
+      slots: [],
+      description: 'A paragraph of text.',
+    },
+    Button: {
+      props: z.object({ label: z.string() }),
+      slots: [],
+      description: "A button that emits 'press'.",
+    },
+  },
+  actions: {},
+});
+`;
+const STARTER_REGISTRY = `import { Component } from '@angular/core';
+import {
+  type InferComponentProps,
+  JrChildren,
+  defineRegistry,
+  injectRenderContext,
+} from 'ngx-json-render';
+import { catalog } from './catalog';
+
+@Component({
+  selector: 'app-card',
+  imports: [JrChildren],
+  template: \`
+    <section class="card">
+      @if (ctx.props().title; as title) {
+        <h3>{{ title }}</h3>
+      }
+      <jr-children />
+    </section>
+  \`,
+  styles: \`
+    .card {
+      display: grid;
+      gap: 8px;
+      padding: 16px;
+      border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+      border-radius: 12px;
+    }
+    h3 {
+      margin: 0;
+    }
+  \`,
+})
+export class CardComponent {
+  readonly ctx =
+    injectRenderContext<InferComponentProps<typeof catalog, 'Card'>>();
+}
+
+@Component({
+  selector: 'app-text',
+  template: \`<p>{{ ctx.props().content }}</p>\`,
+  styles: \`
+    p {
+      margin: 0;
+    }
+  \`,
+})
+export class TextComponent {
+  readonly ctx =
+    injectRenderContext<InferComponentProps<typeof catalog, 'Text'>>();
+}
+
+@Component({
+  selector: 'app-button',
+  template: \`<button (click)="ctx.emit('press')">{{ ctx.props().label }}</button>\`,
+})
+export class ButtonComponent {
+  readonly ctx =
+    injectRenderContext<InferComponentProps<typeof catalog, 'Button'>>();
+}
+
+export const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: CardComponent,
+    Text: TextComponent,
+    Button: ButtonComponent,
+  },
+});
+`;

package/schematics/mcp-app/schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "ngx-json-render-mcp-app",
+  "title": "ngx-json-render MCP App schematic",
+  "description": "Generates an MCP App for a catalog: an Angular view project, its MCP server, and an mcp target that builds both.",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the view's application project; the build lands in dist/<name>.",
+      "default": "mcp-app",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "catalog": {
+      "type": "string",
+      "description": "The catalog the model may use, as <file>#<export> relative to the workspace root, such as \"src/app/catalog.ts#catalog\". The server imports it in Node, so the file must not import Angular. Leave it out for the Angular Material catalog when ngx-json-render-material is installed, or a starter catalog otherwise."
+    },
+    "registry": {
+      "type": "string",
+      "description": "The registry that renders the catalog, as <file>#<export>, such as \"src/app/registry.ts#registry\". Required with --catalog."
+    }
+  },
+  "required": []
+}

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);