@mcp-html-bridge/cli 0.1.0

package/dist/compile.d.ts

@@ -0,0 +1,2 @@
+export declare function compile(serverCommand: string, outputPath: string): Promise<void>;
+//# sourceMappingURL=compile.d.ts.map

package/dist/compile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compile.d.ts","sourceRoot":"","sources":["../src/compile.ts"],"names":[],"mappings":"AAMA,wBAAsB,OAAO,CAAC,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAuCtF"}

package/dist/compile.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compile = compile;
+// ── compile subcommand: connect to MCP server → extract schemas → generate SKILL.md ──
+const node_fs_1 = require("node:fs");
+const mcp_client_1 = require("@mcp-html-bridge/mcp-client");
+const ui_engine_1 = require("@mcp-html-bridge/ui-engine");
+async function compile(serverCommand, outputPath) {
+    const client = new mcp_client_1.MCPClient();
+    console.log(`  Connecting to: ${serverCommand}`);
+    await client.connect({ command: serverCommand });
+    console.log('  Listing tools...');
+    const tools = await client.listTools();
+    console.log(`  Found ${tools.length} tools`);
+    const sections = [];
+    sections.push('# MCP Tool UI Reference\n');
+    sections.push(`> Auto-generated by mcp-html-bridge from \`${serverCommand}\``);
+    sections.push(`> ${tools.length} tools discovered\n`);
+    for (const tool of tools) {
+        console.log(`  Processing: ${tool.name}`);
+        const schema = tool.inputSchema;
+        const html = (0, ui_engine_1.renderFromSchema)(schema, {
+            toolName: tool.name,
+            toolDescription: tool.description,
+        });
+        sections.push(`## ${tool.name}\n`);
+        if (tool.description) {
+            sections.push(`${tool.description}\n`);
+        }
+        sections.push('```mcp-html');
+        sections.push(html);
+        sections.push('```\n');
+    }
+    const content = sections.join('\n');
+    (0, node_fs_1.writeFileSync)(outputPath, content);
+    console.log(`\n  ✓ Written to ${outputPath}`);
+    await client.disconnect();
+}
+//# sourceMappingURL=compile.js.map

