How to setup MockFlow WireframePro MCP Server for VS Code?

You can connect the WireframePro MCP Server to VS Code using either the MockFlow Desktop App or the CLI Web MCP.

Method 1: MockFlow Desktop App

1Install and open the MockFlow Desktop App. Log in and create a Wireframe project.

2Next, open VS Code and in the Explorer section, create a folder named .json.

3Now, paste the following configuration:

{

  "mcpServers": {

    "mockflow-wireframepro": {

      "url": "http://localhost:21194/mcp"

    }

  }

}

4Once added, the MCP server will automatically connect to the running Desktop App.

5You can now enter a prompt in Cursor, such as “Create a Wireframe for an SEO Company,” and run it.

1. The generated wireframe will instantly appear in your MoCkFlow Desktop app WireframePro canvas.

Method 2: CLI Web MCP

1Begin by installing the MCP package globally using npm:

npm install -g @mockflow/wireframepro-mcp

2Then log in and start the MCP server:

mockflow-wireframepro-mcp login

mockflow-wireframepro-mcp

3Next, click on 'Authorize' to connect MockFlow MCP with VS Code.

4If you want to work within a specific workspace, you can optionally run:

mockflow-wireframepro-mcp --space=YOUR_SPACE_ID

5Now, inside your VS Code, under the explorer section, create a folder .json

6Paste the same configuration as in the above method, then save it to complete the setup.

{

  "mcpServers": {

    "mockflow-wireframepro": {

      "url": "http://localhost:21194/mcp"

    }

  }

}

7Now, enter a prompt like “Create a wireframe for a dark mode social media analytical dashboard" in VS Code.

1. The MCP server will process your request and generate the wireframe inside MockFlow.