Connect MockFlow to Cursor.
Create wireframes, flowcharts and architecture diagrams alongside your code in Cursor.
Connect MockFlow to Cursor in minutes.
Install the npm package, log in through the browser, then add the MCP server in Cursor settings.
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-mcpOpen Cursor Settings, then Tools & MCP
Add a new MCP server with the JSON configuration below.
Add MCP server configuration
For MockFlow:
// .cursor/mcp.json { "mcpServers": { "mockflow-ideaboard": { "url": "http://localhost:21193/mcp" } } }
For WireframePro:
// .cursor/mcp.json { "mcpServers": { "mockflow-wireframepro": { "url": "http://localhost:21194/mcp" } } }
Start prompting in Cursor
Open the AI chat in Cursor 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 .cursor/mcp.json configuration, with no npm install needed. You also get exclusive tools like layout_board and read_wireframe.
// .cursor/mcp.json { "mcpServers": { "mockflow-ideaboard": { "url": "http://localhost:21193/mcp" } } }
What you can ask Cursor to create.
Once MockFlow is connected, ask in plain language and Cursor 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 
