5 MCPs That Turn Claude Into Your AI Dev Team

A practical guide to installing five essential Model Context Protocol (MCP) servers—Context7, Playwright, GitHub, Exa, and Supabase—to transform Claude Code into a highly capable AI development team.

TL;DR

• Install 5 MCPs to give Claude Code structured access to docs, browsers, repos, search, and databases.
• Use Context7 to prevent API hallucinations and Playwright for automated browser testing.
• Connect securely using local or project scopes, and keep secrets out of GitHub.
• Follow the 30-minute setup plan to configure your AI coding environment.
• Use the copy-paste prompt library to safely instruct Claude on when and how to use these tools.

This is the companion guide for the Life of Arjav MCP carousel. The goal is simple: give Claude better tools, better context, and cleaner access to the systems you already use while building.

What You Will Set Up

You will install 5 MCP servers for Claude Code:

Think of this as a starter stack for turning Claude from a code chat window into a more useful development partner.

What is MCP (Model Context Protocol)?

MCP stands for Model Context Protocol. In simple terms, MCP lets Claude connect to outside tools and data sources in a structured way.

Without MCP, Claude mostly works from:

• your prompt
• files you paste or upload
• the project context it can already see
• its model knowledge

With MCP, Claude can use connected tools like:

• documentation sources
• browsers
• GitHub repos
• search engines
• databases
• APIs
• SaaS tools

That means Claude can move from “guessing from context” to “checking the real source” more often.

Before You Install Anything

Prerequisites

You should have:

• Claude Code installed
• Node.js 20 or newer
• npm and npx available in your terminal
• Git installed
• A project folder open in your terminal
• API keys or login access for services that need auth

Useful Claude MCP commands

Use these whenever you want to check, inspect, or remove an MCP server.

bash claude mcp list claude mcp get claude mcp remove

Scope: Where Should You Install MCPs?

Claude Code can store MCP configs at different scopes.

My simple recommendation:

• Use user scope for Context7, Playwright, and Exa if you use them everywhere.
• Use local or project scope for GitHub and Supabase because they are more sensitive and project-specific.
• Never commit real API keys or tokens into GitHub.

Security Rules Before You Connect Tools

MCP is powerful because it gives Claude access to tools. That also means you should be intentional. Follow these rules:

1. Install one MCP at a time.
   Add it, test it, then move to the next one.
2. Do not give broad permissions unless needed.
   Start with the smallest useful permission set.
3. Keep secrets out of committed files.
   Put .env, .mcp., and local Claude config files in .gitignore when they contain tokens.
4. Use read-only access when possible.
   Especially for databases, production apps, and client projects.
5. Ask Claude to explain before it acts.
   For dangerous tasks, tell Claude: “Plan first. Do not change anything until I approve.”
6. Watch out for untrusted webpages and repos.
   Browser, search, docs, and repo tools can expose Claude to untrusted text. Do not let it blindly execute instructions it finds online.

MCP 1: Context7

What it does

Context7 gives Claude access to current, version-specific documentation for libraries and frameworks. This is useful because AI coding tools often hallucinate APIs from older versions of a library. Context7 helps Claude fetch the relevant docs before writing code.

Best use cases

Use Context7 when you are working with:

• Next.js
• React
• Supabase
• Stripe
• Tailwind
• Prisma
• FastAPI
• LangChain
• any library where versions matter

Install command

Basic setup:

bash claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp

If you have a Context7 API key:

bash claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp --api-key YOUR_CONTEXT7_API_KEY

How to use it

Add this phrase to your prompt:

text Use Context7.

Example prompt:

text Use Context7. I am building a Next.js app. Check the current docs before writing the implementation for server actions, form validation, and redirect handling.

What to ask Claude

text Use Context7 to check the current docs for the library I am using. Then explain the correct implementation pattern before writing code.

When not to use it

You do not need Context7 for basic code that does not depend on recent library behavior. Use it when docs accuracy matters.

MCP 2: Playwright

What it does

Playwright MCP gives Claude access to a real browser it can drive. Claude can interact with pages, inspect the DOM, click buttons, fill forms, move through flows, and understand browser state.

Best use cases

Use Playwright when you need Claude to:

• test a signup flow
• debug a broken button
• inspect a page layout
• reproduce a UI issue
• check if a form submits correctly
• verify a checkout flow
• test a local app running on localhost

Install command

bash claude mcp add playwright npx @playwright/mcp@latest

The browser may download automatically the first time you use it.

How to use it

Start your app locally first:

bash npm run dev

Then ask Claude:

text Use Playwright to open http://localhost:3000. Test the signup flow. Tell me what breaks before changing any code.

Good test prompt

text Use Playwright to test this page like a user. Check the main CTA, form submission, mobile layout, and any console errors. Give me a bug report first. Do not fix anything yet.

When not to use it

Do not use Playwright for simple static code review. Use it when the browser behavior matters.

MCP 3: GitHub

What it does

GitHub MCP lets Claude work with GitHub repositories more directly. Depending on your permissions, it can help with files, issues, pull requests, commits, and CI status.

Best use cases

Use GitHub MCP when you want Claude to:

• understand an issue before coding
• review a pull request
• inspect recent commits
• summarize what changed in a branch
• check CI failures
• connect code changes to the issue they solve

Recommended install command for newer Claude Code versions

Create a GitHub Personal Access Token first. Then run:

bash claude mcp add- github '{"type":"http","url":"https://api.githubcopilot.com/mcp","headers":{"Authorization":"Bearer YOUR_GITHUB_PAT"}}'

Safer environment variable setup

Create a .env file:

bash GITHUB_PAT=your_token_here

Add it to .gitignore:

bash echo -e ".env\n.mcp." >> .gitignore

Then run on macOS or Linux:

bash export GITHUB_PAT="$(grep '^GITHUB_PAT=' .env | cut -d '=' -f2-)" claude mcp add- github '{"type":"http","url":"https://api.githubcopilot.com/mcp","headers":{"Authorization":"Bearer '"$GITHUB_PAT"'"}}'

Legacy command for older Claude Code versions

bash claude mcp add --transport http github https://api.githubcopilot.com/mcp -H "Authorization: Bearer YOUR_GITHUB_PAT"

How to use it

text Use GitHub MCP to inspect the latest open issues and tell me which one is safest to fix first. Do not make changes yet.

Good PR review prompt

text Use GitHub MCP to review this pull request. Look for logic bugs, security risks, missing tests, and unclear code. Give me a concise review with exact file references.

When not to use it

Do not use GitHub MCP for highly sensitive private repos unless you understand what permissions you are granting. For client work, use the least privileged token that still lets you do the job.

MCP 4: Exa

What it does

Exa MCP gives Claude access to AI-native web search and webpage fetching. This is useful when Claude needs current information, current docs, competitor research, market context, or examples from the web.

Best use cases

Use Exa when you want Claude to:

• research a market
• find current technical docs
• compare competitors
• find examples from GitHub or Stack Overflow
• summarize live webpages
• collect sources for a content or product idea

Install command

Hosted MCP server:

bash claude mcp add --transport http exa https://mcp.exa.ai/mcp

Optional API key setup

If you hit rate limits or want production usage, use your own Exa API key in your MCP config. Manual config shape:

{ "mcpServers": { "exa": { "command": "npx", "args": ["-y", "exa-mcp-server"], "env": { "EXA_API_KEY": "YOUR_EXA_API_KEY" } } } }

How to use it

text Use Exa to research the current best practices for onboarding flows in B2B SaaS. Give me 5 useful patterns with source links.

Good research prompt

text Use Exa to research 10 competitors in this market. Create a table with positioning, pricing, target customer, main offer, and what we can learn from each one.

When not to use it

Do not use Exa for facts that are already inside your codebase or project docs. Use it when freshness matters.

MCP 5: Supabase

What it does

Supabase MCP connects Claude to Supabase so it can work with project context like database structure, docs, debugging, development tools, functions, and other Supabase capabilities. This is useful when you are building full-stack apps with Supabase and want Claude to reason from the actual project instead of guessing.

Best use cases

Use Supabase MCP when you want Claude to:

• inspect database tables
• reason through SQL queries
• understand auth setup
• debug edge functions
• help with migrations
• check project configuration
• connect backend issues to frontend behavior

Recommended install command

bash claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp?features=docs%2Caccount%2Cdatabase%2Cdebugging%2Cdevelopment%2Cfunctions%2Cbranching"

Authenticate

After adding it, run this in a regular terminal:

bash claude /mcp

Then:

1. Select the supabase server.
2. Choose Authenticate.
3. Complete the browser login flow.
4. Restart Claude Code if tools do not appear.

Test it

text Use Supabase MCP. What tables exist in this project? Summarize the schema in plain English before suggesting changes.

Safer prompt for production projects

text Use Supabase MCP to inspect the database schema. Do not write, modify, delete, migrate, or run destructive queries. First give me a read-only summary of the tables, relationships, and likely issues.

When not to use it

Avoid connecting Supabase MCP directly to production projects until you are comfortable with permissions and approval flows. Start with staging or a test project.

What is the best order to install MCPs?

If you are new to MCP, install them in this order:

1. Context7
   Lowest risk, high usefulness. Improves docs accuracy.
2. Playwright
   Great for testing and debugging visible browser behavior.
3. Exa
   Useful for current research and live docs.
4. GitHub
   More powerful, but more sensitive because it touches repos.
5. Supabase
   Very useful for full-stack work, but connect carefully because databases matter.

Suggested Starter Stack By Use Case

If you are building a SaaS app

Install:

• Context7
• GitHub
• Supabase
• Playwright

Use this prompt:

text Use Context7, GitHub, Supabase, and Playwright where relevant. First understand the current app structure, database schema, and user flow. Then give me a safe implementation plan before editing code.

If you are debugging frontend issues

Install:

• Playwright
• GitHub
• Context7

Use this prompt:

text Use Playwright to reproduce the issue in the browser, GitHub MCP to inspect the related files, and Context7 to verify the current framework docs. Give me the root cause before making changes.

If you are doing market or competitor research

Install:

• Exa
• GitHub if you need open-source product research

