UIPro MCP by Locofy.ai

Tools

• getCodeFromUIProPlugin

  • Retrieve generated code from UIPro Figma plugin. First generate code in the plugin by selecting a frame, then use this tool to get the code to iterate further.

• generateComponentsConfig

  • This tool analyzes your component source files, extracts props/types, and creates a locofy.config.json file that maps design components to code components for seamless design-to-code synchronization

How It Works

UIPro MCP connects your development environment directly to the UIPro Figma plugin:

• Automatically detects your project's framework, TypeScript usage, styling approach, and UI libraries.
• Connects seamlessly to your development environment once MCP is configured.
• Generates frontend code from Figma designs with a single click.
• Automatically saves images and assets directly to your project.

Important: Figma (with the UIPro plugin) and the MCP server must run on the same machine. The plugin communicates with the MCP server over a local connection, so remote or split setups are not supported.

Requirements

• Node.js 20.0.0 or higher
• UIPro Figma plugin installed and active in your Figma file.
• One of the supported development environments: Cursor, Windsurf, VS Code, Claude Code, Gemini CLI.
• The plugin connects automatically to the MCP server when configured.

Getting Started with UIPro MCP

Step 1: Setup in Figma

1. Install and open the UIPro plugin in Figma.
2. Login or Signup.
3. Select your target development environment from the supported list.
4. Copy the provided MCP configuration.

Step 2: Configure Your Development Environment

Create the appropriate MCP configuration for your development environment:

Cursor

Create .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "UIPro by Locofy": {
      "args": ["-y", "@locofy/uipro-mcp@latest"],
      "command": "npx",
      "env": {
        "IDE_SOURCE": "cursor"
      }
    }
  }
}

Setup: Go to Cursor Settings → Features → Model Context Protocol → Enable "UIPro by Locofy". See Cursor MCP Documentation for more details.

Windsurf

Add to Windsurf's global MCP configuration file at ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "UIPro by Locofy": {
      "args": ["-y", "@locofy/uipro-mcp@latest"],
      "command": "npx",
      "env": {
        "IDE_SOURCE": "windsurf"
      }
    }
  }
}

Setup: After creating the config file, go to Windsurf Settings → Cascade → Manage MCP Servers and click the refresh button to load the MCP server. See Windsurf MCP Documentation.

VS Code

Create .vscode/mcp.json in your project root:

{
  "servers": {
    "UIPro by Locofy": {
      "args": ["-y", "@locofy/uipro-mcp@latest"],
      "command": "npx",
      "env": {
        "IDE_SOURCE": "vscode"
      }
    }
  }
}

Setup: After creating the config file, VS Code will automatically detect it and show a "Start" button above the MCP server configuration in the JSON file. Click "Start" to launch the MCP server.

Claude Code

Add UIPro MCP server to Claude Code using the command line:

claude mcp add UIPro --env IDE_SOURCE=claude -- npx -y @locofy/uipro-mcp@latest

Verify the server was added by checking:

claude mcp get UIPro

To remove UIPro mcp

claude mcp remove UIPro

Gemini CLI

Open your Gemini settings JSON file, located at ~/.gemini/settings.json where ~ is your home directory, and add:

{
  "mcpServers": {
    "UIPro by Locofy": {
      "command": "npx",
      "args": ["-y", "@locofy/uipro-mcp@latest"],
      "env": {
        "IDE_SOURCE": "gemini"
      }
    }
  }
}

Setup: After adding the configuration, open the command palette and select "Developer: Reload Window". The UIPro MCP server will be available for the agent to use in agent mode. See Google Cloud Gemini Code Assist documentation for more details.

Android Studio

Configure UIPro MCP server in Android Studio (requires Android Studio Otter 2025.2.1 Canary or later):

1. Open Settings
2. Navigate to Tools → Gemini → MCP Servers
3. Enable MCP Servers checkbox
4. Click Import JSON file or add your own JSON with the following configuration:

{
  "mcpServers": {
    "UIPro by Locofy": {
      "command": "npx",
      "args": ["-y", "@locofy/uipro-mcp@latest"],
      "env": {
        "IDE_SOURCE": "studio"
      }
    }
  }
}

Setup: After adding the configuration, click OK to save. The UIPro MCP server will be available for Gemini to use in Android Studio's AI-powered features.

Codex

You can configure UIPro MCP server for OpenAI Codex using either the CLI or by editing the configuration file directly.

Option 1: Using CLI

codex mcp add UIPro --env IDE_SOURCE=codex -- npx -y @locofy/uipro-mcp@latest

