Draft Punk MCP Server

An MCP (Model Context Protocol) server that generates Unicode wireframes in the Draft Punk editor. This is your own implementation, functionally equivalent to the Wiretext MCP (@wiretext/mcp).

Installation

npm install draftpunk-mcp

Or for local development (from project root):

cd packages/draftpunk-mcp
npm install
npm run build

Usage

With Cursor

Add to your ~/.cursor/mcp.json:

{
  "mcpServers": {
    "draftpunk": {
      "command": "node",
      "args": ["/path/to/draftpunk-mcp/dist/index.js"]
    }
  }
}

Or use npx:

{
  "mcpServers": {
    "draftpunk": {
      "command": "npx",
      "args": ["-y", "draftpunk-mcp"]
    }
  }
}

Running Directly

node dist/index.js

Tools

create_wireframe

Generate an editable Draft Punk URL from wire objects.

Parameters:

• objects (required): Array of wire objects (box, text, line, arrow, component)
• layers (optional): Named layers (accepted for compatibility, but not used by Draft Punk)
• baseUrl (optional): Base URL for the editor (default: http://localhost:5173)

Returns: A URL that opens in the Draft Punk editor.

render_wireframe

Render wire objects as ASCII/Unicode art text for preview.

Parameters:

• objects (required): Array of wire objects
• layers (optional): Named layers (accepted for compatibility)

Returns: ASCII/Unicode preview of the wireframe.

Supported Components

Draft Punk supports these component types:

• button, input, select, checkbox, radio
• table, modal, browser, card
• navbar, tabs, progress
• textarea, slider, toggle
• accordion, sidebar
• avatar, badge, breadcrumb
• dropdown, search, stepper
• calendar, list, divider
• tooltip, tag, spinner, pagination
• Mobile: statusbar, tabbar, keyboard, appbar, fab, bottomsheet, segmentedcontrol, chip

Unsupported Wiretext Components

These Wiretext components are not supported and will be converted to boxes:

• icon, image, alert, rating, skeleton

Layout Rules

The tools include comprehensive layout rules in their descriptions. Key points:

• Grid is character-based (1 cell = 1 char wide × 1 char tall)
• position {col, row} is the top-left corner (0-based)
• Boxes/components have 1-cell borders
• Nest children at least +2 col/row from container
• Use zIndex for render order (higher = on top)

Development

# Build
npm run build

# Run
npm start

License

MIT