Penpot
MCP server for Penpot - Connect AI assistants to Penpot design platform via Model Context Protocol
What is Penpot?
Penpot is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to mcp server for penpot - connect ai assistants to penpot design platform via model context protocol
MCP server for Penpot - Connect AI assistants to Penpot design platform via Model Context Protocol
This server falls under the Browser Automation category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- list_projects
- get_project_files
- get_file
- export_object
- get_object_tree
Use Cases
Maintainer
Works with
Installation
NPM
npx -y penpot-mcpManual Installation
npx -y penpot-mcpConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Penpot
The Penpot MCP server bridges AI assistants with the Penpot open-source design platform, letting LLMs read and manipulate design files through a local plugin-and-server architecture. It exposes tools to list projects, retrieve file contents, explore object trees, export design assets, and execute arbitrary code within the Penpot plugin sandbox. Designers and developers can use it to automate repetitive design tasks, query component structures, and integrate AI-driven design generation into their Penpot workflow.
Prerequisites
- Node.js v22 or later installed
- A running Penpot instance (self-hosted or access to penpot.app)
- The Penpot desktop app or browser with plugin support enabled
- An MCP-compatible client: Claude Desktop, Claude Code, Cursor, or any client supporting HTTP/SSE MCP transport
- npx available for remote stdio clients
Clone the repository and install dependencies
Clone the penpot-mcp repository and run the bootstrap command, which installs all dependencies, builds the project, and starts both the MCP server and the plugin server.
git clone https://github.com/penpot/penpot-mcp.git
cd penpot-mcp
npm run bootstrapVerify the servers are running
After bootstrap, the MCP server listens on port 4401 and the plugin server on port 4400. Confirm both are reachable.
curl http://localhost:4401/mcp
curl http://localhost:4400/manifest.jsonLoad the plugin in Penpot
In the Penpot application, open the Plugins panel and add a new plugin using the manifest URL from your local plugin server.
http://localhost:4400/manifest.jsonConnect Claude Desktop via mcp-remote (stdio clients)
For stdio-only clients like Claude Desktop, use the mcp-remote proxy to bridge the HTTP SSE endpoint.
{
"mcpServers": {
"penpot": {
"command": "npx",
"args": ["-y", "mcp-remote", "http://localhost:4401/sse", "--allow-http"]
}
}
}Connect Claude Code via HTTP transport
Claude Code supports HTTP MCP transports natively, so you can point it directly at the MCP server endpoint.
claude mcp add penpot -t http http://localhost:4401/mcpConfigure environment variables if needed
Adjust server ports or logging level through environment variables before starting the server.
PENPOT_MCP_SERVER_PORT=4401
PENPOT_MCP_WEBSOCKET_PORT=4402
PENPOT_MCP_LOG_LEVEL=infoPenpot Examples
Client configuration
Claude Desktop configuration using mcp-remote to connect to the locally running Penpot MCP server over SSE.
{
"mcpServers": {
"penpot": {
"command": "npx",
"args": ["-y", "mcp-remote", "http://localhost:4401/sse", "--allow-http"]
}
}
}Prompts to try
Example prompts for interacting with Penpot design files through the MCP tools (list_projects, get_project_files, get_file, export_object, get_object_tree).
- "List all my Penpot projects"
- "Show me the files in my 'Mobile App' project"
- "Get the component tree for the main page of my design file"
- "Export the hero banner component as a PNG"
- "What layers and components are inside the 'Dashboard' frame?"Troubleshooting Penpot
Plugin server or MCP server fails to start on expected ports
Check that ports 4400, 4401, and 4402 are not already in use. Use 'lsof -i :4401' to identify conflicts, or set PENPOT_MCP_SERVER_PORT to a different value.
Claude Desktop shows 'connection refused' when using mcp-remote
Ensure both the MCP server and plugin server are running first (npm run bootstrap). The mcp-remote proxy cannot connect if the SSE endpoint at port 4401 is not active.
Penpot plugin UI does not show MCP connection status
After loading the manifest in Penpot, you must open the plugin panel and explicitly connect it to the MCP server through the plugin's own UI. Refreshing the page without reconnecting will drop the link.
Frequently Asked Questions about Penpot
What is Penpot?
Penpot is a Model Context Protocol (MCP) server that mcp server for penpot - connect ai assistants to penpot design platform via model context protocol It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Penpot?
Install via npm with the command: npx -y penpot-mcp. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with Penpot?
Penpot works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Penpot free to use?
Yes, Penpot is open source and available under the MPL-2.0 license. You can use it freely in both personal and commercial projects.
Penpot Alternatives — Similar Browser Automation Servers
Looking for alternatives to Penpot? Here are other popular browser automation servers you can use with Claude, Cursor, and VS Code.
Chrome DevTools MCP
★ 40.6kAI-powered Chrome automation server with natural language element detection. Control Chrome browser through MCP protocol for testing, debugging, and performance analysis. Features 91% accuracy in element location, works with free AI models, and suppo
UI TARS Desktop
★ 34.9k📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
Playwright
★ 32.8kA production-ready browser automation server that enables AI assistants to interact with web pages using tools for navigation, element interaction, and data extraction. It features a built-in Inspector UI and robust crash recovery for reliable automa
Page Agent
★ 18.0kJavaScript in-page GUI agent. Control web interfaces with natural language.
Chrome
★ 11.7kAn extension-based MCP server that enables AI assistants to control your browser, leveraging existing sessions and login states for automation and content analysis. It provides over 20 tools for semantic tab search, interactive element manipulation,
LAMDA
★ 7.8kThe most powerful Android RPA agent framework, next generation mobile automation.
Browse More Browser Automation MCP Servers
Explore all browser automation servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Penpot in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Penpot?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.