From db66d58a4c52bbf4cbbe9c5924685c5245aa10e4 Mon Sep 17 00:00:00 2001
From: Ethan Jones <ethangj@gmail.com>
Date: Fri, 14 Aug 2026 15:38:15 -0400
Subject: [PATCH] Add "Connect your AI coding agent" MCP section to homepage

Ports the wiremock.io MCP/agent-skills tabbed install section to the
OSS homepage, right after the key-features grid: a client picker
(Claude Code, Cursor, VS Code + Copilot, Copilot CLI, Codex CLI) next
to a terminal-style panel with the exact install commands, reusing
the existing generic .tabs JS component. Also adds HowTo structured
data per client for richer search/AI answer extraction.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 public/css/home.css   | 160 +++++++++++++++++++++++++++++++++++
 src/static/index.html | 189 +++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 348 insertions(+), 1 deletion(-)

diff --git a/public/css/home.css b/public/css/home.css
index 369390e3..f938d92c 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -319,6 +319,166 @@ body {
 }
 
 
+/*
+    MCP agent connect
+ */
+.home__mcp-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    text-align: left;
+}
+
+.home__mcp-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: auto;
+    border-bottom: none;
+}
+
+.home__mcp-list li {
+    flex: none;
+}
+
+/* Specificity note: `.tabs-list a` (0,1,1) is reused only for home.js's selector contract (see setupTabs in
+   home.js) and already sets `display: inline-block`, which beats a bare `.home__mcp-tab` (0,1,0) class rule.
+   These rules are scoped as `.home__mcp-list .home__mcp-tab` (0,2,0) so the vertical layout below wins. */
+.home__mcp-list .home__mcp-tab {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 12px 16px;
+    border-left: 3px solid transparent;
+    border-radius: 4px;
+    color: #18253D;
+}
+
+/* Same reasoning: overrides `.tabs-list a.active:after`'s horizontal-tab bottom-border indicator, which
+   doesn't apply to this vertical sidebar. */
+.home__mcp-list a.active:after {
+    display: none;
+}
+
+.home__mcp-list .home__mcp-tab.active {
+    border-left-color: #FF9507;
+    background: #F4F7FF;
+}
+
+.home__mcp-tab.active .home__mcp-tab-title {
+    color: #2D69F6;
+}
+
+.home__mcp-tab-title {
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.home__mcp-tab-subtitle {
+    font-size: 13px;
+    color: #6B7690;
+}
+
+.home__mcp-terminal {
+    border-radius: 16px;
+    padding: 24px;
+    background: #18253D;
+    overflow: hidden;
+}
+
+.home__mcp-terminal-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 20px;
+}
+
+.home__mcp-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.home__mcp-dot--red {
+    background: #FF5F56;
+}
+
+.home__mcp-dot--yellow {
+    background: #FFBD2E;
+}
+
+.home__mcp-dot--green {
+    background: #27C93F;
+}
+
+.home__mcp-terminal-label {
+    margin-left: 8px;
+    font-size: 13px;
+    color: #8792AB;
+}
+
+.home__mcp-panel pre {
+    margin: 0;
+    background: none;
+    overflow-x: auto;
+}
+
+.home__mcp-panel code {
+    font-family: "Source Code Pro", Monaco, Consolas, "Lucida Console", monospace;
+    font-size: 14px;
+    line-height: 1.7;
+    color: #E4E9F5;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.home__mcp-comment {
+    color: #7A88AD;
+    font-style: italic;
+}
+
+.home__mcp-prompt {
+    color: #5B9CFF;
+}
+
+.home__mcp-success {
+    color: #2E9E6C;
+}
+
+.home__mcp-docs-link {
+    /* .home section p { max-width: 70ch } shrinks this box without auto margins, which left-anchors it;
+       margin-left/right: auto centers the (now-narrower) box itself so text-align: center has any effect. */
+    margin: 24px auto 0;
+    max-width: 70ch;
+    text-align: center;
+}
+
+@media only screen and (min-width: 992px) {
+    .home__mcp-tabs {
+        flex-direction: row;
+        align-items: stretch;
+        gap: 0;
+        border-radius: 16px;
+        overflow: hidden;
+        box-shadow: 0 1px 3px rgba(24, 37, 61, 0.1);
+    }
+
+    .home__mcp-sidebar {
+        flex: 0 0 280px;
+        padding: 24px 0;
+        background: #F9FAFF;
+    }
+
+    .home__mcp-tab {
+        border-radius: 0;
+    }
+
+    .home__mcp-terminal {
+        flex: 1 1 auto;
+        border-radius: 0;
+    }
+}
+
 /*
     Get started
  */
