# 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:...

Source: https://mockflow.com/docs/integrations/mcp/to-setup-mockflow-wireframepro-mcp-server-for-vs

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.

![Screenshot 2026-04-08 at 12.33.28 PM.png](https://assets.mockflow.com/docs/media/023294b90becb73576baf461.webp)

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.

![Screenshot 2026-04-08 at 12.15.57 PM.png](https://assets.mockflow.com/docs/media/aad00ecea58286c812269396.webp)

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

![Screenshot 2026-04-08 at 12.25.02 PM.png](https://assets.mockflow.com/docs/media/fe269ff2e0c7911ec3d6bb2a.webp)

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

![Screenshot 2026-04-08 at 12.24.52 PM.png](https://assets.mockflow.com/docs/media/962f26a37331ce082ecf1ad4.webp)

## **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.

![Screenshot 2026-04-07 at 3.56.20 PM.png](https://assets.mockflow.com/docs/media/602d19f66ae18e387a8957d9.webp)

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.

![Screenshot 2026-04-08 at 10.51.19 AM.png](https://assets.mockflow.com/docs/media/b8f3d05dafeab09f66660291.webp)

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

![Screenshot 2026-04-08 at 10.51.53 AM.png](https://assets.mockflow.com/docs/media/56776dfc91f9c1ed7f07b67d.webp)