Penpot MCP

Read and edit open-source Penpot design files, and export them to HTML, CSS or React

Penpot is the open-source Figma alternative. Its official MCP server gives your agent read and write access to your design files with no paid seat, on Penpot's cloud or on your own self-hosted instance.
The agent can summarize a file's design system, create components in the style of existing ones and export a board as HTML and CSS or React. It works on the page you have focused in Penpot. You can run it hosted, with nothing installed, or locally through a plugin when you need access to files on your machine.

Watch out

  • The agent can rename, move and delete objects on the open page. Penpot advises trying it on a copy, not your production file.
  • It works only on the focused page in one active Penpot tab. Browsers may suspend the tab in long sessions, so keep it active.
  • Treat the MCP key like a password. Regenerating it revokes the old one.

Install

Terminal

Loading editor...

claude mcp add --transport http penpot "https://design.penpot.app/mcp/stream?userToken=YOUR_MCP_KEY"
Generate the key in Penpot under Your account, Integrations, MCP Server. It is shown once. Then open a file and choose File, MCP Server, Connect. For the local version, run npx -y @penpot/mcp@stable, load http://localhost:4400/manifest.json as a plugin and point your client at http://localhost:4401/mcp.
© 2026 Paralect, Inc 651 N Broad St, Suite 206, Middletown, 19709, Delaware, United States