package/dist/compile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compile.js","sourceRoot":"","sources":["../src/compile.ts"],"names":[],"mappings":";;AAMA,0BAuCC;AA7CD,wFAAwF;AACxF,qCAAwC;AACxC,4DAAwD;AACxD,0DAA8D;AAGvD,KAAK,UAAU,OAAO,CAAC,aAAqB,EAAE,UAAkB;IACrE,MAAM,MAAM,GAAG,IAAI,sBAAS,EAAE,CAAC;IAE/B,OAAO,CAAC,GAAG,CAAC,oBAAoB,aAAa,EAAE,CAAC,CAAC;IACjD,MAAM,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,CAAC;IAEjD,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IAClC,MAAM,KAAK,GAAG,MAAM,MAAM,CAAC,SAAS,EAAE,CAAC;IACvC,OAAO,CAAC,GAAG,CAAC,WAAW,KAAK,CAAC,MAAM,QAAQ,CAAC,CAAC;IAE7C,MAAM,QAAQ,GAAa,EAAE,CAAC;IAE9B,QAAQ,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;IAC3C,QAAQ,CAAC,IAAI,CAAC,8CAA8C,aAAa,IAAI,CAAC,CAAC;IAC/E,QAAQ,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,MAAM,qBAAqB,CAAC,CAAC;IAEtD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,OAAO,CAAC,GAAG,CAAC,iBAAiB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAE1C,MAAM,MAAM,GAAG,IAAI,CAAC,WAAyB,CAAC;QAC9C,MAAM,IAAI,GAAG,IAAA,4BAAgB,EAAC,MAAM,EAAE;YACpC,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,eAAe,EAAE,IAAI,CAAC,WAAW;SAClC,CAAC,CAAC;QAEH,QAAQ,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;QACnC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;QACzC,CAAC;QACD,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpB,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC;IAED,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpC,IAAA,uBAAa,EAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,CAAC,GAAG,CAAC,oBAAoB,UAAU,EAAE,CAAC,CAAC;IAE9C,MAAM,MAAM,CAAC,UAAU,EAAE,CAAC;AAC5B,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// ── CLI Entry: mcp-bridge command ──
+const commander_1 = require("commander");
+const test_mock_js_1 = require("./test-mock.js");
+const compile_js_1 = require("./compile.js");
+const program = new commander_1.Command();
+program
+    .name('mcp-bridge')
+    .description('MCP-HTML-Bridge — render MCP schemas/data as self-contained HTML')
+    .version('0.1.0');
+program
+    .command('compile <server-command>')
+    .description('Connect to an MCP server, extract tool schemas, and generate a SKILL.md file')
+    .option('-o, --output <path>', 'Output file path', 'SKILL.md')
+    .action(async (serverCommand, opts) => {
+    try {
+        console.log('\n  mcp-bridge compile\n');
+        await (0, compile_js_1.compile)(serverCommand, opts.output);
+    }
+    catch (err) {
+        console.error('Error:', err.message);
+        process.exit(1);
+    }
+});
+program
+    .command('test-mock')
+    .description('Generate HTML from built-in mock datasets for browser testing')
+    .option('-o, --output <dir>', 'Output directory', './mcp-html-output')
+    .option('-d, --debug', 'Enable debug playground panel', false)
+    .action((opts) => {
+    console.log('\n  mcp-bridge test-mock\n');
+    (0, test_mock_js_1.testMock)(opts.output, opts.debug);
+});
+program.parse();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AACA,sCAAsC;AACtC,yCAAoC;AACpC,iDAA0C;AAC1C,6CAAuC;AAEvC,MAAM,OAAO,GAAG,IAAI,mBAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,YAAY,CAAC;KAClB,WAAW,CAAC,kEAAkE,CAAC;KAC/E,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,OAAO,CAAC,0BAA0B,CAAC;KACnC,WAAW,CAAC,8EAA8E,CAAC;KAC3F,MAAM,CAAC,qBAAqB,EAAE,kBAAkB,EAAE,UAAU,CAAC;KAC7D,MAAM,CAAC,KAAK,EAAE,aAAqB,EAAE,IAAwB,EAAE,EAAE;IAChE,IAAI,CAAC;QACH,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;QACxC,MAAM,IAAA,oBAAO,EAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAG,GAAa,CAAC,OAAO,CAAC,CAAC;QAChD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;AACH,CAAC,CAAC,CAAC;AAEL,OAAO;KACJ,OAAO,CAAC,WAAW,CAAC;KACpB,WAAW,CAAC,+DAA+D,CAAC;KAC5E,MAAM,CAAC,oBAAoB,EAAE,kBAAkB,EAAE,mBAAmB,CAAC;KACrE,MAAM,CAAC,aAAa,EAAE,+BAA+B,EAAE,KAAK,CAAC;KAC7D,MAAM,CAAC,CAAC,IAAwC,EAAE,EAAE;IACnD,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;IAC1C,IAAA,uBAAQ,EAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AACpC,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/dist/mock-data.d.ts

@@ -0,0 +1,103 @@
+/** E-commerce SKU matrix dataset */
+export declare const ecommerceData: {
+    store: string;
+    lastUpdated: string;
+    summary: {
+        totalSKUs: number;
+        totalRevenue: number;
+        avgPrice: number;
+        lowStockCount: number;
+    };
+    products: {
+        sku: string;
+        name: string;
+        category: string;
+        price: number;
+        stock: number;
+        status: string;
+        rating: number;
+        revenue: number;
+    }[];
+};
+/** Particle physics collision dataset */
+export declare const physicsData: {
+    experiment: string;
+    runId: string;
+    timestamp: string;
+    beamEnergy: number;
+    luminosity: number;
+    description: string;
+    results: {
+        observedEvents: number;
+        backgroundEstimate: number;
+        signalExcess: number;
+        significance: number;
+        higgsMass: number;
+        massUncertainty: number;
+        signalStrength: number;
+        signalStrengthError: number;
+    };
+    eventSample: {
+        eventId: string;
+        energy: number;
+        eta: number;
+        phi: number;
+        pt: number;
+        channel: string;
+        selected: boolean;
+    }[];
+};
+/** Sample JSON Schema for a tool */
+export declare const sampleToolSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            query: {
+                type: string;
+                description: string;
+            };
+            category: {
+                type: string;
+                enum: string[];
+                description: string;
+            };
+            priceRange: {
+                type: string;
+                properties: {
+                    min: {
+                        type: string;
+                        minimum: number;
+                        description: string;
+                    };
+                    max: {
+                        type: string;
+                        minimum: number;
+                        description: string;
+                    };
+                };
+                description: string;
+            };
+            inStockOnly: {
+                type: string;
+                default: boolean;
+                description: string;
+            };
+            sortBy: {
+                type: string;
+                enum: string[];
+                description: string;
+            };
+            limit: {
+                type: string;
+                minimum: number;
+                maximum: number;
+                default: number;
+                description: string;
+            };
+        };
+        required: string[];
+    };
+};
+//# sourceMappingURL=mock-data.d.ts.map

