by montevive
Integrate Penpot with electronic design automation software for browsing, retrieving, and exporting UI designs easily us
Connects AI assistants like Claude to Penpot design files, enabling automated analysis of UI/UX designs and conversion of visual components into functional code.
Penpot is a community-built MCP server published by montevive that provides AI assistants with tools and capabilities via the Model Context Protocol. Integrate Penpot with electronic design automation software for browsing, retrieving, and exporting UI designs easily us It is categorized under ai ml, developer tools.
You can install Penpot in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.
MIT
Penpot is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.
Add new capabilities to Claude beyond text generation
Example
Access external data sources, execute code, interact with tools and services
Transform Claude from chatbot to action-taking agent
Provide Claude with access to relevant context and data
Example
Load project documentation, access knowledge bases, query databases
Get more accurate, context-aware responses
Automate multi-step workflows combining AI and external tools
Example
Research → Summarize → Create document → Send notification
Complete complex tasks end-to-end without manual steps
Share your MCP server with the developer community
I recommend Penpot for teams standardizing on MCP; the explainx.ai page compares cleanly with sibling servers.
I recommend Penpot for teams standardizing on MCP; the explainx.ai page compares cleanly with sibling servers.
Penpot reduced integration guesswork — categories and install configs on the listing matched the upstream repo.
Strong directory entry: Penpot surfaces stars and publisher context so we could sanity-check maintenance before adopting.
Useful MCP listing: Penpot is the kind of server we cite when onboarding engineers to host + tool permissions.
According to our notes, Penpot benefits from clear Model Context Protocol framing — fewer ambiguous “AI plugin” claims.
We evaluated Penpot against two servers with overlapping tools; this profile had the clearer scope statement.
We wired Penpot into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.
Useful MCP listing: Penpot is the kind of server we cite when onboarding engineers to host + tool permissions.
Penpot is among the better-indexed MCP projects we tried; the explainx.ai summary tracks the official description.
showing 1-10 of 74
Penpot MCP is a revolutionary Model Context Protocol (MCP) server that bridges the gap between AI language models and Penpot, the open-source design and prototyping platform. This integration enables AI assistants like Claude (in both Claude Desktop and Cursor IDE) to understand, analyze, and interact with your design files programmatically.
Check out our demo video to see Penpot MCP in action:
pip install penpot-mcp
# Install directly with uvx (when published to PyPI)
uvx penpot-mcp
# For local development, use uvx with local path
uvx --from . penpot-mcp
# Or install in a project with uv
uv add penpot-mcp
# Clone the repository
git clone https://github.com/montevive/penpot-mcp.git
cd penpot-mcp
# Using uv (recommended)
uv sync
uv run penpot-mcp
# Or using traditional pip
python -m venv .venv
source .venv/bin/activate # On Windows: .venv\Scripts\activate
pip install -e .
Create a .env file based on env.example with your Penpot credentials:
PENPOT_API_URL=https://design.penpot.app/api
PENPOT_USERNAME=your_penpot_username
PENPOT_PASSWORD=your_penpot_password
PORT=5000
DEBUG=true
⚠️ CloudFlare Protection Notice: The Penpot cloud site (penpot.app) uses CloudFlare protection that may occasionally block API requests. If you encounter authentication errors or blocked requests:
- Open your web browser and navigate to https://design.penpot.app
- Log in to your Penpot account
- Complete any CloudFlare human verification challenges if prompted
- Once verified, the API requests should work normally for a period of time
# Using uvx (when published to PyPI)
uvx penpot-mcp
# Using uvx for local development
uvx --from . penpot-mcp
# Using uv in a project (recommended for local development)
uv run penpot-mcp
# Using the entry point (if installed)
penpot-mcp
# Or using the module directly
python -m penpot_mcp.server.mcp_server
To debug the MCP server, you can:
.env file by setting DEBUG=true# Test API connection with debug output
python -m penpot_mcp.api.penpot_api --debug list-projects
# Get details for a specific project
python -m penpot_mcp.api.penpot_api --debug get-project --id YOUR_PROJECT_ID
# List files in a project
python -m penpot_mcp.api.penpot_api --debug list-files --project-id YOUR_PROJECT_ID
# Get file details
python -m penpot_mcp.api.penpot_api --debug get-file --file-id YOUR_FILE_ID
The package includes utility command-line tools:
# Generate a tree visualization of a Penpot file
penpot-tree path/to/penpot_file.json
# Validate a Penpot file against the schema
penpot-validate path/to/penpot_file.json
# Start your MCP server in one terminal
python -m penpot_mcp.server.mcp_server
# In another terminal, use mcp-cli to monitor and interact with your server
python -m mcp.cli monitor python -m penpot_mcp.server.mcp_server
# Or connect to an already running server on a specific port
python -m mcp.cli monitor --port 5000
# Start your MCP server in one terminal
python -m penpot_mcp.server.mcp_server
# In another terminal, run the MCP Inspector (requires Node.js)
npx @modelcontextprotocol/inspector
# Run the example client
penpot-client
server://info - Server status and informationpenpot://schema - Penpot API schema as JSONpenpot://tree-schema - Penpot object tree schema as JSONrendered-component://{component_id} - Rendered component imagespenpot://cached-files - List of cached Penpot fileslist_projects - List all Penpot projectsget_project_files - Get files for a specific projectget_file - Retrieve a Penpot file by its ID and cache itexport_object - Export a Penpot object as an imageget_object_tree - Get the object tree structure for a Penpot objectsearch_object - Search for objects within a Penpot file by nameThe Penpot MCP server can be integrated with AI assistants using the Model Context Protocol. It supports both Claude Desktop and Cursor IDE for seamless design workflow automation.
For detailed Claude Desktop setup instructions, see CLAUDE_INTEGRATION.md.
Add the following configuration to your Claude Desktop config file (~/Library/Application Support/Claude/claude_desktop_config.json on macOS or %APPDATA%\Claude\claude_desktop_config.json on Windows):
{
"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"
}
}
}
}
Cursor IDE supports MCP servers through its AI integration features. To configure Penpot MCP with Cursor:
Install the MCP server (if not already installed):
pip install penpot-mcp
Configure Cursor settings by adding the MCP server to your Cursor configuration. Open Cursor settings and add:
{
Prerequisites
Time Estimate
15-60 minutes depending on server complexity
Steps
Troubleshooting
✓ Do
✗ Don't
💡 Pro Tips
Architecture
Model Context Protocol standardizes how AI hosts (Claude, Cursor) communicate with external tools and data sources through server implementations.
Protocols
Compatibility
✓ Use when
Use when you need Claude to access external data, execute actions, or integrate with tools. Best for extending AI capabilities beyond conversation.
✗ Avoid when
Avoid when native integrations exist (use official APIs directly), for real-time critical systems, or when security/compliance requires zero external dependencies.