@locofy/mcp 1.0.5 → 1.0.6

package/build/api.js

@@ -1,6 +1,7 @@
 import express from 'express';
 import { z } from 'zod';
 import { PullComponentsToolSchema, runPullComponentsTool } from './tools/pullComponents.js';
+import { PullFilesToolSchema, runPullFilesTool } from './tools/pullFiles.js';
 // Only start the API server if DEBUG_MODE is set
 if (process.env.DEBUG_MODE === 'true') {
     const app = express();
@@ -24,6 +25,23 @@ if (process.env.DEBUG_MODE === 'true') {
             }
         }
     });
+    // API endpoint for pullFiles
+    app.post('/api/pullFiles', async (req, res) => {
+        try {
+            const validatedArgs = PullFilesToolSchema.parse(req.body);
+            const result = await runPullFilesTool(validatedArgs);
+            res.json(result);
+        }
+        catch (error) {
+            if (error instanceof z.ZodError) {
+                res.status(400).json({ error: 'Invalid request body', details: error.errors });
+            }
+            else {
+                console.error('Error processing request:', error);
+                res.status(500).json({ error: 'Internal server error', message: error instanceof Error ? error.message : 'Unknown error' });
+            }
+        }
+    });
     // Start the server
     app.listen(port, () => {
         console.log(`Debug API server running on http://localhost:${port}`);

package/build/index.js

@@ -3,6 +3,7 @@ import { Server } from '@modelcontextprotocol/sdk/server/index.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { CallToolRequestSchema, ListToolsRequestSchema } from '@modelcontextprotocol/sdk/types.js';
 import { pullComponentsToolName, pullComponentsToolDescription, PullComponentsToolSchema, runPullComponentsTool } from './tools/pullComponents.js';
+import { pullFilesToolName, pullFilesToolDescription, PullFilesToolSchema, runPullFilesTool } from './tools/pullFiles.js';
 import './api.js';
 const server = new Server({
     name: 'locofy-mcp',
@@ -36,6 +37,26 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
                     required: ['componentNames', 'workspacePath'],
                 },
             },
+            {
+                name: pullFilesToolName,
+                description: pullFilesToolDescription,
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        fileNames: {
+                            type: 'array',
+                            items: {
+                                type: 'string',
+                            },
+                            description: 'The list of specific file names to be retrieved, without resolving their component dependencies.'
+                        },
+                        workspacePath: {
+                            type: 'string',
+                            description: 'The full path to the workspace.'
+                        },
+                    },
+                }
+            }
         ],
     };
 });
@@ -46,6 +67,10 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
             const validated = PullComponentsToolSchema.parse(args);
             return await runPullComponentsTool(validated);
         }
+        case pullFilesToolName: {
+            const validated = PullFilesToolSchema.parse(args);
+            return await runPullFilesTool(validated);
+        }
         default:
             throw new Error(`Unknown tool: ${name}`);
     }

package/build/tools/pullComponents.js

@@ -489,10 +489,10 @@ function processDirectoryStructure(directoryStructure) {
     collectChangeStatus(directoryStructure);
     // Then clean the structure
     cleanNode(directoryStructure);
-    // Get the first child (the actual component data we want)
-    const result = directoryStructure.children;
     // Add the component lists to the component data
-    result.componentsToUpdate = [...new Set(componentsToUpdate)];
-    result.componentsUnchanged = [...new Set(componentsUnchanged)];
-    return result;
+    return {
+        directoryStructure: directoryStructure.children,
+        componentsToUpdate: [...new Set(componentsToUpdate)],
+        componentsUnchanged: [...new Set(componentsUnchanged)]
+    };
 }

package/build/tools/pullFiles.js

