penpot

The Penpot MCP Server provides an LLM-friendly interface to interact with Penpot design files through the Model Context Protocol. It exposes MCP endpoints and a WebSocket-based plugin bridge so language models can query design data, transform designs, and even create new elements by running code inside the Penpot Plugin environment. This enables design-to-design, code-to-design, and design-to-code workflows where an AI assistant can inspect a project, generate assets, or automate repetitive design tasks within Penpot through structured MCP tasks.

To use it, run the MCP server and also start the accompanying Penpot MCP Plugin web server, then connect the Penpot plugin in Penpot to the MCP server. Clients (LLMs or tooling) can reach the server via the provided HTTP and SSE endpoints or via a stdio proxy if needed. The system supports both modern streamable HTTP (/mcp) and legacy SSE (/sse) transports, and a mcp-remote proxy can bridge stdio-based clients to HTTP/SSE transports when required.

Prerequisites:

• Node.js v22 (as tested by the project)
• npm (comes with Node.js) and npx

Installation and bootstrapping:

1. Ensure Node.js is installed. Verify with: node -v npm -v

2. Install dependencies for all components and prepare the workspace: npm install

3. Build and launch all components (MCP server and Penpot plugin server): npm run bootstrap

The bootstrap process will:

• install dependencies for all components
• build all components
• start all components

If you need to run components individually, you can navigate to the relevant subfolders (mcp-server, penpot-plugin, etc.) and run npm install, then npm run build (where applicable) followed by the appropriate start command per the project’s scripts.

Environment configuration:

• The Penpot MCP server can be configured via environment variables prefixed with PENPOT_MCP_. Refer to the repository documentation for the exact list of supported options and defaults.

Connecting clients:

• By default, the MCP server exposes HTTP and SSE endpoints on localhost:4401 (http://localhost:4401/mcp and http://localhost:4401/sse).
• For stdio-based clients, you can use the mcp-remote proxy (npm install -g mcp-remote) to forward stdio to HTTP/SSE: npx -y mcp-remote http://localhost:4401/sse --allow-http

Plugin and browser considerations:

• When connecting from a Penpot instance served on a different origin (e.g., https://design.penpot.app), ensure private network access is allowed in the browser due to modern web security restrictions.
• If using browsers with strict network policies, you may need to disable certain protections or use a compatible browser like Firefox for testing.

Troubleshooting tips:

• Check WebSocket connection logs in both the client (Penpot plugin UI) and the MCP server terminal for connection messages.
• If the plugin UI closes the connection unexpectedly, avoid closing the plugin UI window and verify the server remains running.
• Ensure that the plugin URL (http://localhost:4400/manifest.json by default) is accessible from your Penpot instance.