
Penpot MCP
https://github.com/penpot/penpot-mcp- Category
- Developer Tools
- Rank
- No. 660Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- penpot
- GitHub
- 488 stars
- Date
About
Official Penpot MCP server — give AI agents direct access to your design files for inspection and edits.
What it does
Penpot MCP connects an AI client to an open Penpot file through a local server and browser plugin. The client can query design data, transform elements, create new elements, and run generated JavaScript inside Penpot’s plugin environment. HTTP or SSE carries MCP traffic, while WebSocket links the server to the plugin.
Why it's ranked here
The architecture supports unusually broad design automation because the agent can execute code against Penpot’s Plugin API instead of relying only on a narrow command set. Shared TypeScript contracts, correlated task responses, timeouts, and structured errors strengthen the bridge. However, setup has several moving parts, remote multi-user operation remains unfinished, and active development moved into Penpot’s main repository.
What's good
It covers retrieval, transformation, and creation rather than stopping at read-only inspection. Streamable HTTP serves modern MCP clients, while legacy SSE and an external proxy accommodate older client transports. Shared request and response types keep the server-plugin protocol consistent. Environment settings cover addresses, ports, logging, and remote mode. A browser REPL also supports direct experimentation with plugin code.
Tradeoffs
Users must run two servers, load a development plugin URL, keep the plugin window open, and manually connect it. Browser private-network rules can block localhost access or require explicit permission. Clients limited to standard input and output need an extra proxy. The agent may execute arbitrary code inside the plugin environment, which demands careful trust boundaries. Multi-user mode is testing-only, uses a hard-coded token, and cannot support local-file import or export tools.
How to use it well
Use it when an engineer or designer wants an AI client to inspect and programmatically reshape an active Penpot document, especially for design-to-design or code-to-design experiments. Start locally with a modern HTTP-capable MCP client, keep the plugin interface open, and review generated operations before trusting them. It does not replace production authentication, mature shared hosting, or remote file import and export infrastructure.
Technical notes+
The private npm monorepo in package.json orchestrates common/, mcp-server/, and penpot-plugin/, with python-scripts/ reserved for development data preparation. common/src/types.ts defines correlated task request and response contracts. mcp-server/src/PluginTask.ts assigns UUIDs and exposes promise resolution and rejection, while mcp-server/src/ReplServer.ts forwards JavaScript through the plugin bridge. penpot-plugin/src/plugin.ts registers only the execute-code task handler, and penpot-plugin/src/main.ts relays WebSocket messages through the plugin UI. Despite its type-safety description, mcp-server/src/Tool.ts casts unknown arguments without invoking the supplied Zod schema. docs/multi-user-mode.md marks shared-server mode incomplete and documents its hard-coded testing token. README.md says this repository is archived and its contents now live in the main Penpot repository.
Observed
- Primary language
- Core server, shared protocol, and plugin components are written in TypeScript; Python scripts prepare development data.
- Packaging
- Private npm monorepo with coordinated install, build, start, formatting, and bootstrap scripts.
- Interfaces
- MCP over Streamable HTTP and legacy SSE, plus WebSocket communication between server and Penpot plugin.
- Runtime
- Requires Node.js and was tested with Node.js 22.
- Client compatibility
- HTTP-capable MCP clients connect directly; stdio-only clients require an external proxy.
- Repository status
- The standalone repository is archived, with its contents integrated into the main Penpot repository.
- Structure
- Monorepo contains shared types, an MCP server, a Penpot plugin, and Python development helpers.
Read from README.md, package.json, docs/multi-user-mode.md, penpot-plugin/vite.config.ts, python-scripts/prepare_api_docs.py, common/src/index.ts, common/src/types.ts, mcp-server/src/Tool.ts, mcp-server/src/index.ts, mcp-server/src/logger.ts, penpot-plugin/src/main.ts, mcp-server/src/ApiDocs.ts, penpot-plugin/src/plugin.ts, mcp-server/src/PluginTask.ts, mcp-server/src/ReplServer.ts.
What it can do
Read design file contents
Penpot design file → Design file structure and elements data
Inspect design elements and properties
Design file ID or element reference → Element properties, styles, and attributes
Modify design element properties
Element reference and new property values → Updated design element
Create new design elements
Element specifications and properties → New design element in file
Delete design elements
Element reference or ID → Confirmation of element removal
Query design file metadata
Design file reference → File information and project details
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.