Optimizing Claude Code: A Developer’s Guide to Configuring 6 Core MCP Servers

1. Overview: What Is the MCP Protocol and Its Benefits for Claude Code

By default, Claude Code is still quite limited. If you want it to browse the web, inspect databases, manage GitHub, and think thoroughly like a seasoned developer, you need to plug in MCP. This guide walks through each tool in detail: what it can do, which command to use to install it, what prompts to ask Claude, and what caveats to keep in mind.

After reading this, you will:

• Understand what MCP is without needing deep programming knowledge.
• Be able to install all 6 MCPs using ready-to-copy commands (or have Claude install them for you).
• Have ready-to-use sample prompts to immediately test each MCP.
• Know how to restrict permissions so Claude doesn’t make unauthorized changes to files, databases, or codebases.

Simply put, Claude Code is the version of Claude that runs inside your command-line interface (Terminal), specialized in reading and writing code directly on your machine. On its own, it can already read, modify files, and run commands. However, it cannot automatically open a browser, connect to a database, or know when a library has just released a new version.

MCP (Model Context Protocol) is an open “plug-in standard” that allows AI to connect with external tools[13]. Think of it like a USB port: any device built to the USB standard will work when plugged into any computer. Each MCP server (a small background program) is an accessory: plugging it in gives Claude the “hands and feet” needed to perform new tasks[1].

A few terms you will encounter: Terminal, npx, Token / API key. npx requires Node.js 18 or higher[2] from nodejs.org (LTS recommended).

node -v

If it outputs something like v22.x.x, you’re good to go. Postgres MCP Pro is written in Python and runs via the uvx command from the uv tool[12]. Paste the corresponding command into your Terminal:

2. Installation Guide and Basic Command Syntax for Beginners

Every MCP is installed using a single command in the following format[1]:

claude mcp add [tuỳ chọn]  -- 

--scope user means install once, use across all projects on your machine. If omitted, it defaults to being used only in the current directory. With --scope project, Claude writes the configuration to a .mcp.json file for the entire team to share.

Step 4: Check if MCP is running

Type claude mcp list in the Terminal, or type /mcp directly inside Claude Code. Any MCP showing connected is ready to use.

Easiest Way to Install Any MCP from the Documentation

1. Scroll down to the MCP you want to install, click Copy in the lenh-cai.txt box.
2. Open Claude Code, paste the copied content into the chat box, then send: “Please help us install this MCP, ask us if a token or path is needed.”
3. Claude will automatically run the claude mcp add command. Click agree when it asks for permission to run the command.
4. Exit Claude Code and reopen it (type /exit, then claude), then type /mcp to check.

Using Windows?:npxcmd /c-- cmd /c npx @playwright/mcp@latest

3. MCP 1: Playwright – Test Automation and Browser Control

Playwright[2]Source code repository

# Playwright MCP: Install for Claude Code
# Requirement: Node.js 18 or higher (run `node -v` to check)


# Install for ALL projects on your machine (recommended):

claude mcp add --scope user playwright -- npx @playwright/mcp@latest


# On Windows (without WSL), prepend "cmd /c" before npx:

claude mcp add --scope user playwright -- cmd /c npx @playwright/mcp@latest


# Verify installation:

claude mcp list

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Use Playwright to open https://devpixelvn.com:3000, log in with account [email protected] / 123456,
go to the Cart page, add any 2 products, and click Checkout.
Record which step fails, take a screenshot of the error, and suggest a fix in the code.

---

Open our homepage on a mobile viewport (390x844), check if
any text overflows or if any buttons are covered. List each issue along with its location.

claude mcp add --scope user playwright -- npx @playwright/mcp@latest

Tip: The first time it runs, Playwright may need to download browsers. If Claude reports missing browsers, just send: “Please install the browsers for Playwright for us.” And remember to start your web app first (e.g., npm run dev) before asking Claude to inspect it. Grant Claude permissions to read files, search code, fix bugs, and clean up directories—but only within the directories you allow. Filesystem MCP[3] is an official server in the Model Context Protocol reference implementations. It comes with built-in tools: Read one or multiple files, list directories, render directory trees, search files, inspect file metadata (read-only group); create directories, write files, edit files, and move/rename (write group). Security guardrails: During setup, you specify the allowed directories. Claude can only operate within those folders and cannot touch anything else. If the client supports the “roots” capability, the list of directories provided by the client will override the setup list[3]. Claude Code natively reads and edits files within your opened project directory anyway. Filesystem MCP is most useful when: You want Claude to work with folders outside your project (e.g., documentation, images), you want an explicit list of allowed directories, or you share the same configuration with Claude Desktop—the chat app version that cannot natively read local files. View the directory tree of ~/Projects/shop, find all references calling the old formatPrice function,

