MockFlow WireframePro MCP Server

Local MCP server for MockFlow WireframePro. Convert HTML to editable wireframes, create flowcharts, and design cloud architecture diagrams — directly from AI-powered coding tools.

Works with Claude Code, Cursor, VS Code Copilot, Codex, and any MCP-compatible client.

Note: MCP servers may not provide the full experience for certain types of generation involving images, AI art, or complex designs. For the best seamless experience, use the Mida AI agent inside the MockFlow editor.

Quick Start

1. Install

npm install -g @mockflow/wireframepro-mcp

Or run without installing:

npx @mockflow/wireframepro-mcp

2. Authenticate

mockflow-wireframepro-mcp login

This opens your browser to MockFlow's login page. Log in with your MockFlow account and authorize access. The token is saved automatically to ~/.mockflow/credentials.json (one-time setup).

3. Start the Server

mockflow-wireframepro-mcp

You'll see:

MockFlow WireframePro - Local MCP Server
========================================
User: you@example.com

MCP server running on http://localhost:21194/mcp

Add to your AI client:

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

4. Connect Your AI Client

Claude Code

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

Cursor

Settings > Cursor Settings > Tools & MCP:

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

VS Code Copilot

Create .vscode/mcp.json in your project:

{
  "servers": {
    "mockflow-wireframepro": {
      "type": "http",
      "url": "http://localhost:21194/mcp"
    }
  }
}

Codex (OpenAI)

codex mcp add mockflow-wireframepro http://localhost:21194/mcp

5. Start Prompting

Ask your AI client:

"Create a wireframe for a login page with email, password, and social login"
"Wireframe a dashboard with sidebar navigation, stats cards, and a data table"
"Create a flowchart showing the user registration process"
"Draw an AWS architecture diagram with API Gateway, Lambda, and DynamoDB"

The server creates the wireframe and returns a URL. Open it in your browser to view and edit.

Available Tools (3)

How render_wireframe Works

You: "Create a wireframe for a login page"
  |
  v
AI Client (Claude Code / Cursor / VS Code)
  |  generates complete HTML with inline CSS
  v
MCP Server (localhost:21194)
  |  loads HTML in headless browser (Puppeteer)
  |  runs imageGenerator → extracts paint objects
  |  sends to MockFlow backend
  v
app.mockflow.com
  |  creates WireframePro project with wireframe components
  v
Returns project URL → open in browser to view/edit

HTML Tips for Best Results

• Use inline style attributes (no external CSS)
• Use standard HTML elements: div, h1-h6, p, input, button, select, textarea, img, table, form
• Set explicit width on the outer container (e.g. 1280px)
• Include realistic placeholder text
• Keep layouts clean with proper nesting

CLI Reference

mockflow-wireframepro-mcp                     # Start server on default port (21194)
mockflow-wireframepro-mcp --port=8888         # Start on custom port
mockflow-wireframepro-mcp login               # Authenticate with MockFlow (one-time)
mockflow-wireframepro-mcp --help              # Show usage and setup instructions

Configuration

Credentials

Stored in ~/.mockflow/credentials.json (created automatically by mockflow-wireframepro-mcp login):

{
  "access_token": "...",
  "userid": "you@example.com",
  "clientid": "your-client-id"
}

Custom Port

If port 21194 is in use:

mockflow-wireframepro-mcp --port=8888

Then update your AI client config to use the new port.

Debug Mode

For verbose logging:

MCP_DEBUG=1 mockflow-wireframepro-mcp

Verify Installation

# Check server is running
curl http://localhost:21194/mcp

# List available tools
curl -X POST http://localhost:21194/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}'

Rate Limits

Only tool calls (render_wireframe, render_flowchart, render_cloudarchitecture) are counted. Protocol messages (initialize, tools/list, ping) are unlimited.

Limits are enforced server-side per authenticated user. Every response includes RateLimit-Limit, RateLimit-Remaining, and RateLimit-Reset headers.

Troubleshooting

"No credentials found"

Run mockflow-wireframepro-mcp login to authenticate with your MockFlow account.

Port already in use

Another process is using port 21194. Either:

• Use a different port: mockflow-wireframepro-mcp --port=8888
• Kill the process: lsof -ti :21194 | xargs kill

AI client doesn't use WireframePro tools

Be explicit in your prompt: "Using mockflow-wireframepro, create a wireframe for...". AI clients have many tools and may default to generating code.

Tool call fails with backend error

Ensure you have a valid login and internet connection. The server needs to reach app.mockflow.com. If your token expired, run mockflow-wireframepro-mcp login again.

Example Prompts

Wireframes

"Create a wireframe for a login page with email, password, remember me, and social login"
"Wireframe a dashboard with sidebar nav, user avatar, stats cards, and a data table"
"Create a wireframe for an e-commerce product page with image gallery, price, and add to cart"
"Wireframe a settings page with profile photo, form fields, and save button"

Flowcharts

"Create a flowchart showing the checkout process"
"Create a UML class diagram for a blog system"
"Create a circuit diagram with resistors and capacitors"

Cloud Architecture

"Draw an AWS architecture with API Gateway, Lambda, DynamoDB, and S3"
"Create an Azure architecture diagram for a web app with App Service and SQL Database"

Links

• npm: npmjs.com/package/@mockflow/wireframepro-mcp
• GitHub: github.com/mockflow/wireframepro-mcp
• MockFlow: mockflow.com
• IdeaBoard MCP: @mockflow/ideaboard-mcp — flowcharts, kanban, mind maps, and 12+ visualizations

Contributing

Issues and pull requests are welcome at github.com/mockflow/wireframepro-mcp.

License

MIT