package/dist/mock-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mock-data.d.ts","sourceRoot":"","sources":["../src/mock-data.ts"],"names":[],"mappings":"AAEA,oCAAoC;AACpC,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;CA2FzB,CAAC;AAEF,yCAAyC;AACzC,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BvB,CAAC;AAEF,oCAAoC;AACpC,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2C5B,CAAC"}

package/dist/mock-data.js

@@ -0,0 +1,170 @@
+"use strict";
+// ── Mock datasets for testing ──
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sampleToolSchema = exports.physicsData = exports.ecommerceData = void 0;
+/** E-commerce SKU matrix dataset */
+exports.ecommerceData = {
+    store: 'TechMart Global',
+    lastUpdated: '2026-03-20T08:00:00Z',
+    summary: {
+        totalSKUs: 8,
+        totalRevenue: 284750.0,
+        avgPrice: 449.99,
+        lowStockCount: 2,
+    },
+    products: [
+        {
+            sku: 'TM-LAP-001',
+            name: 'UltraBook Pro 16"',
+            category: 'Laptops',
+            price: 1299.99,
+            stock: 142,
+            status: 'Active',
+            rating: 4.7,
+            revenue: 92399.29,
+        },
+        {
+            sku: 'TM-LAP-002',
+            name: 'DevStation X1 Carbon',
+            category: 'Laptops',
+            price: 1849.0,
+            stock: 67,
+            status: 'Active',
+            rating: 4.9,
+            revenue: 55470.0,
+        },
+        {
+            sku: 'TM-PHN-001',
+            name: 'Pixel Ultra 8',
+            category: 'Phones',
+            price: 899.0,
+            stock: 234,
+            status: 'Active',
+            rating: 4.5,
+            revenue: 44950.0,
+        },
+        {
+            sku: 'TM-PHN-002',
+            name: 'GalaxyFold Z7',
+            category: 'Phones',
+            price: 1799.0,
+            stock: 12,
+            status: 'Low Stock',
+            rating: 4.3,
+            revenue: 35980.0,
+        },
+        {
+            sku: 'TM-TAB-001',
+            name: 'iPad Air M3',
+            category: 'Tablets',
+            price: 649.0,
+            stock: 0,
+            status: 'Out of Stock',
+            rating: 4.8,
+            revenue: 25960.0,
+        },
+        {
+            sku: 'TM-AUD-001',
+            name: 'AirPods Max 2',
+            category: 'Audio',
+            price: 549.0,
+            stock: 89,
+            status: 'Active',
+            rating: 4.6,
+            revenue: 16470.0,
+        },
+        {
+            sku: 'TM-ACC-001',
+            name: 'MagSafe Charger Bundle',
+            category: 'Accessories',
+            price: 79.99,
+            stock: 456,
+            status: 'Active',
+            rating: 4.2,
+            revenue: 7999.0,
+        },
+        {
+            sku: 'TM-ACC-002',
+            name: 'USB-C Hub 12-in-1',
+            category: 'Accessories',
+            price: 129.99,
+            stock: 8,
+            status: 'Backorder',
+            rating: 4.4,
+            revenue: 5521.71,
+        },
+    ],
+};
+/** Particle physics collision dataset */
+exports.physicsData = {
+    experiment: 'LHC Run 4 — Higgs Boson Decay Analysis',
+    runId: 'CERN-2026-0342',
+    timestamp: '2026-03-19T14:32:07.291Z',
+    beamEnergy: 13.6, // TeV
+    luminosity: 4.2e34, // cm⁻²s⁻¹
+    description: 'Analysis of diphoton invariant mass spectrum from proton-proton collisions at √s = 13.6 TeV. This run focused on measuring the Higgs boson signal strength in the H→γγ decay channel with improved electromagnetic calorimeter calibration. The observed excess at 125.09 GeV is consistent with the Standard Model Higgs boson prediction within 1.2σ.',
+    results: {
+        observedEvents: 14283,
+        backgroundEstimate: 13950,
+        signalExcess: 333,
+        significance: 5.2, // sigma
+        higgsMass: 125.09, // GeV/c²
+        massUncertainty: 0.24,
+        signalStrength: 1.12,
+        signalStrengthError: 0.09,
+    },
+    eventSample: [
+        { eventId: 'EVT-90341', energy: 125.3, eta: -1.42, phi: 2.81, pt: 64.2, channel: 'diphoton', selected: true },
+        { eventId: 'EVT-90342', energy: 124.8, eta: 0.67, phi: -1.23, pt: 58.7, channel: 'diphoton', selected: true },
+        { eventId: 'EVT-90343', energy: 91.2, eta: 2.11, phi: 0.45, pt: 42.1, channel: 'Z-boson', selected: false },
+        { eventId: 'EVT-90344', energy: 125.1, eta: -0.23, phi: -2.67, pt: 71.3, channel: 'diphoton', selected: true },
+        { eventId: 'EVT-90345', energy: 80.4, eta: 1.89, phi: 1.12, pt: 38.5, channel: 'W-boson', selected: false },
+        { eventId: 'EVT-90346', energy: 125.0, eta: 0.02, phi: -0.89, pt: 66.8, channel: 'diphoton', selected: true },
+    ],
+};
+/** Sample JSON Schema for a tool */
+exports.sampleToolSchema = {
+    name: 'search_products',
+    description: 'Search the product catalog with filters and sorting options.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            query: {
+                type: 'string',
+                description: 'Search query string',
+            },
+            category: {
+                type: 'string',
+                enum: ['Laptops', 'Phones', 'Tablets', 'Audio', 'Accessories'],
+                description: 'Filter by product category',
+            },
+            priceRange: {
+                type: 'object',
+                properties: {
+                    min: { type: 'number', minimum: 0, description: 'Minimum price' },
+                    max: { type: 'number', minimum: 0, description: 'Maximum price' },
+                },
+                description: 'Price range filter',
+            },
+            inStockOnly: {
+                type: 'boolean',
+                default: true,
+                description: 'Only show in-stock items',
+            },
+            sortBy: {
+                type: 'string',
+                enum: ['price', 'rating', 'name', 'stock'],
+                description: 'Sort results by field',
+            },
+            limit: {
+                type: 'integer',
+                minimum: 1,
+                maximum: 100,
+                default: 20,
+                description: 'Maximum number of results',
+            },
+        },
+        required: ['query'],
+    },
+};
+//# sourceMappingURL=mock-data.js.map