change them to formatCurrency, and list the modified files.

Organize the directory ~/Documents/tai-lieu: Move PDF files into pdf/, images into images/,

DO NOT delete any files, and report back the list of moved items once finished.

4. MCP 2: Filesystem – Secure File Management and Permissions

Source Code Repository

# Filesystem MCP: Install for Claude Code
# Requirement: Node.js 18 or higher

# Replace ~/Projects with the directory you ALLOW Claude to access (multiple directories can be listed)


claude mcp add --scope user filesystem -- npx -y @modelcontextprotocol/server-filesystem ~/Projects


# Example allowing 2 directories:

claude mcp add --scope user filesystem -- npx -y @modelcontextprotocol/server-filesystem ~/Projects ~/Documents/tai-lieu


# Windows (without WSL):

claude mcp add --scope user filesystem -- cmd /c npx -y @modelcontextprotocol/server-filesystem C:UsersTEN_BANProjects


claude mcp list

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/ten-ban/Projects",
        "/duong/dan/thu-muc-khac-duoc-phep"
      ]
    }
  }
}

Do not grant entire drives: Do not grant an entire drive. Only allow the specific project directory. Avoid granting the entire user home directory (~) or drive C:, where passwords, SSH keys, and critical configuration files reside. Claude inspects table schemas on its own, writes SQL queries itself, runs queries, and analyzes data without you having to sit and manually describe the messy data. PostgreSQL (Postgres) is a very popular database management system. SQL is the language used to query and modify data within it. The original Postgres MCP version from the Model Context Protocol team has now been archived and is no longer maintained[5]. Therefore, this guide uses Postgres MCP Pro[4], an actively maintained open-source fork that does much more: The connection string (DATABASE_URI) follows the format postgresql://username:password@host:5432/database_name. Obtain this information from wherever you are hosting your database (Supabase, Neon, your local machine…). Inspect the database schema and draw us an ER diagram showing the relationships between the orders, users, and products tables.

What is the revenue for the last 30 days broken down by product category? Provide us with the SQL query used as well.

The /orders page loads very slowly. Find the slowest query related to the orders table and suggest an index.

5. MCP 3: PostgreSQL – Query and Inspect Databases from the Command Line

Source code repository

# Postgres MCP Pro: Install for Claude Code
# Requirement: uv installed (uvx command available). Install uv:

#   macOS/Linux:  curl -LsSf https://astral.sh/uv/install.sh | sh

#   Windows:      powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"


# Replace connection string with YOUR database.

# --access-mode=restricted = READ-only (safe, recommended for beginners)

claude mcp add postgres --env DATABASE_URI=postgresql://username:password@localhost:5432/dbname -- uvx postgres-mcp --access-mode=restricted


# Dev/test database, allow Claude to modify data:

claude mcp add postgres --env DATABASE_URI=postgresql://username:password@localhost:5432/dbname -- uvx postgres-mcp --access-mode=unrestricted


# Alternative without uv: Run via Docker:

claude mcp add postgres --env DATABASE_URI=postgresql://username: [email protected]:5432/dbname -- docker run -i --rm -e DATABASE_URI crystaldba/postgres-mcp --access-mode=restricted

claude mcp list

{
  "mcpServers": {
    "postgres": {
      "command": "uvx",
      "args": [
        "postgres-mcp",
        "--access-mode=restricted"
      ],
      "env": {
        "DATABASE_URI": "postgresql://username:password@localhost:5432/dbname"
      }
    }
  }
}

