@mcp-html-bridge/claude-skill 0.2.0

package/commands/mcp-render.md

@@ -0,0 +1,109 @@
+You are an MCP tool result visualizer powered by MCP-HTML-Bridge. You render MCP tool schemas and result data as beautiful, self-contained HTML pages — zero runtime dependencies.
+
+## Core Workflow
+
+1. **Identify input** — user provides JSON (file path, inline, or from a recent MCP tool call)
+2. **Detect mode** — `type: "object"` + `properties` → schema (form) / anything else → data (visualization)
+3. **Render** — call `mcp-html-skill render` to generate HTML
+4. **Deliver** — write file + open in browser, or embed HTML in response
+
+## Render Commands
+
+```bash
+# Write to file and open in browser (primary method)
+cat <<'EOF' > /tmp/mcp-input.json
+<JSON_DATA>
+EOF
+mcp-html-skill render --data /tmp/mcp-input.json --title "Title" --tool-name "tool" --open
+
+# Schema → interactive form
+mcp-html-skill render --schema /tmp/mcp-schema.json --title "Title" --tool-name "tool" --open
+
+# Print raw HTML to stdout (for embedding in response)
+mcp-html-skill render --data /tmp/mcp-input.json --stdout
+```
+
+If `mcp-html-skill` is not in PATH, use:
+```bash
+npx @mcp-html-bridge/claude-skill render --data /tmp/mcp-input.json --title "Title" --open
+```
+
+## Options Reference
+
+| Flag | Description |
+|---|---|
+| `--schema <file>` | Render JSON Schema as interactive form |
+| `--data <file>` | Render JSON data as visualization |
+| `--json '<str>'` | Inline JSON (small payloads) |
+| `--title <title>` | Browser tab & header title |
+| `--tool-name <name>` | MCP tool name (for bridge protocol) |
+| `--tool-desc <desc>` | Tool description |
+| `--debug` | Enable debug playground (LLM relay, JSON injection) |
+| `--output <dir>` | Output dir (default: /tmp/mcp-html-bridge) |
+| `--open` | Auto-open in default browser |
+| `--stdout` | Print raw HTML to stdout |
+
+## Delivery Strategy
+
+**Default (file + browser):**
+1. Write JSON to temp file
+2. `mcp-html-skill render --data /tmp/mcp-input.json --title "..." --open`
+3. Tell user: "Rendered and opened in browser. File: <path>"
+
+**Inline HTML embedding (for hosts that support HTML rendering):**
+1. Render with `--stdout` to get raw HTML
+2. Wrap in a fenced code block with `html` language tag in your response
+3. Hosts that support HTML preview (e.g., future Claude Desktop) can render it inline
+
+Always prefer the file + browser approach as the primary delivery method. The inline approach is supplementary.
+
+## Auto-Detection
+
+| Data Shape | Visualization |
+|---|---|
+| Array of objects (consistent keys) | Sortable data grid with status badges |
+| Flat object with numbers | KPI / metrics cards |
+| Deep nesting (depth > 3) | Collapsible JSON tree |
+| Long text strings | Formatted reading blocks |
+| Mixed structure | Composite (combines above) |
+| JSON Schema with `properties` | Interactive input form |
+
+## Example: Baidu Youxuan MCP Integration
+
+When the user has a Baidu Youxuan (百度优选) MCP server connected and calls comparison tools:
+
+```bash
+# 1. The MCP tool returns structured comparison data
+# 2. Save the tool result to a temp file
+cat <<'EOF' > /tmp/mcp-input.json
+{
+  "compareId": "CMP-001",
+  "products": ["SKU-001", "SKU-002", "SKU-003"],
+  "comparison": [
+    { "dimension": "商品名称", "SKU-001": "联想小新 Pro 16", "SKU-002": "RedmiBook Pro 15", "SKU-003": "华为 MateBook 14s" },
+    { "dimension": "到手价", "SKU-001": "¥4,699", "SKU-002": "¥4,099", "SKU-003": "¥6,999" },
+    { "dimension": "处理器", "SKU-001": "R7-8845H", "SKU-002": "i7-13700H", "SKU-003": "Ultra 7" },
+    { "dimension": "评分", "SKU-001": "4.8", "SKU-002": "4.7", "SKU-003": "4.9" },
+    { "dimension": "佣金比例", "SKU-001": "3.5%", "SKU-002": "4.2%", "SKU-003": "2.8%" }
+  ]
+}
+EOF
+
+# 3. Render as visual HTML
+mcp-html-skill render --data /tmp/mcp-input.json \
+  --title "商品参数对比" \
+  --tool-name "baidu_youxuan_compare" \
+  --open
+```
+
+The engine detects the `comparison` array of objects and renders a sortable comparison table with formatted cells.
+
+## Tips
+
+- Always use `--open` so the page launches automatically
+- Generated HTML works offline (zero dependencies)
+- Dark mode follows system preference
+- `--debug` adds a playground panel for testing LLM integration
+- Output persists in `/tmp/mcp-html-bridge/` until system cleanup
+
+$ARGUMENTS

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,39 @@
+#!/usr/bin/env node
+/**
+ * @mcp-html-bridge/claude-skill
+ *
+ * CLI tool for Claude Code integration:
+ *   mcp-html-skill install   — install /mcp-render command into Claude Code
+ *   mcp-html-skill render    — render JSON schema/data to HTML file
+ */
+import { Command } from 'commander';
+import { install } from './install.js';
+import { render } from './render.js';
+const program = new Command();
+program
+    .name('mcp-html-skill')
+    .description('Claude Code skill for MCP-HTML-Bridge')
+    .version('0.1.0');
+program
+    .command('install')
+    .description('Install /mcp-render command into Claude Code (~/.claude/commands/)')
+    .option('--global', 'Install to global ~/.claude/commands/ (default)', true)
+    .option('--project', 'Install to current project .claude/commands/')
+    .action(install);
+program
+    .command('render')
+    .description('Render MCP tool schema or result data as HTML')
+    .option('--schema <file>', 'JSON Schema file (renders input form)')
+    .option('--data <file>', 'JSON data file (renders result view)')
+    .option('--json <string>', 'Inline JSON string')
+    .option('--mode <mode>', 'Force render mode: schema | data (auto-detected if omitted)')
+    .option('--title <title>', 'Page title')
+    .option('--tool-name <name>', 'Tool name for bridge protocol')
+    .option('--tool-desc <desc>', 'Tool description')
+    .option('--debug', 'Enable debug playground panel')
+    .option('--output <dir>', 'Output directory', '/tmp/mcp-html-bridge')
+    .option('--open', 'Open in browser after rendering')
+    .option('--stdout', 'Print raw HTML to stdout instead of writing to file')
+    .action(render);
+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;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,gBAAgB,CAAC;KACtB,WAAW,CAAC,uCAAuC,CAAC;KACpD,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,OAAO,CAAC,SAAS,CAAC;KAClB,WAAW,CAAC,oEAAoE,CAAC;KACjF,MAAM,CAAC,UAAU,EAAE,iDAAiD,EAAE,IAAI,CAAC;KAC3E,MAAM,CAAC,WAAW,EAAE,8CAA8C,CAAC;KACnE,MAAM,CAAC,OAAO,CAAC,CAAC;AAEnB,OAAO;KACJ,OAAO,CAAC,QAAQ,CAAC;KACjB,WAAW,CAAC,+CAA+C,CAAC;KAC5D,MAAM,CAAC,iBAAiB,EAAE,uCAAuC,CAAC;KAClE,MAAM,CAAC,eAAe,EAAE,sCAAsC,CAAC;KAC/D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC;KAC/C,MAAM,CAAC,eAAe,EAAE,6DAA6D,CAAC;KACtF,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC;KACvC,MAAM,CAAC,oBAAoB,EAAE,+BAA+B,CAAC;KAC7D,MAAM,CAAC,oBAAoB,EAAE,kBAAkB,CAAC;KAChD,MAAM,CAAC,SAAS,EAAE,+BAA+B,CAAC;KAClD,MAAM,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,sBAAsB,CAAC;KACpE,MAAM,CAAC,QAAQ,EAAE,iCAAiC,CAAC;KACnD,MAAM,CAAC,UAAU,EAAE,qDAAqD,CAAC;KACzE,MAAM,CAAC,MAAM,CAAC,CAAC;AAElB,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/dist/install.d.ts

