Open-source design platform integration
## Penpot MCP Server: Open Source Design Platform The **Penpot MCP Server** integrates Penpot into Google Antigravity, enabling open source design operations with component access, asset export, and design system management directly from your development environment. ### Why Penpot MCP? - **Open Source**: Self-hostable design platform - **SVG Native**: SVG-first approach for web - **Components**: Reusable design components - **Collaboration**: Real-time team collaboration - **No Vendor Lock-in**: Own your design files ### Key Features #### 1. Project Operations ```python # List projects projects = await mcp.list_projects(team_id="team_123") for project in projects: print(f"Project: {project['name']}") # Get project files files = await mcp.list_files(project_id="proj_123") for file in files: print(f"File: {file['name']} - Modified: {file['modified_at']}") ``` #### 2. Component Access ```python # Get components components = await mcp.get_components(file_id="file_123") for comp in components: print(f"Component: {comp['name']}") # Get component instance instance = await mcp.get_component( file_id="file_123", component_id="comp_456" ) print(f"Name: {instance['name']}") print(f"Properties: {instance['properties']}") ``` #### 3. Export Operations ```python # Export as SVG svg = await mcp.export_svg( file_id="file_123", object_id="obj_789" ) # Export as PNG await mcp.export_png( file_id="file_123", object_id="obj_789", scale=2, output_path="/exports/icon.png" ) # Export page await mcp.export_page( file_id="file_123", page_id="page_1", format="pdf", output_path="/exports/design.pdf" ) ``` #### 4. Design Tokens ```python # Extract colors colors = await mcp.get_colors(file_id="file_123") for color in colors: print(f"Color: {color['name']} - {color['color']}") # Extract typography typography = await mcp.get_typography(file_id="file_123") for text in typography: print(f"Text: {text['name']} - {text['font_family']}") ``` ### Configuration ```json { "mcpServers": { "penpot": { "command": "npx", "args": ["-y", "@anthropic/mcp-penpot"], "env": { "PENPOT_URL": "https://design.penpot.app", "PENPOT_ACCESS_TOKEN": "your-access-token" } } } } ``` ### Use Cases **Open Source Projects**: Design tools for open source teams. **Self-Hosted Design**: Host your own design platform. **Asset Generation**: Export design assets automatically. **Design Systems**: Manage open source design systems. The Penpot MCP enables open source design operations within your development environment.
{
"mcpServers": {
"penpot": {
"mcpServers": {
"penpot": {
"env": {
"PENPOT_URL": "https://design.penpot.app",
"PENPOT_ACCESS_TOKEN": "YOUR_TOKEN"
},
"args": [
"penpot-mcp"
],
"command": "uvx"
}
}
}
}
}