Option 2: Manual Configuration Edit your ~/.codex/config.toml file and add:

[mcp_servers.UIPro]
command = "npx"
args = ["-y", "@locofy/uipro-mcp@latest"]

[mcp_servers.UIPro.env]
IDE_SOURCE = "codex"

Setup: Configuration is shared between the CLI and IDE extension. Once configured, you can use the UIPro MCP server in both Codex clients. Use /mcp in the terminal UI to see your actively connected MCP servers. See OpenAI Codex MCP Documentation for more details.

Step 3: Generate Code

1. In Figma, select a frame or component to convert.
2. Click "Generate Code" in the UIPro plugin.
3. Wait for the plugin to process your design.
4. The plugin will display "Code is ready for [Your Development Environment]".

Step 4: Retrieve Code in Your Development Environment

1. Open your development environment and start a chat/conversation.
2. Use natural language to request the code:
   • "Get the generated screen code from UIPro"
   • "Import the Figma component code from UIPro"
3. The MCP tool will automatically connect and retrieve:
   • Generated code files
   • Design screenshot for reference
   • Assets and images
4. Review and iterate on the code as needed.

Customizing Code Generation Instructions

UIPro includes built-in instructions that guide the AI on how to process your generated code. These default instructions ensure the code is:

• Properly structured with meaningful file names and directories
• Pixel-perfect with all CSS variables preserved
• Accessible with semantic HTML and ARIA attributes
• Clean with improved class names and reusable components

You can customize these instructions by setting the CUSTOM_INSTRUCTIONS environment variable in your development environment to override the defaults with your own preferences.

Example for Cursor - Add CUSTOM_INSTRUCTIONS to your .cursor/mcp.json:

{
  "mcpServers": {
    "UIPro by Locofy": {
      "args": ["-y", "@locofy/uipro-mcp@latest"],
      "command": "npx",
      "env": {
        "IDE_SOURCE": "cursor",
        "CUSTOM_INSTRUCTIONS": "Use React with TypeScript and Tailwind CSS. For tables, use @tanstack/react-table. For charts, use recharts. For data grids, use AG Grid React. Always include proper TypeScript interfaces and use functional components with hooks. IMPORTANT: Follow these steps exactly: 1) Create all necessary files in correct directories with meaningful naming. 2) Ensure asset paths are correct. 3) Copy ALL CSS variables to remain pixel-perfect. 4) Add accessibility with semantic HTML and ARIA attributes. 5) Use meaningful CSS class names, avoid generic names like 'box1'. 6) Add clear comments explaining key sections. 7) Keep code modular and clean."
      }
    }
  }
}

Tips for Best Results

• Optimize Your Figma Designs: Ensure you have optimized your Figma designs correctly for high-quality code generation.
• Keep Plugin Running: Don't close the Figma plugin while working with generated code.
• Use Descriptive Names: Name your Figma frames and components clearly for better code generation.
• Iterate and Refine: Refine the generated code with further prompts.

Troubleshooting

If you're experiencing issues with the UIPro MCP server, try these common solutions:

MCP Server Not Detected

• Restart your development environment: Close and reopen your IDE/tool completely.
• Check configuration file: Ensure the MCP configuration file is in the correct location with proper JSON syntax.
• Verify file permissions: Make sure the configuration file is readable.
• Close multiple instances: If you have multiple instances of your development environment running, close all of them and reopen.

MCP Server Connection Issues

• Disable and re-enable MCP:
  • Cursor: Go to Settings → Features → Model Context Protocol → Disable, then re-enable
  • Windsurf: Go to Settings → Cascade → Manage MCP Servers → Refresh
  • VS Code: Click the "Stop" button in the MCP configuration, then "Start" again
  • Claude Code: Run claude mcp remove UIPro then claude mcp add UIPro --env IDE_SOURCE=claude -- npx -y @locofy/uipro-mcp@latest
  • Gemini CLI: Reload window with "Developer: Reload Window" command

Plugin Connection Issues

• Check network connectivity: Ensure your machine can access the internet and npm registry.
• Verify MCP is enabled: Make sure the MCP server is running and enabled in your development environment.
• Check Figma plugin status: Ensure UIPro plugin is running, logged in, and shows a green dot indicating it's connected.

Still Having Issues?

• Check that you're using the latest version of your development environment.
• Verify that Node.js and npm are properly installed on your system.
• Review the error messages in your development environment's output/console panel.
• For more help, reach out to us at [email protected]