Connect MockFlow to VS Code Copilot

Generate wireframes, flowcharts, and architecture diagrams right inside Visual Studio Code.

Setup Guide

Connect MockFlow to VS Code in minutes

Install the npm package, log in via browser, then add a .vscode/mcp.json file to your project.

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

Create `.vscode/mcp.json` in your project

Add the following configuration for both products (or just the one you need):

// .vscode/mcp.json
{
  "servers": {
    "mockflow-ideaboard": {
      "type": "http",
      "url": "http://localhost:21193/mcp"
    },
    "mockflow-wireframepro": {
      "type": "http",
      "url": "http://localhost:21194/mcp"
    }
  }
}

Creating mcp.json configuration file in VS Code project

Step 3

Open Copilot Chat and start prompting

Open the Copilot Chat panel in VS Code and ask it to create flowcharts, wireframes, architecture diagrams, and more.

Using MockFlow MCP tools in VS Code Copilot 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 .vscode/mcp.json configuration — no npm install needed. You also get exclusive tools like layout_board and read_wireframe.

Download Desktop App →

Try These Prompts