Be careful with production databases: Be careful with production databasesWith databases currently running for clients, always use –access-mode=restricted and ideally create a dedicated read-only database user for Claude. Do not install with –scope user because each project has its own database. Do not paste connection strings containing actual passwords into files and push them to GitHub. Connect Claude directly to GitHub: Read and create Issues, open Pull Requests, review code, check CI, eliminating the need to constantly switch back and forth between the terminal and the browser. GitHub is where code is stored. Issues track bugs/to-do items; Pull Requests (PRs) propose merging new code into the project. The GitHub MCP Server[6] is the official implementation developed by GitHub, dividing tools into multiple toolsets such as repos, issues, pull_requests, actions (CI), code_security, discussions, notifications… Log in to GitHub then click your avatar in the upper right corner then Settings then Developer settings then Personal access tokens then Generate new token. Select the permitted repositories and only check the permissions you feel comfortable granting to AI[6]. Copy the token (it will only be displayed once). Replace YOUR_GITHUB_PAT with the copied token[7]: claude mcp add-json –scope user github ‘{“type”:”http”,”url”:”https://api.githubcopilot.com/mcp”,”headers”:{“Authorization”:”Bearer YOUR_GITHUB_PAT”}}’

install-command.txt

List open issues labeled "bug" in this repo, sorted by severity.

Fix issue #42, create a new branch, commit, and open a Pull Request with a clear description.


Review PR #57: Point out logic flaws, missing test coverage, and security issues if any.


Why did the latest GitHub Actions run fail? Suggest a fix.

6. MCP 4: GitHub – Automating Pull Request, Issue & Commit Management

Source Code Repository

# GitHub MCP Server (official GitHub): Install for Claude Code
# Step 1: Create a Personal Access Token (PAT) at

#   https://github.com/settings/personal-access-tokens

#   Only check permissions you feel comfortable granting to AI.

# Step 2: Replace YOUR_GITHUB_PAT with the generated token and run:


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


# Alternative: Run locally using Docker

claude mcp add github -e GITHUB_PERSONAL_ACCESS_TOKEN=YOUR_GITHUB_PAT -- docker run -i --rm -e GITHUB_PERSONAL_ACCESS_TOKEN ghcr.io/github/github-mcp-server


# If you want Claude to be READ-ONLY, without permission to create/modify anything:

#   Online version: Change the URL to https://api.githubcopilot.com/mcp/readonly

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

#   Docker version: Add -e GITHUB_READ_ONLY=1

claude mcp add github -e GITHUB_PERSONAL_ACCESS_TOKEN=YOUR_GITHUB_PAT -e GITHUB_READ_ONLY=1 -- docker run -i --rm -e GITHUB_PERSONAL_ACCESS_TOKEN -e GITHUB_READ_ONLY ghcr.io/github/github-mcp-server


claude mcp list

{
  "mcpServers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp",
      "headers": {
        "Authorization": "Bearer ${GITHUB_PAT}"
      }
    }
  }
}

Tip: If you are just starting out, enable read-only mode so Claude can only view without creating or modifying anything: For the online version, change the URL to https://api.githubcopilot.com/mcp/readonly (command readily available in the lenh-cai.txt box). Once you get used to it, you can grant more permissions. AI learns from old data, so it often writes code using outdated library versions. Context7 feeds the latest documentation to Claude before coding. “Hallucination” occurs when an AI confidently invents a non-existent function or uses deprecated syntax. This happens very frequently with React, Next.js, Supabase… because they update continuously. Upstash’s Context7[8] solves this with 2 tools: claude mcp add –scope user –header “Authorization: Bearer YOUR_API_KEY” –transport http context7 https://mcp.context7.com/mcp

How to Use

“use context7”[8]

Create Next.js middleware to check authentication via JWT cookies, redirecting to /login if not authenticated. use context7

Write a user registration function using Supabase Auth. use library /supabase/supabase for API and docs.

7. MCP 5: Context7 – Documentation Lookup And Latest Library Updates

Source Code Repository

# Context7 MCP: Install for Claude Code
# Get a free API key (to increase rate limits) at https://context7.com/dashboard


# Method 1: Fastest, the installer handles everything automatically:

npx ctx7 setup --claude


# Method 2: Remote server (replace YOUR_API_KEY):

claude mcp add --scope user --header "Authorization: Bearer YOUR_API_KEY" --transport http context7 https://mcp.context7.com/mcp


# Method 3: Run locally:

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


claude mcp list

{
  "mcpServers": {
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "Authorization": "Bearer ${CONTEXT7_API_KEY}"
      }
    }
  }
}

No need to type “use context7” every time: No need to type “use context7” every time—just add a line to your project’s CLAUDE.md file: “When writing code using external libraries, always look up the documentation via Context7 first.” Claude will remember it automatically. When facing difficult bugs or complex architecture, don’t force AI to answer immediately. Enable this so it can break down the problem, reason step-by-step, and self-verify. Sequential Thinking[10] gives Claude a structured “scratchpad.” Each time the sequential_thinking tool is called, Claude records a thought step with a sequence number, an estimate of total steps, and can refine its thinking: Better to be a bit slow and certain than quick and completely wrong. claude mcp add –scope user sequential-thinking — npx -y @modelcontextprotocol/server-sequential-thinking

