From @learningwithcole · ELI5: Claude is the brain, MCP servers are its hands.
Run these in your normal terminal, then type /mcp inside Claude Code to log in where needed. Check that they're connected with claude mcp list.
1. Playwright: Claude uses a real browser
Microsoft · microsoft/playwright-mcp (opens in a new tab) · 38K+ ★
claude mcp add playwright npx @playwright/mcp@latest
Try: "Open localhost:3000, click every button and tell me what breaks."
2. Context7: up-to-date docs for any library
Upstash · upstash/context7 (opens in a new tab) · 63K+ ★
npx ctx7 setup --claude
The free API key gives higher rate limits. Try: "Use Context7 to check the latest Next.js docs before you write this."
3. GitHub: issues, PRs and repos
GitHub · github/github-mcp-server (opens in a new tab) · 33K+ ★
claude mcp add --transport http github https://api.githubcopilot.com/mcp/ --header "Authorization: Bearer YOUR_GITHUB_PAT"
Create a fine-grained token with only the repos and permissions you need. Try: "Summarize the open issues and draft a fix for the top one."
4. Notion: your docs and notes
Notion (remote, OAuth) · developers.notion.com/docs/mcp (opens in a new tab)
claude mcp add --transport http notion https://mcp.notion.com/mcp
Then /mcp → notion → Authenticate. Try: "Turn my 'Ideas' page into a project plan."
5. Supabase: your database
Supabase (remote, OAuth) · supabase.com/docs/guides/getting-started/mcp (opens in a new tab)
claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp"
Safety: Supabase recommends read-only mode (?read_only=true), scoping to one project (?project_ref=<id>), and using a development branch rather than production. Keep tool approvals on.
Honest note: every server you add can read what you give it access to. Only install servers from official sources, and remove the ones you don't use (claude mcp remove <name>).