Penpot MCP Server

Penpot MCP is the official Model Context Protocol server maintained by the Penpot team. It connects MCP-compatible AI clients (Claude, Cursor, VS Code Copilot, Claude Code, etc.) to Penpot design files, enabling multi-directional workflows between design and code. The server exposes tools that allow an LLM to query design data, transform existing elements, and create new ones by executing code against the Penpot Plugin API inside the user's browser session.

Architecturally, it has three parts: an MCP server that AI clients connect to, a Penpot plugin that runs inside the design editor and executes work against the Plugin API, and a WebSocket bridge between them. Two deployment modes are supported: a remote, hosted variant (enabled per account under Integrations, authenticated with a user MCP key) and a local variant launched with npx @penpot/mcp@stable that uses your active Penpot browser session.

The original penpot/penpot-mcp repository has been archived and the code now lives in the main Penpot monorepo under penpot/penpot/tree/develop/mcp. The published npm package is @penpot/mcp.

Tools

Prerequisites

• An MCP-compatible AI client (Claude Desktop, Cursor, Claude Code, VS Code Copilot, etc.)
• A Penpot account with at least one design file open
• For local mode: Node.js v20 or v22

Option 1: Remote MCP (recommended)

1. In Penpot, go to Your account → Integrations → MCP Server and enable it.
2. Generate an MCP key (shown only once, save it).
3. Copy the server URL provided. It will look like:

https://<your-penpot-domain>/mcp/stream?userToken=YOUR_MCP_KEY

4. Add the URL to your MCP client configuration.
5. In Penpot, open a design file and choose File → MCP Server → Connect.

Option 2: Local MCP

Start the local server and plugin web server with:

npx @penpot/mcp@stable

Then load the development plugin in Penpot from http://localhost:4400/manifest.json and click "Connect to MCP server" in the plugin UI.

Claude Desktop config for the local server (using mcp-remote to bridge over HTTP):

{
  "mcpServers": {
    "penpot": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://localhost:4401/mcp", "--allow-http"]
    }
  }
}

Clients that speak Streamable HTTP natively can point directly at the endpoint:

{
  "mcpServers": {
    "penpot": {
      "transport": "http",
      "url": "http://localhost:4401/mcp"
    }
  }
}

Useful environment variables (local mode)

• PENPOT_MCP_SERVER_HOST (default localhost)
• PENPOT_MCP_SERVER_PORT (default 4401)
• PENPOT_MCP_WEBSOCKET_PORT (default 4402)
• PENPOT_MCP_REPL_PORT (default 4403)
• PENPOT_MCP_REMOTE_MODE (default false)
• PENPOT_MCP_LOG_LEVEL (default info)
• PENPOT_MCP_LOG_DIR

Note: the original penpot/penpot-mcp repo is archived. Current source lives in the main Penpot monorepo under penpot/penpot/tree/develop/mcp.

• Generate new components or page layouts in a Penpot file from a natural language brief, by letting the LLM call execute_code against the Plugin API.
• Audit an existing design file: ask the model to summarize structure, count components, or list inconsistencies using high_level_overview and execute_code.
• Bulk transform shapes (rename layers, normalize colors, apply spacing tokens) without writing the script yourself.
• Round-trip design and code: export shapes via export_shape for a coding agent to reference, or import generated images back with import_image.
• Onboard a coding agent to Penpot's Plugin API on the fly by calling penpot_api_info before authoring transformations.

• "Give me a high level overview of the current Penpot file, then list every frame whose name does not match our naming convention."
• "Create a 3-column pricing section in the open Penpot file using our existing button and card components."
• "Recolor all shapes currently using #4A90E2 to use the primary token from our design system."
• "Export the selected shape as a PNG and describe the layout so I can rebuild it in React."
• "Look up the Penpot Plugin API for text shapes, then update every heading on this page to use Inter Bold."

• Official, maintained by the Penpot team and published as @penpot/mcp on npm.
• Both hosted (remote with MCP key) and local self-hosted deployment options.
• Programmatic access via execute_code plus the Penpot Plugin API means almost any design operation is reachable, not just a fixed tool list.
• Works with the open-source Penpot platform, so self-hosters can run the entire stack without a SaaS dependency.

• The original penpot/penpot-mcp repository is archived; documentation is split between the help site and the monorepo subfolder, which can be confusing.
• Tooling is code-execution oriented (execute_code), so output quality depends heavily on the model's familiarity with the Penpot Plugin API.
• The plugin UI must stay open in the browser during a session; closing it disconnects the MCP server.
• Remote variant has reduced capabilities: no import_image from local disk and limited export_shape.

• Figma MCP server (official Dev Mode) for teams on Figma rather than Penpot.
• Framelink Figma MCP, a popular community Figma MCP server focused on giving coding agents design context.
• Community Penpot servers such as montevive/penpot-mcp for users who want a Python-based, REST API focused alternative to the official plugin-based server.