Compare commits

...

11 Commits

Author SHA1 Message Date
Ismail Ali
0da75ff11b mcp server gestartet
Some checks failed
CI / test (3.10) (push) Has been cancelled
CI / test (3.11) (push) Has been cancelled
CI / test (3.12) (push) Has been cancelled
CI / test (3.13) (push) Has been cancelled
CI / security-check (push) Has been cancelled
CI / build-test (push) Has been cancelled
CI / test-docker (push) Has been cancelled
Publish to PyPI / check-tests (push) Has been cancelled
Publish to PyPI / publish-release (push) Has been cancelled
Publish to PyPI / publish (push) Has been cancelled
Code Quality / code-quality (push) Has been cancelled
2025-07-16 19:47:33 +02:00
JM Robles
37ec03275f Merge pull request #11 from montevive/fix/publish-gh
ci: add permissions for creating releases in publish workflow
2025-06-29 23:04:49 +02:00
chema
52c078d479 ci: add permissions for creating releases in publish workflow 2025-06-29 23:03:13 +02:00
JM Robles
00fd8c658e Merge pull request #10 from montevive/release/0.1.2
chore: update version to 0.1.2 in __init__.py
2025-06-29 22:50:13 +02:00
chema
099a283a28 chore: update version to 0.1.2 in __init__.py 2025-06-29 22:49:40 +02:00
JM Robles
ea705f0843 Merge pull request #9 from montevive/fix/cd-publish
ci: add workflow_call trigger to CI configuration
2025-06-29 22:45:33 +02:00
chema
230cf757f9 ci: add workflow_call trigger to CI configuration 2025-06-29 22:44:46 +02:00
JM Robles
316ace9284 Merge pull request #8 from montevive/fix/cd-publish
ci: update publish workflow to check PyPI version using JSON API and …
2025-06-29 22:42:55 +02:00
chema
96800a63be ci: update publish workflow to check PyPI version using JSON API and switch to softprops/action-gh-release for GitHub releases 2025-06-29 22:41:15 +02:00
JM Robles
28129a281e Merge pull request #5 from montevive/dependabot/github_actions/codecov/codecov-action-5
ci(deps): bump codecov/codecov-action from 4 to 5
2025-06-29 21:50:57 +02:00
dependabot[bot]
c3f9ead7c9 ci(deps): bump codecov/codecov-action from 4 to 5
Bumps [codecov/codecov-action](https://github.com/codecov/codecov-action) from 4 to 5.
- [Release notes](https://github.com/codecov/codecov-action/releases)
- [Changelog](https://github.com/codecov/codecov-action/blob/main/CHANGELOG.md)
- [Commits](https://github.com/codecov/codecov-action/compare/v4...v5)

---
updated-dependencies:
- dependency-name: codecov/codecov-action
  dependency-version: '5'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
2025-06-29 19:37:49 +00:00
6 changed files with 132 additions and 116 deletions

10
.env Normal file
View File

@@ -0,0 +1,10 @@
# ✅ Penpot Login-Daten (von deinem Penpot-Server)
PENPOT_USERNAME=dein_benutzername
PENPOT_PASSWORD=dein_passwort
# ✅ Server-Konfiguration für den MCP Server
PORT=5000
DEBUG=true
# ✅ API URL deiner lokalen Penpot-Instanz
PENPOT_API_URL=http://192.168.10.102:9010/api

View File

@@ -5,6 +5,7 @@ on:
branches: [ main, develop ] branches: [ main, develop ]
push: push:
branches: [ main, develop ] branches: [ main, develop ]
workflow_call:
jobs: jobs:
test: test:
@@ -40,7 +41,7 @@ jobs:
uv run pytest --cov=penpot_mcp tests/ --cov-report=xml --cov-report=term-missing uv run pytest --cov=penpot_mcp tests/ --cov-report=xml --cov-report=term-missing
- name: Upload coverage to Codecov - name: Upload coverage to Codecov
uses: codecov/codecov-action@v4 uses: codecov/codecov-action@v5
if: matrix.python-version == '3.12' if: matrix.python-version == '3.12'
with: with:
file: ./coverage.xml file: ./coverage.xml

View File

@@ -20,6 +20,8 @@ jobs:
needs: check-tests needs: check-tests
runs-on: ubuntu-latest runs-on: ubuntu-latest
if: github.ref == 'refs/heads/main' && github.event_name == 'push' if: github.ref == 'refs/heads/main' && github.event_name == 'push'
permissions:
contents: write # Required for creating releases
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
@@ -47,8 +49,9 @@ jobs:
CURRENT_VERSION=$(python -c "import penpot_mcp; print(penpot_mcp.__version__)") CURRENT_VERSION=$(python -c "import penpot_mcp; print(penpot_mcp.__version__)")
echo "current_version=$CURRENT_VERSION" >> $GITHUB_OUTPUT echo "current_version=$CURRENT_VERSION" >> $GITHUB_OUTPUT
# Check if this version already exists on PyPI # Check if this version already exists on PyPI using the JSON API
if pip index versions penpot-mcp | grep -q "$CURRENT_VERSION"; then HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" "https://pypi.org/pypi/penpot-mcp/$CURRENT_VERSION/json")
if [ "$HTTP_STATUS" = "200" ]; then
echo "version_exists=true" >> $GITHUB_OUTPUT echo "version_exists=true" >> $GITHUB_OUTPUT
echo "Version $CURRENT_VERSION already exists on PyPI" echo "Version $CURRENT_VERSION already exists on PyPI"
else else
@@ -119,12 +122,10 @@ jobs:
- name: Create GitHub Release - name: Create GitHub Release
if: steps.version-check.outputs.version_exists == 'false' if: steps.version-check.outputs.version_exists == 'false'
uses: actions/create-release@v1 uses: softprops/action-gh-release@v2
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with: with:
tag_name: v${{ steps.version-check.outputs.current_version }} tag_name: v${{ steps.version-check.outputs.current_version }}
release_name: Release v${{ steps.version-check.outputs.current_version }} name: Release v${{ steps.version-check.outputs.current_version }}
body: | body: |
## Changes in v${{ steps.version-check.outputs.current_version }} ## Changes in v${{ steps.version-check.outputs.current_version }}
@@ -141,20 +142,10 @@ jobs:
See commit history for detailed changes. See commit history for detailed changes.
**Full Changelog**: https://github.com/montevive/penpot-mcp/compare/v${{ steps.version-check.outputs.current_version }}...HEAD **Full Changelog**: https://github.com/montevive/penpot-mcp/compare/v${{ steps.version-check.outputs.current_version }}...HEAD
files: dist/*
draft: false draft: false
prerelease: false prerelease: false
- name: Upload Release Assets
if: steps.version-check.outputs.version_exists == 'false'
uses: actions/upload-release-asset@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
upload_url: ${{ steps.create-release.outputs.upload_url }}
asset_path: dist/
asset_name: penpot-mcp-${{ steps.version-check.outputs.current_version }}-dist.zip
asset_content_type: application/zip
- name: Notify on success - name: Notify on success
if: steps.version-check.outputs.version_exists == 'false' if: steps.version-check.outputs.version_exists == 'false'
run: | run: |

2
.gitignore vendored
View File

@@ -30,7 +30,7 @@ env/
.python-version .python-version
# Environment variables # Environment variables
.env #.env
# IDE files # IDE files
.idea/ .idea/

206
README.md
View File

@@ -1,5 +1,6 @@
# Penpot MCP Server 🎨🤖 # Penpot MCP Server 🎨🤖
<!-- git test -->
<p align="center"> <p align="center">
<img src="images/penpot-mcp.png" alt="Penpot MCP Logo" width="400"/> <img src="images/penpot-mcp.png" alt="Penpot MCP Logo" width="400"/>
</p> </p>
@@ -32,11 +33,11 @@
### 🎯 Key Benefits ### 🎯 Key Benefits
- **🤖 AI-Native Design Analysis**: Let Claude AI analyze your UI/UX designs, provide feedback, and suggest improvements - **🤖 AI-Native Design Analysis**: Let Claude AI analyze your UI/UX designs, provide feedback, and suggest improvements
- **⚡ Automated Design Workflows**: Streamline repetitive design tasks with AI-powered automation - **⚡ Automated Design Workflows**: Streamline repetitive design tasks with AI-powered automation
- **🔍 Intelligent Design Search**: Find design components and patterns across your projects using natural language - **🔍 Intelligent Design Search**: Find design components and patterns across your projects using natural language
- **📊 Design System Management**: Automatically document and maintain design systems with AI assistance - **📊 Design System Management**: Automatically document and maintain design systems with AI assistance
- **🎨 Cross-Platform Integration**: Works with any MCP-compatible AI assistant (Claude Desktop, Cursor IDE, etc.) - **🎨 Cross-Platform Integration**: Works with any MCP-compatible AI assistant (Claude Desktop, Cursor IDE, etc.)
## 🎥 Demo Video ## 🎥 Demo Video
@@ -47,59 +48,65 @@ Check out our demo video to see Penpot MCP in action:
## ✨ Features ## ✨ Features
### 🔌 Core Capabilities ### 🔌 Core Capabilities
- **MCP Protocol Implementation**: Full compliance with Model Context Protocol standards
- **Real-time Design Access**: Direct integration with Penpot's API for live design data - **MCP Protocol Implementation**: Full compliance with Model Context Protocol standards
- **Component Analysis**: AI-powered analysis of design components and layouts - **Real-time Design Access**: Direct integration with Penpot's API for live design data
- **Export Automation**: Programmatic export of design assets in multiple formats - **Component Analysis**: AI-powered analysis of design components and layouts
- **Design Validation**: Automated design system compliance checking - **Export Automation**: Programmatic export of design assets in multiple formats
- **Design Validation**: Automated design system compliance checking
### 🛠️ Developer Tools ### 🛠️ Developer Tools
- **Command-line Utilities**: Powerful CLI tools for design file analysis and validation
- **Python SDK**: Comprehensive Python library for custom integrations - **Command-line Utilities**: Powerful CLI tools for design file analysis and validation
- **REST API**: HTTP endpoints for web application integration - **Python SDK**: Comprehensive Python library for custom integrations
- **Extensible Architecture**: Plugin system for custom AI workflows - **REST API**: HTTP endpoints for web application integration
- **Extensible Architecture**: Plugin system for custom AI workflows
### 🎨 AI Integration Features ### 🎨 AI Integration Features
- **Claude Desktop & Cursor Integration**: Native support for Claude AI assistant in both Claude Desktop and Cursor IDE
- **Design Context Sharing**: Provide design context to AI models for better responses - **Claude Desktop & Cursor Integration**: Native support for Claude AI assistant in both Claude Desktop and Cursor IDE
- **Visual Component Recognition**: AI can "see" and understand design components - **Design Context Sharing**: Provide design context to AI models for better responses
- **Natural Language Queries**: Ask questions about your designs in plain English - **Visual Component Recognition**: AI can "see" and understand design components
- **IDE Integration**: Seamless integration with modern development environments - **Natural Language Queries**: Ask questions about your designs in plain English
- **IDE Integration**: Seamless integration with modern development environments
## 💡 Use Cases ## 💡 Use Cases
### For Designers ### For Designers
- **Design Review Automation**: Get instant AI feedback on accessibility, usability, and design principles
- **Component Documentation**: Automatically generate documentation for design systems - **Design Review Automation**: Get instant AI feedback on accessibility, usability, and design principles
- **Design Consistency Checks**: Ensure brand guidelines compliance across projects - **Component Documentation**: Automatically generate documentation for design systems
- **Asset Organization**: AI-powered tagging and categorization of design components - **Design Consistency Checks**: Ensure brand guidelines compliance across projects
- **Asset Organization**: AI-powered tagging and categorization of design components
### For Developers ### For Developers
- **Design-to-Code Workflows**: Bridge the gap between design and development with AI assistance
- **API Integration**: Programmatic access to design data for custom tools and workflows - **Design-to-Code Workflows**: Bridge the gap between design and development with AI assistance
- **Automated Testing**: Generate visual regression tests from design specifications - **API Integration**: Programmatic access to design data for custom tools and workflows
- **Design System Sync**: Keep design tokens and code components in sync - **Automated Testing**: Generate visual regression tests from design specifications
- **Design System Sync**: Keep design tokens and code components in sync
### For Product Teams ### For Product Teams
- **Design Analytics**: Track design system adoption and component usage
- **Collaboration Enhancement**: AI-powered design reviews and feedback collection - **Design Analytics**: Track design system adoption and component usage
- **Workflow Optimization**: Automate repetitive design operations and approvals - **Collaboration Enhancement**: AI-powered design reviews and feedback collection
- **Cross-tool Integration**: Connect Penpot with other tools in your design workflow - **Workflow Optimization**: Automate repetitive design operations and approvals
- **Cross-tool Integration**: Connect Penpot with other tools in your design workflow
## 🚀 Quick Start ## 🚀 Quick Start
### Prerequisites ### Prerequisites
- **Python 3.12+** (Latest Python recommended for optimal performance) - **Python 3.12+** (Latest Python recommended for optimal performance)
- **Penpot Account** ([Sign up free](https://penpot.app/)) - **Penpot Account** ([Sign up free](https://penpot.app/))
- **Claude Desktop or Cursor IDE** (Optional, for AI integration) - **Claude Desktop or Cursor IDE** (Optional, for AI integration)
## Installation ## Installation
### Prerequisites ### Prerequisites
- Python 3.12+ - Python 3.12+
- Penpot account credentials - Penpot account credentials
### Installation ### Installation
@@ -152,6 +159,7 @@ 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: > **⚠️ 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:
>
> 1. Open your web browser and navigate to [https://design.penpot.app](https://design.penpot.app) > 1. Open your web browser and navigate to [https://design.penpot.app](https://design.penpot.app)
> 2. Log in to your Penpot account > 2. Log in to your Penpot account
> 3. Complete any CloudFlare human verification challenges if prompted > 3. Complete any CloudFlare human verification challenges if prompted
@@ -246,19 +254,21 @@ penpot-client
## MCP Resources & Tools ## MCP Resources & Tools
### Resources ### Resources
- `server://info` - Server status and information
- `penpot://schema` - Penpot API schema as JSON - `server://info` - Server status and information
- `penpot://tree-schema` - Penpot object tree schema as JSON - `penpot://schema` - Penpot API schema as JSON
- `rendered-component://{component_id}` - Rendered component images - `penpot://tree-schema` - Penpot object tree schema as JSON
- `penpot://cached-files` - List of cached Penpot files - `rendered-component://{component_id}` - Rendered component images
- `penpot://cached-files` - List of cached Penpot files
### Tools ### Tools
- `list_projects` - List all Penpot projects
- `get_project_files` - Get files for a specific project - `list_projects` - List all Penpot projects
- `get_file` - Retrieve a Penpot file by its ID and cache it - `get_project_files` - Get files for a specific project
- `export_object` - Export a Penpot object as an image - `get_file` - Retrieve a Penpot file by its ID and cache it
- `get_object_tree` - Get the object tree structure for a Penpot object - `export_object` - Export a Penpot object as an image
- `search_object` - Search for objects within a Penpot file by name - `get_object_tree` - Get the object tree structure for a Penpot object
- `search_object` - Search for objects within a Penpot file by name
## AI Integration ## AI Integration
@@ -272,17 +282,17 @@ Add the following configuration to your Claude Desktop config file (`~/Library/A
```json ```json
{ {
"mcpServers": { "mcpServers": {
"penpot": { "penpot": {
"command": "uvx", "command": "uvx",
"args": ["penpot-mcp"], "args": ["penpot-mcp"],
"env": { "env": {
"PENPOT_API_URL": "https://design.penpot.app/api", "PENPOT_API_URL": "https://design.penpot.app/api",
"PENPOT_USERNAME": "your_penpot_username", "PENPOT_USERNAME": "your_penpot_username",
"PENPOT_PASSWORD": "your_penpot_password" "PENPOT_PASSWORD": "your_penpot_password"
} }
}
} }
}
} }
``` ```
@@ -291,56 +301,60 @@ Add the following configuration to your Claude Desktop config file (`~/Library/A
Cursor IDE supports MCP servers through its AI integration features. To configure Penpot MCP with Cursor: Cursor IDE supports MCP servers through its AI integration features. To configure Penpot MCP with Cursor:
1. **Install the MCP server** (if not already installed): 1. **Install the MCP server** (if not already installed):
```bash
pip install penpot-mcp ```bash
``` pip install penpot-mcp
```
2. **Configure Cursor settings** by adding the MCP server to your Cursor configuration. Open Cursor settings and add: 2. **Configure Cursor settings** by adding the MCP server to your Cursor configuration. Open Cursor settings and add:
```json ```json
{ {
"mcpServers": { "mcpServers": {
"penpot": { "penpot": {
"command": "uvx", "command": "uvx",
"args": ["penpot-mcp"], "args": ["penpot-mcp"],
"env": { "env": {
"PENPOT_API_URL": "https://design.penpot.app/api", "PENPOT_API_URL": "https://design.penpot.app/api",
"PENPOT_USERNAME": "your_penpot_username", "PENPOT_USERNAME": "your_penpot_username",
"PENPOT_PASSWORD": "your_penpot_password" "PENPOT_PASSWORD": "your_penpot_password"
} }
} }
} }
} }
``` ```
3. **Alternative: Use environment variables** by creating a `.env` file in your project root: 3. **Alternative: Use environment variables** by creating a `.env` file in your project root:
```bash
PENPOT_API_URL=https://design.penpot.app/api ```bash
PENPOT_USERNAME=your_penpot_username PENPOT_API_URL=https://design.penpot.app/api
PENPOT_PASSWORD=your_penpot_password PENPOT_USERNAME=your_penpot_username
``` PENPOT_PASSWORD=your_penpot_password
```
4. **Start the MCP server** in your project: 4. **Start the MCP server** in your project:
```bash
# In your project directory ```bash
penpot-mcp # In your project directory
``` penpot-mcp
```
5. **Use in Cursor**: Once configured, you can interact with your Penpot designs directly in Cursor by asking questions like: 5. **Use in Cursor**: Once configured, you can interact with your Penpot designs directly in Cursor by asking questions like:
- "Show me all projects in my Penpot account" - "Show me all projects in my Penpot account"
- "Analyze the design components in project X" - "Analyze the design components in project X"
- "Export the main button component as an image" - "Export the main button component as an image"
- "What design patterns are used in this file?" - "What design patterns are used in this file?"
### Key Integration Features ### Key Integration Features
Both Claude Desktop and Cursor integration provide: Both Claude Desktop and Cursor integration provide:
- **Direct access** to Penpot projects and files
- **Visual component analysis** with AI-powered insights - **Direct access** to Penpot projects and files
- **Design export capabilities** for assets and components - **Visual component analysis** with AI-powered insights
- **Natural language queries** about your design files - **Design export capabilities** for assets and components
- **Real-time design feedback** and suggestions - **Natural language queries** about your design files
- **Design system documentation** generation - **Real-time design feedback** and suggestions
- **Design system documentation** generation
## Package Structure ## Package Structure
@@ -417,5 +431,5 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
## Acknowledgments ## Acknowledgments
- [Penpot](https://penpot.app/) - The open-source design and prototyping platform - [Penpot](https://penpot.app/) - The open-source design and prototyping platform
- [Model Context Protocol](https://modelcontextprotocol.io) - The standardized protocol for AI model context - [Model Context Protocol](https://modelcontextprotocol.io) - The standardized protocol for AI model context

View File

@@ -1,5 +1,5 @@
"""Penpot MCP Server - Model Context Protocol server for Penpot.""" """Penpot MCP Server - Model Context Protocol server for Penpot."""
__version__ = "0.1.1" __version__ = "0.1.2"
__author__ = "Montevive AI Team" __author__ = "Montevive AI Team"
__email__ = "info@montevive.ai" __email__ = "info@montevive.ai"