package/dist/mock-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mock-data.js","sourceRoot":"","sources":["../src/mock-data.ts"],"names":[],"mappings":";AAAA,kCAAkC;;;AAElC,oCAAoC;AACvB,QAAA,aAAa,GAAG;IAC3B,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,sBAAsB;IACnC,OAAO,EAAE;QACP,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,QAAQ;QACtB,QAAQ,EAAE,MAAM;QAChB,aAAa,EAAE,CAAC;KACjB;IACD,QAAQ,EAAE;QACR;YACE,GAAG,EAAE,YAAY;YACjB,IAAI,EAAE,mBAAmB;YACzB,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,QAAQ;SAClB;QACD;YACE,GAAG,EAAE,YAAY;YACjB,IAAI,EAAE,sBAAsB;YAC5B,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,OAAO;SACjB;QACD;YACE,GAAG,EAAE,YAAY;YACjB,IAAI,EAAE,eAAe;YACrB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,OAAO;SACjB;QACD;YACE,GAAG,EAAE,YAAY;YACjB,IAAI,EAAE,eAAe;YACrB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,WAAW;YACnB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,OAAO;SACjB;QACD;YACE,GAAG,EAAE,YAAY;YACjB,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,OAAO;SACjB;QACD;YACE,GAAG,EAAE,YAAY;YACjB,IAAI,EAAE,eAAe;YACrB,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,OAAO;SACjB;QACD;YACE,GAAG,EAAE,YAAY;YACjB,IAAI,EAAE,wBAAwB;YAC9B,QAAQ,EAAE,aAAa;YACvB,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,MAAM;SAChB;QACD;YACE,GAAG,EAAE,YAAY;YACjB,IAAI,EAAE,mBAAmB;YACzB,QAAQ,EAAE,aAAa;YACvB,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,OAAO;SACjB;KACF;CACF,CAAC;AAEF,yCAAyC;AAC5B,QAAA,WAAW,GAAG;IACzB,UAAU,EAAE,wCAAwC;IACpD,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,0BAA0B;IACrC,UAAU,EAAE,IAAI,EAAE,MAAM;IACxB,UAAU,EAAE,MAAM,EAAE,UAAU;IAC9B,WAAW,EACT,yVAAyV;IAC3V,OAAO,EAAE;QACP,cAAc,EAAE,KAAK;QACrB,kBAAkB,EAAE,KAAK;QACzB,YAAY,EAAE,GAAG;QACjB,YAAY,EAAE,GAAG,EAAE,QAAQ;QAC3B,SAAS,EAAE,MAAM,EAAE,SAAS;QAC5B,eAAe,EAAE,IAAI;QACrB,cAAc,EAAE,IAAI;QACpB,mBAAmB,EAAE,IAAI;KAC1B;IACD,WAAW,EAAE;QACX,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC7G,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC7G,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC3G,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC9G,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC3G,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC9G;CACF,CAAC;AAEF,oCAAoC;AACvB,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,iBAAiB;IACvB,WAAW,EAAE,8DAA8D;IAC3E,WAAW,EAAE;QACX,IAAI,EAAE,QAAiB;QACvB,UAAU,EAAE;YACV,KAAK,EAAE;gBACL,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,qBAAqB;aACnC;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,CAAC;gBAC9D,WAAW,EAAE,4BAA4B;aAC1C;YACD,UAAU,EAAE;gBACV,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE;oBACV,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,EAAE,eAAe,EAAE;oBACjE,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,EAAE,eAAe,EAAE;iBAClE;gBACD,WAAW,EAAE,oBAAoB;aAClC;YACD,WAAW,EAAE;gBACX,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,IAAI;gBACb,WAAW,EAAE,0BAA0B;aACxC;YACD,MAAM,EAAE;gBACN,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC;gBAC1C,WAAW,EAAE,uBAAuB;aACrC;YACD,KAAK,EAAE;gBACL,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,CAAC;gBACV,OAAO,EAAE,GAAG;gBACZ,OAAO,EAAE,EAAE;gBACX,WAAW,EAAE,2BAA2B;aACzC;SACF;QACD,QAAQ,EAAE,CAAC,OAAO,CAAC;KACpB;CACF,CAAC"}

