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

> Run the MockFlow MCP servers on your computer and add them to Claude Code, Cursor, VS Code Copilot, Codex or another MCP client to create boards and wireframes from your code editor.

Source: https://mockflow.com/docs/connect-mockflow-mcp-to-coding-tools

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.

| Server | Creates | Command | Address |
| --- | --- | --- | --- |
| MockFlow MCP for boards | Boards with flowcharts, mind maps, kanban boards, timelines, architecture diagrams and more | `mockflow-ideaboard-mcp` | `http://localhost:21193/mcp` |
| MockFlow MCP for wireframes | Wireframes, flowcharts and cloud architecture diagrams in WireframePro | `mockflow-wireframepro-mcp` | `http://localhost:21194/mcp` |

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:

```bash
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`.

```bash
mockflow-ideaboard-mcp login
```

Start the server and leave the window open:

```bash
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

```bash
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:

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

### VS Code with GitHub Copilot

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

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

### Codex

```bash
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.

> **Plan** The MockFlow MCP servers work on every plan, with a limit on how many items you can create in a period of time. Plus and Max have higher limits. See [MockFlow MCP limits on each plan](/docs/mockflow-mcp-limits).

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](/docs/what-is-mockflow-bridge) and the plugins for [Claude Code](/docs/mockflow-plugin-for-claude-code) and [Codex](/docs/mockflow-plugin-for-codex).