@@ -0,0 +1,7 @@
+interface InstallOptions {
+    global?: boolean;
+    project?: boolean;
+}
+export declare function install(options: InstallOptions): void;
+export {};
+//# sourceMappingURL=install.d.ts.map

package/dist/install.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"install.d.ts","sourceRoot":"","sources":["../src/install.ts"],"names":[],"mappings":"AAUA,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CA+BrD"}

package/dist/install.js

@@ -0,0 +1,35 @@
+/**
+ * Install the /mcp-render command into Claude Code.
+ */
+import { existsSync, mkdirSync, copyFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { homedir } from 'node:os';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export function install(options) {
+    const targetDir = options.project
+        ? join(process.cwd(), '.claude', 'commands')
+        : join(homedir(), '.claude', 'commands');
+    mkdirSync(targetDir, { recursive: true });
+    // The commands/ dir is at package root, one level up from dist/
+    const commandSrc = join(__dirname, '..', 'commands', 'mcp-render.md');
+    // Fallback: if running from src/ during development, try two levels up
+    const altSrc = join(__dirname, '..', '..', 'commands', 'mcp-render.md');
+    const srcFile = existsSync(commandSrc) ? commandSrc : altSrc;
+    if (!existsSync(srcFile)) {
+        console.error('  Error: command file not found at', commandSrc);
+        console.error('  Make sure the package is installed correctly.');
+        process.exit(1);
+    }
+    const dest = join(targetDir, 'mcp-render.md');
+    copyFileSync(srcFile, dest);
+    const scope = options.project ? 'project' : 'global';
+    console.log(`\n  MCP-HTML-Bridge skill installed!\n`);
+    console.log(`  Command file: ${dest}`);
+    console.log(`  Scope: ${scope}\n`);
+    console.log(`  Usage in Claude Code:`);
+    console.log(`    /mcp-render              — interactive mode`);
+    console.log(`    /mcp-render schema.json  — render a schema file`);
+    console.log(`    /mcp-render data.json    — render a data file\n`);
+}
+//# sourceMappingURL=install.js.map

package/dist/install.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"install.js","sourceRoot":"","sources":["../src/install.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAgB,MAAM,SAAS,CAAC;AAC5E,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,MAAM,SAAS,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAO1D,MAAM,UAAU,OAAO,CAAC,OAAuB;IAC7C,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO;QAC/B,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC;QAC5C,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IAE3C,SAAS,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAE1C,gEAAgE;IAChE,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC;IAEtE,uEAAuE;IACvE,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC;IAE7D,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;QACzB,OAAO,CAAC,KAAK,CAAC,oCAAoC,EAAE,UAAU,CAAC,CAAC;QAChE,OAAO,CAAC,KAAK,CAAC,iDAAiD,CAAC,CAAC;QACjE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;IAC9C,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAE5B,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrD,OAAO,CAAC,GAAG,CAAC,wCAAwC,CAAC,CAAC;IACtD,OAAO,CAAC,GAAG,CAAC,mBAAmB,IAAI,EAAE,CAAC,CAAC;IACvC,OAAO,CAAC,GAAG,CAAC,YAAY,KAAK,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;IACvC,OAAO,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAC;IAC/D,OAAO,CAAC,GAAG,CAAC,qDAAqD,CAAC,CAAC;IACnE,OAAO,CAAC,GAAG,CAAC,qDAAqD,CAAC,CAAC;AACrE,CAAC"}

package/dist/render.d.ts

@@ -0,0 +1,16 @@
+interface RenderOptions {
+    schema?: string;
+    data?: string;
+    json?: string;
+    mode?: 'schema' | 'data';
+    title?: string;
+    toolName?: string;
+    toolDesc?: string;
+    debug?: boolean;
+    output?: string;
+    open?: boolean;
+    stdout?: boolean;
+}
+export declare function render(options: RenderOptions): void;
+export {};
+//# sourceMappingURL=render.d.ts.map

package/dist/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAQA,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAyDD,wBAAgB,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI,CAgCnD"}

package/dist/render.js

@@ -0,0 +1,85 @@
+/**
+ * Render MCP tool schema or data as a self-contained HTML page.
+ */
+import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
+import { join } from 'node:path';
+import { execSync } from 'node:child_process';
+import { renderFromSchema, renderFromData } from '@mcp-html-bridge/ui-engine';
+function loadJSON(options) {
+    let raw;
+    if (options.schema) {
+        raw = readFileSync(options.schema, 'utf-8');
+        return { json: JSON.parse(raw), detectedMode: 'schema' };
+    }
+    if (options.data) {
+        raw = readFileSync(options.data, 'utf-8');
+        return { json: JSON.parse(raw), detectedMode: 'data' };
+    }
+    if (options.json) {
+        const parsed = JSON.parse(options.json);
+        const isSchema = parsed && typeof parsed === 'object' &&
+            parsed.type === 'object' && parsed.properties;
+        return { json: parsed, detectedMode: isSchema ? 'schema' : 'data' };
+    }
+    // Try reading from stdin if piped
+    try {
+        raw = readFileSync('/dev/stdin', 'utf-8');
+        if (raw.trim()) {
+            const parsed = JSON.parse(raw);
+            const isSchema = parsed && typeof parsed === 'object' &&
+                parsed.type === 'object' && parsed.properties;
+            return { json: parsed, detectedMode: isSchema ? 'schema' : 'data' };
+        }
+    }
+    catch {
+        // Not piped, ignore
+    }
+    console.error('  Error: No input provided.');
+    console.error('  Use --schema <file>, --data <file>, --json <string>, or pipe via stdin.');
+    process.exit(1);
+}
+function buildHTML(json, mode, options) {
+    if (mode === 'schema') {
+        return renderFromSchema(json, {
+            title: options.title ?? options.toolName ?? 'MCP Tool Input',
+            toolName: options.toolName,
+            toolDescription: options.toolDesc,
+            debug: options.debug ?? true,
+        });
+    }
+    return renderFromData(json, {
+        title: options.title ?? options.toolName ?? 'MCP Tool Result',
+        toolName: options.toolName,
+        toolDescription: options.toolDesc,
+        debug: options.debug,
+    });
+}
+export function render(options) {
+    const { json, detectedMode } = loadJSON(options);
+    const mode = options.mode ?? detectedMode;
+    const html = buildHTML(json, mode, options);
+    // --stdout: print raw HTML to stdout (for embedding in response streams)
+    if (options.stdout) {
+        process.stdout.write(html);
+        return;
+    }
+    const outDir = options.output ?? '/tmp/mcp-html-bridge';
+    mkdirSync(outDir, { recursive: true });
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+    const toolSlug = (options.toolName ?? 'mcp-tool').replace(/[^a-zA-Z0-9_-]/g, '_');
+    const fileName = `${toolSlug}_${timestamp}.html`;
+    const outPath = join(outDir, fileName);
+    writeFileSync(outPath, html, 'utf-8');
+    // Output the path — Claude Code will capture this
+    console.log(outPath);
+    if (options.open) {
+        try {
+            const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+            execSync(`${cmd} "${outPath}"`, { stdio: 'ignore' });
+        }
+        catch {
+            // Silently fail if can't open browser
+        }
+    }
+}
+//# sourceMappingURL=render.js.map

package/dist/render.js.map

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

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@mcp-html-bridge/claude-skill",
+  "version": "0.2.0",
+  "description": "Claude Code skill for MCP-HTML-Bridge — render MCP tool data as interactive HTML pages",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "mcp-html-skill": "./dist/index.js"
+  },
+  "files": [
+    "dist/",
+    "commands/"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@mcp-html-bridge/ui-engine": "*",
+    "commander": "^12.0.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zhongkai/mcp-html-bridge.git",
+    "directory": "packages/claude-skill"
+  }
+}