@open-pencil/mcp 0.3.2

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@open-pencil/mcp",
+  "version": "0.3.2",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/server.ts",
+  "bin": {
+    "openpencil-mcp": "./src/index.ts",
+    "openpencil-mcp-http": "./src/http.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/open-pencil/open-pencil.git",
+    "directory": "packages/mcp"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.25.2",
+    "@open-pencil/core": "workspace:*",
+    "canvaskit-wasm": "^0.40.0",
+    "hono": "^4.11.4",
+    "zod": "^3.25.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0"
+  }
+}

package/src/http.ts

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+import { randomUUID } from 'node:crypto'
+import { readFile } from 'node:fs/promises'
+
+import { Hono } from 'hono'
+import { cors } from 'hono/cors'
+import { WebStandardStreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js'
+
+import { createServer } from './server.js'
+
+const pkg = JSON.parse(await readFile(new URL('../package.json', import.meta.url), 'utf-8'))
+
+const sessions = new Map<string, { server: ReturnType<typeof createServer>; transport: WebStandardStreamableHTTPServerTransport }>()
+
+async function getOrCreateSession(sessionId?: string) {
+  if (sessionId && sessions.has(sessionId)) {
+    return sessions.get(sessionId)!
+  }
+
+  const id = sessionId ?? randomUUID()
+  const server = createServer(pkg.version)
+  const transport = new WebStandardStreamableHTTPServerTransport({ sessionIdGenerator: () => id })
+  await server.connect(transport)
+  sessions.set(id, { server, transport })
+  return { server, transport }
+}
+
+const app = new Hono()
+
+app.use('*', cors({
+  origin: '*',
+  allowMethods: ['GET', 'POST', 'DELETE', 'OPTIONS'],
+  allowHeaders: ['Content-Type', 'mcp-session-id', 'Last-Event-ID', 'mcp-protocol-version'],
+  exposeHeaders: ['mcp-session-id', 'mcp-protocol-version']
+}))
+
+app.get('/health', (c) => c.json({ status: 'ok', version: pkg.version, tools: 29 }))
+
+app.all('/mcp', async (c) => {
+  const sessionId = c.req.header('mcp-session-id') ?? undefined
+  const { transport } = await getOrCreateSession(sessionId)
+  return transport.handleRequest(c.req.raw)
+})
+
+const port = parseInt(process.env.PORT ?? '3100', 10)
+
+const isBun = typeof globalThis.Bun !== 'undefined'
+
+if (isBun) {
+  Bun.serve({ fetch: app.fetch, port })
+} else {
+  const { serve } = await import('@hono/node-server')
+  serve({ fetch: app.fetch, port })
+}
+
+console.log(`OpenPencil MCP server v${pkg.version}`)
+console.log(`  Health:  http://localhost:${port}/health`)
+console.log(`  MCP:     http://localhost:${port}/mcp`)

package/src/index.ts

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+import { readFile } from 'node:fs/promises'
+
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
+
+import { createServer } from './server.js'
+
+const pkg = JSON.parse(await readFile(new URL('../package.json', import.meta.url), 'utf-8'))
+const server = createServer(pkg.version)
+
+const transport = new StdioServerTransport()
+await server.connect(transport)

package/src/server.ts

@@ -0,0 +1,133 @@
+import { readFile, writeFile } from 'node:fs/promises'
+
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { z } from 'zod'
+
+import { ALL_TOOLS, FigmaAPI, parseFigFile, computeAllLayouts, SceneGraph } from '@open-pencil/core'
+
+import type { ToolDef, ParamDef, ParamType } from '@open-pencil/core'
+
+type McpResult = { content: { type: 'text'; text: string }[]; isError?: boolean }
+
+function ok(data: unknown): McpResult {
+  return { content: [{ type: 'text', text: JSON.stringify(data, null, 2) }] }
+}
+
+function fail(e: unknown): McpResult {
+  const msg = e instanceof Error ? e.message : String(e)
+  return { content: [{ type: 'text', text: JSON.stringify({ error: msg }) }], isError: true }
+}
+
+function paramToZod(param: ParamDef): z.ZodTypeAny {
+  const typeMap: Record<ParamType, () => z.ZodTypeAny> = {
+    string: () =>
+      param.enum
+        ? z.enum(param.enum as [string, ...string[]]).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 createServer(version: string): McpServer {
+  const server = new McpServer({ name: 'open-pencil', version })
+
+  let graph: SceneGraph | null = null
+  let currentPageId: string | null = null
+
+  function makeFigma(): FigmaAPI {
+    if (!graph) throw new Error('No document loaded. Use open_file or new_document first.')
+    const api = new FigmaAPI(graph)
+    if (currentPageId) api.currentPage = api.wrapNode(currentPageId)
+    return api
+  }
+
+  function registerTool(def: ToolDef) {
+    const shape: Record<string, z.ZodTypeAny> = {}
+    for (const [key, param] of Object.entries(def.params)) {
+      shape[key] = paramToZod(param)
+    }
+
+    server.registerTool(def.name, { description: def.description, inputSchema: z.object(shape) }, async (args) => {
+      try {
+        const result = await def.execute(makeFigma(), args as Record<string, unknown>)
+        return ok(result)
+      } catch (e) {
+        return fail(e)
+      }
+    })
+  }
+
+  server.registerTool(
+    'open_file',
+    {
+      description: 'Open a .fig file for editing. Must be called before using other tools.',
+      inputSchema: z.object({ path: z.string().describe('Absolute path to a .fig file') })
+    },
+    async ({ path: filePath }) => {
+      try {
+        const buf = await readFile(filePath)
+        graph = await parseFigFile(buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength))
+        computeAllLayouts(graph)
+        const pages = graph.getPages()
+        currentPageId = pages[0]?.id ?? null
+        return ok({ pages: pages.map((p) => ({ id: p.id, name: p.name })), currentPage: pages[0]?.name })
+      } catch (e) {
+        return fail(e)
+      }
+    }
+  )
+
+  server.registerTool(
+    'save_file',
+    {
+      description: 'Save the current document to a .fig file.',
+      inputSchema: z.object({ path: z.string().describe('Absolute path to save the .fig file') })
+    },
+    async ({ path: filePath }) => {
+      try {
+        if (!graph) throw new Error('No document loaded')
+        const { exportFigFile } = await import('@open-pencil/core')
+        const data = await exportFigFile(graph)
+        await writeFile(filePath, new Uint8Array(data))
+        return ok({ saved: filePath, bytes: data.byteLength })
+      } catch (e) {
+        return fail(e)
+      }
+    }
+  )
+
+  server.registerTool(
+    'new_document',
+    {
+      description: 'Create a new empty document with a blank page.',
+      inputSchema: z.object({})
+    },
+    async () => {
+      try {
+        graph = new SceneGraph()
+        const pages = graph.getPages()
+        currentPageId = pages[0]?.id ?? null
+        return ok({ page: pages[0]?.name, id: currentPageId })
+      } catch (e) {
+        return fail(e)
+      }
+    }
+  )
+
+  for (const tool of ALL_TOOLS) {
+    registerTool(tool)
+  }
+
+  return server
+}