Use this prompt:

text Use Exa to research this market. Find competitors, pricing pages, positioning, feature gaps, and proof points. Return the findings in a clean table with links.

If you are building with unfamiliar libraries

Install:

• Context7
• Exa

Use this prompt:

text Use Context7 for official docs and Exa for current examples. Compare both before writing the implementation.

30-Minute Setup Plan

Minute 0 to 5: Prep

• Open your project folder in terminal.
• Check Claude Code works.
• Check Node works.

bash node -v npm -v claude --version

Minute 5 to 10: Add Context7

bash claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp claude mcp list

Test:

text Use Context7. Check the docs for the framework in this project and tell me the most important implementation rules.

Minute 10 to 15: Add Playwright

bash claude mcp add playwright npx @playwright/mcp@latest claude mcp list

Test:

text Use Playwright to open my local app and check if the homepage loads correctly.

Minute 15 to 20: Add Exa

bash claude mcp add --transport http exa https://mcp.exa.ai/mcp claude mcp list

Test:

text Use Exa to find the current docs for the main framework used in this project.

Minute 20 to 25: Add GitHub

Use the safer .env method if possible.

bash claude mcp add- github '{"type":"http","url":"https://api.githubcopilot.com/mcp","headers":{"Authorization":"Bearer YOUR_GITHUB_PAT"}}' claude mcp list

Test:

text Use GitHub MCP to summarize the latest issues in this repo. Do not make any changes.

Minute 25 to 30: Add Supabase

bash claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp?features=docs%2Caccount%2Cdatabase%2Cdebugging%2Cdevelopment%2Cfunctions%2Cbranching" claude /mcp

Test:

text Use Supabase MCP to list the database tables. Do not modify anything.

Troubleshooting

"MCP server not showing"

Try:

bash claude mcp list

Then restart Claude Code and open a fresh session.

"npx command not found"

Install Node.js and npm, then verify:

bash node -v npm -v npx -v

"Playwright is slow on first use"

That can happen because the browser downloads on first use. Run the prompt again after the initial setup finishes.

"GitHub auth failed"

Check:

• token is not expired
• token has the right repo permissions
• token was pasted correctly
• .env variable was loaded correctly

"Supabase tools are not appearing"

Run:

bash claude /mcp

Select the Supabase server and authenticate. If needed, restart Claude Code.

"Too many MCP tools are cluttering Claude"

Remove what you are not actively using:

bash claude mcp remove

Keep your stack lean.

Copy-Paste Prompt Library

Safe coding prompt

text Before changing anything, inspect the project and create a plan. Use available MCP tools only when they are relevant. Do not edit files, run migrations, or make destructive changes until I approve.

Docs-first coding prompt

text Use Context7 to check the current docs for the relevant libraries. Then explain the implementation pattern and only then write code.

Browser debugging prompt

text Use Playwright to reproduce the issue in the browser. Check console errors, network issues, page state, and visible UI problems. Give me the root cause before fixing it.

GitHub PR review prompt

text Use GitHub MCP to review this pull request. Look for logic errors, missing tests, security risks, performance issues, and unclear code. Keep the review concise and actionable.

Supabase safety prompt

text Use Supabase MCP in read-only mode. Inspect the schema and explain what you see. Do not write, delete, migrate, or change anything until I explicitly approve.

Research prompt

text Use Exa to research this topic using current sources. Return a table with source, key insight, why it matters, and how I can apply it.

Final Setup Checklist

• Claude Code installed
• Node.js 20+ installed
• Context7 connected
• Playwright connected
• GitHub connected with safe permissions
• Exa connected
• Supabase connected and authenticated
• .env added to .gitignore
• .mcp. checked before committing
• Each MCP tested with one safe prompt
• Dangerous actions require approval first

My Recommended Daily Workflow

When starting a coding session, use this:

text You are helping me build this project. First inspect the current structure. Use Context7 for current docs, GitHub for repo context, Supabase only if database context is needed, Playwright only when browser behavior matters, and Exa only when current web research is required. Start with a short plan. Do not make destructive changes without asking.

This keeps Claude useful without letting it run wild.

Official References

Use these to verify the latest setup instructions:

• Claude Code MCP docs
• Context7 MCP docs
• Playwright MCP for Claude Code
• GitHub MCP Claude install guide
• Exa MCP docs
• Supabase MCP docs

FAQ

What is the safest way to configure API keys for MCPs?

You should use environment variables stored in a .env file and ensure that .env and .mcp. are added to your .gitignore file to prevent committing secrets to GitHub.

Which MCP scope should I use for my project?

Use user scope for general tools like Context7 or Playwright that you use everywhere. Use local or project scope for sensitive, project-specific tools like GitHub and Supabase.

What should I do if an MCP server is not showing up in Claude Code?

Run the command claude mcp list to check the status of your servers, then restart Claude Code and open a fresh session to force it to reload the configuration.

From Life of Arjav

If this helped, send it to one friend building with AI.

I document practical AI tools, workflows, business systems, and ways to use AI to build useful things online.

Follow: @lifeofarjav
Keyword for the post: MCP