Locofy MCP for Cursor, GitHub Copilot, Windsurf & Claude Desktop

Locofy MCP (Model Context Protocol) allows Locofy.ai code to be integrated and extended with other AI code editors like Cursor, Windsurf, Claude Desktop, and others. It not only improves the accuracy and relevance of generated code but also unlocks new possibilities for utilizing Locofy-generated frontend code more effectively.

Benefits of MCP

• Code Cleanup - Easily cleanup and finetune Locofy.ai generated code.
• Enhanced Interactivity – Effortlessly add scripting and motion to components like carousels, tab galleries, and more.
• Extend Code Beyond UI – Add logic, accessibility, localisation, and more. The possibilities are endless.
• Improved Security & Testing Capabilities - Ensure the generated code meets your requirements.

Getting Started with Locofy MCP

To get started with Locofy MCP, follow these steps:

1. Open the Locofy plugin in Figma and create a project, if not created already.
2. Convert your designs to code using Locofy. Make sure you have optimised your Figma designs correctly (opens in a new tab) beforehand for high quality code.
3. Sync your designs to Locofy Builder.
4. Finally, generate your MCP tokens & start using it in your IDE.

Note: Always sync your designs to Locofy Builder before pulling code using MCP.

Generating MCP Token

To configure MCP for your project, follow these steps:

1. Go to Locofy Dashboard (opens in a new tab) and select the Locofy project for which you want to enable MCP.
2. Next, click on the gear icon to go to the project settings.
3. Locate the MCP Configuration tab.

4. Choose the desired token expiry option:
   • 1 Month Expiry
   • No Expiry
5. Click the Generate Token button.
6. Select your IDE and click on the copy button to copy the MCP configuration file.

You can now use this in any IDE that supports MCP servers.

Setting up Locofy MCP in Different Editors

Once you’ve copied your MCP configuration file, follow the steps below to set it up in your preferred environment.

To use the mcp.json file generated above in Cursor, first we need to configure it as a server in Cursor before we start to use it.

1. In your project’s root directory, create a .cursor folder if it doesn’t already exist.
2. Save the copied configuration file inside .cursor as mcp.json.
3. Next, go to Cursor settings and click on MCP tab.

4. Click on the MCP tab & you will find Locofy server as an option.

5. Click "Disabled" to enable the server. It can take a few seconds to start the server.

Note: Hit the refresh icon next to the "Disabled" button if the server is not enabled after a couple of seconds.

Using Locofy MCP

1. Go to any of your code files and open chat in your IDE. You can also use shortcut ⌘ + I or ⌘ + L depending upon your IDE to open it.

2. Make sure you're using Agent mode and not in Ask or Edit mode in chat.

3. You can now directly pull code from Locofy using natural language. You can also customise the code using the power of LLMs.
   For example:

   • Fetch the NavigationBar component from Locofy.
   • Pull Homepage from Locofy & replace the navbar with the one present in this project.
   • Get ListingCard component from Locofy & merge it with my code.
   • Pull Homepage from Locofy and make it accessible
   • Pull ListingCard Component and cleanup my code and add state variables
   • Pull Homepage and make it work in Arabic in RTL

4. Locofy will provide you with two tools to pull the code. Click on "Run tool" to execute the function required by the LLM to process your prompt.

   • getLatestComponentAndDependencyCode: Retrieve code along with their dependencies, including any required components, styling files such as CSS, and other related assets to ensure seamless integration.
   • getLatestFileCode: Retrieves specific files by name without their dependencies, making it useful when you need only a particular file's content.

Note: We recommend you to always prompt the server to assist with the merging of code as well.

Regenerating MCP Token

If your MCP token has expired or you need to generate a new one, follow these steps:

1. Go to the Locofy Dashboard (opens in a new tab) and select the project for which you need to regenerate the MCP token.
2. Click on the gear icon to access Project Settings.
3. Navigate to the MCP Configuration tab.
4. Click the Regenerate Token button to invalidate the previous token and create a new one.
5. A popup will open where you can choose the desired token expiry option of your new tokens and confirm the decision to revoke existing one.
6. Click Regenerate Token and download the updated mcp.json file.
7. Replace the old mcp.json file in your project with the newly generated one.

Your new MCP token is now active, ensuring continued access to Locofy MCP.

Examples

Adding Accessibility

1. Create a new file and open Cursor chat.
2. Pull Locofy code by running a prompt. For example:

Pull HomeCard from Locofy.

3. Run another prompt to make it accessible:

Improve the accessibility of this code by ensuring all interactive elements have appropriate ARIA attributes, sufficient color contrast, keyboard navigation support, and semantic HTML. 
Also, add meaningful alt text for images and ensure proper focus management for modals and dynamic elements.

Adding Form Validations

1. Create a new file and open Cursor chat.
2. Pull a form component from Locofy by running a prompt. For example:

Fetch SignupForm from Locofy.

3. Run another prompt to add validation:

Enhance this form by adding client-side validation for required fields, proper error messages, and validation for email format and password strength. 
Also, ensure the form is accessible with screen readers and provides clear feedback on errors.

Converting to Dark Mode

1. Create a new file and open Cursor chat.
2. Pull a UI component from Locofy by running a prompt. For example:

Fetch Dashboard from Locofy.

3. Run another prompt to enable dark mode:

Modify this component to support dark mode using CSS variables or a theme provider. 
Ensure colors, contrast, and UI elements adapt properly in both light and dark modes.