From f5bdb1accb44fcdc3e0ba0ef7f317473b5758bd1 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Thu, 11 Sep 2025 12:07:31 +0200 Subject: [PATCH] Update README --- README.md | 34 ++++++++++++++++------------------ 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 2d12f35..6182928 100644 --- a/README.md +++ b/README.md @@ -1,37 +1,29 @@ -# WebSocket Connection Setup - -This document explains how to test the basic WebSocket connection between the MCP server and the Penpot plugin. - -## Architecture Overview +# The Penpot MCP Server The system consists of two main components: 1. **MCP Server** (`mcp-server/`): - - Runs as an MCP server (stdio transport) - - Runs a WebSocket server on port 8080 - - Basic WebSocket connection handling (protocol to be defined later) + - Runs the MCP server providing tools to an LLM for Penpot project interaction + - Runs a WebSocket server which accepts connections from the Penpot MCP Plugin, + establishing a communication channel between the plugin and the MCP server -2. **Penpot Plugin** (`penpot-plugin/`): - - Contains a "Connect to MCP server" button in the UI - - Establishes WebSocket connection to `ws://localhost:8080` - - Basic connection status feedback +2. **Penpot MCP Plugin** (`penpot-plugin/`): + - Establishes WebSocket connection to the MCP server + - Receives tasks from the MCP server, which it executes in the Penpot project, making + use of the Penpot Plugin API ## Testing the Connection ### Step 1: Start the MCP Server + ```bash cd mcp-server npm run build npm start ``` -The server will output: -``` -Penpot MCP Server started successfully -WebSocket server is listening on ws://localhost:8080 -``` - ### Step 2: Build and Run the Plugin + ```bash cd penpot-plugin npm run build @@ -39,14 +31,20 @@ npm run dev ``` ### Step 3: Load Plugin in Penpot + 1. Open Penpot in your browser 2. Navigate to a design file 3. Go to Plugins menu 4. Load the plugin using the development URL (typically `http://localhost:4400/manifest.json`) +5. Open the plugin UI ### Step 4: Test the Connection + 1. In the plugin UI, click "Connect to MCP server" 2. The connection status should change from "Not connected" to "Connected to MCP server" 3. Check the browser's developer console for WebSocket connection logs 4. Check the MCP server terminal for WebSocket connection messages +### Step 5: Use an MCP Client to Interact with the Penpot Project + +See [MCP Server README](mcp-server/README.md) \ No newline at end of file