Penpot
by penpot
Penpot's own MCP server bridges an agent to a live design file over the Plugin API, letting it read layout structure, export shapes, and run code inside the plugin sandbox.
Add to Claude Code
claude mcp add penpot -- npx @penpot/mcp@stable
About
This is Penpot's first-party MCP server, not a community reimplementation. It connects an MCP client to a running Penpot design file through a dedicated plugin over WebSocket, rather than a static export. That live connection is what lets execute_code run arbitrary snippets inside the Penpot Plugin environment: an agent can query the current file's structure and then act on it in the same session, instead of working from a one-time snapshot.
It ships in two modes. Locally, npx @penpot/mcp@stable gives the full tool set, including import_image and unrestricted export_shape. Penpot also offers a hosted remote mode (enabled from a Penpot account's Integrations settings) that trades some capability (no local-path image import, limited shape export) for not having to run anything yourself, authenticated via a per-account MCP key instead of a local process.
Key features
- Official first-party MCP server maintained by the Penpot team, connected live via the Plugin API over WebSocket
- execute_code tool runs arbitrary snippets inside the Penpot Plugin sandbox for custom read/transform/create operations
- high_level_overview and penpot_api_info give an agent the file's structure before it makes changes
- export_shape and import_image for pulling assets out of, or bringing images into, a design file
- Both local (npx) and hosted remote (account-integration) deployment modes
- Supports design-to-code and code-to-design directions, generating HTML/CSS from a design or updating a design from code
Use cases
- Extracting a component's layout structure so an agent can generate matching HTML/CSS
- Automating repetitive design tasks like creating design tokens or generating component variants
- Letting an agent inspect a design file's current state before proposing edits, instead of working blind
- Connecting a hosted Penpot account to an MCP client without running a local server
Available tools
execute_code
Runs a code snippet inside the Penpot Plugin environment to query or modify the open design file.
high_level_overview
Returns a structural summary of the current design file's boards, layers, and components.
penpot_api_info
Returns metadata about the Penpot Plugin API surface available to execute_code.
export_shape
Exports a specific shape or board from the design file.
import_image
Imports an image asset into the current design file.
Frequently asked questions
Does this work with self-hosted Penpot?
The local npx mode connects to whatever Penpot instance the plugin is running against, self-hosted or not. The hosted remote mode is tied to a Penpot account's own Integrations settings.
What's the difference between local and remote mode?
Local mode (npx @penpot/mcp@stable) has the full tool set, including import_image from local paths. Remote/hosted mode skips local image import and has a more limited export_shape, but doesn't require running anything yourself.