zapcode-figma-mcp 1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Zapcode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build/index.js

@@ -0,0 +1,238 @@
+#!/usr/bin/env node
+import { createServer as createHttpServer, } from "http";
+import { Server as SocketIOServer } from "socket.io";
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
+import { URL } from "url";
+import * as fs from "fs";
+import * as path from "path";
+// --- Default Ports ---
+const DEFAULT_FIGMA_SOCKET_IO_PORT = 32896;
+const DEFAULT_MCP_HTTP_PORT = 3001;
+// --- Paths ---
+const MCP_SSE_PATH = "/zapcode-mcp-sse";
+const MCP_MESSAGE_PATH = "/mcp-messages";
+// --- Global Variables ---
+let figmaHttpServer = null;
+let io = null;
+let connectedFigmaClient = null;
+const figmaContextRequests = new Map();
+const figmaHttpConnections = new Set();
+let mcpHttpServer = null;
+let mcpServerInstance = null;
+const mcpSseTransports = new Map();
+// --- Argument Parsing ---
+function parseArgs() {
+    const args = process.argv.slice(2);
+    let mcpPort = DEFAULT_MCP_HTTP_PORT;
+    const portArgIndex = args.findIndex((arg) => arg === "--port" || arg === "-p");
+    if (portArgIndex !== -1 && args[portArgIndex + 1]) {
+        const port = parseInt(args[portArgIndex + 1], 10);
+        if (!isNaN(port)) {
+            mcpPort = port;
+        }
+    }
+    return { mcpPort };
+}
+// --- Socket.IO Server Logic ---
+function startSocketIOServer(port) {
+    return new Promise((resolve, reject) => {
+        console.log(`Attempting to start Socket.IO server for Figma on port ${port}...`);
+        try {
+            figmaHttpServer = createHttpServer();
+            io = new SocketIOServer(figmaHttpServer, {
+                maxHttpBufferSize: 1e8,
+                cors: { origin: "*" },
+            });
+            io.on("connection", (socket) => {
+                console.log(`Figma plugin connected: ${socket.id}`);
+                if (connectedFigmaClient) {
+                    connectedFigmaClient.disconnect(true);
+                }
+                connectedFigmaClient = socket;
+                socket.on("context_response", (data) => {
+                    if (!data?.requestId)
+                        return;
+                    const request = figmaContextRequests.get(data.requestId);
+                    if (request) {
+                        if (data.error)
+                            request.reject(new Error(data.error));
+                        else if (data.payload)
+                            request.resolve(data.payload);
+                        else
+                            request.reject(new Error("Invalid context_response from Figma"));
+                        figmaContextRequests.delete(data.requestId);
+                    }
+                });
+                socket.on("disconnect", (reason) => {
+                    console.log(`Figma plugin disconnected: ${socket.id}. Reason: ${reason}`);
+                    if (connectedFigmaClient === socket) {
+                        connectedFigmaClient = null;
+                    }
+                });
+                socket.on("error", (err) => console.error(`Figma Socket.IO error: ${err.message}`));
+            });
+            figmaHttpServer.listen(port, () => {
+                console.log(`✅ Figma Socket.IO server listening on port ${port}`);
+                resolve();
+            });
+        }
+        catch (error) {
+            console.error(`Error creating Figma Socket.IO server: ${error}`);
+            reject(error);
+        }
+    });
+}
+// --- MCP Server Logic ---
+async function startMcpServer(port) {
+    console.log(`Attempting to start MCP HTTP/SSE server on port ${port}...`);
+    const serverInfo = {
+        name: "zapcode-figma-mcp-server",
+        title: "Zapcode Figma MCP",
+        version: "1.0.2",
+    };
+    const serverOptions = { capabilities: { tools: {} } };
+    mcpServerInstance = new McpServer(serverInfo, serverOptions);
+    mcpServerInstance.tool("get_figma_context", "Retrieves the selected Figma frame context (HTML, CSS, prompt, image, assets). Saves any provided SVG assets to the local 'assets/svg' directory.", {}, async () => {
+        console.log("MCP Tool 'get_figma_context' invoked.");
+        if (!connectedFigmaClient?.connected) {
+            console.error("Error: Figma plugin not connected.");
+            return {
+                isError: true,
+                content: [
+                    {
+                        type: "text",
+                        text: "Error: Figma plugin is not connected. Please connect the plugin in Figma.",
+                    },
+                ],
+            };
+        }
+        const requestId = `figma-ctx-${Date.now()}`;
+        try {
+            console.log(`Emitting 'request_context' to Figma (ID: ${requestId})`);
+            connectedFigmaClient.emit("request_context", { requestId });
+            const context = await new Promise((resolve, reject) => {
+                figmaContextRequests.set(requestId, { resolve, reject });
+                setTimeout(() => {
+                    if (figmaContextRequests.has(requestId)) {
+                        reject(new Error("Request to Figma plugin timed out after 30 seconds."));
+                        figmaContextRequests.delete(requestId);
+                    }
+                }, 30000);
+            });
+            console.log("Successfully received context from Figma.");
+            // Save assets to the current working directory
+            const workspacePath = process.cwd();
+            const assetResults = await saveSvgAssets(context.assets, workspacePath);
+            const mcpContent = [];
+            if (context.image) {
+                mcpContent.push({
+                    type: "image",
+                    data: context.image,
+                    mimeType: "image/png",
+                });
+            }
+            const textDetails = `Figma Context Details:\n\nPrompt Suggestion:\n${context.prompt}\n\nTechnology Configuration:\n\`\`\`json\n${JSON.stringify(context.tech_config, null, 2)}\n\`\`\`\n\nSVG Assets ${assetResults.savedFiles.length > 0
+                ? "(Saved to " + path.join(workspacePath, "assets", "svg") + "):"
+                : "(None saved)"}\n${assetResults.savedFiles
+                .map((p) => `- ${path.basename(p)}`)
+                .join("\n")}\n\nHTML:\n\`\`\`html\n${context.HTML}\n\`\`\`\n\nCSS:\n\`\`\`css\n${context.CSS}\n\`\`\``;
+            mcpContent.push({ type: "text", text: textDetails });
+            return { content: mcpContent };
+        }
+        catch (error) {
+            console.error(`Error during Figma context request: ${error.message}`);
+            return {
+                isError: true,
+                content: [
+                    {
+                        type: "text",
+                        text: `Error getting Figma context: ${error.message}`,
+                    },
+                ],
+            };
+        }
+    });
+    return new Promise((resolve, reject) => {
+        mcpHttpServer = createHttpServer(async (req, res) => {
+            const requestUrl = new URL(req.url || "", `http://${req.headers.host}`);
+            if (req.method === "GET" && requestUrl.pathname === MCP_SSE_PATH) {
+                const transport = new SSEServerTransport(MCP_MESSAGE_PATH, res);
+                mcpSseTransports.set(transport.sessionId, transport);
+                console.log(`New MCP client connected. SessionID: ${transport.sessionId}`);
+                req.socket.on("close", () => mcpSseTransports.delete(transport.sessionId));
+                await mcpServerInstance.connect(transport);
+            }
+            else if (req.method === "POST" &&
+                requestUrl.pathname === MCP_MESSAGE_PATH) {
+                const sessionId = requestUrl.searchParams.get("sessionId");
+                const transport = sessionId
+                    ? mcpSseTransports.get(sessionId)
+                    : undefined;
+                if (transport)
+                    await transport.handlePostMessage(req, res);
+                else
+                    res.writeHead(404).end("Session not found");
+            }
+            else {
+                res.writeHead(404).end("Not Found");
+            }
+        });
+        mcpHttpServer.listen(port, () => {
+            console.log(`✅ MCP HTTP/SSE server listening on http://localhost:${port}${MCP_SSE_PATH}`);
+            resolve();
+        });
+    });
+}
+// --- Utility Functions (modified to remove vscode dependency) ---
+async function saveSvgAssets(assets, basePath) {
+    const savedFiles = [];
+    const errors = [];
+    if (!Array.isArray(assets))
+        return { savedFiles, errors: ["No assets provided"] };
+    const assetsDir = path.join(basePath, "assets", "svg");
+    try {
+        if (!fs.existsSync(assetsDir)) {
+            fs.mkdirSync(assetsDir, { recursive: true });
+        }
+        for (const asset of assets) {
+            if (asset.type !== "svg" || !asset.name || !asset.data)
+                continue;
+            const fileName = asset.name.replace(/[^a-z0-9]/gi, "_").toLowerCase() + ".svg";
+            const filePath = path.join(assetsDir, fileName);
+            const svgContent = asset.data.startsWith("data:image/svg+xml;base64,")
+                ? Buffer.from(asset.data.split(",")[1], "base64").toString()
+                : asset.data;
+            fs.writeFileSync(filePath, svgContent);
+            savedFiles.push(filePath);
+        }
+    }
+    catch (err) {
+        errors.push(`Failed to save assets: ${err.message}`);
+    }
+    return { savedFiles, errors };
+}
+// --- Main Execution Logic ---
+async function main() {
+    const { mcpPort } = parseArgs();
+    console.log("Starting Figma MCP Server...");
+    try {
+        await startSocketIOServer(DEFAULT_FIGMA_SOCKET_IO_PORT);
+        await startMcpServer(mcpPort);
+        console.log("🚀 All servers are up and running!");
+        console.log("Connect your Figma plugin and an MCP client to begin.");
+    }
+    catch (error) {
+        console.error("💥 Failed to start servers:", error);
+        process.exit(1);
+    }
+}
+// --- Graceful Shutdown ---
+async function shutdown() {
+    console.log("\nGracefully shutting down servers...");
+    // Implement stop functions if needed, or just exit for this simple case
+    process.exit(0);
+}
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);
+main();

package/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "zapcode-figma-mcp",
+    "version": "1.0.0",
+    "description": "An MCP server that exposes Figma context via a plugin and saves assets, from Zapcode.",
+    "type": "module",
+    "bin": {
+        "zapcode-figma-mcp": "./build/index.js"
+    },
+    "scripts": {
+        "build": "tsc",
+        "start": "node build/index.js",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [
+        "mcp",
+        "model-context-protocol",
+        "figma",
+        "ai",
+        "zapcode"
+    ],
+    "author": "Zapcode",
+    "license": "SEE LICENSE IN LICENSE.md",
+    "files": [
+        "build/"
+    ],
+    "dependencies": {
+        "@modelcontextprotocol/sdk": "^1.9.0",
+        "socket.io": "^4.7.5",
+        "zod": "^3.23.8"
+    },
+    "devDependencies": {
+        "@types/node": "^20.12.12",
+        "typescript": "^5.4.5"
+    }
+}