GuideSlate Editorial Library — Full English AI tool tutorials are 100% free · Companion .zip starter kits $9.90 one-time 全部工具包
MCP & browser agents Updated Nov 2026 · v1.9 · Saves 3.5 hrs · Intermediate

The safe 5-server MCP config for browser QA, read-only SQL, and Git

Wire Chrome DevTools, read-only Postgres, scoped filesystem, and GitHub search into Claude Desktop or local coding agents without exposing production write credentials.

ARCHITECTURE PIPELINE
01 · Agent Claude / IDE 02 · MCP Router Scoped env 03 · Browser DevTools QA 04 · Database Read-only role

Why default setups fall short

Most tutorials tell you to paste root database URLs and unrestricted shell servers straight into claude_desktop_config.json. One hallucinated migration later, your staging tables are gone. This guide sets up a hardened 5-server Model Context Protocol stack that gives your agent full live browser inspection and SQL diagnostics with zero destructive permissions.

Prerequisites before starting

  • Node.js 20+ installed locally
  • Claude Desktop, Cursor, or any MCP-compatible agent client
  • Google Chrome or Chromium for live DevTools inspection

Step-by-step implementation

STEP 01

1. Create a strictly read-only database role with a 5-second timeout

Never pass your application's primary DATABASE_URL to an MCP server. Create a dedicated PostgreSQL role limited to SELECT with statement_timeout set to 5000ms so an unindexed join cannot lock production.

CREATE ROLE mcp_reader WITH LOGIN PASSWORD 'strong_random_secret';
GRANT CONNECT ON DATABASE app_prod TO mcp_reader;
GRANT USAGE ON SCHEMA public TO mcp_reader;
GRANT SELECT ON ALL TABLES IN SCHEMA public TO mcp_reader;
ALTER ROLE mcp_reader SET statement_timeout = '5000';
STEP 02

2. Pin exact package versions in claude_desktop_config.json

Avoid floating @latest tags on npx MCP invocations—both for cold-start speed and supply-chain safety. Pin verified versions and scope the filesystem server exclusively to your active project directory.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["[email protected]", "--headless=false"]
    }
  }
}
STEP 03

3. Automate end-to-end visual and console verification

Pair Chrome DevTools MCP with a verification checklist skill so your agent checks network 4xx/5xx responses, console uncaught errors, and mobile 375px overflow automatically after every edit.

More practical field guides

View all 6 guides
Claude & Cursor skills Featured kit
Saves 4.5 hrs · v2.4
Replace generic AI interfaces with a custom SKILL.md design token system

How top solo builders force Claude Code, Cursor, and Antigravity to output studio-grade editorial interfaces instead of default blue-gray Tailwind cards.

01 · Input SKILL.md rules 02 · Tokens 6-hex palette 03 · Guardrail Anti-cliche lint 04 · Output Editorial SSR UI
Companion .zip starter kit (4 files) $9.90 one-time
01-editorial-frontend-SKILL.md (6.4 KB)02-cursor-anti-slop-rules.mdc (3.8 KB)03-architectural-bento-tokens.css (5.1 KB)README-quickstart.md (2.2 KB)
Read free guide
n8n & automation
Saves 6 hrs · v3.1
Monitor X and Reddit buying-intent threads every 15 minutes with n8n

Skip $99/mo social listening SaaS tools. Poll targeted RSS and search endpoints, score high-intent leads with a low-cost Flash LLM, and push ready-to-reply alerts to Slack.

01 · Cron 15m Search feeds 02 · Dedup SQLite hash 03 · Flash LLM Score >= 8/10 04 · Webhook Slack alert
Companion .zip starter kit (4 files) $9.90 one-time
01-n8n-intent-radar-v3.json (11.2 KB)02-intent-classifier-prompt.md (3.4 KB)03-docker-compose.n8n.yml (1.9 KB)README-quickstart.md (2.0 KB)
Read free guide