viewgate-mcp 1.0.13 → 1.0.15

package/dist/index.js

@@ -142,6 +142,17 @@ function createMcpServer(apiKey, personalKey) {
                         type: "object",
                         properties: {},
                     },
+                },
+                {
+                    name: "get_figma_preview",
+                    description: "Fetches design metadata and image previews from a Figma URL using the project's centralized access token. Use this to understand the UX requirements without needing local Figma configuration. The Figma token must be configured in the ViewGate dashboard under Settings > Integrations.",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            url: { type: "string", description: "The Figma design or file URL" }
+                        },
+                        required: ["url"]
+                    }
                 }
             ],
         };
@@ -214,8 +225,12 @@ function createMcpServer(apiKey, personalKey) {
                             componentPath: ann.reference?.componentPath,
                             selector: ann.reference?.selector,
                             tag: ann.reference?.tag,
+                            figmaReference: ann.figmaReference,
                             backendEndpoints: ann.backendEndpoints || [ann.backendEndpoint].filter(Boolean),
-                            _ia_fix_instruction: `### 🔬 SURGICAL FIX PROTOCOL (Language: ${data.preferredLanguage || 'en'})
+                            _ia_fix_instruction: `### 🎨 DESIGN CONTEXT (Figma)
+${ann.figmaReference ? `A design reference is available: ${ann.figmaReference}. Use the 'get_figma_preview' tool to fetch design details and image previews before implementing.` : 'No explicit figma design linked.'}
+
+### 🔬 SURGICAL FIX PROTOCOL (Language: ${data.preferredLanguage || 'en'})
 1. **PRIMARY**: Search for \`data-vg-id="${ann.reference?.vgId}"\`.
 2. **SECONDARY**: Check \`${file}\` L${line} (Fiber Source).
 3. **TERTIARY**: Match Tag(\`${ann.reference?.tag}\`) + Role(\`${ann.reference?.fingerprint?.role}\`) + Text("${ann.reference?.text?.slice(0, 30)}").
@@ -390,6 +405,84 @@ Instruction: ${ann.message}`
                     };
                 }
             }
+            case "get_figma_preview": {
+                try {
+                    const args = request.params.arguments;
+                    const url = args.url;
+                    // 1. Get Figma Token from Backend Config
+                    const configResponse = await fetch(`${BACKEND_URL}/api/mcp/config`, {
+                        headers: {
+                            'x-api-key': apiKey,
+                            ...(personalKey ? { 'x-personal-key': personalKey } : {})
+                        }
+                    });
+                    if (!configResponse.ok) {
+                        throw new Error(`Failed to fetch project configuration: ${configResponse.status}`);
+                    }
+                    const configData = (await configResponse.json());
+                    const figmaToken = configData?.settings?.figmaToken;
+                    if (!figmaToken) {
+                        return {
+                            content: [{
+                                    type: "text",
+                                    text: "Figma integration is not fully configured. Please add a Figma Access Token in the ViewGate Dashboard (Settings > Integrations)."
+                                }],
+                            isError: true
+                        };
+                    }
+                    // 2. Parse Figma URL
+                    const fileKeyMatch = url.match(/(file|design)\/([a-zA-Z0-9]+)/);
+                    if (!fileKeyMatch) {
+                        throw new Error("Invalid Figma URL format. File key not found.");
+                    }
+                    const fileKey = fileKeyMatch[2];
+                    // Extract node-id if present
+                    const urlObj = new URL(url.replace(/#/g, '?')); // Handle hash-based node-id
+                    let nodeId = urlObj.searchParams.get('node-id') || urlObj.searchParams.get('m');
+                    if (!nodeId && url.includes('node-id=')) {
+                        nodeId = url.split('node-id=')[1].split('&')[0].replace('%3A', ':');
+                    }
+                    // 3. Fetch Data from Figma
+                    // First get file info
+                    const figmaApiUrl = `https://api.figma.com/v1/files/${fileKey}${nodeId ? `?ids=${nodeId}` : ''}`;
+                    const figmaResponse = await fetch(figmaApiUrl, {
+                        headers: { 'X-Figma-Token': figmaToken }
+                    });
+                    if (!figmaResponse.ok) {
+                        throw new Error(`Figma API returned ${figmaResponse.status}: ${await figmaResponse.text()}`);
+                    }
+                    const figmaData = (await figmaResponse.json());
+                    // 4. Optionally fetch image preview if a node is specified
+                    let imageUrl = null;
+                    if (nodeId) {
+                        const imageResponse = await fetch(`https://api.figma.com/v1/images/${fileKey}?ids=${nodeId}&scale=2&format=png`, {
+                            headers: { 'X-Figma-Token': figmaToken }
+                        });
+                        if (imageResponse.ok) {
+                            const imageData = await imageResponse.json();
+                            imageUrl = imageData.images?.[nodeId];
+                        }
+                    }
+                    return {
+                        content: [{
+                                type: "text",
+                                text: JSON.stringify({
+                                    fileName: figmaData.name,
+                                    lastModified: figmaData.lastModified,
+                                    previewUrl: imageUrl,
+                                    nodeName: nodeId ? (figmaData.nodes?.[nodeId]?.document?.name || 'Selected Component') : 'Full File',
+                                    note: "Design context successfully retrieved from Figma."
+                                }, null, 2)
+                            }]
+                    };
+                }
+                catch (error) {
+                    return {
+                        content: [{ type: "text", text: `Error fetching Figma preview: ${error.message}` }],
+                        isError: true
+                    };
+                }
+            }
             default:
                 throw new Error("Unknown tool");
         }

package/package.json

@@ -1,40 +1,40 @@
-{
-  "name": "viewgate-mcp",
-  "version": "1.0.13",
-  "main": "dist/index.js",
-  "bin": {
-    "viewgate-mcp": "./dist/index.js"
-  },
-  "files": [
-    "dist"
-  ],
-  "type": "module",
-  "scripts": {
-    "build": "tsc",
-    "watch": "tsc -w",
-    "start": "node dist/index.js",
-    "dev": "tsx watch src/index.ts",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.27.1",
-    "cors": "^2.8.6",
-    "dotenv": "^17.3.1",
-    "express": "^5.2.1",
-    "node-fetch": "^3.3.2"
-  },
-  "devDependencies": {
-    "@types/cors": "^2.8.19",
-    "@types/express": "^5.0.6",
-    "@types/node": "^25.5.0",
-    "@types/node-fetch": "^2.6.13",
-    "nodemon": "^3.1.14",
-    "ts-node": "^10.9.2",
-    "tsx": "^4.21.0",
-    "typescript": "^5.9.3"
-  }
-}
+{
+  "name": "viewgate-mcp",
+  "version": "1.0.15",
+  "main": "dist/index.js",
+  "bin": {
+    "viewgate-mcp": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc -w",
+    "start": "node dist/index.js",
+    "dev": "tsx watch src/index.ts",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.27.1",
+    "cors": "^2.8.6",
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
+    "node-fetch": "^3.3.2"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/node": "^25.5.0",
+    "@types/node-fetch": "^2.6.13",
+    "nodemon": "^3.1.14",
+    "ts-node": "^10.9.2",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  }
+}