@@ -0,0 +1,496 @@
+import { z } from 'zod';
+import * as fs from 'fs';
+import * as path from 'path';
+import axios from 'axios';
+/**
+ * PullFiles tool
+ *   - Returns a hardcoded representation of a directory structure
+ *   - Contains nested folders, files, and file contents
+ */
+export const pullFilesToolName = 'getLatestFileCode';
+export const pullFilesToolDescription = `Cursor IDE uses this tool to retrieve individual file contents without component dependency management. Unlike the component tool that handles components and their dependencies as a unit, this tool focuses on specific files by name, retrieving only their content without dependency resolution. Use this tool when you need the raw content of specific files rather than complete components with their dependency trees. If codeChanged is true, the tool will prompt the user to accept the changes before updating the file. If codeChanged is false, the tool will not update the files.
+  `;
+export const PullFilesToolSchema = z.object({
+    fileNames: z.array(z.string()).describe('The list of specific file names to be retrieved, without resolving their component dependencies.').max(10).min(1),
+    workspacePath: z.string().describe('The full path to the workspace.'),
+});
+export async function runPullFilesTool(args) {
+    let fileNames = args.fileNames;
+    // clean the file names, remove extensions
+    fileNames = fileNames.map(name => name.replace(/\.[^/.]+$/, ''));
+    const workspacePath = decodeURIComponent(args.workspacePath);
+    const projectID = process.env.PROJECT_ID;
+    const personalAccessToken = process.env.PERSONAL_ACCESS_TOKEN;
+    if (!projectID || !personalAccessToken) {
+        throw new Error('PROJECT_ID or PERSONAL_ACCESS_TOKEN is not set');
+    }
+    try {
+        const result = await fetchDirectoryStructure(fileNames, projectID, personalAccessToken);
+        if (result.success) {
+            // Prepend workspacePath to all filePath attributes
+            prepareFilePaths(result.data, workspacePath);
+            // Download and save any files referenced in the response
+            await downloadAndSaveAssets(result.data);
+            // Check for code changes and mark changed files
+            await checkForCodeChanges(result.data);
+            // clean the directory structure
+            const cleanedResult = processDirectoryStructure(result.data);
+            // write resultJSON to a file
+            if (process.env.DEBUG_MODE === 'true') {
+                fs.writeFileSync('result.json', JSON.stringify(cleanedResult, null, 2));
+            }
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: JSON.stringify(cleanedResult, null, 2)
+                    }
+                ]
+            };
+        }
+        else {
+            // Return the error message from fetchDirectoryStructure
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        statusCode: result.statusCode || 'unknown',
+                        text: JSON.stringify({
+                            error: result.error,
+                        }, null, 2)
+                    }
+                ]
+            };
+        }
+    }
+    catch (error) {
+        console.error('Error fetching directory structure:', error);
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: JSON.stringify({ error: 'Failed to fetch directory structure ' + error }, null, 2)
+                }
+            ]
+        };
+    }
+}
+async function fetchDirectoryStructure(fileNames, projectID, personalAccessToken) {
+    const encodedNames = fileNames.map(name => encodeURIComponent(name)).join(',');
+    let baseURL = 'https://codegen-api.locofy.ai/mcp/generators/';
+    if (process.env.IS_DEV === 'true') {
+        baseURL = 'https://codegen-api.locofy.dev/mcp/generators/';
+    }
+    const url = baseURL + projectID + '?name=' + encodedNames;
+    const headers = {
+        'Accept': '*/*',
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + personalAccessToken
+    };
+    const data = {};
+    try {
+        const response = await axios.post(url, data, { headers, });
+        if (response.status !== 200) {
+            // Instead of throwing, return an error object
+            return {
+                success: false,
+                error: `API returned status code ${response.status}`,
+                statusCode: response.status
+            };
+        }
+        if (!response.data || !response.data.directoryTree) {
+            return {
+                success: false,
+                error: 'API response is missing directoryTree property',
+                statusCode: response.status
+            };
+        }
+        return {
+            success: true,
+            data: response.data.directoryTree
+        };
+    }
+    catch (error) {
+        if (axios.isAxiosError(error)) {
+            if (error.response) {
+                const statusCode = error.response.status;
+                let errorMessage = '';
+                if (statusCode === 401) {
+                    errorMessage = 'Authentication failed: Invalid or expired token. Please check your mcp.json configuration in the .cursor folder to ensure your PERSONAL_ACCESS_TOKEN is correct. You can visit the Locofy project settings page to check or regenerate your token if needed.';
+                }
+                else if (statusCode === 500) {
+                    errorMessage = 'Server error: The API service is experiencing issues';
+                }
+                else {
+                    errorMessage = `API request failed with status ${statusCode}: ${error.message}`;
+                }
+                return {
+                    success: false,
+                    error: errorMessage,
+                    statusCode: statusCode
+                };
+            }
+            else if (error.request) {
+                return {
+                    success: false,
+                    error: 'Network error: No response received from API',
+                    statusCode: 'network_error'
+                };
+            }
+        }
+        console.error('API request failed:', error);
+        return {
+            success: false,
+            error: `Failed to fetch directory structure: ${error instanceof Error ? error.message : 'Unknown error'}`,
+            statusCode: 'unknown_error'
+        };
+    }
+}
+/**
+ * Traverses the directory structure and prepends workspacePath to all filePath attributes
+ * @param directoryStructure The directory structure from the API response
+ * @param workspacePath The workspace path to prepend to file paths
+ */
+function prepareFilePaths(directoryStructure, workspacePath) {
+    const processNode = (node) => {
+        if (node.filePath) {
+            if (!path.isAbsolute(node.filePath)) {
+                node.filePath = path.join(workspacePath, node.filePath);
+            }
+        }
+        // Process all file paths in exportData
+        if (node.exportData) {
+            // Handle exportData.filePath
+            if (node.exportData.filePath) {
+                if (!path.isAbsolute(node.exportData.filePath)) {
+                    node.exportData.filePath = path.join(workspacePath, node.exportData.filePath);
+                }
+            }
+            // Handle exportData.files array
+            if (node.exportData.files && Array.isArray(node.exportData.files)) {
+                for (const file of node.exportData.files) {
+                    if (file.filePath && !path.isAbsolute(file.filePath)) {
+                        file.filePath = path.join(workspacePath, file.filePath);
+                    }
+                }
+            }
+            // Handle dependencies array
+            if (node.exportData.dependencies && Array.isArray(node.exportData.dependencies)) {
+                for (const dependency of node.exportData.dependencies) {
+                    // Process dependency filePath
+                    if (dependency.filePath && !path.isAbsolute(dependency.filePath)) {
+                        dependency.filePath = path.join(workspacePath, dependency.filePath);
+                    }
+                    // Process dependency files array
+                    if (dependency.files && Array.isArray(dependency.files)) {
+                        for (const file of dependency.files) {
+                            if (file.filePath && !path.isAbsolute(file.filePath)) {
+                                file.filePath = path.join(workspacePath, file.filePath);
+                            }
+                        }
+                    }
+                    // Recursively process any nested dependencies if they exist
+                    if (dependency.dependencies && Array.isArray(dependency.dependencies)) {
+                        for (const nestedDep of dependency.dependencies) {
+                            processNode(nestedDep); // Recursively process nested dependencies
+                        }
+                    }
+                }
+            }
+        }
+        // Process content.filePath if it exists
+        if (node.content && node.content.filePath) {
+            if (!path.isAbsolute(node.content.filePath)) {
+                node.content.filePath = path.join(workspacePath, node.content.filePath);
+            }
+        }
+        // Process children recursively
+        if (node.children && Array.isArray(node.children)) {
+            for (const child of node.children) {
+                processNode(child);
+            }
+        }
+    };
+    // Start processing from the root
+    processNode(directoryStructure);
+}
+/**
+ * Downloads and saves asset files from the directory structure
+ * @param directoryStructure The directory structure from the API response
+ */
+async function downloadAndSaveAssets(directoryStructure) {
+    // Process each file in the directory structure
+    const processNode = async (node) => {
+        /* eslint-enable */
+        if (node.type === 'file' && node.exportData && node.exportData.files) {
+            // For each file in the files array
+            for (const file of node.exportData.files) {
+                if (file.url && file.fileName) {
+                    const filePath = file.filePath;
+                    // Create the directory structure if it doesn't exist
+                    const dirPath = path.dirname(filePath);
+                    if (!fs.existsSync(dirPath)) {
+                        fs.mkdirSync(dirPath, { recursive: true });
+                        console.log(`Created directory: ${dirPath}`);
+                    }
+                    // Only download if file doesn't exist
+                    if (!fs.existsSync(filePath)) {
+                        try {
+                            console.log(`Downloading ${file.fileName} from ${file.url}`);
+                            const response = await axios.get(file.url, { responseType: 'arraybuffer' });
+                            fs.writeFileSync(filePath, Buffer.from(response.data));
+                            console.log(`Saved ${file.fileName} to ${filePath}`);
+                        }
+                        catch (error) {
+                            console.error(`Error downloading ${file.fileName}:`, error);
+                        }
+                    }
+                    else {
+                        console.log(`File ${filePath} already exists, skipping download`);
+                    }
+                }
+            }
+        }
+        // Process children recursively
+        if (node.children && Array.isArray(node.children)) {
+            for (const child of node.children) {
+                await processNode(child);
+            }
+        }
+    };
+    // Start processing from the root
+    await processNode(directoryStructure);
+}
+/**
+ * Checks if the current code on disk differs from the code received from the API
+ * @param directoryStructure The directory structure from the API response
+ */
+async function checkForCodeChanges(directoryStructure) {
+    // Process a single file and check if its content has changed
+    function checkFile(filePath, content) {
+        if (!fs.existsSync(filePath)) {
+            console.log(`New file: ${filePath}`);
+            return true;
+        }
+        try {
+            const fileContent = fs.readFileSync(filePath, 'utf8');
+            const codeChanged = hasCodeChanged(fileContent, content);
+            if (codeChanged) {
+                console.log(`File changed: ${filePath}`);
+            }
+            return codeChanged;
+        }
+        catch (error) {
+            console.error(`Error reading file ${filePath}:`, error);
+            return true; // Consider file as changed if we can't read it
+        }
+    }
+    // Check CSS module file if it exists
+    function checkCssFile(basePath, cssFileName, cssContent) {
+        if (!cssFileName || !cssContent)
+            return false;
+        const cssFilePath = path.join(path.dirname(basePath), cssFileName);
+        if (fs.existsSync(cssFilePath)) {
+            const cssFileContent = fs.readFileSync(cssFilePath, 'utf8');
+            const cssChanged = hasCodeChanged(cssFileContent, cssContent);
+            if (cssChanged) {
+                console.log(`CSS module changed: ${cssFilePath}`);
+                return true;
+            }
+            else {
+                return false;
+            }
+        }
+        return true; // CSS file doesn't exist, consider as new/changed
+    }
+    // Update node with change status and instructions
+    function updateNodeStatus(node, fileName, hasChanged, isCss = false) {
+        if (!hasChanged) {
+            const message = `This file ${fileName} has no changes, no need to update`;
+            if (isCss) {
+                node.cssContent = message;
+                node.instructionCSSForIDE = message;
+            }
+            else {
+                node.instructionForIDE = message;
+                node.content = message;
+            }
+        }
+        else if (!fs.existsSync(node.filePath)) {
+            node.instructionForIDE = 'This file does not exist, please create it';
+        }
+        return hasChanged;
+    }
+    // The main recursive function to process nodes
+    function processNode(node) {
+        let hasChanges = false;
+        // Remove experimental fields first
+        if (node.exportData) {
+            if (node.filePath) {
+                const nodeContent = node.name.includes('.css') ?
+                    node.exportData.cssContent :
+                    node.exportData.content;
+                const fileChanged = checkFile(node.filePath, nodeContent);
+                node.codeChanged = fileChanged;
+                hasChanges = hasChanges || fileChanged;
+                updateNodeStatus(node, node.name, fileChanged);
+                // Check associated CSS module
+                if (node.exportData.cssFileName && node.exportData.cssContent) {
+                    const cssChanged = checkCssFile(node.filePath, node.exportData.cssFileName, node.exportData.cssContent);
+                    hasChanges = hasChanges || cssChanged;
+                    updateNodeStatus(node.exportData, node.exportData.cssFileName, cssChanged, true);
+                }
+            }
+            // Process dependencies
+            if (node.exportData.dependencies && Array.isArray(node.exportData.dependencies)) {
+                for (const dependency of node.exportData.dependencies) {
+                    // Process dependency file
+                    if (dependency.filePath) {
+                        const isCSS = dependency.name && dependency.name.includes('.css');
+                        const depContent = isCSS ? dependency.cssContent : dependency.content;
+                        const fileChanged = checkFile(dependency.filePath, depContent);
+                        dependency.codeChanged = fileChanged;
+                        hasChanges = hasChanges || fileChanged;
+                        updateNodeStatus(dependency, dependency.compName, fileChanged);
+                        // Check associated CSS module
+                        if (dependency.cssFileName && dependency.cssContent) {
+                            const cssChanged = checkCssFile(dependency.filePath, dependency.cssFileName, dependency.cssContent);
+                            hasChanges = hasChanges || cssChanged;
+                            updateNodeStatus(dependency, dependency.cssFileName, cssChanged, true);
+                        }
+                    }
+                    // Process nested dependencies recursively
+                    if (dependency.dependencies && Array.isArray(dependency.dependencies)) {
+                        for (const nestedDep of dependency.dependencies) {
+                            const nestedChanged = processNode(nestedDep);
+                            hasChanges = hasChanges || nestedChanged;
+                        }
+                    }
+                }
+            }
+        }
+        // Process children recursively
+        if (node.children && Array.isArray(node.children)) {
+            for (const child of node.children) {
+                const childChanged = processNode(child);
+                hasChanges = hasChanges || childChanged;
+            }
+        }
+        return hasChanges;
+    }
+    // Start processing from the root
+    return processNode(directoryStructure);
+}
+/**
+ * Compares two code snippets to determine if they are functionally different
+ * @param fileContent The code currently in the file
+ * @param apiCode The code provided by the API
+ * @returns True if the code has changed, false otherwise
+ */
+function hasCodeChanged(fileContent, apiCode) {
+    if (!fileContent || !apiCode) {
+        return true;
+    }
+    // Normalize both code snippets
+    const normalizedFile = normalizeForComparison(fileContent);
+    const normalizedApi = normalizeForComparison(apiCode);
+    // Simple equality check on normalized versions
+    return normalizedFile !== normalizedApi;
+}
+/**
+ * Normalizes code for comparison by removing irrelevant differences
+ * @param code The code to normalize
+ * @returns Normalized code string
+ */
+function normalizeForComparison(code) {
+    return code
+        .replace(/\s+/g, '') // Remove all whitespace (spaces, tabs, newlines)
+        .replace(/[;,'"]/g, '') // Remove semicolons, commas, and quotes
+        .replace(/\/\/.*$/gm, '') // Remove single-line comments
+        .replace(/\/\*[\s\S]*?\*\//g, '') // Remove multi-line comments
+        .toLowerCase(); // Convert to lowercase for case-insensitive comparison
+}
+/**
+ * Cleans the directory structure by removing unwanted properties from all nodes
+ * @param directoryStructure The directory structure to clean
+ * @returns The cleaned directory structure
+ */
+function processDirectoryStructure(directoryStructure) {
+    const propertiesToRemove = [
+        'files',
+        'component',
+        'jsLC',
+        'assetCount',
+        'cssLC',
+        'componentCount',
+        'pageMetaData',
+        'isHomePage',
+        'storybookFileName',
+        'isAutoSyncNode'
+    ];
+    const filesToUpdate = [];
+    const filesUnchanged = [];
+    function collectChangeStatus(node) {
+        // Check if this is a component node with a name and change status
+        if (node.name && node.codeChanged !== undefined) {
+            if (node.codeChanged) {
+                filesToUpdate.push(node.name);
+            }
+            else {
+                filesUnchanged.push(node.name);
+            }
+        }
+        // Check dependencies
+        if (node.exportData && node.exportData.dependencies) {
+            node.exportData.dependencies.forEach((dep) => {
+                if (dep.compName && dep.codeChanged !== undefined) {
+                    if (dep.codeChanged) {
+                        filesToUpdate.push(dep.compName);
+                    }
+                    else {
+                        filesUnchanged.push(dep.compName);
+                    }
+                }
+                // Check nested dependencies
+                if (dep.dependencies && Array.isArray(dep.dependencies)) {
+                    dep.dependencies.forEach((nestedDep) => collectChangeStatus(nestedDep));
+                }
+            });
+        }
+        // Process children recursively
+        if (node.children && Array.isArray(node.children)) {
+            node.children.forEach((child) => collectChangeStatus(child));
+        }
+    }
+    function cleanNode(node) {
+        // Remove unwanted properties from the current node
+        propertiesToRemove.forEach(prop => {
+            if (node[prop] !== undefined)
+                delete node[prop];
+        });
+        // Clean exportData if it exists
+        if (node.exportData) {
+            propertiesToRemove.forEach(prop => {
+                if (node.exportData[prop] !== undefined)
+                    delete node.exportData[prop];
+            });
+            // Process dependencies in exportData
+            if (node.exportData.dependencies && Array.isArray(node.exportData.dependencies)) {
+                node.exportData.dependencies.forEach((dep) => cleanNode(dep));
+            }
+        }
+        // Process children recursively
+        if (node.children && Array.isArray(node.children)) {
+            node.children.forEach((child) => cleanNode(child));
+        }
+    }
+    // First collect all change statuses
+    collectChangeStatus(directoryStructure);
+    // Then clean the structure
+    cleanNode(directoryStructure);
+    return {
+        directoryStructure: directoryStructure.children,
+        filesToUpdate: [...new Set(filesToUpdate)],
+        filesUnchanged: [...new Set(filesUnchanged)]
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@locofy/mcp",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Locofy MCP Server with Cursor",
   "keywords": [
     "figma",