html2pptx-local-mcp 1.1.22 → 1.1.24

package/app/docs/content.js

@@ -822,6 +822,61 @@ html2pptx edit ./html2pptx/slides.html --no-open`,
 	      { issue: 'Another tab is read-only', fix: 'The editor uses a local tab lock to avoid two tabs writing to the same file. Use the active tab or click the transfer edit control.' },
 	    ],
 	    skillsSetupTitle: 'Setup',
+    skillsSetupLead: 'Pick the agent you actually use and run the matching command. The skills CLI handles Claude Code, Codex, Cursor, and Windsurf; Grok Build uses its own installer.',
+    skillsEditorTabs: [
+      {
+        id: 'claude-code',
+        label: 'Claude Code',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/claude/default.svg',
+        recommended: true,
+        steps: [
+          { title: 'Install the html2pptx skill', body: 'Register the published html2pptx skills into Claude Code via the skills CLI.', code: `npx skills add https://html2pptx.app -a claude-code` },
+          { title: 'Preview without installing', body: 'List the skills the CLI is about to add before committing to them.', code: `npx skills add https://html2pptx.app --list` },
+        ],
+        tip: 'Prefer the per-agent flag over `--yes`. `--yes` installs into every detected agent directory at once.',
+      },
+      {
+        id: 'grok-build',
+        label: 'Grok Build',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/grok/light.svg',
+        steps: [
+          { title: 'Install Skills for Grok Build', body: 'Grok Build uses its own installer because skills land in Grok’s native skills directory rather than via the generic skills CLI.', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok` },
+        ],
+        tip: 'Run `grok inspect` to confirm which skills Grok Build discovered.',
+      },
+      {
+        id: 'codex',
+        label: 'Codex',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/openai/light.svg',
+        steps: [
+          { title: 'Install the html2pptx skill', body: 'Register the published html2pptx skills into Codex via the skills CLI.', code: `npx skills add https://html2pptx.app -a codex` },
+        ],
+      },
+      {
+        id: 'cursor',
+        label: 'Cursor',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/cursor/light.svg',
+        steps: [
+          { title: 'Install the html2pptx skill', body: 'Register the published html2pptx skills into Cursor via the skills CLI.', code: `npx skills add https://html2pptx.app -a cursor` },
+        ],
+      },
+      {
+        id: 'windsurf',
+        label: 'Windsurf',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/windsurf/default.svg',
+        steps: [
+          { title: 'Install the html2pptx skill', body: 'Register the published html2pptx skills into Windsurf via the skills CLI.', code: `npx skills add https://html2pptx.app -a windsurf` },
+        ],
+      },
+      {
+        id: 'others',
+        label: 'Other agents',
+        steps: [
+          { title: 'Use the interactive selector', body: 'For any other supported agent, or to install into multiple targets at once, run the CLI without `-a` and choose interactively.', code: `npx skills add https://html2pptx.app` },
+        ],
+        tip: 'Avoid `--yes` unless you intentionally want to install into every detected agent directory.',
+      },
+    ],
     skillsSetupSteps: [
       {
         step: '1',
@@ -885,8 +940,9 @@ echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
         steps: [
           { title: 'Install MCP for Grok Build', body: 'Run the Grok installer. It registers remote export as `html2pptx` and local edit-slide as `html2pptx-local` through `grok mcp add`.', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp grok` },
           { title: 'Install Skills for Grok Build', body: 'Install the published html2pptx skills into Grok Build’s native skills directory. This does not change MCP configuration.', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok` },
+          { title: 'Manual remote setup', body: 'If you prefer to register the remote MCP yourself (or the installer is unavailable), run this directly. `--type http` forces the streamable-http transport so Grok does not auto-pick SSE.', code: `grok mcp add html2pptx --url https://html2pptx.app/mcp --type http` },
         ],
-        tip: 'Use `grok inspect` if you want to confirm which project skills and MCP servers Grok discovered.',
+        tip: 'Use `grok inspect` to confirm which project skills and MCP servers Grok discovered. OAuth via WorkOS AuthKit completes in the browser on first use. If your account has not previously been seen on html2pptx.app, sign in to https://html2pptx.app once with the same Google / WorkOS identity so a user record is provisioned before launching Grok.',
       },
       {
         id: 'codex',
@@ -928,6 +984,7 @@ echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
       {
         id: 'cline',
         label: 'Cline',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/cline/default.svg',
         steps: [
           { title: 'Add via Cline sidebar', body: 'Open the Cline sidebar > Configure tab > "Configure MCP Servers" and add the following.', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "url": "https://html2pptx.app/mcp",\n      "type": "streamableHttp"\n    }\n  }\n}` },
         ],
@@ -1677,6 +1734,61 @@ html2pptx edit ./html2pptx/slides.html --no-open`,
 	      { issue: '別タブが読み取り専用になる', fix: '同じHTMLを複数タブで編集して競合しないよう、エディタはタブロックを使います。編集権限のあるタブを使うか、画面上の移譲操作を行ってください。' },
 	    ],
 	    skillsSetupTitle: 'セットアップ',
+    skillsSetupLead: '実際に使うエージェントのタブを開き、そのコマンドだけ実行してください。skills CLI は Claude Code / Codex / Cursor / Windsurf に対応し、Grok Build のみ Grok 専用 installer を使います。',
+    skillsEditorTabs: [
+      {
+        id: 'claude-code',
+        label: 'Claude Code',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/claude/default.svg',
+        recommended: true,
+        steps: [
+          { title: 'html2pptx Skill をインストール', body: '公開済みの html2pptx skills を skills CLI から Claude Code に登録します。', code: `npx skills add https://html2pptx.app -a claude-code` },
+          { title: 'インストールせずに一覧確認', body: '実際に追加される skills を事前に確認したい場合はこのコマンドを使います。', code: `npx skills add https://html2pptx.app --list` },
+        ],
+        tip: '`--yes` は検出された全エージェントのディレクトリへ入るため、エージェントを明示する `-a` フラグを優先してください。',
+      },
+      {
+        id: 'grok-build',
+        label: 'Grok Build',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/grok/light.svg',
+        steps: [
+          { title: 'Grok Build に Skills を追加', body: 'Grok Build の skills は Grok のネイティブ skills ディレクトリに置く必要があるため、汎用 skills CLI ではなく Grok 専用 installer を使います。', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok` },
+        ],
+        tip: 'Grok Build が認識した skills を確認したい場合は `grok inspect` を実行してください。',
+      },
+      {
+        id: 'codex',
+        label: 'Codex',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/openai/light.svg',
+        steps: [
+          { title: 'html2pptx Skill をインストール', body: '公開済みの html2pptx skills を skills CLI から Codex に登録します。', code: `npx skills add https://html2pptx.app -a codex` },
+        ],
+      },
+      {
+        id: 'cursor',
+        label: 'Cursor',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/cursor/light.svg',
+        steps: [
+          { title: 'html2pptx Skill をインストール', body: '公開済みの html2pptx skills を skills CLI から Cursor に登録します。', code: `npx skills add https://html2pptx.app -a cursor` },
+        ],
+      },
+      {
+        id: 'windsurf',
+        label: 'Windsurf',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/windsurf/default.svg',
+        steps: [
+          { title: 'html2pptx Skill をインストール', body: '公開済みの html2pptx skills を skills CLI から Windsurf に登録します。', code: `npx skills add https://html2pptx.app -a windsurf` },
+        ],
+      },
+      {
+        id: 'others',
+        label: 'その他のエージェント',
+        steps: [
+          { title: '対話形式で選択', body: 'その他の対応エージェントや、複数のエージェントへ一度にインストールする場合は `-a` を付けずに対話形式で選択します。', code: `npx skills add https://html2pptx.app` },
+        ],
+        tip: '`--yes` は検出された全エージェントのディレクトリへ入るため、全対応が必要な場合以外は使わないでください。',
+      },
+    ],
     skillsSetupSteps: [
       {
         step: '1',
@@ -1740,8 +1852,9 @@ echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
         steps: [
           { title: 'Grok Build 向けに MCP を追加', body: 'Grok installer を実行します。remote export は `html2pptx`、local edit-slide は `html2pptx-local` として `grok mcp add` で登録されます。', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp grok` },
           { title: 'Grok Build 向けに Skills を追加', body: '公開済みの html2pptx skills を Grok Build の native skills ディレクトリへ入れます。MCP設定は変更しません。', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok` },
+          { title: 'remote だけ手動セットアップ', body: 'インストーラを使わず remote MCP を自分で登録する場合はこちら。`--type http` を明示することで Grok が SSE を自動選択するのを防ぎます。', code: `grok mcp add html2pptx --url https://html2pptx.app/mcp --type http` },
         ],
-        tip: 'Grok が検出した project skills と MCP server を確認したい場合は `grok inspect` を使ってください。',
+        tip: 'Grok が検出した project skills と MCP server を確認したい場合は `grok inspect` を使ってください。OAuth は初回ブラウザで WorkOS AuthKit にログインします。同じ Google / WorkOS アカウントで https://html2pptx.app に一度サインインしておくと、Grok 起動時にユーザレコードが解決できる状態になります。',
       },
       {
         id: 'codex',
@@ -1783,6 +1896,7 @@ echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
       {
         id: 'cline',
         label: 'Cline',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/cline/default.svg',
         steps: [
           { title: 'Cline サイドバーから追加', body: 'Cline サイドバー > Configure タブ > 「Configure MCP Servers」を開き、以下を追加してください。', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "url": "https://html2pptx.app/mcp",\n      "type": "streamableHttp"\n    }\n  }\n}` },
         ],

package/cli/dist/commands/config-show.d.ts

@@ -0,0 +1 @@
+export declare function configShowCommand(): Promise<void>;

package/cli/dist/commands/config-show.js

@@ -0,0 +1,16 @@
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+import { loadConfig, getConfigPath } from "../config.js";
+export async function configShowCommand() {
+    const config = await loadConfig();
+    const configPath = getConfigPath();
+    p.log.info(pc.bold("Config file: ") + pc.dim(configPath));
+    if (!config.apiKey) {
+        p.log.warn("No configuration found. Run " + pc.cyan("html2pptx login") + " to set up.");
+        return;
+    }
+    p.log.info(pc.bold("API Key: ") +
+        pc.dim(config.apiKey.slice(0, 12) + "..." + config.apiKey.slice(-4)));
+    p.log.info(pc.bold("API Base URL: ") +
+        (config.baseUrl ?? "https://html2pptx.app") + pc.dim(" (default)"));
+}

package/cli/dist/commands/convert.d.ts

@@ -0,0 +1,10 @@
+interface ConvertOptions {
+    output?: string;
+    size?: string;
+    css?: string;
+    json?: boolean;
+    open?: boolean;
+    baseUrl?: string;
+}
+export declare function convertCommand(input?: string, options?: ConvertOptions): Promise<void>;
+export {};

package/cli/dist/commands/convert.js

@@ -0,0 +1,311 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { exec } from "node:child_process";
+import { platform } from "node:os";
+import { basename, resolve } from "node:path";
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+import { loadConfig } from "../config.js";
+function parseSize(size) {
+    if (size === "16:9")
+        return { layout: "LAYOUT_16x9" };
+    if (size === "4:3")
+        return { layout: "LAYOUT_4x3" };
+    const match = size.match(/^(\d+)x(\d+)$/);
+    if (match)
+        return { width: parseInt(match[1]), height: parseInt(match[2]) };
+    return { layout: "LAYOUT_16x9" };
+}
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    return `${(ms / 1000).toFixed(1)}s`;
+}
+function openFile(filePath) {
+    const os = platform();
+    const cmd = os === "darwin" ? "open" : os === "win32" ? "start" : "xdg-open";
+    exec(`${cmd} "${filePath}"`);
+}
+async function interactivePrompt() {
+    p.intro(pc.bgCyan(pc.black(" html2pptx convert ")));
+    const result = await p.group({
+        input: () => p.text({
+            message: "HTML file to convert",
+            placeholder: "./slides.html",
+            validate(value) {
+                if (!value)
+                    return "HTML file path is required";
+                if (!value.endsWith(".html") && !value.endsWith(".htm"))
+                    return "File must be .html or .htm";
+            },
+        }),
+        size: () => p.select({
+            message: "Slide size",
+            options: [
+                { value: "16:9", label: "16:9 (1600x900)", hint: "default" },
+                { value: "4:3", label: "4:3 (1024x768)" },
+                { value: "custom", label: "Custom size" },
+            ],
+        }),
+        customSize: ({ results }) => {
+            if (results.size !== "custom")
+                return;
+            return p.text({
+                message: "Enter custom size (WxH)",
+                placeholder: "1920x1080",
+                validate(value) {
+                    if (!value?.match(/^\d+x\d+$/))
+                        return 'Format: WIDTHxHEIGHT (e.g. 1920x1080)';
+                },
+            });
+        },
+        css: () => p.text({
+            message: "External CSS file (optional)",
+            placeholder: "Press Enter to skip",
+        }),
+        output: ({ results }) => {
+            const defaultName = basename(results.input).replace(/\.html?$/, "") + ".pptx";
+            return p.text({
+                message: "Output filename",
+                placeholder: defaultName,
+                initialValue: defaultName,
+            });
+        },
+    }, {
+        onCancel() {
+            p.cancel("Conversion cancelled.");
+            process.exit(0);
+        },
+    });
+    return {
+        input: result.input,
+        output: result.output,
+        size: result.customSize ?? result.size,
+        css: result.css || undefined,
+    };
+}
+async function runExport(html, css, size, fileName, baseUrl, apiKey) {
+    const sizeParams = parseSize(size);
+    const body = {
+        html,
+        fileName,
+        responseFormat: "url",
+        ...sizeParams,
+    };
+    if (css)
+        body.css = css;
+    const res = await fetch(`${baseUrl}/api/v1/export/jobs`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${apiKey}`,
+        },
+        body: JSON.stringify(body),
+    });
+    if (res.status === 401) {
+        throw new Error("Invalid API key. Run `html2pptx login` to update your key.");
+    }
+    if (res.status === 403) {
+        throw new Error("Access denied. Your API key may be expired or your plan may have changed. Visit https://html2pptx.app/dashboard to check.");
+    }
+    if (res.status === 413) {
+        throw new Error("HTML payload too large for your plan. Try reducing the HTML size or upgrading your plan.");
+    }
+    if (res.status === 429) {
+        throw new Error("Rate limit exceeded. Please wait a moment and try again, or upgrade your plan for higher limits.");
+    }
+    if (!res.ok) {
+        const text = await res.text();
+        throw new Error(`API error ${res.status}: ${text}`);
+    }
+    return (await res.json());
+}
+async function pollJob(statusUrl, apiKey, baseUrl) {
+    if (!statusUrl.startsWith(baseUrl)) {
+        throw new Error("Unexpected status URL from server");
+    }
+    const maxAttempts = 60;
+    for (let i = 0; i < maxAttempts; i++) {
+        await new Promise((r) => setTimeout(r, 2000));
+        const res = await fetch(statusUrl, {
+            headers: { Authorization: `Bearer ${apiKey}` },
+        });
+        if (!res.ok) {
+            const text = await res.text();
+            throw new Error(`Poll error ${res.status}: ${text}`);
+        }
+        const data = (await res.json());
+        if (data.status === "completed")
+            return data;
+        if (data.status === "failed")
+            throw new Error(data.error ?? "Export failed");
+    }
+    throw new Error("Export timed out after 2 minutes");
+}
+async function downloadFile(url, outputPath) {
+    const res = await fetch(url);
+    if (!res.ok)
+        throw new Error(`Download failed: ${res.status}`);
+    const buffer = Buffer.from(await res.arrayBuffer());
+    await writeFile(outputPath, buffer);
+    return buffer.byteLength;
+}
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+export async function convertCommand(input, options = {}) {
+    const config = await loadConfig();
+    const apiKey = config.apiKey;
+    const baseUrl = options.baseUrl ?? config.baseUrl ?? "https://html2pptx.app";
+    const jsonMode = options.json ?? false;
+    if (!apiKey) {
+        if (jsonMode) {
+            console.log(JSON.stringify({ success: false, error: "No API key found. Run html2pptx login first." }));
+            process.exit(1);
+        }
+        p.log.error("No API key found. Run " + pc.cyan("html2pptx login") + " first.");
+        process.exit(1);
+    }
+    let htmlPath;
+    let outputFile;
+    let size;
+    let cssPath;
+    // If args provided -> direct mode, else -> interactive mode
+    if (input) {
+        htmlPath = resolve(input);
+        outputFile =
+            options.output ?? basename(htmlPath).replace(/\.html?$/, "") + ".pptx";
+        size = options.size ?? "16:9";
+        cssPath = options.css;
+    }
+    else {
+        const answers = await interactivePrompt();
+        htmlPath = resolve(answers.input);
+        outputFile = answers.output;
+        size = answers.size;
+        cssPath = answers.css;
+    }
+    const startTime = Date.now();
+    const spinner = jsonMode ? null : p.spinner();
+    spinner?.start("Reading HTML file...");
+    let html;
+    try {
+        html = await readFile(htmlPath, "utf-8");
+    }
+    catch {
+        if (jsonMode) {
+            console.log(JSON.stringify({ success: false, error: `Could not read file: ${htmlPath}` }));
+        }
+        else {
+            spinner?.stop("Failed");
+            p.log.error(`Could not read file: ${pc.dim(htmlPath)}`);
+        }
+        process.exit(1);
+    }
+    let css;
+    if (cssPath) {
+        try {
+            css = await readFile(resolve(cssPath), "utf-8");
+        }
+        catch {
+            if (jsonMode) {
+                console.log(JSON.stringify({ success: false, error: `Could not read CSS file: ${cssPath}` }));
+            }
+            else {
+                spinner?.stop("Failed");
+                p.log.error(`Could not read CSS file: ${pc.dim(cssPath)}`);
+            }
+            process.exit(1);
+        }
+    }
+    spinner?.message("Sending to html2pptx API...");
+    let job;
+    try {
+        job = await runExport(html, css, size, outputFile, baseUrl, apiKey);
+    }
+    catch (e) {
+        const errMsg = e.message;
+        if (jsonMode) {
+            console.log(JSON.stringify({ success: false, error: errMsg }));
+        }
+        else {
+            spinner?.stop("Failed");
+            p.log.error(errMsg);
+        }
+        process.exit(1);
+    }
+    const finishConversion = async (downloadUrl) => {
+        spinner?.message("Downloading PPTX...");
+        const fileSize = await downloadFile(downloadUrl, resolve(outputFile));
+        const duration = Date.now() - startTime;
+        if (jsonMode) {
+            const result = {
+                success: true,
+                file: outputFile,
+                size: formatBytes(fileSize),
+                duration: formatDuration(duration),
+            };
+            console.log(JSON.stringify(result));
+        }
+        else {
+            spinner?.stop(pc.green("Done!"));
+            p.log.success(`Saved to ${pc.cyan(outputFile)} ${pc.dim(`(${formatBytes(fileSize)}, ${formatDuration(duration)})`)}`);
+            // Next steps guidance
+            p.log.info(pc.dim("Next: ") +
+                `Open the file or run ${pc.cyan("html2pptx status")} to check your usage.`);
+        }
+        if (options.open) {
+            openFile(resolve(outputFile));
+        }
+    };
+    // If job completed immediately
+    if (job.status === "completed" && job.downloadUrl) {
+        try {
+            await finishConversion(job.downloadUrl);
+            return;
+        }
+        catch (e) {
+            const errMsg = e.message;
+            if (jsonMode) {
+                console.log(JSON.stringify({ success: false, error: errMsg }));
+            }
+            else {
+                spinner?.stop("Failed");
+                p.log.error(errMsg);
+            }
+            process.exit(1);
+        }
+    }
+    // Poll for completion
+    spinner?.message("Converting... this may take a moment");
+    try {
+        const result = await pollJob(job.statusUrl, apiKey, baseUrl);
+        if (result.downloadUrl) {
+            await finishConversion(result.downloadUrl);
+        }
+        else {
+            if (jsonMode) {
+                console.log(JSON.stringify({ success: false, error: "No download URL returned" }));
+            }
+            else {
+                spinner?.stop("Failed");
+                p.log.error("No download URL returned");
+            }
+            process.exit(1);
+        }
+    }
+    catch (e) {
+        const errMsg = e.message;
+        if (jsonMode) {
+            console.log(JSON.stringify({ success: false, error: errMsg }));
+        }
+        else {
+            spinner?.stop("Failed");
+            p.log.error(errMsg);
+        }
+        process.exit(1);
+    }
+}

