Compare commits
11 Commits
ce89775318
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0da75ff11b | ||
|
|
37ec03275f | ||
|
|
52c078d479 | ||
|
|
00fd8c658e | ||
|
|
099a283a28 | ||
|
|
ea705f0843 | ||
|
|
230cf757f9 | ||
|
|
316ace9284 | ||
|
|
96800a63be | ||
|
|
28129a281e | ||
|
|
c3f9ead7c9 |
10
.env
Normal file
10
.env
Normal 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
|
||||||
3
.github/workflows/ci.yml
vendored
3
.github/workflows/ci.yml
vendored
@@ -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
|
||||||
|
|||||||
25
.github/workflows/publish.yml
vendored
25
.github/workflows/publish.yml
vendored
@@ -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
2
.gitignore
vendored
@@ -30,7 +30,7 @@ env/
|
|||||||
.python-version
|
.python-version
|
||||||
|
|
||||||
# Environment variables
|
# Environment variables
|
||||||
.env
|
#.env
|
||||||
|
|
||||||
# IDE files
|
# IDE files
|
||||||
.idea/
|
.idea/
|
||||||
|
|||||||
206
README.md
206
README.md
@@ -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
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user