penpot-mcp
starsforks
How to install penpot-mcp?
penpot/penpot-mcp
$git clone https://github.com/penpot/penpot-mcpPenpot integrates a LLM layer built on the Model Context Protocol (MCP) via Penpot's Plugin API to interact with a Penpot design file. Penpot's MCP server enables LLMs to perfom data queries, transformation and creation operations.
README.md
| 1 |  |
| 2 | |
| 3 | # Penpot's Official MCP Server |
| 4 | |
| 5 | Penpot integrates a LLM layer built on the Model Context Protocol (MCP) via Penpot's Plugin API to interact with a Penpot design file. Penpot's MCP server enables LLMs to perfom data queries, transformation and creation operations. |
| 6 | |
| 7 | Penpot's MCP Server is unlike any other you've seen. You get design-to- design, code-to-design and design-code supercharged workflows. |
| 8 | |
| 9 | |
| 10 | [](https://www.youtube.com/playlist?list=PLgcCPfOv5v57SKMuw1NmS0-lkAXevpn10) |
| 11 | |
| 12 | |
| 13 | ## Architecture |
| 14 | |
| 15 | The **Penpot MCP Server** exposes tools to AI clients (LLMs), which support the retrieval |
| 16 | of design data as well as the modification and creation of design elements. |
| 17 | The MCP server communicates with Penpot via the dedicated **Penpot MCP Plugin**, |
| 18 | which connects to the MCP server via WebSocket. |
| 19 | This enables the LLM to carry out tasks in the context of a design file by |
| 20 | executing code that leverages the Penpot Plugin API. |
| 21 | The LLM is free to write and execute arbitrary code snippets |
| 22 | within the Penpot Plugin environment to accomplish its tasks. |
| 23 | |
| 24 |  |
| 25 | |
| 26 | This repository thus contains not only the MCP server implementation itself |
| 27 | but also the supporting Penpot MCP Plugin |
| 28 | (see section [Repository Structure](#repository-structure) below). |
| 29 | |
| 30 | ## Demonstration |
| 31 | |
| 32 | [](https://v32155.1blu.de/penpot/PenpotFest2025.mp4) |
| 33 | |
| 34 | |
| 35 | ## Usage |
| 36 | |
| 37 | To use the Penpot MCP server, you must |
| 38 | * run the MCP server and connect your AI client to it, |
| 39 | * run the web server providing the Penpot MCP plugin, and |
| 40 | * open the Penpot MCP plugin in Penpot and connect it to the MCP server. |
| 41 | |
| 42 | Follow the steps below to enable the integration. |
| 43 | |
| 44 | |
| 45 | ### Prerequisites |
| 46 | |
| 47 | The project requires [Node.js](https://nodejs.org/) (tested with v22). |
| 48 | Following the installation of Node.js, the tools `npm` and `npx` should be |
| 49 | available in your terminal. |
| 50 | |
| 51 | ### 1. Build & Launch the MCP Server and the Plugin Server |
| 52 | |
| 53 | If it's your first execution, install the required dependencies: |
| 54 | ```shell |
| 55 | npm install |
| 56 | ``` |
| 57 | |
| 58 | Then build all components and start the two servers: |
| 59 | ```shell |
| 60 | npm run bootstrap |
| 61 | ``` |
| 62 | |
| 63 | This bootstrap command will: |
| 64 | * install dependencies for all components (`npm run install:all`) |
| 65 | * build all components (`npm run build:all`) |
| 66 | * start all components (`npm run start:all`) |
| 67 | |
| 68 | |
| 69 | ### 2. Load the Plugin in Penpot and Establish the Connection |
| 70 | |
| 71 | > [!NOTE] |
| 72 | > **Browser Connectivity Restrictions** |
| 73 | > |
| 74 | > Starting with Chromium version 142, the private network access (PNA) restrictions have been hardened, |
| 75 | > and when connecting to `localhost` from a web application served from a different origin |
| 76 | > (such as https://design.penpot.app), the connection must explicitly be allowed. |
| 77 | > |
| 78 | > Most Chromium-based browsers (e.g. Chrome, Vivaldi) will display a popup requesting permission |
| 79 | > to access the local network. Be sure to approve the request to allow the connection. |
| 80 | > |
| 81 | > Some browsers take additional security measures, and you may need to disable them. |
| 82 | > For example, in Brave, disable the "Shield" for the Penpot website to allow local network access. |
| 83 | > |
| 84 | > If your browser refuses to connect to the locally served plugin, check its configuration or |
| 85 | > try a different browser (e.g. Firefox) that does not enforce these restrictions. |
| 86 | |
| 87 | 1. Open Penpot in your browser |
| 88 | 2. Navigate to a design file |
| 89 | 3. Open the Plugins menu |
| 90 | 4. Load the plugin using the development URL (`http://localhost:4400/manifest.json` by default) |
| 91 | 5. Open the plugin UI |
| 92 | 6. In the plugin UI, click "Connect to MCP server". |
| 93 | The connection status should change from "Not connected" to "Connected to MCP server". |
| 94 | (Check the browser's developer console for WebSocket connection logs. |
| 95 | Check the MCP server terminal for WebSocket connection messages.) |
| 96 | |
| 97 | > [ |
People who liked this also viewed
6 picksType
- Figma-Context-MCPMCP server to provide Figma layout information to AI coding agents like CursorMCP ServersJul 2026
- sunnysideFigma-Context-MCPA comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs.MCP ServersApr 2026
- figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.MCP ServersJul 2026
- dcc-mcp-coreCore runtime and shared tooling for DCC-MCP: safe, skill-first MCP integration across Maya, Blender, Houdini, Photoshop, and custom DCC hosts.MCP ServersJul 2026
- godot-aiProduction-grade MCP server and AI tools for the Godot engine. A Snap to install. Totally free and fun.MCP ServersJul 2026
- freecad-mcpFreeCAD MCP(Model Context Protocol) serverMCP ServersJul 2026
