Self-Hosted, Open-Source Design System

Contribution
8

Hi @Sulcalibur :slight_smile:

I definitely recommend trying out the Penpot MCP locally. It’s a game changer.
I’ve been doing a lot of testing over the last few days and, while it’s not in its most optimized version yet, the amount of things you can do with it in Penpot is incredible. It’s not just ‘design to code,’ but ‘design to design’ as well.

Here is a quick local installation guide and a video where you can see more of what the MCP can do. I hope you find it helpful!!!

  1. Clone the repo: https://github.com/penpot/penpot-mcp

  2. Install the server from the cloned “penpot-mcp” folder (npm-install + npm-run-bootstrap).

  3. Install the plugin in Penpot with the server running—Firefox is recommended (http://localhost:4400/manifest.json).

  4. Install your favorite IDE (like VSCode, Cursor, …)

  5. In your IDE, navigate to: Preferences → IDE Settings → Tools & MCP. (or similar)

  6. Install the Penpot custom server in your IDE using the following configuration:

JSON

{
  "mcpServers": {
    "penpot-mcp": {
      "url": "http://localhost:4401/mcp",
      "type": "http"
    }
  },
  "inputs": []
}

  1. Verify that your IDE has enabled the penpot-mcp server and recognized the 5 tools (check under “Tools & MCP” in your IDE).

  2. Test the connection: Ask the IDE agent to tell you the name of the selected board in Penpot using the MCP (for example).

Recap:

  1. MCP Server running in your local terminal (npm-run-bootstrap).

  2. Plugin running in Penpot and connected to the server (Firefox recommended).

  3. MCP Server enabled in your chosen IDE.

Check this video:

3 Likes