# Use WireframePro from AI assistants (WireframePro MCP)

> Connect Claude Code, Cursor, VS Code or Codex to WireframePro with the WireframePro MCP server, and create wireframes, flowcharts and cloud diagrams from a prompt.

Source: https://mockflow.com/docs/wireframepro-mcp

The WireframePro MCP server connects AI assistants to WireframePro. MCP (Model Context Protocol) is the open standard AI apps use to work with other tools. With it, you can ask Claude Code, Cursor or another assistant for screens in the conversation, and the AI creates them as editable wireframes in a WireframePro project.

![Installing and starting the WireframePro MCP server in a terminal, asking Claude Code for a pet adoption app in a sketchy mobile style, and three screens appearing in a WireframePro project: Adopt a pet, Biscuit and Adoption form](https://assets.mockflow.com/docs/media/fa1574364558463982dd9d44fa0d9413.webp)

## Set up the MCP server

You need Node.js on your computer.

```bash
npm install -g @mockflow/wireframepro-mcp
mockflow-wireframepro-mcp login
mockflow-wireframepro-mcp
```

The login command opens your browser to sign in to MockFlow. The last command starts the server at `http://localhost:21194/mcp`. Add that address as an MCP server in your AI assistant, such as Claude Code, Cursor, VS Code Copilot or Codex. You can also run it without installing, with `npx @mockflow/wireframepro-mcp`.

## What you can ask for

- **Wireframes:** web or mobile screens, in the default or sketchy style, for example _Wireframe a pet adoption app: a list of pets, a pet profile and an adoption form_.
- **Flowcharts:** for example _Draw the password reset flow_.
- **Cloud architecture diagrams:** for example _Diagram our web app on AWS with a load balancer, two app servers and a database_.

To add screens to an existing project, include the project's link in your request.

## Use it from the desktop app

The MockFlow desktop app has the MCP server built in, so AI agents can create and read wireframes in the .wire files you have open. See [Use AI agents on board files](/docs/ai-agents-desktop-app). In the editor, **AI** > **Add MCP Server** shows the setup for both.

## Limits

On the Basic plan, the MCP server allows 10 requests every 30 minutes. Paid plans allow 30 requests a minute. See [MockFlow pricing](https://mockflow.com/pricing/) for details.

## Next steps

- [What is the MockFlow MCP server](/docs/what-is-mockflow-mcp), for boards
- [Generate wireframes with AI](/docs/wireframepro-ai)