How to Connect MockFlow to Claude — MCP Setup Guide

Choose Your Setup

Two ways to connect Claude to MockFlow

Easiest — 30 seconds

Claude.ai (Browser)

Add MockFlow as a connector in Claude.ai. No installation, no login required. Boards are created in the cloud and you get a shareable URL back.

Best for: Managers, strategists, anyone who uses Claude.ai in the browser

Most flexible

Claude Code (Terminal)

Install the MockFlow MCP npm package and connect via CLI. OAuth login via browser. Boards are saved to your MockFlow account.

Best for: Developers using Claude Code in the terminal

Option A

Claude.ai Setup (Browser)

Add MockFlow as a connector in Claude.ai — no installs, no login.

Step 1

Open Claude.ai and go to Settings

Click the gear icon or navigate to your account settings.

Step 2

Click on Connectors

Navigate to the Connectors section in the settings panel.

Navigating to Connectors in Claude.ai Settings

Step 3

Click Add Connector

Click the "Add connector" button to add a new MCP server.

Clicking Add Connector button in Claude.ai

Step 4

Enter the MCP URL

Paste the IdeaBoard MCP URL into the connector URL field:

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

Entering MockFlow MCP URL in Claude.ai connector settings

Step 5

Start creating

Open a new conversation and ask Claude to create a flowchart, mind map, kanban board, or any of the 16 visualization types.

Asking Claude to create a flowchart using MockFlow MCP connector

Option B

Claude Code Setup (Terminal)

Install the npm package, authenticate via browser, and add to Claude Code.

IdeaBoard (brainstorming, diagrams, charts)

# Install the IdeaBoard MCP package
npm install -g @mockflow/ideaboard-mcp

# Log in — opens your browser for secure OAuth login
mockflow-ideaboard-mcp login

# Start the MCP server
mockflow-ideaboard-mcp

# Add to Claude Code
claude mcp add --transport http -s user mockflow-ideaboard http://localhost:21193/mcp

Target a specific design space: mockflow-ideaboard-mcp --space=YOUR_SPACE_ID

WireframePro (wireframes, design-to-code)

# Install the WireframePro MCP package
npm install -g @mockflow/wireframepro-mcp

# Log in — opens your browser for secure OAuth login
mockflow-wireframepro-mcp login

# Start the MCP server
mockflow-wireframepro-mcp

# Add to Claude Code
claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp

Target a specific design space: mockflow-wireframepro-mcp --space=YOUR_SPACE_ID

AI Skills

Pre-built skills for Claude Code

Install skills that teach Claude Code when and how to use IdeaBoard tools automatically. Browse the Recipe Library for more, or create your own with the AI Prompt Box in IdeaBoard.

# Install a skill
mkdir -p ~/.claude/skills/mockflow-decision-flowchart
# Copy SKILL.md from github.com/mockflow/ideaboard-mcp/skills/

# Then just ask naturally:
"Should I use React or Vue?"
# Claude auto-creates a decision flowchart on IdeaBoard

Try These Prompts