Home Benchmarks Learn Tools News
Learn · Guides · Tooling

MCP Servers for Web Devs.

The seven MCP servers that earn their keep in a 2026 web-dev stack — and the token tax each one adds to every turn.

SPONSOR

AppSignal — Stop vibe-debugging. Every exception, every backtrace, grouped so you see patterns, not noise.

↗
On this page
  1. What MCP actually is
  2. The seven worth installing
  3. Install snippets
  4. Live: build your stack
  5. Common pitfalls
CH 01

What MCP actually is.

The Model Context Protocol is a small open spec that lets AI tools call external services in a uniform way. A server exposes tools (callable functions) and resources (readable URLs). Your agent's host (Cursor, Claude Code, Codex CLI, Aider, OpenCode) connects, sees the tool list, and decides when to call which.

The win is composability. Install the Playwright MCP and every agent on your machine gains the ability to drive a browser. The cost is honest: every installed server adds its tool schema to every turn. That schema is real tokens — typically 400 to 1200 per server, sometimes more.

  • Tools = verbs. browser_click, db_query, issue_create.
  • Resources = nouns. A Postgres MCP exposes table schemas as resources the agent can read on demand.
  • STDIO transport for local servers (filesystem, local DB, Playwright). HTTP/SSE transport for SaaS-hosted ones (Linear, Sentry).
CH 02

The seven worth installing.

Ranked by frequency of "I'm glad I have this" moments per week for a working web developer. Token costs are approximate, measured against a Claude or GPT-5 schema dump:

Server Use it for Cost / turn Verdict
Playwright MCP Driving the browser to verify a UI change. Capturing screenshots for review. Reading the console for client-side errors. ~900 tok Install
Filesystem MCP Letting an agent read files outside the current workspace (design assets, shared notes). Most editors handle in-workspace files natively. ~500 tok Maybe
Postgres / Drizzle MCP Inspecting the dev DB schema, running read-only queries, understanding what the data actually looks like before writing a query. ~800 tok Install
GitHub MCP Reading issues, opening PRs, leaving review comments, fetching the failing CI log for the run that just blew up. ~1100 tok Install
Linear / Jira MCP Pulling the ticket the work is for, updating status when a PR opens, linking commits back. Especially useful with background agents. ~700 tok Install
Sentry / AppSignal MCP "Why did production 500 yesterday?" The agent fetches the exception, walks the backtrace, proposes a fix grounded in real evidence. ~600 tok Install
Figma MCP Translating a design frame into accurate spacing, colors, and component structure. Lifesaver if you build from Figma; dead weight if you don't. ~850 tok Designer-dependent
Slack MCP Looks useful, almost never is. Agents posting to Slack is more chaos than value 95% of the time. ~700 tok Skip
Brave / Web Search MCP Tempting, but most modern agents have built-in web search. Don't double-pay. ~400 tok Skip

A reasonable default for a working web developer: Playwright + Postgres + GitHub + Linear + Sentry. That's about 4,100 tokens of overhead per turn. At Sonnet input rates, roughly $0.012 per 1,000 turns. Worth it.

CH 03

Install snippets.

Three syntaxes, same idea. Pick your host:

.cursor/mcp.json · per-workspace
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres", "postgres://localhost/dev"]
    },
    "github": {
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": { "Authorization": "Bearer ${GITHUB_TOKEN}" }
    }
  }
}
$ Claude Code · one command per server
claude mcp add playwright npx -y @playwright/mcp@latest
claude mcp add postgres npx -y @modelcontextprotocol/server-postgres postgres://localhost/dev
claude mcp add --transport http github https://api.githubcopilot.com/mcp/
claude mcp list
~/.codex/config.toml · Codex CLI
[mcp_servers.playwright]
command = "npx"
args = ["-y", "@playwright/mcp@latest"]

[mcp_servers.postgres]
command = "npx"
args = ["-y", "@modelcontextprotocol/server-postgres", "postgres://localhost/dev"]
Use a read-only DB URL

Your agent will, at some point, decide a DELETE is the cleanest way to test a hypothesis. Connect MCP to a read-only role — Postgres makes this one CREATE ROLE … LOGIN away. Migrations and writes go through your normal app code, not the agent's loop.

DEMO · INTERACTIVE

Live: build your MCP stack.

Toggle the servers you want. The widget estimates context tax, monthly cost at typical usage, and warns when you're past the "agent picks wrong tools" cliff. All math runs in your browser.

MCP stack builder Heuristic · Numbers in your browser only
Context tax / turn 0 tokens
Pick at least one server to see the impact.
Servers installed
0
Cost @ 1k turns (Sonnet)
$0.00
Tool-selection accuracy
High

Aim for the green zone — under about 4,500 tokens of overhead. Past that you're paying for tools the agent won't pick anyway, because the choice space is too wide.

PITFALLS

Common pitfalls.

Installing every server you see

The MCP server directory is full of impressive demos. Most of them solve someone else's workflow. Install on a "earned it this week" basis: if you didn't use a server's tools in the last seven days, uninstall it.

Production credentials in a local server

Your Postgres MCP pointing at a prod read replica is one prompt-injection away from leaking the user table. Local dev DB only. Production data goes through your normal observability tools, not MCP.

Forgetting MCP servers are processes

STDIO servers fork on every editor reload. Twelve installed servers means twelve spawned Node processes lurking in the background, each holding a megabyte or two of memory. ps aux | grep mcp occasionally to keep yourself honest.

What to read next.

  • Guide · 03 Cursor for Web Developers Where MCP config lives in Cursor, and how it interacts with rules and skills.
  • Guide · 02 Stop Burning Tokens Every MCP server is on every turn's bill. Budget accordingly.
  • Tools Tools index Coding agents and editors that speak MCP fluently.
Changelog
  • 2026-05-22Initial publish.
STATUS ● BUILDING THE FUTURE
MISSION LLM RESOURCES
VERSION BETA 3.0

BUILD WITH AI. SHIP WITH CONFIDENCE.

@WEBDEVELOPERHQ ↗
TERMS / PRIVACY
FRIENDS
Authentic Jobs ↗
Web Reference ↗
Ready.dev ↗
Fullres ↗
© 2026 WEB DEVELOPER / ALL RIGHTS RESERVED