package/dist/test-mock.d.ts

@@ -0,0 +1,2 @@
+export declare function testMock(outputDir: string, debug: boolean): void;
+//# sourceMappingURL=test-mock.d.ts.map

package/dist/test-mock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-mock.d.ts","sourceRoot":"","sources":["../src/test-mock.ts"],"names":[],"mappings":"AAMA,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAmEhE"}

package/dist/test-mock.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testMock = testMock;
+// ── test-mock subcommand: render mock data to HTML files ──
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const ui_engine_1 = require("@mcp-html-bridge/ui-engine");
+const mock_data_js_1 = require("./mock-data.js");
+function testMock(outputDir, debug) {
+    (0, node_fs_1.mkdirSync)(outputDir, { recursive: true });
+    const opts = { debug };
+    // 1. E-commerce data (composite: metrics + grid)
+    const ecommerceHtml = (0, ui_engine_1.renderFromData)(mock_data_js_1.ecommerceData, {
+        ...opts,
+        title: 'E-Commerce Dashboard — TechMart',
+        toolName: 'get_inventory',
+    });
+    const ecomPath = (0, node_path_1.join)(outputDir, 'ecommerce.html');
+    (0, node_fs_1.writeFileSync)(ecomPath, ecommerceHtml);
+    console.log(`  ✓ ${ecomPath}`);
+    // 2. E-commerce products only (data grid)
+    const gridHtml = (0, ui_engine_1.renderFromData)(mock_data_js_1.ecommerceData.products, {
+        ...opts,
+        title: 'Product Grid',
+        toolName: 'list_products',
+    });
+    const gridPath = (0, node_path_1.join)(outputDir, 'data-grid.html');
+    (0, node_fs_1.writeFileSync)(gridPath, gridHtml);
+    console.log(`  ✓ ${gridPath}`);
+    // 3. Physics data (composite: reading block + metrics + grid)
+    const physicsHtml = (0, ui_engine_1.renderFromData)(mock_data_js_1.physicsData, {
+        ...opts,
+        title: 'LHC Collision Analysis',
+        toolName: 'analyze_collisions',
+    });
+    const physicsPath = (0, node_path_1.join)(outputDir, 'physics.html');
+    (0, node_fs_1.writeFileSync)(physicsPath, physicsHtml);
+    console.log(`  ✓ ${physicsPath}`);
+    // 4. Physics results only (metrics cards)
+    const metricsHtml = (0, ui_engine_1.renderFromData)(mock_data_js_1.physicsData.results, {
+        ...opts,
+        title: 'Collision Metrics',
+        toolName: 'get_results',
+    });
+    const metricsPath = (0, node_path_1.join)(outputDir, 'metrics.html');
+    (0, node_fs_1.writeFileSync)(metricsPath, metricsHtml);
+    console.log(`  ✓ ${metricsPath}`);
+    // 5. Tool schema (form)
+    const formHtml = (0, ui_engine_1.renderFromSchema)(mock_data_js_1.sampleToolSchema.inputSchema, {
+        ...opts,
+        title: 'Search Products',
+        toolName: mock_data_js_1.sampleToolSchema.name,
+        toolDescription: mock_data_js_1.sampleToolSchema.description,
+    });
+    const formPath = (0, node_path_1.join)(outputDir, 'form.html');
+    (0, node_fs_1.writeFileSync)(formPath, formHtml);
+    console.log(`  ✓ ${formPath}`);
+    // 6. Deep JSON (json-tree)
+    const treeHtml = (0, ui_engine_1.renderFromData)(mock_data_js_1.physicsData, {
+        ...opts,
+        title: 'Raw JSON Tree',
+    });
+    const treePath = (0, node_path_1.join)(outputDir, 'json-tree.html');
+    (0, node_fs_1.writeFileSync)(treePath, treeHtml);
+    console.log(`  ✓ ${treePath}`);
+    console.log(`\n  ${6} HTML files written to ${outputDir}`);
+    console.log('  Open them in a browser to verify rendering.');
+}
+//# sourceMappingURL=test-mock.js.map

