MCP server for self-hosted Penpot — AI-powered UI/UX design and prototyping (66 tools)
概览
An MCP server that gives AI agents (like Claude Code, Cursor, or any MCP-compatible client) to your self-hosted Penpot instance. AI can read, create, modify, and export design elements — from rectangles and text to full UI components — all through natural language. Think of it as the bridge between your AI assistant and your design tool. - go directly to PostgreSQL via asyncpg — fast and reliable, bypasses API overhead - go through Penpot's RPC API via httpx — ensures proper change tracking and undo history - use Penpot's built-in exporter (headless Chromium) for pixel-perfect SVG/PNG output - goes through the Browser Plugin bridge (port 4402) — shared architecture with the official Penpot MCP, enabling both servers to coexist and complement each other in the same AI workflow 1. running via Docker Compose (official guide) 2. and v2 installed 3.
README
以下为原文 README 节选，完整内容请查看原文。
Penpot MCP Server
AI-powered design tool access for self-hosted Penpot via Model Context Protocol.
What is this?
An MCP server that gives AI agents (like Claude Code, Cursor, or any MCP-compatible client) full programmatic access to your self-hosted Penpot instance. AI can read, create, modify, and export design elements — from rectangles and text to full UI components — all through natural language.
Think of it as the bridge between your AI assistant and your design tool.
Problems it solves
| Problem | Solution |
|---|---|
| Manual design work | AI creates UI components, layouts, and prototypes directly in Penpot |
| No programmatic API for Penpot | 68 tools covering projects, shapes, text, exports, comments, and more |
| Design-to-code gap | Generate CSS from any shape, export to SVG/PNG, extract design tokens |
| Repetitive tasks | Batch operations — rename shapes, update colors, create variants |
| Design system maintenance | Read/write components, colors, typographies programmatically |
Architecture
graph TB
AI["AI Agent\n(Claude Code · Cursor · Gemini CLI)"]
subgraph SERVERS["MCP Layer"]
MCP["penpot-mcp — Python\n68 tools · :8787\nDB reads + API writes + Plugin"]
OMCP["Penpot MCP — Official\n~20 tools · penpot/penpot monorepo\nPlugin API only · TypeScript"]
end
subgraph PENPOT["Penpot Stack (Docker)"]
PG["PostgreSQL\n:5432"]
BE["Backend\n:6060"]
FE["Frontend\n:9001"]
EX["Exporter\n:6061"]
end
subgraph BRIDGE["Browser Plugin Bridge"]
WS["WebSocket Server\n:4402"]
UI["ui.html\niframe · full browser API"]
PJ["plugin.js\nworker sandbox · penpot.*"]
end
AI -->|"Streamable HTTP :8787"| MCP
AI -->|"Streamable HTTP"| OMCP
MCP -->|"asyncpg · direct SQL"| PG
MCP -->|"httpx · RPC API"| BE
MCP -->|"PNG / SVG export"| EX
MCP |"WebSocket"| WS
OMCP |"WebSocket :4402"| WS
WS |"ws://localhost:4402"| UI
UI |"postMessage"| PJ
PJ -->|"penpot.* API"| FE
FE -.->|"proxy"| BE
BE --> EX
style AI fill:#7c3aed,color:#fff
style MCP fill:#2563eb,color:#fff
style OMCP fill:#0f766e,color:#fff
style PG fill:#16a34a,color:#fff
style BE fill:#ea580c,color:#fff
style FE fill:#ea580c,color:#fff
style EX fill:#ea580c,color:#fff
style WS fill:#0891b2,color:#fff
style UI fill:#0891b2,color:#fff
style PJ fill:#0891b2,color:#fff
Tri-layer access strategy:
安装
This server does not publish a one-line install command.
Open the repository installation guide 新手？先看 mcpskill.org 教程 →配置
{
"mcpServers": {
"penpot": {
"type": "http",
"url": "http://localhost:8787/mcp"
}
}
}