d367b2574d
Applied Hunt/Thomas and Joel Spolsky writing principles: - Concrete before abstract (stories and examples first) - Physical analogies for technical concepts - Conversational voice with "you" and contractions - Removed passive voice and weasel words - Added memorable metaphors and hooks Pages updated: - index.html: New hero, philosophy section with N+1 query story - agents.html: Each agent described with concrete scenarios - commands.html: Action-oriented descriptions - getting-started.html: Direct, conversational guide - skills.html: Clear "when to use this" for each skill - mcp-servers.html: Concrete examples of what each tool does 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
410 lines
14 KiB
HTML
410 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="theme-dark">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>MCP Servers Reference - Compounding Engineering</title>
|
|
<meta content="Complete reference for the two MCP servers in the Compounding Engineering plugin." name="description" />
|
|
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
|
|
<link href="../css/style.css" rel="stylesheet" type="text/css" />
|
|
<link href="../css/docs.css" rel="stylesheet" type="text/css" />
|
|
<script src="../js/main.js" type="text/javascript" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="background-gradient"></div>
|
|
<div class="docs-layout">
|
|
<aside class="docs-sidebar">
|
|
<div class="sidebar-header">
|
|
<a href="../index.html" class="nav-brand">
|
|
<span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
|
|
<span class="logo-text">CE Docs</span>
|
|
</a>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">
|
|
<h3>Getting Started</h3>
|
|
<ul>
|
|
<li><a href="getting-started.html">Installation</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="nav-section">
|
|
<h3>Reference</h3>
|
|
<ul>
|
|
<li><a href="agents.html">Agents (23)</a></li>
|
|
<li><a href="commands.html">Commands (13)</a></li>
|
|
<li><a href="skills.html">Skills (11)</a></li>
|
|
<li><a href="mcp-servers.html" class="active">MCP Servers (two)</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="nav-section">
|
|
<h3>Resources</h3>
|
|
<ul>
|
|
<li><a href="changelog.html">Changelog</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="nav-section">
|
|
<h3>On This Page</h3>
|
|
<ul>
|
|
<li><a href="#playwright">Playwright</a></li>
|
|
<li><a href="#context7">Context7</a></li>
|
|
<li><a href="#manual-config">Manual Configuration</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="docs-content">
|
|
<div class="docs-header">
|
|
<nav class="breadcrumb">
|
|
<a href="../index.html">Home</a>
|
|
<span>/</span>
|
|
<a href="getting-started.html">Docs</a>
|
|
<span>/</span>
|
|
<span>MCP Servers</span>
|
|
</nav>
|
|
<button class="mobile-menu-toggle" data-sidebar-toggle>
|
|
<i class="fa-solid fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<article class="docs-article">
|
|
<h1><i class="fa-solid fa-server color-accent"></i> MCP Servers Reference</h1>
|
|
<p class="lead">
|
|
Think of MCP servers as power tools that plug into Claude Code. Want Claude to actually <em>open a browser</em> and click around your app? That's Playwright. Need the latest Rails docs without leaving your terminal? That's Context7. The plugin bundles both servers—they just work when you install.
|
|
</p>
|
|
|
|
<div class="callout callout-warning">
|
|
<div class="callout-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
|
|
<div class="callout-content">
|
|
<h4>Known Issue: Auto-Loading</h4>
|
|
<p>
|
|
Sometimes MCP servers don't wake up automatically. If Claude can't take screenshots or look up docs, you'll need to add them manually. See <a href="#manual-config">Manual Configuration</a> for the fix.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Playwright -->
|
|
<section id="playwright">
|
|
<h2><i class="fa-brands fa-chrome"></i> Playwright</h2>
|
|
<p>
|
|
You know how you can tell a junior developer "open Chrome and click the login button"? Now you can tell Claude the same thing. Playwright gives Claude hands to control a real browser—clicking buttons, filling forms, taking screenshots, running JavaScript. It's like pair programming with someone who has a browser open next to you.
|
|
</p>
|
|
|
|
<h3>Tools Provided</h3>
|
|
<table class="docs-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Tool</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>browser_navigate</code></td>
|
|
<td>Go to any URL—your localhost dev server, production, staging, that competitor's site you're studying</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>browser_take_screenshot</code></td>
|
|
<td>Capture what you're seeing right now. Perfect for "does this look right?" design reviews</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>browser_click</code></td>
|
|
<td>Click buttons, links, whatever. Claude finds it by text or CSS selector, just like you would</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>browser_fill_form</code></td>
|
|
<td>Type into forms faster than you can. Great for testing signup flows without manual clicking</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>browser_snapshot</code></td>
|
|
<td>Get the page's accessibility tree—how screen readers see it. Useful for understanding structure without HTML noise</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>browser_evaluate</code></td>
|
|
<td>Run any JavaScript in the page. Check localStorage, trigger functions, read variables—full console access</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>When You'll Use This</h3>
|
|
<ul>
|
|
<li><strong>Design reviews without leaving the terminal</strong> - "Take a screenshot of the new navbar on mobile" gets you a PNG in seconds</li>
|
|
<li><strong>Testing signup flows while you code</strong> - "Fill in the registration form with test@example.com and click submit" runs the test for you</li>
|
|
<li><strong>Debugging production issues</strong> - "Navigate to the error page and show me what's in localStorage" gives you the state without opening DevTools</li>
|
|
<li><strong>Competitive research</strong> - "Go to competitor.com and screenshot their pricing page" builds your swipe file automatically</li>
|
|
</ul>
|
|
|
|
<h3>Example Usage</h3>
|
|
<div class="card-code-block">
|
|
<pre><code># Just talk to Claude naturally—it knows when to use Playwright
|
|
|
|
# Design review
|
|
"Take a screenshot of the login page"
|
|
|
|
# Testing a form
|
|
"Navigate to /signup and fill in the email field with test@example.com"
|
|
|
|
# Debug JavaScript state
|
|
"Go to localhost:3000 and run console.log(window.currentUser)"
|
|
|
|
# The browser runs in the background. You'll get results without switching windows.</code></pre>
|
|
</div>
|
|
|
|
<h3>Configuration</h3>
|
|
<div class="card-code-block">
|
|
<pre><code>{
|
|
"playwright": {
|
|
"type": "stdio",
|
|
"command": "npx",
|
|
"args": ["-y", "@playwright/mcp@latest"],
|
|
"env": {}
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Context7 -->
|
|
<section id="context7">
|
|
<h2><i class="fa-solid fa-book-open"></i> Context7</h2>
|
|
<p>
|
|
Ever ask Claude about a framework and get an answer from 2023? Context7 fixes that. It's a documentation service that keeps Claude current with 100+ frameworks—Rails, React, Next.js, Django, whatever you're using. Think of it as having the official docs piped directly into Claude's brain.
|
|
</p>
|
|
|
|
<h3>Tools Provided</h3>
|
|
<table class="docs-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Tool</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>resolve-library-id</code></td>
|
|
<td>Maps "Rails" to the actual library identifier Context7 uses. You don't call this—Claude does it automatically</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>get-library-docs</code></td>
|
|
<td>Fetches the actual documentation pages. Ask "How does useEffect work?" and this grabs the latest React docs</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>What's Covered</h3>
|
|
<p>Over 100 frameworks and libraries. Here's a taste of what you can look up:</p>
|
|
<div class="framework-grid">
|
|
<div class="framework-category">
|
|
<h4>Backend</h4>
|
|
<ul>
|
|
<li>Ruby on Rails</li>
|
|
<li>Django</li>
|
|
<li>Laravel</li>
|
|
<li>Express</li>
|
|
<li>FastAPI</li>
|
|
<li>Spring Boot</li>
|
|
</ul>
|
|
</div>
|
|
<div class="framework-category">
|
|
<h4>Frontend</h4>
|
|
<ul>
|
|
<li>React</li>
|
|
<li>Vue.js</li>
|
|
<li>Angular</li>
|
|
<li>Svelte</li>
|
|
<li>Next.js</li>
|
|
<li>Nuxt</li>
|
|
</ul>
|
|
</div>
|
|
<div class="framework-category">
|
|
<h4>Mobile</h4>
|
|
<ul>
|
|
<li>React Native</li>
|
|
<li>Flutter</li>
|
|
<li>SwiftUI</li>
|
|
<li>Kotlin</li>
|
|
</ul>
|
|
</div>
|
|
<div class="framework-category">
|
|
<h4>Tools & Libraries</h4>
|
|
<ul>
|
|
<li>Tailwind CSS</li>
|
|
<li>PostgreSQL</li>
|
|
<li>Redis</li>
|
|
<li>GraphQL</li>
|
|
<li>Prisma</li>
|
|
<li>And many more...</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Example Usage</h3>
|
|
<div class="card-code-block">
|
|
<pre><code># Just ask about the framework—Claude fetches current docs automatically
|
|
|
|
"Look up the Rails ActionCable documentation"
|
|
|
|
"How does the useEffect hook work in React?"
|
|
|
|
"What are the best practices for PostgreSQL indexes?"
|
|
|
|
# You get answers based on the latest docs, not Claude's training cutoff</code></pre>
|
|
</div>
|
|
|
|
<h3>Configuration</h3>
|
|
<div class="card-code-block">
|
|
<pre><code>{
|
|
"context7": {
|
|
"type": "http",
|
|
"url": "https://mcp.context7.com/mcp"
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Manual Configuration -->
|
|
<section id="manual-config">
|
|
<h2><i class="fa-solid fa-gear"></i> Manual Configuration</h2>
|
|
<p>
|
|
If the servers don't load automatically (you'll know because Claude can't take screenshots or fetch docs), you need to wire them up yourself. It's a two-minute copy-paste job.
|
|
</p>
|
|
|
|
<h3>Project-Level Configuration</h3>
|
|
<p>To enable for just this project, add this to <code>.claude/settings.json</code> in your project root:</p>
|
|
<div class="card-code-block">
|
|
<pre><code>{
|
|
"mcpServers": {
|
|
"playwright": {
|
|
"type": "stdio",
|
|
"command": "npx",
|
|
"args": ["-y", "@playwright/mcp@latest"],
|
|
"env": {}
|
|
},
|
|
"context7": {
|
|
"type": "http",
|
|
"url": "https://mcp.context7.com/mcp"
|
|
}
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<h3>Global Configuration</h3>
|
|
<p>Or enable everywhere—every project on your machine gets these servers. Add to <code>~/.claude/settings.json</code>:</p>
|
|
<div class="card-code-block">
|
|
<pre><code>{
|
|
"mcpServers": {
|
|
"playwright": {
|
|
"type": "stdio",
|
|
"command": "npx",
|
|
"args": ["-y", "@playwright/mcp@latest"],
|
|
"env": {}
|
|
},
|
|
"context7": {
|
|
"type": "http",
|
|
"url": "https://mcp.context7.com/mcp"
|
|
}
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<h3>Requirements</h3>
|
|
<table class="docs-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Server</th>
|
|
<th>Requirement</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Playwright</td>
|
|
<td>Node.js 18+ and npx</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Context7</td>
|
|
<td>Internet connection (HTTP endpoint)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Verifying MCP Servers</h3>
|
|
<p>After you add the config, restart Claude Code. Then test that everything works:</p>
|
|
<div class="card-code-block">
|
|
<pre><code># Ask Claude what it has
|
|
"What MCP tools do you have access to?"
|
|
|
|
# Test Playwright (should work now)
|
|
"Take a screenshot of the current directory listing"
|
|
|
|
# Test Context7 (should fetch real docs)
|
|
"Look up Rails Active Record documentation"
|
|
|
|
# If either fails, double-check your JSON syntax and file paths</code></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="docs-nav-footer">
|
|
<a href="skills.html" class="nav-prev">
|
|
<span class="nav-label">Previous</span>
|
|
<span class="nav-title"><i class="fa-solid fa-arrow-left"></i> Skills</span>
|
|
</a>
|
|
<a href="getting-started.html" class="nav-next">
|
|
<span class="nav-label">Back to</span>
|
|
<span class="nav-title">Getting Started <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
</nav>
|
|
</article>
|
|
</main>
|
|
</div>
|
|
|
|
<style>
|
|
.framework-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--space-l);
|
|
margin: var(--space-l) 0;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.framework-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
.framework-category {
|
|
background-color: var(--color-surface);
|
|
padding: var(--space-l);
|
|
border-radius: var(--radius-m);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.framework-category h4 {
|
|
margin: 0 0 var(--space-s) 0;
|
|
color: var(--color-accent);
|
|
font-size: var(--font-size-s);
|
|
}
|
|
|
|
.framework-category ul {
|
|
margin: 0;
|
|
padding-left: var(--space-l);
|
|
}
|
|
|
|
.framework-category li {
|
|
margin: var(--space-xs) 0;
|
|
font-size: var(--font-size-s);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
|
|
document.querySelector('.docs-sidebar').classList.toggle('open');
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|