package/cli/dist/commands/edit.d.ts

@@ -0,0 +1,33 @@
+export interface EditOptions {
+    port?: string;
+    baseUrl?: string;
+    noOpen?: boolean;
+    open?: boolean;
+    json?: boolean;
+}
+interface BridgeContext {
+    root: string;
+    editorOrigin: string;
+    localStateDir: string;
+    sessionToken: string;
+}
+declare function generateSessionToken(): string;
+declare function parsePort(value: string | undefined): number;
+declare function normalizeBaseUrl(raw: string): URL;
+declare function readRegisteredEditorBaseUrl(root: string): Promise<string | null>;
+declare function resolveEditorBaseUrl(root: string, explicitBaseUrl: string | undefined): Promise<URL>;
+declare function buildEditorUrl(baseUrl: URL, rel: string, bridgeUrl: string, sessionToken: string): URL;
+declare function createBridgeServer(ctx: BridgeContext): any;
+declare function listen(server: ReturnType<typeof createBridgeServer>, requestedPort: number): Promise<number>;
+export declare function editCommand(input: string | undefined, options?: EditOptions): Promise<void>;
+export declare const editCommandInternalsForTest: {
+    buildEditorUrl: typeof buildEditorUrl;
+    createBridgeServer: typeof createBridgeServer;
+    generateSessionToken: typeof generateSessionToken;
+    listen: typeof listen;
+    normalizeBaseUrl: typeof normalizeBaseUrl;
+    parsePort: typeof parsePort;
+    readRegisteredEditorBaseUrl: typeof readRegisteredEditorBaseUrl;
+    resolveEditorBaseUrl: typeof resolveEditorBaseUrl;
+};
+export {};