Skip to content

Feature/homepage mcp agent section #427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ethangj wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feature/homepage mcp agent section #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5b0449
Merge branch 'main' of https://github.com/wiremock/wiremock.org
ethangj Aug 14, 2026
db66d58
Add "Connect your AI coding agent" MCP section to homepage
ethangj Aug 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 160 additions & 0 deletions public/css/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
189 changes: 188 additions & 1 deletion src/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 || [];

Expand Down Expand Up @@ -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>
Expand Down
Loading