add(plugin): mcp-server-dev — skills for building MCP servers

Three skills guiding developers through MCP server design: - build-mcp-server: entry-point decision guide (remote HTTP vs MCPB vs local) - build-mcp-app: interactive UI widgets rendered in chat - build-mcpb: bundled local servers with runtime Includes reference files for scaffolds, tool design, auth (DCR/CIMD), widget templates, manifest schema, and local security hardening.
2026-03-19 23:23:07 +00:00 · 2026-03-18 11:28:09 -07:00
parent d5c15b861c
commit f7ba55786d
14 changed files with 1626 additions and 0 deletions
--- a/plugins/mcp-server-dev/skills/build-mcp-server/SKILL.md
+++ b/plugins/mcp-server-dev/skills/build-mcp-server/SKILL.md
@@ -0,0 +1,177 @@
+---
+name: build-mcp-server
+description: This skill should be used when the user asks to "build an MCP server", "create an MCP", "make an MCP integration", "wrap an API for Claude", "expose tools to Claude", "make an MCP app", or discusses building something with the Model Context Protocol. It is the entry point for MCP server development — it interrogates the user about their use case, determines the right deployment model (remote HTTP, MCPB, local stdio), picks a tool-design pattern, and hands off to specialized skills.
+version: 0.1.0
+---
+
+# Build an MCP Server
+
+You are guiding a developer through designing and building an MCP server that works seamlessly with Claude. MCP servers come in many forms — picking the wrong shape early causes painful rewrites later. Your first job is **discovery, not code**.
+
+Do not start scaffolding until you have answers to the questions in Phase 1. If the user's opening message already answers them, acknowledge that and skip straight to the recommendation.
+
+---
+
+## Phase 1 — Interrogate the use case
+
+Ask these questions conversationally (batch them into one message, don't interrogate one-at-a-time). Adapt wording to what the user has already told you.
+
+### 1. What does it connect to?
+
+| If it connects to… | Likely direction |
+|---|---|
+| A cloud API (SaaS, REST, GraphQL) | Remote HTTP server |
+| A local process, filesystem, or desktop app | MCPB or local stdio |
+| Hardware, OS-level APIs, or user-specific state | MCPB |
+| Nothing external — pure logic / computation | Either — default to remote |
+
+### 2. Who will use it?
+
+- **Just me / my team, on our machines** → Local stdio is acceptable (easiest to prototype)
+- **Anyone who installs it** → Remote HTTP (strongly preferred) or MCPB (if it *must* be local)
+- **Users of Claude desktop who want UI widgets** → MCP app (remote or MCPB)
+
+### 3. How many distinct actions does it expose?
+
+This determines the tool-design pattern — see Phase 3.
+
+- **Under ~15 actions** → one tool per action
+- **Dozens to hundreds of actions** (e.g. wrapping a large API surface) → search + execute pattern
+
+### 4. Does it need interactive UI in the chat?
+
+Forms, pickers, dashboards, confirmation dialogs rendered inline in the conversation → **MCP app** (adds UI resources on top of a standard server).
+
+### 5. What auth does the upstream service use?
+
+- None / API key → straightforward
+- OAuth 2.0 → you'll need a remote server with DCR (Dynamic Client Registration) or CIMD support; see `references/auth.md`
+
+---
+
+## Phase 2 — Recommend a deployment model
+
+Based on the answers, recommend **one** path. Be opinionated. The ranked options:
+
+### ⭐ Remote streamable-HTTP MCP server (default recommendation)
+
+A hosted service speaking MCP over streamable HTTP. This is the **recommended path** for anything wrapping a cloud API.
+
+**Why it wins:**
+- Zero install friction — users add a URL, done
+- One deployment serves all users; you control upgrades
+- OAuth flows work properly (the server can handle redirects, DCR, token storage)
+- Works across Claude desktop, Claude Code, Claude.ai, and third-party MCP hosts
+
+**Choose this unless** the server *must* touch the user's local machine.
+
+→ Scaffold with `references/remote-http-scaffold.md`
+
+### MCP app (remote HTTP + interactive UI)
+
+Same as above, plus **UI resources** — interactive widgets rendered in chat. Forms, file pickers, rich previews, confirmation dialogs. Built once, renders in Claude *and* ChatGPT.
+
+**Choose this when** one or more tools benefit from structured user input or rich output that plain text can't handle.
+
+Usually remote, but can be shipped as MCPB if the UI needs to drive a local app.
+
+→ Hand off to the **`build-mcp-app`** skill.
+
+### MCPB (bundled local server)
+
+A local MCP server **packaged with its runtime** so users don't need Node/Python installed. The sanctioned way to ship local servers.
+
+**Choose this when** the server *must* run on the user's machine — it reads local files, drives a desktop app, talks to localhost services, or needs OS-level access.
+
+→ Hand off to the **`build-mcpb`** skill.
+
+### Local stdio (npx / uvx) — *not recommended for distribution*
+
+A script launched via `npx` / `uvx` on the user's machine. Fine for **personal tools and prototypes**. Painful to distribute: users need the right runtime, you can't push updates, and the only distribution channel is Claude Code plugins.
+
+Recommend this only as a stepping stone. If the user insists, scaffold it but note the MCPB upgrade path.
+
+---
+
+## Phase 3 — Pick a tool-design pattern
+
+Every MCP server exposes tools. How you carve them matters more than most people expect — tool schemas land directly in Claude's context window.
+
+### Pattern A: One tool per action (small surface)
+
+When the action space is small (< ~15 operations), give each a dedicated tool with a tight description and schema.
+
+```
+create_issue    — Create a new issue. Params: title, body, labels[]
+update_issue    — Update an existing issue. Params: id, title?, body?, state?
+search_issues   — Search issues by query string. Params: query, limit?
+add_comment     — Add a comment to an issue. Params: issue_id, body
+```
+
+**Why it works:** Claude reads the tool list once and knows exactly what's possible. No discovery round-trips. Each tool's schema validates inputs precisely.
+
+**Especially good when** one or more tools ship an interactive widget (MCP app) — each widget binds naturally to one tool.
+
+### Pattern B: Search + execute (large surface)
+
+When wrapping a large API (dozens to hundreds of endpoints), listing every operation as a tool floods the context window and degrades model performance. Instead, expose **two** tools:
+
+```
+search_actions  — Given a natural-language intent, return matching actions
+                  with their IDs, descriptions, and parameter schemas.
+execute_action  — Run an action by ID with a params object.
+```
+
+The server holds the full catalog internally. Claude searches, picks, executes. Context stays lean.
+
+**Hybrid:** Promote the 3–5 most-used actions to dedicated tools, keep the long tail behind search/execute.
+
+→ See `references/tool-design.md` for schema examples and description-writing guidance.
+
+---
+
+## Phase 4 — Pick a framework
+
+Recommend one of these two. Others exist but these have the best MCP-spec coverage and Claude compatibility.
+
+| Framework | Language | Use when |
+|---|---|---|
+| **Official TypeScript SDK** (`@modelcontextprotocol/sdk`) | TS/JS | Default choice. Best spec coverage, first to get new features. |
+| **FastMCP 2.0** | Python | User prefers Python, or wrapping a Python library. Decorator-based, very low boilerplate. |
+
+If the user already has a language/stack in mind, go with it — both produce identical wire protocol.
+
+---
+
+## Phase 5 — Scaffold and hand off
+
+Once you've settled the four decisions (deployment model, tool pattern, framework, auth), do **one** of:
+
+1. **Remote HTTP, no UI** → Scaffold inline using `references/remote-http-scaffold.md`. This skill can finish the job.
+2. **MCP app (UI widgets)** → Summarize the decisions so far, then load the **`build-mcp-app`** skill.
+3. **MCPB (bundled local)** → Summarize the decisions so far, then load the **`build-mcpb`** skill.
+4. **Local stdio prototype** → Scaffold inline (simplest case), flag the MCPB upgrade path.
+
+When handing off, restate the design brief in one paragraph so the next skill doesn't re-ask.
+
+---
+
+## Quick reference: decision matrix
+
+| Scenario | Deployment | Tool pattern |
+|---|---|---|
+| Wrap a small SaaS API | Remote HTTP | One-per-action |
+| Wrap a large SaaS API (50+ endpoints) | Remote HTTP | Search + execute |
+| SaaS API with rich forms / pickers | MCP app (remote) | One-per-action |
+| Drive a local desktop app | MCPB | One-per-action |
+| Local desktop app with in-chat UI | MCP app (MCPB) | One-per-action |
+| Read/write local filesystem | MCPB | Depends on surface |
+| Personal prototype | Local stdio | Whatever's fastest |
+
+---
+
+## Reference files
+
+- `references/remote-http-scaffold.md` — minimal remote server in TS SDK and FastMCP
+- `references/tool-design.md` — writing tool descriptions and schemas Claude understands well
+- `references/auth.md` — OAuth, DCR, CIMD, token storage patterns
--- a/plugins/mcp-server-dev/skills/build-mcp-server/references/auth.md
+++ b/plugins/mcp-server-dev/skills/build-mcp-server/references/auth.md
@@ -0,0 +1,73 @@
+# Auth for MCP Servers
+
+Auth is the reason most people end up needing a **remote** server even when a local one would be simpler. OAuth redirects, token storage, and refresh all work cleanly when there's a real hosted endpoint to redirect back to.
+
+---
+
+## The three tiers
+
+### Tier 1: No auth / static API key
+
+Server reads a key from env. User provides it once at setup. Done.
+
+```typescript
+const apiKey = process.env.UPSTREAM_API_KEY;
+if (!apiKey) throw new Error("UPSTREAM_API_KEY not set");
+```
+
+Works for local stdio, MCPB, and remote servers alike. If this is all you need, stop here.
+
+### Tier 2: OAuth 2.0 via Dynamic Client Registration (DCR)
+
+The MCP host (Claude desktop, Claude Code, etc.) discovers your server's OAuth metadata, **registers itself as a client dynamically**, runs the auth-code flow, and stores the token. Your server never sees credentials — it just receives bearer tokens on each request.
+
+This is the **recommended path** for any remote server wrapping an OAuth-protected API.
+
+**Server responsibilities:**
+
+1. Serve OAuth Authorization Server Metadata (RFC 8414) at `/.well-known/oauth-authorization-server`
+2. Serve an MCP-protected-resource metadata document pointing at (1)
+3. Implement (or proxy to) a DCR endpoint that hands out client IDs
+4. Validate bearer tokens on incoming `/mcp` requests
+
+Most of this is boilerplate — the SDK has helpers. The real decision is whether you **proxy** to the upstream's OAuth (if they support DCR) or run your own **shim** authorization server that exchanges your tokens for upstream tokens.
+
+```
+┌─────────┐   DCR + auth code   ┌──────────────┐   upstream OAuth   ┌──────────┐
+│ MCP host│ ──────────────────> │ Your MCP srv │ ─────────────────> │ Upstream │
+└─────────┘ <── bearer token ── └──────────────┘ <── access token ──└──────────┘
+```
+
+### Tier 3: CIMD (Client ID Metadata Document)
+
+An alternative to DCR for ecosystems that don't want dynamic registration. The host publishes its client metadata at a well-known URL; your server fetches it, validates it, and issues a client credential. Lower friction than DCR for the host, slightly more work for you.
+
+Use CIMD when targeting hosts that advertise CIMD support in their client metadata. Otherwise default to DCR — it's more broadly implemented.
+
+---
+
+## Hosting providers with built-in DCR/CIMD support
+
+Several MCP-focused hosting providers handle the OAuth plumbing for you — you implement tool logic, they run the authorization server. Check their docs for current capabilities. If the user doesn't have strong hosting preferences, this is usually the fastest path to a working OAuth-protected server.
+
+---
+
+## Local servers and OAuth
+
+Local stdio servers **can** do OAuth (open a browser, catch the redirect on a localhost port, stash the token in the OS keychain). It's fragile:
+
+- Breaks in headless/remote environments
+- Every user re-does the dance
+- No central token refresh or revocation
+
+If OAuth is required, lean hard toward remote HTTP. If you *must* ship local + OAuth, the `@modelcontextprotocol/sdk` includes a localhost-redirect helper, and MCPB is the right packaging so at least the runtime is predictable.
+
+---
+
+## Token storage
+
+| Deployment | Store tokens in |
+|---|---|
+| Remote, stateless | Nowhere — host sends bearer each request |
+| Remote, stateful | Session store keyed by MCP session ID (Redis, etc.) |
+| MCPB / local | OS keychain (`keytar` on Node, `keyring` on Python). **Never plaintext on disk.** |
--- a/plugins/mcp-server-dev/skills/build-mcp-server/references/remote-http-scaffold.md
+++ b/plugins/mcp-server-dev/skills/build-mcp-server/references/remote-http-scaffold.md
@@ -0,0 +1,151 @@
+# Remote Streamable-HTTP MCP Server — Scaffold
+
+Minimal working servers in both recommended frameworks. Start here, then add tools.
+
+---
+
+## TypeScript SDK (`@modelcontextprotocol/sdk`)
+
+```bash
+npm init -y
+npm install @modelcontextprotocol/sdk zod express
+npm install -D typescript @types/express @types/node tsx
+```
+
+**`src/server.ts`**
+
+```typescript
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import express from "express";
+import { z } from "zod";
+
+const server = new McpServer({
+  name: "my-service",
+  version: "0.1.0",
+});
+
+// Pattern A: one tool per action
+server.tool(
+  "search_items",
+  "Search items by keyword. Returns up to `limit` matches ranked by relevance.",
+  {
+    query: z.string().describe("Search keywords"),
+    limit: z.number().int().min(1).max(50).default(10),
+  },
+  async ({ query, limit }) => {
+    const results = await upstreamApi.search(query, limit);
+    return {
+      content: [{ type: "text", text: JSON.stringify(results, null, 2) }],
+    };
+  },
+);
+
+server.tool(
+  "get_item",
+  "Fetch a single item by its ID.",
+  { id: z.string() },
+  async ({ id }) => {
+    const item = await upstreamApi.get(id);
+    return { content: [{ type: "text", text: JSON.stringify(item) }] };
+  },
+);
+
+// Streamable HTTP transport (stateless mode — simplest)
+const app = express();
+app.use(express.json());
+
+app.post("/mcp", async (req, res) => {
+  const transport = new StreamableHTTPServerTransport({
+    sessionIdGenerator: undefined, // stateless
+  });
+  res.on("close", () => transport.close());
+  await server.connect(transport);
+  await transport.handleRequest(req, res, req.body);
+});
+
+app.listen(process.env.PORT ?? 3000);
+```
+
+**Stateless vs stateful:** The snippet above creates a fresh transport per request (stateless). Fine for most API-wrapping servers. If tools need to share state across calls in a session (rare), use a session-keyed transport map — see the SDK's `examples/server/simpleStreamableHttp.ts`.
+
+---
+
+## FastMCP 2.0 (Python)
+
+```bash
+pip install fastmcp
+```
+
+**`server.py`**
+
+```python
+from fastmcp import FastMCP
+
+mcp = FastMCP(name="my-service")
+
+@mcp.tool
+def search_items(query: str, limit: int = 10) -> list[dict]:
+    """Search items by keyword. Returns up to `limit` matches ranked by relevance."""
+    return upstream_api.search(query, limit)
+
+@mcp.tool
+def get_item(id: str) -> dict:
+    """Fetch a single item by its ID."""
+    return upstream_api.get(id)
+
+if __name__ == "__main__":
+    mcp.run(transport="http", host="0.0.0.0", port=3000)
+```
+
+FastMCP derives the JSON schema from type hints and the docstring becomes the tool description. Keep docstrings terse and action-oriented — they land in Claude's context window verbatim.
+
+---
+
+## Search + execute pattern (large API surface)
+
+When wrapping 50+ endpoints, don't register them all. Two tools:
+
+```typescript
+const CATALOG = loadActionCatalog(); // { id, description, paramSchema }[]
+
+server.tool(
+  "search_actions",
+  "Find available actions matching an intent. Call this first to discover what's possible. Returns action IDs, descriptions, and parameter schemas.",
+  { intent: z.string().describe("What you want to do, in plain English") },
+  async ({ intent }) => {
+    const matches = rankActions(CATALOG, intent).slice(0, 10);
+    return { content: [{ type: "text", text: JSON.stringify(matches, null, 2) }] };
+  },
+);
+
+server.tool(
+  "execute_action",
+  "Execute an action by ID. Get the ID and params schema from search_actions first.",
+  {
+    action_id: z.string(),
+    params: z.record(z.unknown()),
+  },
+  async ({ action_id, params }) => {
+    const action = CATALOG.find(a => a.id === action_id);
+    if (!action) throw new Error(`Unknown action: ${action_id}`);
+    validate(params, action.paramSchema);
+    const result = await dispatch(action, params);
+    return { content: [{ type: "text", text: JSON.stringify(result) }] };
+  },
+);
+```
+
+`rankActions` can be simple keyword matching to start. Upgrade to embeddings if precision matters.
+
+---
+
+## Deployment checklist
+
+- [ ] `POST /mcp` responds to `initialize` with server capabilities
+- [ ] `tools/list` returns your tools with complete schemas
+- [ ] Errors return structured MCP errors, not HTTP 500s with HTML bodies
+- [ ] CORS headers set if browser clients will connect
+- [ ] Health check endpoint separate from `/mcp` (hosts poll it)
+- [ ] Secrets from env vars, never hardcoded
+- [ ] If OAuth: DCR endpoint implemented — see `auth.md`
--- a/plugins/mcp-server-dev/skills/build-mcp-server/references/tool-design.md
+++ b/plugins/mcp-server-dev/skills/build-mcp-server/references/tool-design.md
@@ -0,0 +1,112 @@
+# Tool Design — Writing Tools Claude Uses Correctly
+
+Tool schemas and descriptions are prompt engineering. They land directly in Claude's context and determine whether Claude picks the right tool with the right arguments. Most MCP integration bugs trace back to vague descriptions or loose schemas.
+
+---
+
+## Descriptions
+
+**The description is the contract.** It's the only thing Claude reads before deciding whether to call the tool. Write it like a one-line manpage entry plus disambiguating hints.
+
+### Good
+
+```
+search_issues — Search issues by keyword across title and body. Returns up
+to `limit` results ranked by recency. Does NOT search comments or PRs —
+use search_comments / search_prs for those.
+```
+
+- Says what it does
+- Says what it returns
+- Says what it *doesn't* do (prevents wrong-tool calls)
+
+### Bad
+
+```
+search_issues — Searches for issues.
+```
+
+Claude will call this for anything vaguely search-shaped, including things it can't do.
+
+### Disambiguate siblings
+
+When two tools are similar, each description should say when to use the *other* one:
+
+```
+get_user      — Fetch a user by ID. If you only have an email, use find_user_by_email.
+find_user_by_email — Look up a user by email address. Returns null if not found.
+```
+
+---
+
+## Parameter schemas
+
+**Tight schemas prevent bad calls.** Every constraint you express in the schema is one fewer thing that can go wrong at runtime.
+
+| Instead of | Use |
+|---|---|
+| `z.string()` for an ID | `z.string().regex(/^usr_[a-z0-9]{12}$/)` |
+| `z.number()` for a limit | `z.number().int().min(1).max(100).default(20)` |
+| `z.string()` for a choice | `z.enum(["open", "closed", "all"])` |
+| optional with no hint | `.optional().describe("Defaults to the caller's workspace")` |
+
+**Describe every parameter.** The `.describe()` text shows up in the schema Claude sees. Omitting it is leaving money on the table.
+
+```typescript
+{
+  query: z.string().describe("Keywords to search for. Supports quoted phrases."),
+  status: z.enum(["open", "closed", "all"]).default("open")
+    .describe("Filter by status. Use 'all' to include closed items."),
+  limit: z.number().int().min(1).max(50).default(10)
+    .describe("Max results. Hard cap at 50."),
+}
+```
+
+---
+
+## Return shapes
+
+Claude reads whatever you put in `content[].text`. Make it parseable.
+
+**Do:**
+- Return JSON for structured data (`JSON.stringify(result, null, 2)`)
+- Return short confirmations for mutations (`"Created issue #123"`)
+- Include IDs Claude will need for follow-up calls
+- Truncate huge payloads and say so (`"Showing 10 of 847 results. Refine the query to narrow down."`)
+
+**Don't:**
+- Return raw HTML
+- Return megabytes of unfiltered API response
+- Return bare success with no identifier (`"ok"` after a create — Claude can't reference what it made)
+
+---
+
+## How many tools?
+
+| Tool count | Guidance |
+|---|---|
+| 1–15 | One tool per action. Sweet spot. |
+| 15–30 | Still workable. Audit for near-duplicates that could merge. |
+| 30+ | Switch to search + execute. Optionally promote the top 3–5 to dedicated tools. |
+
+The ceiling isn't a hard protocol limit — it's context-window economics. Every tool schema is tokens Claude spends *every turn*. Thirty tools with rich schemas can eat 3–5k tokens before the conversation even starts.
+
+---
+
+## Errors
+
+Return MCP tool errors, not exceptions that crash the transport. Include enough detail for Claude to recover or retry differently.
+
+```typescript
+if (!item) {
+  return {
+    isError: true,
+    content: [{
+      type: "text",
+      text: `Item ${id} not found. Use search_items to find valid IDs.`,
+    }],
+  };
+}
+```
+
+The hint ("use search_items…") turns a dead end into a next step.