diff --git a/src/static/index.html b/src/static/index.html
index a246db70..faf9f8a3 100644
--- a/src/static/index.html
+++ b/src/static/index.html
@@ -40,7 +40,100 @@
             "https://fosstodon.org/@wiremock",
             "https://www.youtube.com/@WireMockTV"
         ]
-    } </script> <!-- end SEO --> <!-- Google Analytics --> <!-- gtag -->
+    } </script>
+    <script type="application/ld+json">
+    [
+        {
+            "@context": "https://schema.org",
+            "@type": "HowTo",
+            "name": "Connect Claude Code to WireMock",
+            "description": "Install WireMock Agent Skills and connect the WireMock remote MCP server in Claude Code.",
+            "step": [
+                {
+                    "@type": "HowToStep",
+                    "position": 1,
+                    "name": "Install WireMock Agent Skills",
+                    "text": "In a Claude Code session, run /plugin marketplace add wiremock-inc/skills, then /plugin install wiremock-cloud@wiremock-inc-skills."
+                },
+                {
+                    "@type": "HowToStep",
+                    "position": 2,
+                    "name": "Connect the remote MCP server",
+                    "text": "Run claude mcp add --transport http wiremock https://mcp.wiremock.cloud/mcp."
+                }
+            ]
+        },
+        {
+            "@context": "https://schema.org",
+            "@type": "HowTo",
+            "name": "Connect Cursor to WireMock",
+            "description": "Install WireMock Agent Skills and connect the WireMock remote MCP server in Cursor.",
+            "step": [
+                {
+                    "@type": "HowToStep",
+                    "position": 1,
+                    "name": "Install WireMock Agent Skills",
+                    "text": "In the Cursor chat, run /plugin marketplace add wiremock-inc/skills, /plugin install wiremock-cloud@wiremock-inc-skills, then /reload-plugins."
+                },
+                {
+                    "@type": "HowToStep",
+                    "position": 2,
+                    "name": "Add the remote MCP server",
+                    "text": "Add WireMock to mcp.json: { \"mcpServers\": { \"WireMock\": { \"url\": \"https://mcp.wiremock.cloud/mcp\" } } }."
+                }
+            ]
+        },
+        {
+            "@context": "https://schema.org",
+            "@type": "HowTo",
+            "name": "Connect VS Code and GitHub Copilot to WireMock",
+            "description": "Add the WireMock remote MCP server to VS Code settings and install WireMock Agent Skills for GitHub Copilot.",
+            "step": [
+                {
+                    "@type": "HowToStep",
+                    "position": 1,
+                    "name": "Add the remote MCP server",
+                    "text": "Add WireMock to settings.json: { \"mcp\": { \"servers\": { \"WireMock\": { \"type\": \"http\", \"url\": \"https://mcp.wiremock.cloud/mcp\" } } } }."
+                },
+                {
+                    "@type": "HowToStep",
+                    "position": 2,
+                    "name": "Install WireMock Agent Skills",
+                    "text": "Clone https://github.com/wiremock-inc/skills.git and copy the copilot/skills folder into .github/skills."
+                }
+            ]
+        },
+        {
+            "@context": "https://schema.org",
+            "@type": "HowTo",
+            "name": "Connect GitHub Copilot CLI to WireMock",
+            "description": "Install WireMock Agent Skills inside GitHub Copilot CLI.",
+            "step": [
+                {
+                    "@type": "HowToStep",
+                    "position": 1,
+                    "name": "Install WireMock Agent Skills",
+                    "text": "Inside Copilot CLI, run /plugin marketplace add wiremock-inc/skills, then /plugin install wiremock-cloud@wiremock-inc-skills."
+                }
+            ]
+        },
+        {
+            "@context": "https://schema.org",
+            "@type": "HowTo",
+            "name": "Connect Codex CLI to WireMock",
+            "description": "Install the WireMock plugin marketplace in Codex CLI.",
+            "step": [
+                {
+                    "@type": "HowToStep",
+                    "position": 1,
+                    "name": "Install the plugin marketplace",
+                    "text": "Run codex plugin marketplace add wiremock-inc/skills, then select wiremock-cloud from the /plugins picker."
+                }
+            ]
+        }
+    ]
+    </script>
+    <!-- end SEO --> <!-- Google Analytics --> <!-- gtag -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-KN208QTJLZ"></script>
     <script> window.dataLayer = window.dataLayer || [];
 
