penpot/mcp/packages/plugin/index.html
Dr. Dominik Jain 8efbd9b5d3
🎉 Allow MCP to work with multiple files in parallel (#11927)
* 🎉 Add multi-file session routing to the MCP server

Session routing:
- Track each user's Penpot connections by session ID.
- Dispatch explicit sessions directly; otherwise discover the sole session.
- Return a retryable error when discovery fails or is incomplete.

Plugin and tools:
- Initialize connections with a fresh session ID and file metadata.
- Share the optional sessionId schema and place it last in tool inputs.

Validation:
- 84 tests, server type checking, and MCP formatting checks pass.
- Disable test logging to avoid the logging worker shutdown hang.

AI-assisted-by: gpt-6

* 🎉 Support independent MCP connections

- Require explicit connection intent for each integrated workspace.
- Derive short session IDs from the Penpot app instance and file.
- Show and copy session IDs in the MCP menu and standalone plugin UI.
- Stop stale callbacks and reconnect attempts after disconnect.

Validate with frontend and plugin tests, type checking, live multi-tab
checks, and standalone UI checks with a simulated connection. Server
tests pass with --test-force-exit; the normal runner can hang on shutdown.

AI-assisted-by: gpt-6

* 📚 Document multi-file MCP sessions

- Explain independent connections, session selection, and copying IDs.
- Describe session ID lifetimes for integrated and standalone plugins.
- Correct browser focus, connection, and recovery guidance.

Validate with the documentation site build and diff checks.

AI-assisted-by: gpt-6

* ✨ Change behavior on session ID duplication

* ✨ Open MCP toolbar menu on hover and match menu style

---------

Co-authored-by: alonso.torres <alonso.torres@kaleidos.net>
Co-authored-by: elhombretecla <delacruzgarciajuan@gmail.com>
2026-10-02 14:22:52 +02:00

107 lines
4.5 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Penpot MCP Plugin</title>
</head>
<body>
<div class="plugin-container">
<div id="version-warning" class="version-warning" hidden>
<span id="version-warning-text" class="body-s"></span>
</div>
<div id="connection-status" class="status-pill" data-status="idle">
<span class="status-dot"></span>
<span id="status-text" class="body-s">Not connected</span>
</div>
<button type="button" id="connect-btn" data-appearance="primary" data-handler="connect-mcp">
Connect MCP Server
</button>
<button type="button" id="disconnect-btn" data-appearance="secondary" data-handler="disconnect-mcp" hidden>
Disconnect MCP Server
</button>
<div id="session-id" hidden>
<div class="session-id-row">
<span class="body-s">Session ID</span>
<code id="session-id-value"></code>
<button
type="button"
id="copy-session-id-btn"
data-appearance="secondary"
aria-label="Copy session ID"
>
Copy
</button>
</div>
<span id="session-id-feedback" class="body-s" role="status"></span>
</div>
<details class="collapsible-section" id="execution-status">
<summary class="collapsible-header">
<svg
class="collapsible-arrow"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="12"
height="12"
fill="currentColor"
aria-hidden="true"
>
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
</svg>
<span class="body-s">Execution status</span>
</summary>
<div class="collapsible-body">
<span class="body-s tool-label">Current task</span>
<div class="tool-display">
<svg
class="tool-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="14"
height="14"
fill="currentColor"
aria-hidden="true"
>
<path
d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"
/>
</svg>
<span id="current-task" class="body-s">---</span>
</div>
<div class="code-section-header">
<span class="body-s tool-label">Executed code</span>
<button type="button" id="copy-code-btn" class="copy-btn" title="Copy code" disabled>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="14"
height="14"
fill="currentColor"
aria-hidden="true"
>
<path
d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
/>
</svg>
</button>
</div>
<textarea
id="executed-code"
class="code-textarea"
readonly
placeholder="No code executed yet..."
></textarea>
</div>
</details>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>