Connect MockFlow to VS Code Copilot.
Generate wireframes, flowcharts and architecture diagrams right inside Visual Studio Code.
Connect MockFlow to VS Code in minutes.
Install the npm package, log in through the browser, then add a .vscode/mcp.json file to your project.
Install and start the MCP server
Choose the product you want to connect. You can install both.
Target a specific design space: mockflow-ideaboard-mcp --space=YOUR_SPACE_ID
MockFlow boards (brainstorming, diagrams, charts)
npm install -g @mockflow/ideaboard-mcp
# Log in: opens your browser for secure OAuth login
mockflow-ideaboard-mcp login
mockflow-ideaboard-mcpWireframePro (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-mcpCreate .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" } } }
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 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, with no npm install needed. You also get exclusive tools like layout_board and read_wireframe.
// .vscode/mcp.json { "servers": { "mockflow-ideaboard": { "type": "http", "url": "http://localhost:21193/mcp" }, "mockflow-wireframepro": { "type": "http", "url": "http://localhost:21194/mcp" } } }
What you can ask Copilot to create.
Once MockFlow is connected, ask in plain language and Copilot draws it for you.
"Create a flowchart for the user registration process."
"Create an AWS architecture diagram for a serverless app."
"Create a kanban board for our product launch."
"Create a wireframe for a login page with social login."
"Read the current wireframe and convert to React."
"Create a mind map about machine learning concepts."
More MCP guides and packages.
Set up MockFlow in your other AI tools, or get the open source packages from npm.
Install the board MCP server from npm, then log in.
npm install -g @mockflow/ideaboard-mcp
Brainstorm with MockFlow MCP 
