diff --git a/docs/css/index.css b/docs/css/index.css
index 63282f168a..9737456609 100644
--- a/docs/css/index.css
+++ b/docs/css/index.css
@@ -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);
}
diff --git a/docs/index.njk b/docs/index.njk
index ef15854588..908d2f00b0 100644
--- a/docs/index.njk
+++ b/docs/index.njk
@@ -18,24 +18,30 @@ eleventyNavigation:
Everything you need to know about how Penpot works.
-
-
- Contributing guide →
- How to report bugs, add translations and more.
-
-
Technical guide →
Installation, configuration and architecture.
+
+
+ MCP server →
+ Connect AI agents to your Penpot files for design and development workflows.
+
+
Plugins →
All about Penpot plugins.
+
+
+ Contributing guide →
+ How to report bugs, add translations and more.
+
+
FAQs →
diff --git a/docs/mcp/index.md b/docs/mcp/index.md
index e0d31fe6ce..466144b3f1 100644
--- a/docs/mcp/index.md
+++ b/docs/mcp/index.md
@@ -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
+
+
+
+ Penpot MCP Server – Remote setup with OpenCode and OpenRouter
+
+
+
+
+ Penpot MCP Server – Remote setup with Cursor
+
+
### 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
+
+
+
+ Penpot MCP Server – Local setup
+
+
### Connect