Penpot MCP server
Penpot's official MCP server lets agents read and manipulate your open-source design files — overview, inspect, export shapes, and run plugin code.
Penpot MCP is the official MCP server for Penpot, the open-source design and prototyping platform. It connects an AI agent to a live Penpot design file so the agent can understand layout, components, and styles and turn them into code that matches the mock, or make programmatic changes to the design itself. Rather than pasting screenshots, the agent works against the real file data through Penpot's plugin API.
The server exposes a compact, powerful tool set: high_level_overview returns a structured summary of the file or current page so the agent can orient itself, penpot_api_info surfaces the plugin API surface the agent can call, execute_code runs JavaScript against the file through the plugin (the escape hatch that makes querying, transforming, and creating elements possible), export_shape renders a shape to an image, and import_image brings an image into the design (local-file import is available only in local mode). It offers a recommended hosted remote endpoint — enable it under your account integrations, generate an MCP key, and connect via the stream URL with your userToken — or a local mode run with npx (@penpot/mcp). Either way you connect the Penpot plugin in the file (File → MCP Server → Connect), which talks to the server over WebSocket; MCP can be active in one browser tab at a time.
Quick install
Copy-paste configs are provided for all 8 supported clients. Pick your client below.
Available tools
| Tool | Description |
|---|---|
| high_level_overview | Return a structured high-level overview of the Penpot file or current page so the agent can understand its layout, components, and structure. |
| penpot_api_info | Surface the Penpot plugin API surface available to the agent, so it knows which operations it can run. |
| execute_code | Run JavaScript against the design file through the Penpot plugin, enabling queries, transformations, and creation of design elements. |
| export_shape | Render and export a shape from the design as an image (reduced capabilities in remote mode). |
| import_image | Import an image into the design. Importing from a local file path is available only in local mode. |
Required configuration
- PENPOT_MCP_SERVER_PORTOptional
Port the local MCP server listens on (default 4401). Local mode only. Optional.
- PENPOT_MCP_WEBSOCKET_PORTOptional
Port for the WebSocket connection to the Penpot plugin (default 4402). Local mode only. Optional.
What you can do with it
Turn a Penpot frame into code
The agent calls high_level_overview to understand the frame, then execute_code to read exact layout, components, and styles, generating markup and CSS that matches the design instead of guessing from a screenshot.
Automate edits across a file
Ask the agent to rename layers, swap a color, or generate variants; it uses penpot_api_info to learn the API and execute_code to apply the changes programmatically, then export_shape to preview the result.
FAQ
- Is it free?
- Yes. The MCP server is official and open source (MPL-2.0), and Penpot itself is free and open source. There is no per-call cost; you run it against your own Penpot account or instance.
- Does it support remote/OAuth?
- It offers a recommended hosted remote endpoint: enable the MCP Server under your account integrations, generate an MCP key, and connect via the stream URL with your userToken. A local mode is also available via npx @penpot/mcp.
- Do I need the Penpot plugin running?
- Yes. The server talks to the file through the Penpot MCP plugin over WebSocket, so you connect it in the file via File → MCP Server → Connect. MCP can be active in only one browser tab at a time.