@open-pencil/mcp 0.11.1 → 0.11.2

package/dist/index.js

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+import { serve } from '@hono/node-server';
+import { startServer } from './server.js';
+const port = parseInt(process.env.PORT ?? '7600', 10);
+const wsPort = parseInt(process.env.WS_PORT ?? '7601', 10);
+const host = process.env.HOST ?? '127.0.0.1';
+const { app, httpPort } = startServer({
+    httpPort: port,
+    wsPort,
+    enableEval: process.env.OPENPENCIL_MCP_EVAL === '1',
+    authToken: process.env.OPENPENCIL_MCP_AUTH_TOKEN?.trim() || null,
+    corsOrigin: process.env.OPENPENCIL_MCP_CORS_ORIGIN?.trim() || null
+});
+serve({ fetch: app.fetch, port: httpPort, hostname: host });
+console.log(`OpenPencil MCP server`);
+console.log(`  HTTP:  http://${host}:${httpPort}`);
+console.log(`  WS:    ws://${host}:${wsPort}`);
+console.log(`  MCP:   http://${host}:${httpPort}/mcp`);

package/dist/server.js

@@ -0,0 +1,257 @@
+import { randomUUID } from 'node:crypto';
+import { createRequire } from 'node:module';
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { WebStandardStreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js';
+import { Hono } from 'hono';
+import { cors } from 'hono/cors';
+import { WebSocketServer } from 'ws';
+import { z } from 'zod';
+import { ALL_TOOLS, CODEGEN_PROMPT, buildComponent, createElement, resolveToTree } from '@open-pencil/core';
+const require = createRequire(import.meta.url);
+const MCP_VERSION = require('../package.json').version;
+const RPC_TIMEOUT = 30_000;
+function ok(data) {
+    return { content: [{ type: 'text', text: JSON.stringify(data, null, 2) }] };
+}
+function fail(e) {
+    const msg = e instanceof Error ? e.message : String(e);
+    return { content: [{ type: 'text', text: JSON.stringify({ error: msg }) }], isError: true };
+}
+export function paramToZod(param) {
+    const typeMap = {
+        string: () => param.enum
+            ? z.enum(param.enum).describe(param.description)
+            : z.string().describe(param.description),
+        number: () => {
+            let s = z.number();
+            if (param.min !== undefined)
+                s = s.min(param.min);
+            if (param.max !== undefined)
+                s = s.max(param.max);
+            return s.describe(param.description);
+        },
+        boolean: () => z.boolean().describe(param.description),
+        color: () => z.string().describe(param.description),
+        'string[]': () => z.array(z.string()).min(1).describe(param.description)
+    };
+    const schema = typeMap[param.type]();
+    return param.required ? schema : schema.optional();
+}
+export function startServer(options = {}) {
+    const httpPort = options.httpPort ?? 7600;
+    const wsPort = options.wsPort ?? 7601;
+    const enableEval = options.enableEval ?? false;
+    const authToken = options.authToken ?? null;
+    const corsOrigin = options.corsOrigin ?? null;
+    const pending = new Map();
+    let browserWs = null;
+    let browserToken = null;
+    // --- WebSocket: browser connects here ---
+    function sendToBrowser(body) {
+        return new Promise((resolve, reject) => {
+            if (!browserWs || browserWs.readyState !== browserWs.OPEN) {
+                reject(new Error('OpenPencil app is not connected'));
+                return;
+            }
+            const id = randomUUID();
+            const timer = setTimeout(() => {
+                pending.delete(id);
+                reject(new Error('RPC timeout (30s)'));
+            }, RPC_TIMEOUT);
+            pending.set(id, { resolve, reject, timer });
+            browserWs.send(JSON.stringify({ type: 'request', id, ...body }));
+        });
+    }
+    function handleBrowserMessage(data) {
+        try {
+            const msg = JSON.parse(data);
+            if (msg.type === 'register' && msg.token) {
+                browserToken = msg.token;
+                return;
+            }
+            if (msg.type === 'response' && msg.id) {
+                const req = pending.get(msg.id);
+                if (!req)
+                    return;
+                pending.delete(msg.id);
+                clearTimeout(req.timer);
+                if (msg.ok === false)
+                    req.reject(new Error(msg.error ?? 'RPC failed'));
+                else {
+                    const { type: _, id: __, ...payload } = msg;
+                    req.resolve(payload);
+                }
+            }
+        }
+        catch (e) {
+            console.warn('Malformed automation message:', e);
+        }
+    }
+    function rejectAllPending(reason) {
+        for (const [id, req] of pending) {
+            clearTimeout(req.timer);
+            req.reject(new Error(reason));
+            pending.delete(id);
+        }
+    }
+    const wss = new WebSocketServer({ port: wsPort, host: '127.0.0.1' });
+    wss.on('connection', (ws) => {
+        if (browserWs && browserWs.readyState === WebSocket.OPEN)
+            browserWs.close();
+        rejectAllPending('Browser reconnected');
+        browserWs = ws;
+        browserToken = null;
+        ws.on('message', (raw) => {
+            handleBrowserMessage(typeof raw === 'string' ? raw : Buffer.from(raw).toString('utf-8'));
+        });
+        ws.on('close', () => {
+            if (browserWs === ws) {
+                browserWs = null;
+                browserToken = null;
+                rejectAllPending('Browser disconnected');
+            }
+        });
+    });
+    // --- JSX preprocessing ---
+    function preprocessRpc(body) {
+        if (body.command !== 'tool')
+            return body;
+        const args = body.args;
+        if (args?.name !== 'render' || !args.args?.jsx)
+            return body;
+        try {
+            const Component = buildComponent(args.args.jsx);
+            const element = createElement(Component, null);
+            const tree = resolveToTree(element);
+            return {
+                ...body,
+                args: { ...args, args: { ...args.args, jsx: undefined, tree } }
+            };
+        }
+        catch (e) {
+            console.warn('JSX preprocessing failed, passing raw:', e instanceof Error ? e.message : e);
+            return body;
+        }
+    }
+    // --- HTTP server ---
+    const app = new Hono();
+    if (corsOrigin) {
+        app.use('*', cors({
+            origin: corsOrigin,
+            allowMethods: ['GET', 'POST', 'DELETE', 'OPTIONS'],
+            allowHeaders: [
+                'Content-Type',
+                'Authorization',
+                'x-mcp-token',
+                'mcp-session-id',
+                'Last-Event-ID',
+                'mcp-protocol-version'
+            ],
+            exposeHeaders: ['mcp-session-id', 'mcp-protocol-version']
+        }));
+    }
+    else {
+        app.use('*', cors());
+    }
+    app.get('/health', (c) => c.json({
+        status: browserWs ? 'ok' : 'no_app',
+        ...(browserWs && browserToken ? { token: browserToken } : {})
+    }));
+    app.use('/rpc', async (c, next) => {
+        if (!browserWs || !browserToken) {
+            return c.json({ error: 'OpenPencil app is not connected. Is a document open?' }, 503);
+        }
+        const auth = c.req.header('authorization');
+        const provided = auth?.startsWith('Bearer ') ? auth.slice(7) : null;
+        if (provided !== browserToken) {
+            return c.json({ error: 'Unauthorized' }, 401);
+        }
+        return next();
+    });
+    app.post('/rpc', async (c) => {
+        let body = await c.req.json().catch(() => null);
+        if (!body || typeof body !== 'object') {
+            return c.json({ error: 'Invalid request body' }, 400);
+        }
+        try {
+            body = preprocessRpc(body);
+            const result = await sendToBrowser(body);
+            return c.json(result);
+        }
+        catch (e) {
+            const msg = e instanceof Error ? e.message : String(e);
+            return c.json({ ok: false, error: msg }, 502);
+        }
+    });
+    const mcpSessions = new Map();
+    const MAX_MCP_SESSIONS = 10;
+    function createMCPSession(id) {
+        const mcpServer = new McpServer({ name: 'open-pencil', version: MCP_VERSION });
+        const register = mcpServer.registerTool.bind(mcpServer);
+        for (const def of ALL_TOOLS) {
+            if (!enableEval && def.name === 'eval')
+                continue;
+            const shape = {};
+            for (const [key, param] of Object.entries(def.params)) {
+                shape[key] = paramToZod(param);
+            }
+            register(def.name, { description: def.description, inputSchema: z.object(shape) }, async (args) => {
+                try {
+                    const result = await sendToBrowser({ command: 'tool', args: { name: def.name, args } });
+                    const res = result;
+                    if (res.ok === false)
+                        return fail(new Error(res.error));
+                    const r = res.result;
+                    if (r && 'base64' in r && 'mimeType' in r) {
+                        return {
+                            content: [
+                                {
+                                    type: 'image',
+                                    data: r.base64,
+                                    mimeType: r.mimeType
+                                }
+                            ]
+                        };
+                    }
+                    return ok(r);
+                }
+                catch (e) {
+                    return fail(e);
+                }
+            });
+        }
+        register('get_codegen_prompt', {
+            description: 'Get design-to-code generation guidelines. Call before generating frontend code.',
+            inputSchema: z.object({})
+        }, async () => ok({ prompt: CODEGEN_PROMPT }));
+        const transport = new WebStandardStreamableHTTPServerTransport({
+            sessionIdGenerator: () => id
+        });
+        void mcpServer.connect(transport);
+        mcpSessions.set(id, transport);
+        return transport;
+    }
+    app.all('/mcp', async (c) => {
+        if (authToken) {
+            const auth = c.req.header('authorization');
+            const token = auth?.startsWith('Bearer ')
+                ? auth.slice('Bearer '.length)
+                : c.req.header('x-mcp-token');
+            if (token !== authToken) {
+                return c.json({ error: 'Unauthorized' }, 401);
+            }
+        }
+        const sessionId = c.req.header('mcp-session-id') ?? undefined;
+        const existing = sessionId ? mcpSessions.get(sessionId) : undefined;
+        if (!existing && mcpSessions.size >= MAX_MCP_SESSIONS) {
+            return c.json({ error: 'Too many active MCP sessions' }, { status: 503, headers: { 'Retry-After': '5' } });
+        }
+        const transport = existing ?? createMCPSession(sessionId ?? randomUUID());
+        const response = await transport.handleRequest(c.req.raw);
+        if (c.req.method === 'DELETE' && sessionId) {
+            mcpSessions.delete(sessionId);
+        }
+        return response;
+    });
+    return { app, wss, httpPort };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-pencil/mcp",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "license": "MIT",
   "type": "module",
   "main": "./dist/server.js",
@@ -10,10 +10,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "bunx tsgo && bunx fix-esm-import-path dist",
-    "prepublishOnly": "bun run build"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/open-pencil/open-pencil.git",
@@ -26,13 +22,9 @@
   "dependencies": {
     "@hono/node-server": "^1.19.9",
     "@modelcontextprotocol/sdk": "^1.25.2",
-    "@open-pencil/core": "^0.11.1",
+    "@open-pencil/core": "^0.11.2",
     "hono": "^4.11.4",
     "zod": "^4.3.6",
     "ws": "^8.19.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.0.0",
-    "@types/ws": "^8.18.1"
   }
 }