Add architecture diagram and extend description

This commit is contained in:
Dominik Jain 2025-10-06 14:06:37 +02:00 committed by Dominik Jain
parent cbac84bab2
commit 200c11bb8e
2 changed files with 22 additions and 3 deletions

View File

@ -1,10 +1,19 @@
# The Penpot MCP Server # The Penpot MCP Server
This project enables LLMs to interact directly with Penpot design projects This project enables LLMs to interact directly with Penpot design projects
through a Model Context Protocol (MCP) server and plugin architecture. using the Model Context Protocol (MCP), building on Penpot's Plugin API
to facilitate design data retrieval, modification, and creation.
## Architecture ## Architecture
The Penpot MCP server exposes tools to AI clients (LLMs), which support the retrieval
of design data as well as the modification and creation of design elements.
The MCP server communicates with Penpot via a dedicated Penpot MCP plugin,
which connects to the MCP server via WebSocket.
![Architecture](resources/architecture.png)
This repository is a monorepo containing four main components: This repository is a monorepo containing four main components:
1. **Common Types** (`common/`): 1. **Common Types** (`common/`):
@ -22,11 +31,19 @@ This repository is a monorepo containing four main components:
- Executes tasks in Penpot using the Plugin API - Executes tasks in Penpot using the Plugin API
- Sends structured responses back to the server# - Sends structured responses back to the server#
4. **Helper Scripts** (`helper/`): 4. **Helper Scripts** (`python-scripts/`):
- Python scripts that prepare data for the MCP server (development use) - Python scripts that prepare data for the MCP server (development use)
The core components are written in TypeScript, rendering interactions with the
Penpot Plugin API both natural and type-safe.
## Usage ## Usage
To use the Penpot MCP server, you must
* run the MCP server and connect your AI client to it,
* run the Penpot MCP plugin in Penpot and connect it to the MCP server.
### Build & Launch the MCP Server and the Plugin Server ### Build & Launch the MCP Server and the Plugin Server
If it's your first execution, install the required dependencies: If it's your first execution, install the required dependencies:
@ -86,13 +103,15 @@ allowing clients that support only stdio to connect to the MCP server indirectly
#### Example: Claude Desktop #### Example: Claude Desktop
For Claude Desktop integration, you will need to use a proxy like `mcp-remote` since it only supports stdio transport. For Claude Desktop integration, you will need to use a proxy like `mcp-remote` since it only supports stdio transport.
So install it as described above. Install `mcp-remote` as described above.
To add the server to Claude Desktop's configuration, locate the configuration file: To add the server to Claude Desktop's configuration, locate the configuration file:
- **Windows**: `%APPDATA%/Claude/claude_desktop_config.json` - **Windows**: `%APPDATA%/Claude/claude_desktop_config.json`
- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
Add a `penpot` entry under `mcpServers` with the following content:
```json ```json
{ {
"mcpServers": { "mcpServers": {

BIN
resources/architecture.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB