Connect MockFlow to Cursor

Create wireframes, flowcharts, and architecture diagrams alongside your code in Cursor.

Setup Guide

Connect MockFlow to Cursor in minutes

Install the npm package, log in via browser, then add the MCP server in Cursor settings.

Step 1

Install and start the MCP server

Choose the product you want to connect. You can install both.

IdeaBoard (brainstorming, diagrams, charts)

npm install -g @mockflow/ideaboard-mcp
# Log in — opens your browser for secure OAuth login
mockflow-ideaboard-mcp login
mockflow-ideaboard-mcp

WireframePro (wireframes, design-to-code)

npm install -g @mockflow/wireframepro-mcp
# Log in — opens your browser for secure OAuth login
mockflow-wireframepro-mcp login
mockflow-wireframepro-mcp

Target a specific design space: mockflow-ideaboard-mcp --space=YOUR_SPACE_ID

Step 2

Open Cursor Settings → Tools & MCP

Add a new MCP server with the JSON configuration below.

Opening Tools and MCP settings in Cursor IDE

Step 3

Add MCP server configuration

For IdeaBoard:

// .cursor/mcp.json
{
  "mcpServers": {
    "mockflow-ideaboard": {
      "url": "http://localhost:21193/mcp"
    }
  }
}

For WireframePro:

// .cursor/mcp.json
{
  "mcpServers": {
    "mockflow-wireframepro": {
      "url": "http://localhost:21194/mcp"
    }
  }
}

Adding MockFlow MCP server configuration in Cursor

Step 4

Start prompting in Cursor

Open the AI chat in Cursor and ask it to create flowcharts, wireframes, architecture diagrams, and more.

Using MockFlow MCP tools in Cursor AI chat to create diagrams

Alternative

Using the MockFlow Desktop App?

If you use the MockFlow Desktop App, the MCP servers start automatically when the app is running. Just add the same .cursor/mcp.json configuration — no npm install needed. You also get exclusive tools like layout_board and read_wireframe.

Download Desktop App →

Try These Prompts