Sample Prompt

Use sequential thinking to diagnose the root cause: Users are occasionally being logged out 
randomly after completing checkout. List hypotheses, verify each against the codebase, and then reach a conclusion.

Use sequential thinking to redesign the cart storage mechanism for 100,000 concurrent users. 
Compare at least 2 approaches before selecting one.

8. MCP 6: Sequential Thinking – Sequential Reasoning to Solve Complex Problems

Source Code Repository

# Sequential Thinking MCP: Install for Claude Code
# Requirements: Node.js 18 or higher


claude mcp add --scope user sequential-thinking -- npx -y @modelcontextprotocol/server-sequential-thinking


# Windows (without WSL):

claude mcp add --scope user sequential-thinking -- cmd /c npx -y @modelcontextprotocol/server-sequential-thinking


# To disable printing thought logs to the screen:

claude mcp add --scope user sequential-thinking -e DISABLE_THOUGHT_LOGGING=true -- npx -y @modelcontextprotocol/server-sequential-thinking


claude mcp list

{
  "mcpServers": {
    "sequential-thinking": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-sequential-thinking"
      ]
    }
  }
}

Combined with the built-in thinking mode:

# 6 MCPs to "Supercharge" Claude Code: DevPixel VN

Instructions: Open Terminal, paste each command line by line (skip lines starting with #).

System requirements: Node.js 18+ ; uv (for Postgres) ; GitHub token ; Context7 API key.

# ============================================================


# 1) Playwright: Give Claude a dedicated browser

claude mcp add --scope user playwright -- npx @playwright/mcp@latest


# 2) Filesystem: Replace ~/Projects with your permitted directory

claude mcp add --scope user filesystem -- npx -y @modelcontextprotocol/server-filesystem ~/Projects


# 3) Postgres: Replace connection string; restricted = read-only

claude mcp add postgres --env DATABASE_URI=postgresql://username:password@localhost:5432/dbname -- uvx postgres-mcp --access-mode=restricted


# 4) GitHub: Replace YOUR_GITHUB_PAT

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


# 5) Context7: Replace YOUR_API_KEY

claude mcp add --scope user --header "Authorization: Bearer YOUR_API_KEY" --transport http context7 https://mcp.context7.com/mcp


# 6) Sequential Thinking

claude mcp add --scope user sequential-thinking -- npx -y @modelcontextprotocol/server-sequential-thinking


# Verification

claude mcp list

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "."]
    },
    "postgres": {
      "command": "uvx",
      "args": ["postgres-mcp", "--access-mode=restricted"],
      "env": {
        "DATABASE_URI": "${DATABASE_URI}"
      }
    },
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp",
      "headers": {
        "Authorization": "Bearer ${GITHUB_PAT}"
      }
    },
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "Authorization": "Bearer ${CONTEXT7_API_KEY}"
      }
    },
    "sequential-thinking": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
    }
  }
}

9. Practical 3-Step Automation Pipeline With the .mcp.json File

Copy the .mcp.json file above into the root directory of your project, then declare the environment variables before launching Claude Code. This approach allows you to share it with colleagues without exposing your tokens. On Mac, files starting with a dot are hidden; press Cmd + Shift + dot to show them. After copying the file into the project, run export GITHUB_PAT=..., export CONTEXT7_API_KEY=..., export DATABASE_URI=..., then open Claude Code in that directory and approve the project’s MCPs. Type /mcp to check the status.

1. Extract and copy the du-an-mau/.mcp.json file into your project’s root directory. (Mac hides dotfiles; press Cmd + Shift + . to reveal them.)
2. Open Claude Code in the project, drag the DOC-TRUOC.txt file into the chat, and type: “Help us set the environment variables and enable these MCPs.”
3. When Claude Code asks if you trust the project’s MCPs, select approve. Type /mcp to verify.

The .mcp.json file uses the ${VARIABLE_NAME} syntax, so it can be pushed to GitHub without leaking tokens[1].

10. Frequently Asked Questions & Troubleshooting (FAQ)

A compilation of solutions for technical issues and common questions when configuring the Model Context Protocol for Claude Code:

Read next: Leveraging 6 Open-Source AI Repositories on GitHub to Build Systems