mirror of
https://github.com/penpot/penpot-mcp.git
synced 2026-04-25 11:18:37 +00:00
Update README
This commit is contained in:
parent
966a39eb5c
commit
f5bdb1accb
34
README.md
34
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)
|
||||
Loading…
x
Reference in New Issue
Block a user