package/dist/test-mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-mock.js","sourceRoot":"","sources":["../src/test-mock.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@mcp-html-bridge/cli",
+  "version": "0.1.0",
+  "description": "CLI adapter for MCP-HTML-Bridge",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "mcp-bridge": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@mcp-html-bridge/ui-engine": "*",
+    "@mcp-html-bridge/mcp-client": "*",
+    "commander": "^12.0.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zhongkai/mcp-html-bridge.git",
+    "directory": "packages/adapter-cli"
+  }
+}

package/src/compile.ts

@@ -0,0 +1,46 @@
+// ── compile subcommand: connect to MCP server → extract schemas → generate SKILL.md ──
+import { writeFileSync } from 'node:fs';
+import { MCPClient } from '@mcp-html-bridge/mcp-client';
+import { renderFromSchema } from '@mcp-html-bridge/ui-engine';
+import type { JSONSchema } from '@mcp-html-bridge/ui-engine';
+
+export async function compile(serverCommand: string, outputPath: string): Promise<void> {
+  const client = new MCPClient();
+
+  console.log(`  Connecting to: ${serverCommand}`);
+  await client.connect({ command: serverCommand });
+
+  console.log('  Listing tools...');
+  const tools = await client.listTools();
+  console.log(`  Found ${tools.length} tools`);
+
+  const sections: string[] = [];
+
+  sections.push('# MCP Tool UI Reference\n');
+  sections.push(`> Auto-generated by mcp-html-bridge from \`${serverCommand}\``);
+  sections.push(`> ${tools.length} tools discovered\n`);
+
+  for (const tool of tools) {
+    console.log(`  Processing: ${tool.name}`);
+
+    const schema = tool.inputSchema as JSONSchema;
+    const html = renderFromSchema(schema, {
+      toolName: tool.name,
+      toolDescription: tool.description,
+    });
+
+    sections.push(`## ${tool.name}\n`);
+    if (tool.description) {
+      sections.push(`${tool.description}\n`);
+    }
+    sections.push('```mcp-html');
+    sections.push(html);
+    sections.push('```\n');
+  }
+
+  const content = sections.join('\n');
+  writeFileSync(outputPath, content);
+  console.log(`\n  ✓ Written to ${outputPath}`);
+
+  await client.disconnect();
+}

package/src/index.ts

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+// ── CLI Entry: mcp-bridge command ──
+import { Command } from 'commander';
+import { testMock } from './test-mock.js';
+import { compile } from './compile.js';
+
+const program = new Command();
+
+program
+  .name('mcp-bridge')
+  .description('MCP-HTML-Bridge — render MCP schemas/data as self-contained HTML')
+  .version('0.1.0');
+
+program
+  .command('compile <server-command>')
+  .description('Connect to an MCP server, extract tool schemas, and generate a SKILL.md file')
+  .option('-o, --output <path>', 'Output file path', 'SKILL.md')
+  .action(async (serverCommand: string, opts: { output: string }) => {
+    try {
+      console.log('\n  mcp-bridge compile\n');
+      await compile(serverCommand, opts.output);
+    } catch (err) {
+      console.error('Error:', (err as Error).message);
+      process.exit(1);
+    }
+  });
+
+program
+  .command('test-mock')
+  .description('Generate HTML from built-in mock datasets for browser testing')
+  .option('-o, --output <dir>', 'Output directory', './mcp-html-output')
+  .option('-d, --debug', 'Enable debug playground panel', false)
+  .action((opts: { output: string; debug: boolean }) => {
+    console.log('\n  mcp-bridge test-mock\n');
+    testMock(opts.output, opts.debug);
+  });
+
+program.parse();

package/src/mock-data.ts

