# mcp-server-skills

A layout for MCP servers in Next.js: shared Zod schemas, a thin route, and server actions that feed the web UI.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 385 installs · ★ 23
- Author: gocallum
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/gocallum/nextjs16-agent-skills/tree/HEAD/skills/mcp-server-skills/SKILL.md
- Updated: 2026-01-21
- HTML: https://affpapa.org/en/nevibecode/skills/mcp-server-skills

## What it does

This skill lays out the App Router folders for an MCP server. The handler sits in `app/api/[transport]/route.ts`, schemas and pure logic go in `lib/*`, and server actions in `app/actions/mcp-actions.ts` import that same logic so the web UI and tests stay in step.

The point is a small `route.ts`. It only wires `createMcpHandler` from `mcp-handler` and registers tools with `server.tool`, pulling name, description and schema from the shared file. Tool replies follow one shape, `{ success, result | error }`, which keeps MCP output and UI output from drifting apart. HTTP and SSE run through `/api/[transport]`; stdio needs its own entrypoint. Set `basePath` to match the folder path.

For desktop testing the skill shows a config that points `mcp-remote` at `http://localhost:3000/api/mcp`. Nothing connects unless that local server is up. It also warns against stateful globals, since those break on serverless hosting such as Vercel, where `maxDuration` and `runtime` may need setting.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add gocallum/nextjs16-agent-skills --skill mcp-server-skills -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/mcp-server-skills/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/mcp-server-skills/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add gocallum/nextjs16-agent-skills --skill mcp-server-skills -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/mcp-server-skills/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add gocallum/nextjs16-agent-skills --skill mcp-server-skills -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/mcp-server-skills/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install gocallum/nextjs16-agent-skills mcp-server-skills
```

2. **Manually: put the files in place**
- File: `.github/skills/mcp-server-skills/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add gocallum/nextjs16-agent-skills --skill mcp-server-skills -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/gocallum/nextjs16-agent-skills --path skills/mcp-server-skills
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/mcp-server-skills/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add gocallum/nextjs16-agent-skills --skill mcp-server-skills -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/gocallum/nextjs16-agent-skills/tree/HEAD/skills/mcp-server-skills/SKILL.md

## When to use it
- define a tool's Zod schema once and reuse it in both MCP and the UI
- keep `route.ts` thin by moving logic into `lib/*`
- check MCP tool replies through server actions in the web UI
- hook an HTTP MCP transport into Claude Desktop with `mcp-remote`
- standardise tool and UI responses as `{ success, result | error }`

## Example prompts
- Build the MCP server on Next.js with this skill: put the Zod schemas in `lib/dice.ts` and wire `createMcpHandler` in `app/api/[transport]/route.ts`.
- Add a `roll_dice` tool plus a server action that runs the same logic for a web test.
- Set up the Claude Desktop config with `mcp-remote` pointing at `http://localhost:3000/api/mcp`.

## Similar
- [setup-matt-pocock-skills](https://affpapa.org/en/nevibecode/skills/setup-matt-pocock-skills.md) — skill · 1052851 installs
- [ask-matt](https://affpapa.org/en/nevibecode/skills/ask-matt.md) — skill · 766587 installs
- [to-tickets](https://affpapa.org/en/nevibecode/skills/to-tickets.md) — skill · 711230 installs
- [writing-plans](https://affpapa.org/en/nevibecode/skills/writing-plans.md) — skill · 282859 installs
- [caveman-review](https://affpapa.org/en/nevibecode/skills/caveman-review.md) — skill · 411800 installs
- [caveman-compress](https://affpapa.org/en/nevibecode/skills/caveman-compress.md) — skill · 411500 installs

From the same set: [gocallum/nextjs16-agent-skills](https://affpapa.org/en/nevibecode/by/gocallum/nextjs16-agent-skills.md) — 6 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md