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

📚 Add MCP server block and setup videos to docs (#10121)

Browse Source
This commit is contained in:
andrés gonzález 2026-06-11 11:46:40 +02:00 committed by GitHub
parent 17b38e3e6b
commit a8c1a673a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 64 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/css/index.css
View File

@ -848,6 +848,9 @@ a[href].post-tag:visited {
.illus-techguide {
background-image: url(/img/home-technical-guide.webp);
}
.illus-mcp {
background-image: url(/img/home-mcp-server.webp);
}
.illus-plugins {
background-image: url(/img/home-plugins.webp);
}

18
docs/index.njk
View File

@ -18,24 +18,30 @@ eleventyNavigation:
<p>Everything you need to know about how Penpot works.</p>
</a>
</li>
<li class="illus illus-contributing">
<a href="/contributing-guide/">
<h2>Contributing guide →</h2>
<p>How to report bugs, add translations and more.</p>
</a>
</li>
<li class="illus illus-techguide">
<a href="/technical-guide/">
<h2>Technical guide →</h2>
<p>Installation, configuration and architecture.</p>
</a>
</li>
<li class="illus illus-mcp">
<a href="/mcp/">
<h2>MCP server →</h2>
<p>Connect AI agents to your Penpot files for design and development workflows.</p>
</a>
</li>
<li class="illus illus-plugins">
<a href="/plugins/">
<h2>Plugins →</h2>
<p>All about Penpot plugins.</p>
</a>
</li>
<li class="illus illus-contributing">
<a href="/contributing-guide/">
<h2>Contributing guide →</h2>
<p>How to report bugs, add translations and more.</p>
</a>
</li>
<li class="illus illus-faq">
<a href="https://community.penpot.app/c/faq/17">
<h2>FAQs →</h2>

49
docs/mcp/index.md
View File

@ -309,6 +309,38 @@ 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**, which includes your `userToken`.
### Setup videos
<figure>
<iframe
width="672px"
height="378px"
src="https://www.youtube.com/embed/hBn1iutWSq4?rel=0"
title="Penpot MCP Server: Remote Setup in 5 Min | OpenCode + OpenRouter"
frameborder="0"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
<figcaption>Penpot MCP Server – Remote setup with OpenCode and OpenRouter</figcaption>
</figure>
<figure>
<iframe
width="672px"
height="378px"
src="https://www.youtube.com/embed/QeSFO0h7GGY?rel=0"
title="Penpot MCP Server Remote Setup in 1 Minute | Cursor"
frameborder="0"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
<figcaption>Penpot MCP Server – Remote setup with Cursor</figcaption>
</figure>
<a id="use-remote"></a>
### Use
@ -391,6 +423,23 @@ Leave this terminal running while you use MCP.
For advanced or repository-based workflows, see the [MCP README](https://github.com/penpot/penpot/blob/main/mcp/README.md) in the Penpot repository.
### Setup video
<figure>
<iframe
width="672px"
height="378px"
src="https://www.youtube.com/embed/xfgf0kKGOoc?rel=0"
title="Penpot MCP Server Local Setup"
frameborder="0"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
<figcaption>Penpot MCP Server – Local setup</figcaption>
</figure>
<a id="connect-local"></a>
### Connect