@@ -0,0 +1,170 @@
+// ── Mock datasets for testing ──
+
+/** E-commerce SKU matrix dataset */
+export const ecommerceData = {
+  store: 'TechMart Global',
+  lastUpdated: '2026-03-20T08:00:00Z',
+  summary: {
+    totalSKUs: 8,
+    totalRevenue: 284750.0,
+    avgPrice: 449.99,
+    lowStockCount: 2,
+  },
+  products: [
+    {
+      sku: 'TM-LAP-001',
+      name: 'UltraBook Pro 16"',
+      category: 'Laptops',
+      price: 1299.99,
+      stock: 142,
+      status: 'Active',
+      rating: 4.7,
+      revenue: 92399.29,
+    },
+    {
+      sku: 'TM-LAP-002',
+      name: 'DevStation X1 Carbon',
+      category: 'Laptops',
+      price: 1849.0,
+      stock: 67,
+      status: 'Active',
+      rating: 4.9,
+      revenue: 55470.0,
+    },
+    {
+      sku: 'TM-PHN-001',
+      name: 'Pixel Ultra 8',
+      category: 'Phones',
+      price: 899.0,
+      stock: 234,
+      status: 'Active',
+      rating: 4.5,
+      revenue: 44950.0,
+    },
+    {
+      sku: 'TM-PHN-002',
+      name: 'GalaxyFold Z7',
+      category: 'Phones',
+      price: 1799.0,
+      stock: 12,
+      status: 'Low Stock',
+      rating: 4.3,
+      revenue: 35980.0,
+    },
+    {
+      sku: 'TM-TAB-001',
+      name: 'iPad Air M3',
+      category: 'Tablets',
+      price: 649.0,
+      stock: 0,
+      status: 'Out of Stock',
+      rating: 4.8,
+      revenue: 25960.0,
+    },
+    {
+      sku: 'TM-AUD-001',
+      name: 'AirPods Max 2',
+      category: 'Audio',
+      price: 549.0,
+      stock: 89,
+      status: 'Active',
+      rating: 4.6,
+      revenue: 16470.0,
+    },
+    {
+      sku: 'TM-ACC-001',
+      name: 'MagSafe Charger Bundle',
+      category: 'Accessories',
+      price: 79.99,
+      stock: 456,
+      status: 'Active',
+      rating: 4.2,
+      revenue: 7999.0,
+    },
+    {
+      sku: 'TM-ACC-002',
+      name: 'USB-C Hub 12-in-1',
+      category: 'Accessories',
+      price: 129.99,
+      stock: 8,
+      status: 'Backorder',
+      rating: 4.4,
+      revenue: 5521.71,
+    },
+  ],
+};
+
+/** Particle physics collision dataset */
+export const physicsData = {
+  experiment: 'LHC Run 4 — Higgs Boson Decay Analysis',
+  runId: 'CERN-2026-0342',
+  timestamp: '2026-03-19T14:32:07.291Z',
+  beamEnergy: 13.6, // TeV
+  luminosity: 4.2e34, // cm⁻²s⁻¹
+  description:
+    'Analysis of diphoton invariant mass spectrum from proton-proton collisions at √s = 13.6 TeV. This run focused on measuring the Higgs boson signal strength in the H→γγ decay channel with improved electromagnetic calorimeter calibration. The observed excess at 125.09 GeV is consistent with the Standard Model Higgs boson prediction within 1.2σ.',
+  results: {
+    observedEvents: 14283,
+    backgroundEstimate: 13950,
+    signalExcess: 333,
+    significance: 5.2, // sigma
+    higgsMass: 125.09, // GeV/c²
+    massUncertainty: 0.24,
+    signalStrength: 1.12,
+    signalStrengthError: 0.09,
+  },
+  eventSample: [
+    { eventId: 'EVT-90341', energy: 125.3, eta: -1.42, phi: 2.81, pt: 64.2, channel: 'diphoton', selected: true },
+    { eventId: 'EVT-90342', energy: 124.8, eta: 0.67, phi: -1.23, pt: 58.7, channel: 'diphoton', selected: true },
+    { eventId: 'EVT-90343', energy: 91.2, eta: 2.11, phi: 0.45, pt: 42.1, channel: 'Z-boson', selected: false },
+    { eventId: 'EVT-90344', energy: 125.1, eta: -0.23, phi: -2.67, pt: 71.3, channel: 'diphoton', selected: true },
+    { eventId: 'EVT-90345', energy: 80.4, eta: 1.89, phi: 1.12, pt: 38.5, channel: 'W-boson', selected: false },
+    { eventId: 'EVT-90346', energy: 125.0, eta: 0.02, phi: -0.89, pt: 66.8, channel: 'diphoton', selected: true },
+  ],
+};
+
+/** Sample JSON Schema for a tool */
+export const sampleToolSchema = {
+  name: 'search_products',
+  description: 'Search the product catalog with filters and sorting options.',
+  inputSchema: {
+    type: 'object' as const,
+    properties: {
+      query: {
+        type: 'string',
+        description: 'Search query string',
+      },
+      category: {
+        type: 'string',
+        enum: ['Laptops', 'Phones', 'Tablets', 'Audio', 'Accessories'],
+        description: 'Filter by product category',
+      },
+      priceRange: {
+        type: 'object',
+        properties: {
+          min: { type: 'number', minimum: 0, description: 'Minimum price' },
+          max: { type: 'number', minimum: 0, description: 'Maximum price' },
+        },
+        description: 'Price range filter',
+      },
+      inStockOnly: {
+        type: 'boolean',
+        default: true,
+        description: 'Only show in-stock items',
+      },
+      sortBy: {
+        type: 'string',
+        enum: ['price', 'rating', 'name', 'stock'],
+        description: 'Sort results by field',
+      },
+      limit: {
+        type: 'integer',
+        minimum: 1,
+        maximum: 100,
+        default: 20,
+        description: 'Maximum number of results',
+      },
+    },
+    required: ['query'],
+  },
+};

