# How to setup MockFlow WireframePro MCP Server for Claude Code?

> You can connect the WireframePro MCP Server to Cursor 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

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

## Method 1: MockFlow Desktop App

1Start by installing and opening the MockFlow Desktop App, then log in with your credentials and create a Wireframe project.

2Next, in claude code run

```
claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp
```

3Now paste the configuration above into the Claude code and run it.

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

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

5You can now enter a prompt in Cursor, such as “Create a SaaS website wireframe”, or use read_wireframe to export to code and run it.

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

![Screenshot 2026-04-08 at 12.24.52 PM.png](https://assets.mockflow.com/docs/media/e78c785570fb16640255a1e7.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
```

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

```
mockflow-wireframepro-mcp --space=YOUR_SPACE_ID
```

4Next, click 'Authorize' to connect MockFlow CLI with Claude code.

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

5After npm is installed, paste the same configuration as mentioned and run it in the Claude code.

```
claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp
```

6Now, enter a prompt like “ Based on my website repo, create a pricing page wireframe using the same styleguide” in Claude Code.

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