Vibeleaderboard
Index / tool
Visit github.com
Category
Developer Tools
Rank
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 fileDesign file structure and elements data

  • Inspect design elements and properties

    Design file ID or element referenceElement properties, styles, and attributes

  • Modify design element properties

    Element reference and new property valuesUpdated design element

  • Create new design elements

    Element specifications and propertiesNew design element in file

  • Delete design elements

    Element reference or IDConfirmation of element removal

  • Query design file metadata

    Design file referenceFile information and project details

Tags

mcpdesignpenpotpluginai

Tech Stack

Node.js

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.