MCP Servers with Claude Code

What Are MCP Servers?

MCP (Model Context Protocol) servers are external tool providers that extend Claude Code's capabilities beyond its built-in file and command tools. They run as separate processes -- locally or remotely -- and expose new tools that Claude can use just like its native ones.

MCP servers extend Claude Code with new tool capabilities

ℹ️

MCP = Model Context Protocol

MCP is an open protocol that standardizes how AI models communicate with external tools. Any tool that implements the MCP interface can be used by Claude Code, making the ecosystem of available tools continuously growing.

Installing and Configuring MCP Servers

bashInstalling the Playwright MCP server

# Add an MCP server to Claude Code
claude mcp add playwright npx @anthropic-ai/playwright-mcp

# Claude now has browser automation tools:
# - navigate(url)
# - screenshot()
# - click(selector)
# - fill(selector, value)
# - evaluate(javascript)

When Claude first tries to use an MCP server tool, it will ask for permission. You can auto-approve specific MCP servers by adding them to your settings file.

jsonAuto-approving MCP server tools

// .claude/settings.local.json
{
  "permissions": {
    "allow": [
      "MCP__playwright"  // Auto-approve Playwright tools
    ]
  }
}

✨

Practical Example

With Playwright MCP installed, you can say 'Navigate to localhost:3000, take a screenshot of the login page, and fix the CSS alignment issue.' Claude will control the browser, visually analyze the screenshot, edit your code, and verify the fix -- all in one workflow.

Key Takeaways

✓MCP servers are external tool providers that extend Claude Code beyond built-in file and command tools
✓Install with 'claude mcp add [name] [start-command]' -- Playwright is the most popular example
✓Auto-approve MCP tools via 'MCP__servername' in settings.local.json permissions
✓Playwright MCP enables browser automation: navigate, screenshot, click, fill, evaluate
✓MCP is an open protocol with a growing ecosystem of tool providers for databases, APIs, and more

Check Your Understanding

Test what you learned in this lesson.

Q1.What command adds an MCP server to Claude Code?

Q2.How do you auto-approve an MCP server's tools so Claude doesn't ask permission every time?

Q3.What is MCP in the context of Claude Code?

Custom Commands

GitHub Integration