zapcode-figma-mcp 1.0.3 → 1.1.0

package/README.md

@@ -3,7 +3,7 @@ Generated markdown
 # Zapcode Figma MCP Server
 
 [![npm version](https://img.shields.io/npm/v/zapcode-figma-mcp.svg)](https://www.npmjs.com/package/zapcode-figma-mcp)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+<!-- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) -->
 
 This package provides a Model Context Protocol (MCP) server that acts as a bridge between your **Figma designs** and any **MCP-compatible AI client** (like Claude for Desktop, Open WebUI, etc.).
 

package/build/index.js

@@ -24,6 +24,39 @@ function parseArgs() {
     }
     return { figmaPort };
 }
+// --- Helper: Find Available Port ---
+async function findAvailablePort(startPort, maxAttempts = 4) {
+    for (let i = 0; i < maxAttempts; i++) {
+        const port = startPort + i;
+        try {
+            const testServer = createHttpServer();
+            await new Promise((resolve, reject) => {
+                testServer.once('error', (err) => {
+                    testServer.close();
+                    if (err.code === 'EADDRINUSE') {
+                        console.error(`Zapcode: Port ${port} is already in use, trying next port...`);
+                        reject(err);
+                    }
+                    else {
+                        reject(err);
+                    }
+                });
+                testServer.listen(port, () => {
+                    testServer.close();
+                    resolve();
+                });
+            });
+            return port;
+        }
+        catch (err) {
+            if (err.code !== 'EADDRINUSE' || i === maxAttempts - 1) {
+                throw new Error(`No available ports in range ${startPort}-${startPort + maxAttempts - 1}`);
+            }
+            // Continue to next port
+        }
+    }
+    throw new Error('Unexpected error in port detection');
+}
 // --- Socket.IO Server Logic ---
 function startSocketIOServer(port) {
     return new Promise((resolve, reject) => {
@@ -84,12 +117,17 @@ async function startMcpServer() {
     const serverInfo = {
         name: "zapcode-figma-mcp-server",
         title: "Zapcode Figma MCP",
-        version: "1.0.3", // It's good practice to increment version on significant changes
+        version: "1.1.0",
     };
     const mcpServerInstance = new McpServer(serverInfo, {
         capabilities: { tools: {} },
     });
-    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 () => {
+    mcpServerInstance.tool("get_figma_context", "Retrieves the selected Figma frame context (HTML, CSS, prompt, image, assets). Saves any provided assets to the local directory. Accepts an optional 'assets_path' parameter to specify where assets should be saved.", {
+        assets_path: {
+            type: "string",
+            description: "Optional absolute or relative path where assets should be saved. Defaults to 'assets' in the current working directory.",
+        },
+    }, async (params) => {
         console.error("Zapcode: MCP Tool 'get_figma_context' invoked.");
         if (!connectedFigmaClient?.connected) {
             console.error("Zapcode: Error - Figma plugin not connected.");
@@ -117,9 +155,14 @@ async function startMcpServer() {
                 }, 30000);
             });
             console.error("Zapcode: Successfully received context from Figma.");
-            // Save assets to the current working directory
+            // Determine the base path for assets
             const workspacePath = process.cwd();
-            const assetResults = await saveSvgAssets(context.assets, workspacePath);
+            const assetsBasePath = params.assets_path
+                ? path.isAbsolute(params.assets_path)
+                    ? params.assets_path
+                    : path.join(workspacePath, params.assets_path)
+                : path.join(workspacePath, "assets");
+            const assetResults = await saveAssets(context.assets, assetsBasePath);
             const mcpContent = [];
             if (context.image) {
                 mcpContent.push({
@@ -128,11 +171,21 @@ async function startMcpServer() {
                     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\`\`\``;
+            // Format assets information by type
+            let assetsInfo = "";
+            if (assetResults.savedFiles.length > 0) {
+                assetsInfo = `\n\nAssets (Saved to ${assetsBasePath}):\n`;
+                assetResults.assetsByType.forEach((files, type) => {
+                    assetsInfo += `\n${type.toUpperCase()} Files:\n`;
+                    files.forEach((filePath) => {
+                        assetsInfo += `- ${path.basename(filePath)}\n`;
+                    });
+                });
+            }
+            else {
+                assetsInfo = "\n\nAssets: (None saved)";
+            }
+            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\`\`\`${assetsInfo}\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 };
         }
@@ -155,38 +208,64 @@ async function startMcpServer() {
     console.error("Zapcode: ✅ MCP server connected and listening on stdio.");
 }
 // --- Utility Functions ---
-async function saveSvgAssets(assets, basePath) {
+async function saveAssets(assets, basePath) {
     const savedFiles = [];
     const errors = [];
+    const assetsByType = new Map();
     if (!Array.isArray(assets))
-        return { savedFiles, errors: ["No assets provided"] };
-    const assetsDir = path.join(basePath, "assets", "svg");
+        return { savedFiles, errors: ["No assets provided"], assetsByType };
     try {
-        if (!fs.existsSync(assetsDir)) {
-            fs.mkdirSync(assetsDir, { recursive: true });
-        }
         for (const asset of assets) {
-            if (asset.type !== "svg" || !asset.name || !asset.data)
+            if (!asset.type || !asset.name || !asset.data) {
+                console.error(`Zapcode: Skipping invalid asset: ${JSON.stringify(asset)}`);
                 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);
+            }
+            // Create subdirectory for this asset type
+            const typeDir = path.join(basePath, asset.type);
+            if (!fs.existsSync(typeDir)) {
+                fs.mkdirSync(typeDir, { recursive: true });
+            }
+            // Sanitize filename and add appropriate extension
+            const sanitizedName = asset.name.replace(/[^a-z0-9]/gi, "_").toLowerCase();
+            const fileName = `${sanitizedName}.${asset.type}`;
+            const filePath = path.join(typeDir, fileName);
+            // Handle base64-encoded data
+            let fileContent;
+            if (asset.data.startsWith("data:")) {
+                // Extract base64 content from data URL
+                const base64Data = asset.data.split(",")[1];
+                fileContent = Buffer.from(base64Data, "base64");
+            }
+            else if (asset.type === "svg") {
+                // SVG might be plain text
+                fileContent = asset.data;
+            }
+            else {
+                // Assume it's already base64 string
+                fileContent = Buffer.from(asset.data, "base64");
+            }
+            fs.writeFileSync(filePath, fileContent);
             savedFiles.push(filePath);
+            // Track assets by type
+            if (!assetsByType.has(asset.type)) {
+                assetsByType.set(asset.type, []);
+            }
+            assetsByType.get(asset.type).push(filePath);
         }
     }
     catch (err) {
         errors.push(`Failed to save assets: ${err.message}`);
     }
-    return { savedFiles, errors };
+    return { savedFiles, errors, assetsByType };
 }
 // --- Main Execution Logic ---
 async function main() {
     const { figmaPort } = parseArgs();
     try {
-        await startSocketIOServer(figmaPort);
+        // Find an available port starting from the specified port
+        const availablePort = await findAvailablePort(figmaPort);
+        console.error(`Zapcode: ✅ Found available port ${availablePort}`);
+        await startSocketIOServer(availablePort);
         await startMcpServer();
     }
     catch (error) {
@@ -195,17 +274,43 @@ async function main() {
     }
 }
 // --- Graceful Shutdown ---
+let isShuttingDown = false;
 async function shutdown() {
+    if (isShuttingDown) {
+        // Second Ctrl+C forces immediate exit
+        process.exit(0);
+        return;
+    }
+    isShuttingDown = true;
     console.error("\nZapcode: Gracefully shutting down...");
-    if (figmaHttpServer) {
-        figmaHttpServer.close(() => {
-            console.error("Zapcode: Figma HTTP server closed.");
-            process.exit(0);
-        });
+    // Cleanup pending Figma context requests
+    figmaContextRequests.forEach((request) => {
+        request.reject(new Error("Server shutting down"));
+    });
+    figmaContextRequests.clear();
+    // Forcefully disconnect all Socket.IO clients
+    if (io) {
+        io.disconnectSockets(true);
     }
-    else {
-        process.exit(0);
+    if (connectedFigmaClient) {
+        connectedFigmaClient.disconnect(true);
+        connectedFigmaClient = null;
     }
+    // Force immediate shutdown - don't wait for callbacks
+    setImmediate(() => {
+        if (io) {
+            io.close();
+        }
+        if (figmaHttpServer) {
+            figmaHttpServer.close();
+        }
+        console.error("Zapcode: Server shutdown complete.");
+        process.exit(0);
+    });
+    // Safety timeout - exit after 500ms no matter what
+    setTimeout(() => {
+        process.exit(0);
+    }, 500);
 }
 process.on("SIGINT", shutdown);
 process.on("SIGTERM", shutdown);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "zapcode-figma-mcp",
-    "version": "1.0.3",
+    "version": "1.1.0",
     "description": "An MCP server that exposes Figma context via a plugin and saves assets, from Zapcode.",
     "type": "module",
     "bin": {
@@ -32,4 +32,4 @@
         "@types/node": "^20.12.12",
         "typescript": "^5.4.5"
     }
-}
+}