penpot-mcp-server

Overview

This MCP server provides full manipulation capabilities for Penpot, an open-source design tool. It enables AI assistants to create, modify, and manage Penpot designs programmatically with over 76 tools covering project management, shape creation and manipulation, component systems, team collaboration, comments, media export, font management, webhooks, search, and more. The server supports both stdio and HTTP transport modes, making it compatible with various MCP clients and external applications.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

• list_teams

  List all accessible teams

  Try:List all teams I have access toTry:Show me the teams in my Penpot account
• list_projects

  List all accessible projects

  Try:List all projects in my accountTry:Show me the available Penpot projects
• list_files

  List files in a project

  Try:Show me all files in the current projectTry:List design files in my project
• create_file

  Create a new design file

  Try:Create a new design file for a mobile appTry:Make a new file named 'Website Mockup'
• create_rectangle

  Create rectangle shapes

  Try:Add a red rectangle at position 100,100Try:Create a blue rectangle that's 200x300 pixels
• create_text

  Create text elements with alignment and styling

  Try:Add a heading saying 'Welcome to our website'Try:Create centered text with Arial font
• update_shape

  Modify shape properties like position, size, and style

  Try:Make the blue circle largerTry:Move the rectangle to position 200,200
• export_shape

  Export shape or frame as image (PNG, JPG, SVG, PDF)

  Try:Export the hero section as PNGTry:Save the logo as SVG
• create_component

  Create reusable component from shape

  Try:Make a button component from the rectangleTry:Create a reusable header component
• search_shapes

  Search shapes within a file

  Try:Find all blue shapes on this pageTry:Search for text elements containing 'menu'
• upload_file_media

  Upload image file (PNG, JPG, SVG, GIF, WEBP)

  Try:Upload company logo.pngTry:Add background image to the design
• get_profile

  Get current user profile

  Try:Show me my profile informationTry:Get my account details

Comparable tools

Installation

# Install globally
npm install -g @zcubekr/penpot-mcp-server

# Run the server
penpot-mcp-server

{
  "mcpServers": {
    "penpot": {
      "command": "node",
      "args": ["/path/to/penpot-mcp-server/dist/index.js"],
      "env": {
        "PENPOT_API_URL": "https://design.penpot.app",
        "PENPOT_ACCESS_TOKEN": "your-access-token"
      }
    }
  }
}

FAQ

How do I get a Penpot access token?

1. Log in to your Penpot account 2. Go to Settings → Access Tokens 3. Create a new access token 4. Copy and save it securely

Can I use this with self-hosted Penpot instances?

Yes, you need to enable access token support in your self-hosted instance by adding 'enable-access-tokens' to your PENPOT_FLAGS configuration

Compare penpot-mcp-server with