MCP

Bring MockFlow into your AI tools.

Create wireframes, flowcharts, mind maps and more, straight from Claude, Cursor or VS Code.

Connect to MCPSetup guides
Open source · Claude · Cursor · VS Code · ChatGPT
Choose your setup

Connect the way you work.

From a browser chat with no install, to the desktop app drawing on your open board, to a CLI that saves boards to your account.

Easiest · no install, no login

Loginless Web MCP

Add MockFlow as a connector in Claude.ai or ChatGPT. A new board is created and you get a shareable link.

  1. Step 1Open Claude.ai, then Settings, then Connectors
  2. Step 2Paste https://app.mockflow.com/ideaboard/mcp
  3. Step 3Ask Claude to create a flowchart

Best for managers, marketers and anyone who uses Claude.ai or ChatGPT in the browser.

Setup guide
Most powerful · right on your board

Desktop App MCP

Built into MockFlow Desktop. AI creates visuals directly on your open board, with no links and no waiting.

  1. Step 1Open the desktop app and a board project
  2. Step 2In Claude Code or Cursor, run claude mcp add --transport http -s user mockflow-ideaboard http://localhost:21193/mcp
  3. Step 3Ask: create a flowchart for...

Includes layout_board for bento grid layouts.

  1. Step 1Open the desktop app and a WireframePro project
  2. Step 2In Claude Code or Cursor, run claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp
  3. Step 3Ask: create a wireframe for...

Includes read_wireframe to export a wireframe to code.

Best for designers, product teams and daily MockFlow users. Works with offline file mode projects.

Download the app
For developers · saved to your account

CLI Web MCP

Install from npm, log in through the browser (OAuth), and boards are saved to your MockFlow account.

  1. Step 1npm install -g @mockflow/ideaboard-mcp
  2. Step 2mockflow-ideaboard-mcp login
  3. Step 3mockflow-ideaboard-mcp
  1. Step 1npm install -g @mockflow/wireframepro-mcp
  2. Step 2mockflow-wireframepro-mcp login
  3. Step 3mockflow-wireframepro-mcp

Best for developers using Claude Code, Cursor or VS Code Copilot.

npm package
Works with

Connect your favourite AI tools.

Step by step guides for each tool, with more on the way.

Claude.ai

Learn more

Claude Code

Learn more

Cursor

Learn more

VS Code Copilot

Learn more

Codex (OpenAI)

Coming soon

ChatGPT

Coming soon
Choose your tool

Brainstorm on the board, design in WireframePro.

Both MCP servers run on your own AI and land the result where you can keep editing it.

Board MCP creating flowcharts and mindmaps from AI prompts

Board: visual brainstorming

Flowcharts, mind maps, kanban boards, architecture diagrams, customer journeys, storyboards and more.

Set up the board MCP
WireframePro MCP converting HTML to editable wireframes

WireframePro: design

Convert HTML to wireframes, export wireframes to code, and create flowcharts and architecture diagrams.

WireframePro MCP
How it works

Describe it, generate it, refine it.

Your AI calls MockFlow MCP and the visual appears, ready for your team.

1

Describe your project

Tell your AI what you need: a flowchart, a wireframe, a kanban board.

2

Generate with AI

Your AI calls MockFlow MCP and the visual is created automatically.

3

Refine

Open it in MockFlow to edit, collaborate and share with your team.

Uses your context

Ask AI to read your codebase and documents, then draw architecture diagrams, turn docs into mind maps, or wireframe pages from your styleguide.

Adds to existing work

Pass a board or wireframe link to add new visuals to an existing project. New content is placed next to what is already there.

AI Skills

Ready made skills teach your AI how to create specific visuals. Browse the skills library.

Use cases

For every team, not just developers.

Anyone who already works with an AI assistant can turn a request into a visual.

Product manager using AI to create kanban boards and roadmaps

Product management

Plan sprints with AI generated kanban boards. Map user journeys. Create roadmap Gantt charts.

Engineer using AI to create architecture diagrams and flowcharts

Software engineering

Generate architecture diagrams and ER diagrams. Draw flowcharts for complex logic.

Designer converting wireframes to code with AI

Design and UX

Convert wireframes to code and code to wireframes. Move between design and development smoothly.

Marketer using AI to create campaign calendars and journey maps

Marketing and strategy

Create customer journey maps, campaign calendars and competitive analysis charts.

Film director using AI to create storyboards and production schedules

Film and media

Generate storyboards with cinematic descriptions, shot lists and production schedules.

Educator using AI to create mind maps and lesson plan visuals

Education and research

Create mind maps for lesson plans, flowcharts for processes and whiteboards for group work.

Open source

Built in the open.

Both MCP servers are on GitHub under the MIT license. Read the code, file issues, or send a pull request.

mockflow/ideaboard-mcpmockflow/wireframepro-mcp
# Board MCP server
npm install -g @mockflow/ideaboard-mcp
# WireframePro MCP server
npm install -g @mockflow/wireframepro-mcp
MIT License
Questions

Answers before you connect.

Setups, accounts, supported tools and limits.

What is MCP?
MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI assistants like Claude, Cursor and VS Code Copilot connect to external tools. Think of it as a universal plug that lets your AI talk to other software. With MockFlow's MCP servers, your AI can create flowcharts, wireframes, mind maps and more, without you drawing anything.
What is the difference between MCP and Mida?
Mida is MockFlow's built in AI assistant inside the board and WireframePro editors. It generates, changes and transforms content on your board with full context of your project.

MCP servers let you use MockFlow's visual tools from external AI tools like Claude Code, Cursor or VS Code Copilot. MCP suits you when you already work in your IDE or AI chat and want visuals without switching to MockFlow.

In short: Mida is the full experience inside MockFlow. MCP brings MockFlow's tools to wherever your AI already is.
Which MCP server should I use?
Loginless Web MCP if you use Claude.ai or ChatGPT in the browser and want quick visuals. No installation, no login. Boards are created as shareable links.

Desktop App MCP if you use the MockFlow Desktop App daily. It is the most powerful option: AI creates visuals directly on your open board, with extra tools like layout_board and read_wireframe.

CLI Web MCP if you are a developer using Claude Code, Cursor or VS Code Copilot. Boards are saved to your MockFlow account with OAuth login.
Do I need a MockFlow account?
Loginless Web MCP: no account needed. Boards are created as anonymous shareable links.

Desktop App MCP: yes, you need to be logged in to the MockFlow Desktop App.

CLI Web MCP: yes, you log in through the browser (OAuth) when you run mockflow-ideaboard-mcp login. Boards are saved to your account.
What is the board vs WireframePro?
The board is MockFlow's visual brainstorming space: flowcharts, mind maps, kanban boards, architecture diagrams, customer journey maps, storyboards, calendars, charts and more.

WireframePro is MockFlow's tool for wireframing and UI design. Its MCP server converts AI generated HTML into editable wireframe components, and exports wireframes back to AI for code generation with the read_wireframe tool.
Which AI tools are supported?
MockFlow MCP works with any MCP compatible AI tool, including Claude.ai (browser connector), Claude Code (terminal), Cursor, VS Code Copilot, ChatGPT (connector), Codex (OpenAI), and any tool that supports the Model Context Protocol.
Is it free?
The Loginless Web MCP is completely free, with no account. The CLI and Desktop App MCP use your MockFlow account, which has a free plan. The MCP npm packages are open source (MIT license) and free to use.
What are AI Skills?
AI Skills are ready made prompts that teach Claude Code how to use MockFlow MCP tools for specific tasks. For example, the decision flowchart skill creates a yes or no decision tree when you ask "Should I use React or Vue?" Skills are in the GitHub repo and the MockFlow Recipe Library.
Can I use MCP with offline or file mode projects?
Yes. The Desktop App MCP works with both cloud projects and local file mode projects (.board and .wire files). Components are created on the board and saved to the file automatically.
Are there rate limits?
Yes. Limits depend on how you connect and your plan. Only visualization tool calls count; protocol messages (initialize, tools/list, ping) are unlimited.

Board:
Loginless Web MCP: 5 visualizations per 30 minutes and 20 per day, per session
CLI MCP (Basic): 10 tool calls per 30 minutes, per user
CLI MCP (paid): 30 tool calls per minute, per user
Desktop App (Basic): 10 tool calls per 30 minutes
Desktop App (paid or App Store): 30 tool calls per minute

WireframePro:
CLI MCP (Basic): 10 tool calls per 30 minutes, per user
CLI MCP (paid): 30 tool calls per minute, per user
Desktop App (Basic): 10 tool calls per 30 minutes
Desktop App (paid or App Store): 30 tool calls per minute
Get started

Connect AI to your workflow.

Get started freeBook a demo
No install needed

Paste this into Claude.ai or ChatGPT as a connector and ask for a flowchart.

https://app.mockflow.com/ideaboard/mcp