[!IMPORTANT] This repository has been archived on 2026-02-03.
Its contents have been fully integrated into the main Penpot repository: https://github.com/penpot/penpot/tree/develop/mcp

Penpot's Official MCP Server

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.

Penpot's MCP Server is unlike any other you've seen. You get design-to- design, code-to-design and design-code supercharged workflows.

Architecture

The Penpot MCP Server exposes tools to AI clients (LLMs), which support the retrieval of design data as well as the modification and creation of design elements. The MCP server communicates with Penpot via the dedicated Penpot MCP Plugin, which connects to the MCP server via WebSocket.
This enables the LLM to carry out tasks in the context of a design file by executing code that leverages the Penpot Plugin API. The LLM is free to write and execute arbitrary code snippets within the Penpot Plugin environment to accomplish its tasks.

This repository thus contains not only the MCP server implementation itself but also the supporting Penpot MCP Plugin (see section Repository Structure below).

Demonstration

Usage

To use the Penpot MCP server, you must

• run the MCP server and connect your AI client to it,
• run the web server providing the Penpot MCP plugin, and
• open the Penpot MCP plugin in Penpot and connect it to the MCP server.

Follow the steps below to enable the integration.

Prerequisites

The project requires Node.js (tested with v22). Following the installation of Node.js, the tools npm and npx should be available in your terminal.

1. Build & Launch the MCP Server and the Plugin Server

If it's your first execution, install the required dependencies:

npm install

Then build all components and start the two servers:

npm run bootstrap

This bootstrap command will:

• install dependencies for all components (npm run install:all)
• build all components (npm run build:all)
• start all components (npm run start:all)

2. Load the Plugin in Penpot and Establish the Connection

[!NOTE] Browser Connectivity Restrictions

Starting with Chromium version 142, the private network access (PNA) restrictions have been hardened, and when connecting to localhost from a web application served from a different origin (such as https://design.penpot.app), the connection must explicitly be allowed.

Most Chromium-based browsers (e.g. Chrome, Vivaldi) will display a popup requesting permission to access the local network. Be sure to approve the request to allow the connection.

Some browsers take additional security measures, and you may need to disable them. For example, in Brave, disable the "Shield" for the Penpot website to allow local network access.

If your browser refuses to connect to the locally served plugin, check its configuration or try a different browser (e.g. Firefox) that does not enforce these restrictions.

1. Open Penpot in your browser
2. Navigate to a design file
3. Open the Plugins menu
4. Load the plugin using the development URL (http://localhost:4400/manifest.json by default)
5. Open the plugin UI
6. In the plugin UI, click "Connect to MCP server". The connection status should change fro

... View full README on GitHub