We have released the first MCP server for Penpot.
We are thrilled to announce the launch of Penpot MCP, an innovative solution that enables interaction with Penpot from our favorite AI (Claude Desktop, Cursor, …). This new MCP (Model Context Protocol) server establishes a revolutionary bridge between AI language models, like Claude, and Penpot, the leading open-source design and prototyping platform.
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 allows AI assistants to understand the working 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 collaborative interface design and prototyping, designed for multidisciplinary teams that value freedom, interoperability, and technological transparency. Unlike proprietary solutions like Figma, Penpot stands out for several unique features:
- Native design tokens 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 like SVG and CSS, which ensures files are accessible, editable, and understandable outside the platform. There are no proprietary concepts like Autolayout; instead, the same principles developers already know from web development are used.
- Open source!
Demo: generating code from a design
https://www.youtube.com/embed/vOMEh-ONN1k?feature=oembed
Get Started Now
Penpot MCP is available as a Python package and can be easily installed via pip or uv:
pip install penpot-mcp
# Or using uv (recommended)
uvx penpot-mcp
Example 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 to 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"
}
}
}
}
commandandargsindicate how to launch the Penpot MCP server usinguvx.- In
envyou must put the API URL of your Penpot instance and your credentials.