Connect MockFlow MCP to Claude Code, Cursor, VS Code and Codex

Coding tools such as Claude Code, Cursor, VS Code with Copilot and Codex connect to MockFlow through two MCP servers that run on your computer. Your AI reads your code or follows your prompt, and the result is created in MockFlow: an architecture diagram of a service, a flowchart of a process, a kanban board of tasks, or a wireframe of a screen you are about to build.

You can use one or both. The steps are the same for each; the examples below use the server for boards. For the server for wireframes, use wireframepro in place of ideaboard and port 21194 in place of 21193.

Install and sign in

You need Node.js 18 or newer and a MockFlow account.

Install the server:

npm install -g @mockflow/ideaboard-mcp

Sign in once. A browser window opens; sign in to MockFlow and allow access. Your sign-in is saved on your computer in ~/.mockflow/credentials.json.

mockflow-ideaboard-mcp login

Start the server and leave the window open:

mockflow-ideaboard-mcp

The server shows the address your AI tool connects to, http://localhost:21193/mcp, and the command to add it to Claude Code.

Add MockFlow MCP to your AI tool

Claude Code

claude mcp add --transport http -s user mockflow-ideaboard http://localhost:21193/mcp

Cursor

In Cursor, open Settings, then Cursor Settings, then Tools & MCP, and add:

{
  "mcpServers": {
    "mockflow-ideaboard": {
      "url": "http://localhost:21193/mcp"
    }
  }
}

VS Code with GitHub Copilot

Create a file named .vscode/mcp.json in your project:

{
  "servers": {
    "mockflow-ideaboard": {
      "type": "http",
      "url": "http://localhost:21193/mcp"
    }
  }
}

Codex

codex mcp add mockflow-ideaboard http://localhost:21193/mcp

Other MCP clients connect the same way, with the address http://localhost:21193/mcp.

Ask for a visual

Ask your AI tool in your own words. Naming MockFlow helps, because coding tools have many tools and may otherwise answer with code:

• "Using mockflow-ideaboard, create a flowchart of the user registration process"

• "Read this service and draw its cloud architecture in MockFlow"

• "Create a MockFlow kanban board for the tasks in TODO.md"

• "Using mockflow-wireframepro, create a wireframe for a login page with email, password and social login"

The server creates the board or wireframe in your MockFlow account and returns a link. Open it in your browser to view, edit and share it.

If you want your AI agent to draw live on the board you have open, and to use Mida with your own AI, see MockFlow Bridge and the plugins for Claude Code and Codex.