package/src/test-mock.ts

@@ -0,0 +1,74 @@
+// ── test-mock subcommand: render mock data to HTML files ──
+import { writeFileSync, mkdirSync } from 'node:fs';
+import { join } from 'node:path';
+import { renderFromData, renderFromSchema } from '@mcp-html-bridge/ui-engine';
+import { ecommerceData, physicsData, sampleToolSchema } from './mock-data.js';
+
+export function testMock(outputDir: string, debug: boolean): void {
+  mkdirSync(outputDir, { recursive: true });
+
+  const opts = { debug };
+
+  // 1. E-commerce data (composite: metrics + grid)
+  const ecommerceHtml = renderFromData(ecommerceData, {
+    ...opts,
+    title: 'E-Commerce Dashboard — TechMart',
+    toolName: 'get_inventory',
+  });
+  const ecomPath = join(outputDir, 'ecommerce.html');
+  writeFileSync(ecomPath, ecommerceHtml);
+  console.log(`  ✓ ${ecomPath}`);
+
+  // 2. E-commerce products only (data grid)
+  const gridHtml = renderFromData(ecommerceData.products, {
+    ...opts,
+    title: 'Product Grid',
+    toolName: 'list_products',
+  });
+  const gridPath = join(outputDir, 'data-grid.html');
+  writeFileSync(gridPath, gridHtml);
+  console.log(`  ✓ ${gridPath}`);
+
+  // 3. Physics data (composite: reading block + metrics + grid)
+  const physicsHtml = renderFromData(physicsData, {
+    ...opts,
+    title: 'LHC Collision Analysis',
+    toolName: 'analyze_collisions',
+  });
+  const physicsPath = join(outputDir, 'physics.html');
+  writeFileSync(physicsPath, physicsHtml);
+  console.log(`  ✓ ${physicsPath}`);
+
+  // 4. Physics results only (metrics cards)
+  const metricsHtml = renderFromData(physicsData.results, {
+    ...opts,
+    title: 'Collision Metrics',
+    toolName: 'get_results',
+  });
+  const metricsPath = join(outputDir, 'metrics.html');
+  writeFileSync(metricsPath, metricsHtml);
+  console.log(`  ✓ ${metricsPath}`);
+
+  // 5. Tool schema (form)
+  const formHtml = renderFromSchema(sampleToolSchema.inputSchema, {
+    ...opts,
+    title: 'Search Products',
+    toolName: sampleToolSchema.name,
+    toolDescription: sampleToolSchema.description,
+  });
+  const formPath = join(outputDir, 'form.html');
+  writeFileSync(formPath, formHtml);
+  console.log(`  ✓ ${formPath}`);
+
+  // 6. Deep JSON (json-tree)
+  const treeHtml = renderFromData(physicsData, {
+    ...opts,
+    title: 'Raw JSON Tree',
+  });
+  const treePath = join(outputDir, 'json-tree.html');
+  writeFileSync(treePath, treeHtml);
+  console.log(`  ✓ ${treePath}`);
+
+  console.log(`\n  ${6} HTML files written to ${outputDir}`);
+  console.log('  Open them in a browser to verify rendering.');
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "references": [
+    { "path": "../core-ui-engine" },
+    { "path": "../core-mcp-client" }
+  ]
+}