Provides tools for retrieving Penpot boards, debugging board data, and extracting design tokens from Penpot files.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Penpot MCP Server get design tokens from https://design.penpot.app/file/abc123"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
A Model Context Protocol (MCP) server for integrating Penpot with AI assistants.
npm install
npm startnpm publishNo installation needed - use directly with npx in your MCP configuration.
Related MCP server: F-MCP (Figma MCP Bridge)
To use the Penpot API, you need to configure:
Access Token: Log in to Penpot → Profile → Access tokens → Create new token
API URL (optional): For self-hosted Penpot instances
Add both to your MCP configuration environment variables:
PENPOT_ACCESS_TOKEN: Your access token
PENPOT_API_URL: API base URL (defaults to https://design.penpot.app/api)
Retrieves a Penpot board.
Parameters:
url (string, required): Complete Penpot board URL with board-id
Returns: HTML, JSON object, tokens used, and CSS variables
Retrieves a Penpot board and displays the raw JSON for debugging.
Parameters:
url (string, required): Complete Penpot board URL with board-id
Retrieves design tokens from a Penpot file.
Parameters:
url (string, required): Complete Penpot file URL (only needs file-id)
Returns: DTCG formatted tokens, CSS variables, and summary
penpot-mcp/
├── index.js # Main server
├── src/
│ └── tools/
│ ├── get-board.js # get_board tool
│ ├── debug-board.js # debug_board tool
│ └── get-tokens.js # get_tokens tool
├── package.json
└── README.mdAdd this configuration to your MCP client:
{
"mcpServers": {
"penpot": {
"command": "npx",
"args": [
"-y",
"penpot-mcp-server@latest"
],
"env": {
"PENPOT_ACCESS_TOKEN": "your_penpot_token_here",
"PENPOT_API_URL": "https://design.penpot.app/api"
}
}
}
}Or for local development:
{
"mcpServers": {
"penpot": {
"command": "node",
"args": ["/path/to/penpot-mcp/index.js"],
"env": {
"PENPOT_ACCESS_TOKEN": "your_penpot_token_here",
"PENPOT_API_URL": "https://design.penpot.app/api"
}
}
}
}Retrieves a Penpot board and displays raw JSON for debugging
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Complete Penpot board URL (ex: https://design.penpot.app/#/workspace?team-id=...&board-id=...) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description carries full burden. It implies a read-only operation ('displays'), but does not explicitly confirm no mutations or side effects. Adequate but not thorough.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Single sentence of 10 words with no extraneous information. Perfectly concise while conveying essential purpose.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Despite no output schema, the tool is simple (one param, retrieval) and the description covers basic functionality. Absence of return format details is mitigated by 'raw JSON' implying direct output. Sufficient for a debug tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% for the single parameter, so description adds no extra value beyond what schema already provides. Baseline score applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description uses specific verb 'Retrieves' and resource 'Penpot board', and states purpose 'displays raw JSON for debugging', clearly distinguishing from sibling tools (get_board likely returns formatted view).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit when-to-use or when-not-to-use instructions, but the intent is implied by 'for debugging'. Does not mention alternatives, so falls to 'implied usage'.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Retrieves a Penpot board and converts it to Tailwind CSS code
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Complete Penpot board URL (ex: https://design.penpot.app/#/workspace?team-id=...&board-id=...) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral transparency. It only states retrieval and conversion, but does not disclose side effects, safety profile, authentication needs, or error behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence with no redundancy or filler. It is appropriately front-loaded and earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no output schema, the description usefully indicates the output is Tailwind CSS code. However, it lacks detail on the output format or additional behavior, such as error handling, but is mostly complete for this simple tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The description adds little extra meaning beyond the schema; it confirms the purpose of the URL but does not elaborate on format or constraints.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly specifies the verb 'retrieves' and the resource 'Penpot board', and also states the conversion to Tailwind CSS code, distinguishing it from sibling tools like debug_board and get_tokens.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description does not provide any guidance on when to use this tool versus alternatives, nor does it mention any prerequisites or context for usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Retrieves design tokens from a Penpot file and formats them according to DTCG standard
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Complete Penpot file URL (ex: https://design.penpot.app/#/workspace?team-id=...&file-id=...) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so the description carries the burden. It discloses the behavioral trait of formatting tokens but does not mention read-only nature, error handling, or auth requirements. Adds some value beyond basic retrieval.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Single sentence with 13 words, front-loaded verb 'Retrieves', no filler. Every word contributes meaning.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with one param and no output schema, the description adequately covers purpose and output format. Could be more complete with error conditions but current level is sufficient.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with a detailed URL description. The tool description adds context that the URL points to a Penpot file but does not enhance parameter semantics beyond what the schema already provides.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it retrieves design tokens from a Penpot file and formats them to DTCG standard, distinguishing it from sibling tools like 'debug_board' and 'get_board' which likely handle board-level data.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit guidance on when to use this tool versus alternatives. The description implies use for token retrieval but does not exclude other tools or provide context for selection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Each tool has a clearly distinct purpose: debug_board returns raw JSON, get_board converts to Tailwind CSS, and get_tokens retrieves design tokens. No ambiguity between them.
All tool names follow verb_noun pattern (debug_board, get_board, get_tokens), but one uses 'debug' while the other two use 'get', showing slight inconsistency in verb choice.
Three tools is on the lower side but still reasonable for a focused server. It covers core retrieval operations without being overly minimal.
The tool surface covers board retrieval and token extraction but lacks operations like listing files, projects, or creating/updating content, which are notable gaps for a design server.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Secure AI access to OpenOak tasks, notes, and Kanban boards.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Connect AI assistants to your GitHub-hosted Obsidian vault to seamlessly access, search, and analy…
Serves your design system and coding standards to coding agents, so they stop guessing.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Mart1M/penpot-mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