@@ -337,6 +430,100 @@ <h4>Testing Integrations</h4>
             </ul>
         </div>
     </section>
+    <section class="section home__mcp">
+        <h2 class="section__title">Connect your AI coding agent in one command</h2>
+        <p class="section__intro">WireMock Agent Skills and the WireMock remote MCP server
+            (<code>https://mcp.wiremock.cloud/mcp</code>) expose every platform capability to your AI coding agent —
+            build mock APIs, create stubs, and simulate failures without leaving your editor. Pick your client below
+            for the exact install command.</p>
+
+        <div class="tabs home__mcp-tabs">
+            <div class="home__mcp-sidebar">
+                <ul class="tabs-list home__mcp-list">
+                    <li><a href="#mcp-claude-code" class="home__mcp-tab">
+                        <span class="home__mcp-tab-title">Claude Code</span>
+                        <span class="home__mcp-tab-subtitle">Plugin marketplace + remote MCP</span>
+                    </a></li>
+                    <li><a href="#mcp-cursor" class="home__mcp-tab">
+                        <span class="home__mcp-tab-title">Cursor</span>
+                        <span class="home__mcp-tab-subtitle">Plugin marketplace + mcp.json</span>
+                    </a></li>
+                    <li><a href="#mcp-vscode-copilot" class="home__mcp-tab">
+                        <span class="home__mcp-tab-title">VS Code + Copilot</span>
+                        <span class="home__mcp-tab-subtitle">settings.json + skills folder</span>
+                    </a></li>
+                    <li><a href="#mcp-copilot-cli" class="home__mcp-tab">
+                        <span class="home__mcp-tab-title">Copilot CLI</span>
+                        <span class="home__mcp-tab-subtitle">Plugin marketplace (interactive)</span>
+                    </a></li>
+                    <li><a href="#mcp-codex-cli" class="home__mcp-tab">
+                        <span class="home__mcp-tab-title">Codex CLI</span>
+                        <span class="home__mcp-tab-subtitle">Plugin marketplace + picker</span>
+                    </a></li>
+                </ul>
+            </div>
+            <div class="home__mcp-terminal">
+                <div class="home__mcp-terminal-bar">
+                    <span class="home__mcp-dot home__mcp-dot--red"></span>
+                    <span class="home__mcp-dot home__mcp-dot--yellow"></span>
+                    <span class="home__mcp-dot home__mcp-dot--green"></span>
+                    <span class="home__mcp-terminal-label">wiremock — zsh</span>
+                </div>
+                <div id="mcp-claude-code" class="tab-content home__mcp-panel">
+                    <pre><code class="nohighlight"><span class="home__mcp-comment"># Agent Skills — 8 skills for building &amp; managing mock APIs</span>
+<span class="home__mcp-comment"># (run inside a Claude Code session)</span>
+<span class="home__mcp-prompt">❯</span> /plugin marketplace add wiremock-inc/skills
+<span class="home__mcp-prompt">❯</span> /plugin install wiremock-cloud@wiremock-inc-skills
+<span class="home__mcp-success">✓ installed — try /build-api-simulation</span>
+
+<span class="home__mcp-comment"># Remote MCP — every capability, exposed as tools</span>
+<span class="home__mcp-prompt">❯</span> claude mcp add --transport http wiremock https://mcp.wiremock.cloud/mcp
+<span class="home__mcp-success">✓ connected</span></code></pre>
+                </div>
+                <div id="mcp-cursor" class="tab-content home__mcp-panel">
+                    <pre><code class="nohighlight"><span class="home__mcp-comment"># Agent Skills — run in the Cursor chat</span>
+<span class="home__mcp-prompt">❯</span> /plugin marketplace add wiremock-inc/skills
+<span class="home__mcp-prompt">❯</span> /plugin install wiremock-cloud@wiremock-inc-skills
+<span class="home__mcp-prompt">❯</span> /reload-plugins
+
+<span class="home__mcp-comment"># Remote MCP — add to mcp.json</span>
+{
+  "mcpServers": {
+    "WireMock": { "url": "https://mcp.wiremock.cloud/mcp" }
+  }
+}</code></pre>
+                </div>
+                <div id="mcp-vscode-copilot" class="tab-content home__mcp-panel">
+                    <pre><code class="nohighlight"><span class="home__mcp-comment"># Remote MCP — add to settings.json</span>
+{
+  "mcp": {
+    "servers": {
+      "WireMock": { "type": "http", "url": "https://mcp.wiremock.cloud/mcp" }
+    }
+  }
+}
+
+<span class="home__mcp-comment"># Agent Skills — copy into .github/skills</span>
+<span class="home__mcp-prompt">❯</span> git clone https://github.com/wiremock-inc/skills.git /tmp/wiremock-skills
+<span class="home__mcp-prompt">❯</span> cp -r /tmp/wiremock-skills/copilot/skills/* .github/skills/
+<span class="home__mcp-prompt">❯</span> rm -rf /tmp/wiremock-skills</code></pre>
+                </div>
+                <div id="mcp-copilot-cli" class="tab-content home__mcp-panel">
+                    <pre><code class="nohighlight"><span class="home__mcp-comment"># Agent Skills — run inside Copilot CLI</span>
+<span class="home__mcp-prompt">❯</span> /plugin marketplace add wiremock-inc/skills
+<span class="home__mcp-prompt">❯</span> /plugin install wiremock-cloud@wiremock-inc-skills
+<span class="home__mcp-success">✓ installed — try /build-api-simulation</span></code></pre>
+                </div>
+                <div id="mcp-codex-cli" class="tab-content home__mcp-panel">
+                    <pre><code class="nohighlight"><span class="home__mcp-comment"># Agent Skills — install the plugin marketplace</span>
+<span class="home__mcp-prompt">❯</span> codex plugin marketplace add wiremock-inc/skills
+<span class="home__mcp-success">✓ marketplace added — select wiremock-cloud from the /plugins picker</span></code></pre>
+                </div>
+            </div>
+        </div>
+
+        <p class="home__mcp-docs-link"><a href="https://docs.wiremock.io/ai-mcp/agent-skills?utm_source=wiremock.org&amp;utm_medium=referral&amp;utm_campaign=mcp-section">See every client and skill in the docs</a></p>
+    </section>
     <section class="section box box--darker home__new">
         <p class="badge">NEW</p>
         <h2 class="home__new-title">WireMock Runner: Hybrid API Simulation</h2>