@bleedingdev/modern-js-mcp-apps 0.0.0-stage → 3.11.3-ultramodern.1

package/dist/cjs/server.cjs

@@ -0,0 +1,317 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    createBffHandlers: ()=>createBffHandlers,
+    createFetchHandler: ()=>createFetchHandler,
+    registerUiResources: ()=>registerUiResources
+});
+const server_namespaceObject = require("@modelcontextprotocol/server");
+const requestUiOptions = new WeakMap();
+const promises_namespaceObject = require("node:fs/promises");
+const external_node_path_namespaceObject = require("node:path");
+var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_node_path_namespaceObject);
+const external_node_url_namespaceObject = require("node:url");
+const ext_apps_server_namespaceObject = require("@modelcontextprotocol/ext-apps/server");
+function isRecord(value) {
+    return null !== value && 'object' == typeof value && !Array.isArray(value);
+}
+function validateUiMetadata(value) {
+    if (!isRecord(value)) throw new Error('UI metadata must be an object');
+    if (void 0 !== value.prefersBorder && 'boolean' != typeof value.prefersBorder) throw new Error('prefersBorder must be a boolean');
+    if (void 0 !== value.domain && 'string' != typeof value.domain) throw new Error('domain must be a string');
+    if (void 0 !== value.permissions && !isRecord(value.permissions)) throw new Error('permissions must be an object');
+    if (void 0 !== value.csp) {
+        if (!isRecord(value.csp)) throw new Error('csp must be an object');
+        for (const [key, domains] of Object.entries(value.csp))if (![
+            'resourceDomains',
+            'connectDomains',
+            'frameDomains',
+            'baseUriDomains'
+        ].includes(key) || !Array.isArray(domains) || domains.some((domain)=>'string' != typeof domain)) throw new Error(`Invalid CSP field: ${key}`);
+    }
+}
+function assertHttpUrl(source) {
+    const url = new URL(source);
+    if (![
+        'http:',
+        'https:'
+    ].includes(url.protocol) || url.username || url.password) throw new Error(`Invalid UI URL: ${source}`);
+    return url;
+}
+function validateUiManifest(value) {
+    if (!isRecord(value) || 1 !== value.version) throw new Error('Unsupported MCP UI manifest version');
+    if ('string' != typeof value.assetBase || !value.assetBase || !isRecord(value.remotes) || !isRecord(value.views)) throw new Error('Invalid MCP UI manifest');
+    if ('request' !== value.assetBase) assertHttpUrl(value.assetBase);
+    const checkSource = (source)=>{
+        if ('string' != typeof source || !source) throw new Error('Missing UI resource source');
+        if (/^https?:\/\//.test(source)) assertHttpUrl(source);
+        else if (source.startsWith('/') || source.includes('\\') || decodeURIComponent(source).split('/').includes('..') || /^[a-z][\w+.-]*:/i.test(source) || /[?#]/.test(source)) throw new Error(`Invalid relative UI resource: ${source}`);
+    };
+    for (const remote of Object.values(value.remotes)){
+        if (!isRecord(remote)) throw new Error('Invalid MF remote');
+        checkSource(remote.entry);
+        checkSource(remote.shell);
+    }
+    for (const [name, view] of Object.entries(value.views)){
+        if (!name.trim() || !isRecord(view)) throw new Error('Invalid UI view');
+        validateUiMetadata(view.ui);
+        if (!('html' in view) || 'remote' in view || 'expose' in view) if (!('html' in view) && 'string' == typeof view.remote && Object.hasOwn(value.remotes, view.remote) && 'string' == typeof view.expose && view.expose.startsWith('./')) continue;
+        else throw new Error(`Invalid UI manifest view: ${name}`);
+        else checkSource(view.html);
+    }
+}
+const manifestCache = new Map();
+const remoteManifestTtl = 60000;
+async function loadUiManifest(source, mode) {
+    const url = source instanceof URL ? new URL(source.href) : /^https?:\/\//.test(source) ? new URL(source) : (0, external_node_url_namespaceObject.pathToFileURL)(external_node_path_default().resolve(source));
+    const production = 'production' === mode;
+    const key = `${production ? 'production' : 'development'}:${url.href}`;
+    let version = 'process';
+    if (!production && 'file:' === url.protocol) {
+        const info = await (0, promises_namespaceObject.stat)((0, external_node_url_namespaceObject.fileURLToPath)(url), {
+            bigint: true
+        });
+        version = `${info.ino}:${info.size}:${info.mtimeNs}:${info.ctimeNs}`;
+    }
+    const cached = manifestCache.get(key);
+    if (cached?.version === version && cached.expiresAt > Date.now()) return cached.value;
+    const entry = {
+        version,
+        expiresAt: 1 / 0,
+        value: readSource(url).then((text)=>{
+            const manifest = JSON.parse(text);
+            validateUiManifest(manifest);
+            if (!production && 'file:' !== url.protocol) entry.expiresAt = Date.now() + remoteManifestTtl;
+            return {
+                manifest,
+                location: url
+            };
+        }).catch((error)=>{
+            if (manifestCache.get(key) === entry) manifestCache.delete(key);
+            throw error;
+        })
+    };
+    manifestCache.set(key, entry);
+    return entry.value;
+}
+async function readSource(url, signal) {
+    if ('file:' === url.protocol) return (0, promises_namespaceObject.readFile)((0, external_node_url_namespaceObject.fileURLToPath)(url), {
+        encoding: 'utf8',
+        signal
+    });
+    assertHttpUrl(url.href);
+    const response = await fetch(url, {
+        signal: signal ? AbortSignal.any([
+            signal,
+            AbortSignal.timeout(30000)
+        ]) : AbortSignal.timeout(30000)
+    });
+    if (!response.ok) throw new Error(`Failed to read UI resource: HTTP ${response.status}`);
+    return response.text();
+}
+function publicBase(manifest, options) {
+    const configured = options.assetBase ?? manifest.assetBase;
+    if ('request' !== configured) {
+        const base = assertHttpUrl(configured);
+        if (!base.pathname.endsWith('/')) base.pathname += '/';
+        return base;
+    }
+    if (!options.request) throw new Error('Request-relative UI assets require a request or an explicit assetBase');
+    return new URL('/', requestOrigin(options.request));
+}
+function requestOrigin(request) {
+    const url = new URL(request.url);
+    const proto = request.headers.get('x-forwarded-proto')?.split(',')[0].trim();
+    if ('https' === proto || 'http' === proto) url.protocol = `${proto}:`;
+    return url.origin;
+}
+function escapeAttribute(value) {
+    return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+async function registerUiResources(server, options = {}) {
+    const injected = options.request && requestUiOptions.get(options.request);
+    options = {
+        ...options,
+        manifest: options.manifest ?? injected?.manifest,
+        mode: options.mode ?? injected?.mode
+    };
+    if (!options.manifest) throw new Error('MCP UI manifest is required. Use the Modern.js MCP Apps server plugin with a request or pass an explicit manifest path or URL');
+    const { manifest, location } = await loadUiManifest(options.manifest, options.mode ?? 'production');
+    const base = publicBase(manifest, options);
+    const devSocket = 'development' === options.mode && options.request ? new URL(requestOrigin(options.request)) : void 0;
+    if (devSocket) devSocket.protocol = 'https:' === devSocket.protocol ? 'wss:' : 'ws:';
+    const uris = Object.create(null);
+    for (const [name, view] of Object.entries(manifest.views)){
+        const uri = `ui://app/${encodeURIComponent(name)}`;
+        uris[name] = uri;
+        const remote = 'remote' in view ? manifest.remotes[view.remote] : void 0;
+        const entry = remote ? new URL(remote.entry, base).href : void 0;
+        const ui = {
+            ...view.ui,
+            csp: {
+                ...view.ui.csp,
+                resourceDomains: [
+                    ...new Set([
+                        ...view.ui.csp?.resourceDomains ?? [],
+                        base.origin,
+                        ...entry ? [
+                            new URL(entry).origin
+                        ] : []
+                    ])
+                ],
+                baseUriDomains: [
+                    ...new Set([
+                        ...view.ui.csp?.baseUriDomains ?? [],
+                        base.origin
+                    ])
+                ],
+                connectDomains: [
+                    ...new Set([
+                        ...view.ui.csp?.connectDomains ?? [],
+                        base.origin,
+                        ...entry ? [
+                            new URL(entry).origin
+                        ] : [],
+                        ...devSocket ? [
+                            devSocket.origin
+                        ] : []
+                    ])
+                ]
+            }
+        };
+        (0, ext_apps_server_namespaceObject.registerAppResource)(server, name, uri, {
+            _meta: {
+                ui
+            }
+        }, async (_uri, extra)=>{
+            const source = 'html' in view ? view.html : remote.shell;
+            const sourceUrl = /^https?:\/\//.test(source) ? new URL(source) : new URL(source, location);
+            let html = await readSource(sourceUrl, options.request ? AbortSignal.any([
+                options.request.signal,
+                extra.mcpReq.signal
+            ]) : extra.mcpReq.signal);
+            if (!/<head\b[^>]*>/i.test(html)) throw new Error('UI HTML requires a head element');
+            if (/<base\b/i.test(html)) throw new Error('UI HTML must not contain a base element');
+            const config = remote && 'expose' in view ? `<script type="application/json" id="modern-mcp-config">${JSON.stringify({
+                name: view.remote,
+                entry,
+                expose: view.expose,
+                view: name
+            }).replace(/</g, '\\u003c')}</script>` : '';
+            html = html.replace(/<head\b[^>]*>/i, (head)=>`${head}<base href="${escapeAttribute(base.href)}">${config}`);
+            return {
+                contents: [
+                    {
+                        uri,
+                        mimeType: ext_apps_server_namespaceObject.RESOURCE_MIME_TYPE,
+                        text: html,
+                        _meta: {
+                            ui
+                        }
+                    }
+                ]
+            };
+        });
+    }
+    return uris;
+}
+async function currentContext(useContext) {
+    if (useContext) return useContext();
+    const { useHonoContext } = await import("@modern-js/server-runtime");
+    return useHonoContext();
+}
+function createFetchHandler(createServer, options = {}) {
+    const handler = (0, server_namespaceObject.createMcpHandler)(({ requestInfo })=>{
+        if (!requestInfo) throw new Error('MCP HTTP request is required');
+        return createServer(requestInfo);
+    }, {
+        legacy: 'stateless',
+        onerror: options.onError
+    });
+    return async (request)=>{
+        const origin = request.headers.get('origin');
+        if (origin && ![
+            new URL(request.url).origin,
+            requestOrigin(request),
+            ...options.allowedOrigins ?? []
+        ].includes(origin)) return new Response('Forbidden origin', {
+            status: 403
+        });
+        return handler.fetch(request);
+    };
+}
+function createBffHandlers(createServer, options = {}) {
+    const { useContext, ...fetchOptions } = options;
+    const handle = createFetchHandler(async (request)=>{
+        const uiOptions = (await currentContext(useContext)).get('locals')?.modernMcpApps;
+        if (uiOptions) requestUiOptions.set(request, uiOptions);
+        return createServer(request);
+    }, fetchOptions);
+    const route = async (input)=>{
+        const context = await currentContext(useContext);
+        const raw = context.req.raw;
+        const headers = new Headers(raw.headers);
+        headers.delete('content-length');
+        const request = new Request(raw.url, {
+            method: raw.method,
+            headers,
+            ...'GET' === raw.method || 'HEAD' === raw.method ? {} : {
+                body: void 0 === input.data ? '' : JSON.stringify(input.data)
+            },
+            signal: raw.signal
+        });
+        return handle(request);
+    };
+    return {
+        POST: route,
+        GET: route,
+        DELETE: route
+    };
+}
+exports.createBffHandlers = __webpack_exports__.createBffHandlers;
+exports.createFetchHandler = __webpack_exports__.createFetchHandler;
+exports.registerUiResources = __webpack_exports__.registerUiResources;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "createBffHandlers",
+    "createFetchHandler",
+    "registerUiResources"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/esm/mf-entry.mjs

@@ -0,0 +1,75 @@
+import * as __rspack_external_react from "react";
+import { createElement } from "react";
+import * as __rspack_external_react_dom_client_c9e7316b from "react-dom/client";
+import { createRoot } from "react-dom/client";
+import { createInstance } from "@module-federation/enhanced/runtime";
+import * as __rspack_external_react_jsx_dev_runtime_60d9ad90 from "react/jsx-dev-runtime";
+import * as __rspack_external_react_jsx_runtime_fccef271 from "react/jsx-runtime";
+import * as __rspack_external_react_dom_20ef40a6 from "react-dom";
+import { createMcpView } from "./react.mjs";
+function createMfView(config) {
+    const libs = {
+        react: __rspack_external_react,
+        'react-dom': __rspack_external_react_dom_20ef40a6,
+        'react-dom/client': __rspack_external_react_dom_client_c9e7316b,
+        'react/jsx-runtime': __rspack_external_react_jsx_runtime_fccef271,
+        'react/jsx-dev-runtime': __rspack_external_react_jsx_dev_runtime_60d9ad90
+    };
+    const runtime = createInstance({
+        name: 'modern-mcp-shell',
+        remotes: [
+            {
+                name: config.name,
+                entry: config.entry
+            }
+        ],
+        shared: Object.fromEntries(Object.entries(libs).map(([name, lib])=>[
+                name,
+                {
+                    version: __rspack_external_react.version,
+                    lib: ()=>lib,
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: __rspack_external_react.version
+                    }
+                }
+            ])),
+        shareStrategy: 'loaded-first'
+    });
+    const Remote = /*#__PURE__*/ __rspack_external_react.lazy(async ()=>{
+        const mod = await runtime.loadRemote('./' === config.expose ? config.name : `${config.name}/${config.expose.slice(2)}`);
+        if (!mod?.default) throw new Error(`Missing default export for ${config.expose}`);
+        return {
+            default: createMcpView(mod.default, {
+                name: config.view,
+                version: '1.0.0'
+            }, mod.mcpCapabilities)
+        };
+    });
+    return function() {
+        return /*#__PURE__*/ __rspack_external_react.createElement(MfErrorBoundary, null, /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Suspense, {
+            fallback: /*#__PURE__*/ __rspack_external_react.createElement("p", {
+                role: "status"
+            }, "Loading component…")
+        }, /*#__PURE__*/ __rspack_external_react.createElement(Remote, null)));
+    };
+}
+class MfErrorBoundary extends __rspack_external_react.Component {
+    state = {};
+    static getDerivedStateFromError(error) {
+        return {
+            error
+        };
+    }
+    render() {
+        if (this.state.error) return /*#__PURE__*/ __rspack_external_react.createElement("p", {
+            role: "alert"
+        }, this.state.error.message);
+        return this.props.children;
+    }
+}
+const root = document.getElementById('root');
+const configElement = document.getElementById('modern-mcp-config');
+if (!root || !configElement?.textContent) throw new Error('MCP shell requires a root element and MF configuration');
+const mf_entry_config = JSON.parse(configElement.textContent);
+createRoot(root).render(createElement(createMfView(mf_entry_config)));

package/dist/esm/react.mjs

@@ -0,0 +1,80 @@
+import { useApp, useDocumentTheme, useHostFonts, useHostStyleVariables, useHostStyles } from "@modelcontextprotocol/ext-apps/react";
+import { createElement, useReducer } from "react";
+function reduceViewState(_state, event) {
+    if ('result' === event.type) return {
+        result: event.result,
+        cancelled: false
+    };
+    return {
+        cancelled: 'cancelled' === event.type
+    };
+}
+function resultProps(result) {
+    const output = result?.isError ? void 0 : result?.structuredContent;
+    return output && 'object' == typeof output && !Array.isArray(output) ? output : {};
+}
+function useMcpApp(options) {
+    const [state, dispatch] = useReducer(reduceViewState, {
+        cancelled: false
+    });
+    const connection = useApp({
+        ...options,
+        onAppCreated (app) {
+            app.ontoolinput = ()=>dispatch({
+                    type: 'input'
+                });
+            app.ontoolinputpartial = ()=>dispatch({
+                    type: 'input'
+                });
+            app.ontoolresult = (result)=>dispatch({
+                    type: 'result',
+                    result
+                });
+            app.ontoolcancelled = ()=>dispatch({
+                    type: 'cancelled'
+                });
+            app.onteardown = async ()=>{
+                dispatch({
+                    type: 'teardown'
+                });
+                return {};
+            };
+        }
+    });
+    useHostStyles(connection.app, connection.app?.getHostContext());
+    return {
+        ...connection,
+        ...state,
+        viewProps: resultProps(state.result)
+    };
+}
+function createMcpView(View, appInfo, capabilities = {}) {
+    const appCapabilities = {
+        availableDisplayModes: [
+            'inline',
+            'fullscreen'
+        ],
+        ...capabilities
+    };
+    return function() {
+        const { app, isConnected, error, cancelled, result, viewProps } = useMcpApp({
+            appInfo,
+            capabilities: appCapabilities
+        });
+        if (error) return createElement('p', {
+            role: 'alert'
+        }, error.message);
+        if (cancelled) return createElement('p', {
+            role: 'status'
+        }, 'Tool cancelled');
+        if (result?.isError) return createElement('p', {
+            role: 'alert'
+        }, 'Tool execution failed');
+        if (!app || !isConnected || !result) return null;
+        return createElement(View, {
+            ...viewProps,
+            mcpApp: app
+        });
+    };
+}
+export { createMcpView, useApp, useDocumentTheme, useHostFonts, useHostStyleVariables, useHostStyles, useMcpApp };

package/dist/esm-node/3~0.mjs

@@ -0,0 +1,81 @@
+function isRecord(value) {
+    return null !== value && 'object' == typeof value && !Array.isArray(value);
+}
+function validateUiMetadata(value) {
+    if (!isRecord(value)) throw new Error('UI metadata must be an object');
+    if (void 0 !== value.prefersBorder && 'boolean' != typeof value.prefersBorder) throw new Error('prefersBorder must be a boolean');
+    if (void 0 !== value.domain && 'string' != typeof value.domain) throw new Error('domain must be a string');
+    if (void 0 !== value.permissions && !isRecord(value.permissions)) throw new Error('permissions must be an object');
+    if (void 0 !== value.csp) {
+        if (!isRecord(value.csp)) throw new Error('csp must be an object');
+        for (const [key, domains] of Object.entries(value.csp))if (![
+            'resourceDomains',
+            'connectDomains',
+            'frameDomains',
+            'baseUriDomains'
+        ].includes(key) || !Array.isArray(domains) || domains.some((domain)=>'string' != typeof domain)) throw new Error(`Invalid CSP field: ${key}`);
+    }
+}
+function validateViewsConfig(value) {
+    if (!isRecord(value) || !isRecord(value.views)) throw new Error('mcp-views.json requires a views object');
+    validateUiMetadata(value);
+    if (void 0 !== value.remote) {
+        if ('string' != typeof value.remote) throw new Error('remote must be a string');
+        assertRemoteManifest(value.remote);
+    }
+    for (const key of Object.keys(value))if (![
+        'views',
+        'remote',
+        'csp',
+        'prefersBorder',
+        'permissions',
+        'domain'
+    ].includes(key)) throw new Error(`Unknown MCP views option: ${key}`);
+    for (const [name, view] of Object.entries(value.views)){
+        if (!name.trim()) throw new Error('View names must be non-empty');
+        if (!('string' == typeof view && view.trim())) {
+            if (isRecord(view) && 'string' == typeof view.expose && view.expose.startsWith('./') && Object.keys(view).every((key)=>'expose' === key || 'remote' === key)) {
+                if (!('remote' in view)) continue;
+                if ('string' == typeof view.remote) {
+                    assertRemoteManifest(view.remote);
+                    continue;
+                }
+            }
+            throw new Error(`Invalid view: ${name}. Use a component path, { expose: './Name' } or { remote: 'https://host/mf-manifest.json', expose: './Name' }`);
+        }
+    }
+}
+function assertRemoteManifest(remote) {
+    if (!/^https?:\/\//.test(remote) || !assertHttpUrl(remote).pathname.endsWith('.json')) throw new Error(`Invalid MF remote: ${remote}. Use https://host/mf-manifest.json`);
+}
+function assertHttpUrl(source) {
+    const url = new URL(source);
+    if (![
+        'http:',
+        'https:'
+    ].includes(url.protocol) || url.username || url.password) throw new Error(`Invalid UI URL: ${source}`);
+    return url;
+}
+function validateUiManifest(value) {
+    if (!isRecord(value) || 1 !== value.version) throw new Error('Unsupported MCP UI manifest version');
+    if ('string' != typeof value.assetBase || !value.assetBase || !isRecord(value.remotes) || !isRecord(value.views)) throw new Error('Invalid MCP UI manifest');
+    if ('request' !== value.assetBase) assertHttpUrl(value.assetBase);
+    const checkSource = (source)=>{
+        if ('string' != typeof source || !source) throw new Error('Missing UI resource source');
+        if (/^https?:\/\//.test(source)) assertHttpUrl(source);
+        else if (source.startsWith('/') || source.includes('\\') || decodeURIComponent(source).split('/').includes('..') || /^[a-z][\w+.-]*:/i.test(source) || /[?#]/.test(source)) throw new Error(`Invalid relative UI resource: ${source}`);
+    };
+    for (const remote of Object.values(value.remotes)){
+        if (!isRecord(remote)) throw new Error('Invalid MF remote');
+        checkSource(remote.entry);
+        checkSource(remote.shell);
+    }
+    for (const [name, view] of Object.entries(value.views)){
+        if (!name.trim() || !isRecord(view)) throw new Error('Invalid UI view');
+        validateUiMetadata(view.ui);
+        if (!('html' in view) || 'remote' in view || 'expose' in view) if (!('html' in view) && 'string' == typeof view.remote && Object.hasOwn(value.remotes, view.remote) && 'string' == typeof view.expose && view.expose.startsWith('./')) continue;
+        else throw new Error(`Invalid UI manifest view: ${name}`);
+        else checkSource(view.html);
+    }
+}
+export { assertHttpUrl, validateUiManifest, validateUiMetadata, validateViewsConfig };