27 de May de 2025 admin

We are very pleased to announce the launch of Penpot MCP, an innovative solution that allows you to interact with Penpot from our favorite AI (Claude Desktop, Cursor, …). This new MCP (Model Context Protocol) server establishes a revolutionary bridge between AI language models, such as Claude, and Penpot, the leading open-source platform for design and prototyping.

What is MCP (Model Context Protocol) and why is it so important?

MCP, or Model Context Protocol, is an open standard that defines how artificial intelligence models can interact in a structured and secure way with external applications, such as design tools, code editors or project management systems. MCP enables AI assistants to understand the work context and perform useful actions on that context, such as analysis, code generation or task automation.

What is Penpot?

Penpot is an open source platform for interface design and collaborative prototyping, designed for multidisciplinary teams that value freedom, interoperability and technological transparency. Unlike proprietary solutions such as Figma, Penpot stands out for several unique features:

  • Native design token support: Penpot allows you to define, manage and export design tokens natively, facilitating direct integration with design systems and frontend development workflows.
  • Use of web standards: Everything in Penpot is based on open technologies such as SVG and CSS, ensuring that files are accessible, editable and understandable outside of the platform. There are no proprietary concepts such as Autolayout, but rather the same principles that developers already know from web development are used.
  • Open source!

Demo: Generating code from a design

Start Now

Penpot MCP is available as a Python package and can be easily installed using pip or uv:

pip install penpot-mcp

# O usando uv (recomendado)
uvx penpot-mcp

Example of integration with Cursor IDE

To integrate Penpot MCP into Cursor IDE and allow the AI to interact with your Penpot files, add the following configuration in your Cursor settings file (e.g., .cursor/settings.json):

{
  "mcpServers": {
    "penpot": {
      "command": "uvx",
      "args": ["penpot-mcp"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app/api",
        "PENPOT_USERNAME": "your_penpot_username",
        "PENPOT_PASSWORD": "your_penpot_password"
      }
    }
  }
}
  • command and args show how to launch the Penpot MCP server using uvx.
  • At env you must enter the API URL of your Penpot instance and your credentials.

References

Tags: