github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-28 12:48:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main-staging' into staging

Browse Source
This commit is contained in:
Andrey Antukh 2026-04-28 10:09:18 +02:00
commit 19e81560be
6 changed files with 45 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docker/devenv/Dockerfile
View File

@ -184,7 +184,8 @@ FROM base AS setup-utils
ENV CLJKONDO_VERSION=2026.04.15 \
BABASHKA_VERSION=1.12.208 \
CLJFMT_VERSION=0.16.4 \
PIXI_VERSION=0.67.2
PIXI_VERSION=0.67.2 \
GITHUB_CLI_VERSION=2.91.0
RUN set -ex; \
ARCH="$(dpkg --print-architecture)"; \
@ -267,6 +268,28 @@ RUN set -ex; \
tar -xf /tmp/cljfmt.tar.gz; \
rm -rf /tmp/cljfmt.tar.gz;
RUN set -ex; \
ARCH="$(dpkg --print-architecture)"; \
case "${ARCH}" in \
aarch64|arm64) \
BINARY_URL="https://github.com/cli/cli/releases/download/v${GITHUB_CLI_VERSION}/gh_${GITHUB_CLI_VERSION}_linux_arm64.tar.gz"; \
;; \
amd64|x86_64) \
BINARY_URL="https://github.com/cli/cli/releases/download/v${GITHUB_CLI_VERSION}/gh_${GITHUB_CLI_VERSION}_linux_amd64.tar.gz"; \
;; \
*) \
echo "Unsupported arch: ${ARCH}"; \
exit 1; \
;; \
esac; \
cd /tmp; \
curl -LfsSo /tmp/gh.tar.gz ${BINARY_URL}; \
mkdir /opt/gh; \
cd /opt/gh; \
tar -xf /tmp/gh.tar.gz; \
rm -rf /tmp/gh.tar.gz;
# Install minio client
RUN set -ex; \
ARCH="$(dpkg --print-architecture)"; \
@ -310,7 +333,6 @@ RUN set -ex; \
nginx \
fd-find \
bat \
gh \
\
fontconfig \
woff-tools \
@ -399,13 +421,14 @@ ENV LANG='C.UTF-8' \
JAVA_HOME="/opt/jdk" \
CARGO_HOME="/opt/cargo" \
RUSTUP_HOME="/opt/rustup" \
PATH="/opt/jdk/bin:/opt/utils/bin:/opt/clojure/bin:/opt/node/bin:/opt/imagick/bin:/opt/cargo/bin:$PATH"
PATH="/opt/jdk/bin:/opt/gh/bin:/opt/utils/bin:/opt/clojure/bin:/opt/node/bin:/opt/imagick/bin:/opt/cargo/bin:$PATH"
COPY --from=penpotapp/imagemagick:7.1.2-13 /opt/imagick /opt/imagick
COPY --from=setup-jvm /opt/jdk /opt/jdk
COPY --from=setup-jvm /opt/clojure /opt/clojure
COPY --from=setup-node /opt/node /opt/node
COPY --from=setup-utils /opt/utils /opt/utils
COPY --from=setup-utils /opt/gh /opt/gh
COPY --from=setup-rust /opt/cargo /opt/cargo
COPY --from=setup-rust /opt/rustup /opt/rustup
COPY --from=setup-rust /opt/emsdk /opt/emsdk

2
docker/devenv/files/bashrc
View File

@ -2,7 +2,7 @@
EMSDK_QUIET=1 . /opt/emsdk/emsdk_env.sh;
export PATH="/home/penpot/.cargo/bin:/opt/jdk/bin:/opt/utils/bin:/opt/clojure/bin:/opt/node/bin:/opt/imagick/bin:/opt/cargo/bin:$PATH"
export PATH="/home/penpot/.cargo/bin:/opt/jdk/bin:/opt/gh/bin:/opt/utils/bin:/opt/clojure/bin:/opt/node/bin:/opt/imagick/bin:/opt/cargo/bin:$PATH"
export CARGO_HOME="/home/penpot/.cargo"
export PENPOT_MCP_PLUGIN_SERVER_HOST=0.0.0.0

4
docs/contributing-guide/index.njk
View File

@ -2,7 +2,7 @@
title: Contributing
desc: Learn how to contribute to Penpot, the open-source design collaboration platform! Find guides on bug reporting, translations, code contributions, and more.
eleventyNavigation:
key: Contributing
key: Contribute
order: 3
---
@ -10,7 +10,7 @@ eleventyNavigation:
<img src="/img/home-contribution.webp" alt="User guide" border="0">
</div>
<h1 id="contributing-guide">Contributing guide.</h1>
<h1 id="contributing-guide">Contributing guide</h1>
<p class="main-paragraph">In this documentation you will find (almost) everything you need to know about how to contribute at Penpot.</p>

47
docs/mcp/index.md
View File

@ -2,6 +2,9 @@
title: Penpot MCP server
order: 1
desc: Installing and using the Penpot MCP server with any AI agent or LLM you trust.
eleventyNavigation:
key: MCP Server
order: 6
---
<div class="main-illus">
@ -69,7 +72,7 @@ There are three key pieces:
### Basic concepts
Some important concepts for users:
* **Integrations page**: MCP is configured under **Your account → Integrations → MCP Server (Beta)**. Here you enable or disable MCP, get the server URL and manage the MCP key.
* **Integrations page**: MCP is configured under **Your account → Integrations → MCP Server**. Here you enable or disable MCP, get the server URL and manage the MCP key.
* **MCP key**: a personal, non-recoverable token that authenticates your AI client with the MCP server. Only one key can exist per user at a time. This is used by the remote MCP setup.
* **Currently focused page**: MCP always operates on the page you have in focus in Penpot. If you change the focused page (even in another browser window), the MCP context follows that page.
* **Active MCP tab**: MCP can only be active in one browser tab at a time. If you have Penpot open in several tabs, you choose explicitly which one owns MCP before running agents.
@ -110,32 +113,20 @@ If you just want to try Penpot MCP quickly, follow this path for the **hosted (r
### Remote MCP in 5 steps
<div class="advice">
### Important: remote MCP is not in production yet
Remote MCP is not available yet in Penpot production (`design.penpot.app`). It is planned for an upcoming release (currently targeted around **2.16**).
Right now, the remote MCP flow is available only in **testing environments** (for example, instances deployed from the `staging` branch: https://github.com/penpot/penpot/tree/staging).
If you need MCP in production today, use the **Local MCP server** setup instead. See [Local MCP server](#local-mcp-server).
</div>
1. #### Enable MCP in Penpot
Go to **Your account → Integrations → MCP Server (Beta)** and enable the feature.
Go to **Your account → Integrations → MCP Server** and enable the feature.
![MCP Server (Beta) in Penpot Integrations, enable](/img/mcp/mcp-enable.webp)
![MCP Server in Penpot Integrations, enable](/img/mcp/mcp-enable.webp)
2. #### Generate your MCP key
If you do not have one yet, create it. The key is shown only once—store it safely.
![MCP Server (Beta) in Penpot Integrations, generate key](/img/mcp/mcp-generate-key.webp)
![MCP Server in Penpot Integrations, generate key](/img/mcp/mcp-generate-key.webp)
3. #### Copy the server URL
In the same Integrations section, copy the **server URL** that already includes your MCP key as `userToken`.
![MCP Server (Beta) in Penpot Integrations, copy server url](/img/mcp/mcp-server-url.webp)
![MCP Server in Penpot Integrations, copy server url](/img/mcp/mcp-server-url.webp)
4. #### Add the server to your MCP client
In your MCP-aware IDE/agent (Cursor, Claude Code, etc.), add a new server pointing to that URL.
@ -191,7 +182,7 @@ You can use Penpot MCP server in two main ways:
* Hosted for you (no need to run anything on your machine).
* Best option for most users, simpler installation and fewer moving parts.
* Does **not** have privileged access to your local file system, it can only work with what Penpot exposes (design files, libraries, tokens, etc.).
* The **server URL** is provided in **Your account → Integrations → MCP Server (Beta)** and looks like:
* The **server URL** is provided in **Your account → Integrations → MCP Server** and looks like:
* `https://<your-penpot-domain>/mcp/stream?userToken=YOUR_MCP_KEY`
* The domain depends on the Penpot installation. In the official SaaS it will be `design.penpot.app`.
* **Local MCP server**
@ -298,21 +289,11 @@ In Penpot, open a file and connect the plugin from **File → MCP Server → Con
Remote MCP is the easiest way to start using AI agents with Penpot. It's hosted for you, so you don't need to install or run anything on your machine.
<div class="advice">
### Availability note
Remote MCP is currently available only in **testing environments**. It is not yet available in Penpot production (`design.penpot.app`) and is planned for an upcoming release (currently targeted around **2.16**).
If you need MCP in production today, use the **Local MCP server** setup instead. See [Local MCP server](#local-mcp-server).
</div>
<a id="install-and-activate-remote"></a>
### Install and activate
1. Open **Your account → Integrations**.
2. In the **MCP Server (Beta)** section, read the short description to confirm that feature is available for your account.
2. In the **MCP Server** section, read the short description to confirm that feature is available for your account.
3. Use the **Status** toggle to enable MCP Server. Penpot remembers this state per user across sessions.
4. If this is your first time, Penpot will ask you to **generate an MCP key**. The key is shown only once, store it safely.
* Treat the MCP key like a password/token: do not share it in screenshots, logs, or code samples.
@ -326,7 +307,7 @@ If you need MCP in production today, use the **Local MCP server** setup instead.
For client-specific setup, use the shared section **Connect your MCP client**.
For remote mode, use the URL shown in **Your account → Integrations → MCP Server (Beta)**, which includes your `userToken`.
For remote mode, use the URL shown in **Your account → Integrations → MCP Server**, which includes your `userToken`.
<a id="use-remote"></a>
### Use
@ -336,7 +317,7 @@ Once everything is configured, day-to-day use of Penpot MCP follows a simple pat
#### Run
1. **Enable MCP**
* Go to **Your account → Integrations → MCP Server (Beta)** and set **Status** to **Enabled**.
* Go to **Your account → Integrations → MCP Server** and set **Status** to **Enabled**.
2. **Connect plugin**:
* Open a design file and use **File → MCP Server → Connect**.
3. **Run prompts**:
@ -393,7 +374,7 @@ At a high level:
2. Start the MCP server and plugin server from your terminal:
```json
npx @penpot/mcp@beta
npx @penpot/mcp@stable
```
Leave this terminal running while you use MCP.
@ -426,7 +407,7 @@ Once everything is configured, day-to-day use of Penpot MCP follows a simple pat
1. **Start MCP**
Run `npx -y @penpot/mcp@stable` (production) or `npx -y @penpot/mcp@beta` (test), and keep that terminal running.
Run `npx -y @penpot/mcp@stable` (production), and keep that terminal running.
2. **Connect plugin**
In Penpot, load `http://localhost:4400/manifest.json`, run the plugin, and click **Connect to MCP server**.

2
docs/user-guide/index.njk
View File

@ -2,7 +2,7 @@
title: User guide
desc: Learn everything from interface basics to advanced features like prototyping and design sharing with Penpot's comprehensive user guide! Free access.
eleventyNavigation:
key: User guide
key: User Guide
order: 2
---

2
frontend/src/app/main/ui/dashboard/templates.scss
View File

@ -27,7 +27,7 @@
transition: bottom 300ms;
width: calc(100% - $sz-12);
pointer-events: none;
z-index: var(--z-index-set);
z-index: var(--z-index-panels);
&.collapsed {
inset-block-end: calc(-1 * px2rem(228));