"MCP Server Explained: Extend Your AI Agent in 5 Minutes"

2026-06-24 · mcp tutorial beginner claude code

MCP Servers are your AI Agent's "toolbox" — install one and your AI can operate browsers, read databases, and call APIs.

What Is MCP?

MCP (Model Context Protocol) is an open standard released by Anthropic in 2024. It lets AI agents communicate with external tools — like giving your AI a "USB-C port."

Analogy: - Skill = teaches AI how to do something (knowledge) - MCP Server = gives AI a tool to do something (capability)

Why Use MCP?

Without MCP, an AI Agent can only read/write local files. With MCP, it can: - 🔍 Browse the web (Playwright MCP) - 📊 Query databases (PostgreSQL/MySQL MCP) - 🐙 Operate GitHub (Issues, PRs, Repos) - 📁 Access remote filesystems - 🔎 Search real-time information

5-Minute Install Tutorial

Step 1: Pick an MCP Server

Recommended starters for beginners:

MCP Server	Function	GitHub Stars
Filesystem	Read/write local files	87K
GitHub	Operate Issues/PRs/Repos	30K
Playwright	Browser automation	34K
Context7	Get latest library docs	57K
Chrome DevTools	Debug web pages	44K

Step 2: Install the MCP Server

Using Filesystem MCP as an example:

# macOS / Linux
npx -y @modelcontextprotocol/server-filesystem /path/to/allowed/directory

# Windows
npx -y @modelcontextprotocol/server-filesystem C:\Users\YourName\Projects

Step 3: Configure Claude Code

# Add the MCP Server
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /path/to/project

Step 4: Verify

Restart Claude Code, then type:

Show me what files are in the current directory

If the AI can list files, MCP is installed correctly.

Configuring Claude Desktop

If you use Claude Desktop (not CLI), edit the config file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/allowed"]
    }
  }
}

Save and restart Claude Desktop — look for the 🔨 icon in the top right.

Using Multiple MCP Servers

You can add multiple servers to your config:

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    }
  }
}

MCP vs Skills: When to Use Which?

Scenario	Use MCP	Use Skill
Let AI read/write files	✅ Filesystem MCP	❌
Let AI write better tests	❌	✅ TDD Skill
Let AI operate GitHub	✅ GitHub MCP	❌
Let AI follow coding standards	❌	✅ Coding Standards Skill
Let AI browse the web	✅ Playwright MCP	❌

Best practice: Use MCP + Skills together. MCP gives tools, Skills teach methods.

Common Mistakes

Installing too many MCP Servers — Each server consumes resources. Start with 2-3.
Not checking permissions — Filesystem MCP can read/write files. Only authorize necessary directories.
Not restarting — You must restart Claude Desktop/Code after changing config.