Claude Code can read and write files on your computer. But what if you need Claude to interact with your browser? Query a database? Fetch data from an API? That's where MCP (Model Context Protocol) comes in—it lets Claude use external tools.
🤔 What Is MCP?
Model Context Protocol (MCP) is a standard way to give Claude access to external tools and data sources.
Without MCP: Claude can only work with files on your computer
With MCP: Claude can interact with browsers, databases, APIs, and more
✨ The Power of MCP
MCP turns Claude from a "file system assistant" into a "full environment assistant" that can interact with your entire development ecosystem.
🔌 Popular MCPs
Here are some useful MCPs you can connect:
What it does: Lets Claude interact with web pages, click buttons, fill forms, scrape data
Use cases: Automated testing, web scraping, form filling, browser automation
Example: "Open my app in the browser and test the login flow"
What it does: Query databases (PostgreSQL, MySQL, SQLite)
Use cases: Data analysis, schema exploration, query optimization
Example: "Show me users who haven't logged in for 30 days"
What it does: Create issues, PRs, search repos, read code
Use cases: Project management, code review, documentation
Example: "Create an issue for the bug we just found"
What it does: Read messages, send notifications, search conversations
Use cases: Team communication, alerts, documentation
Example: "Post in #dev-updates that the feature is deployed"
What it does: Read design files, extract specs, export assets
Use cases: Design-to-code, asset extraction, spec checking
Example: "Get the spacing values from the Figma design"
🚀 Setting Up Your First MCP
🎯 Connect an MCP
Visit github.com/modelcontextprotocol to see what's available
Each MCP has installation instructions. Usually:
npm install -g [mcp-name]
Add MCP to your Claude Code config file (location varies by OS)
Follow specific MCP's configuration guide
MCPs load on startup, so restart your session
Try a simple command that uses the MCP
Example: "List my GitHub repos" if you installed GitHub MCP
⚡ Pro Tip: Start with Read-Only MCPs
Begin with MCPs that only READ data (database queries, file reading). Once comfortable, add MCPs that WRITE (posting to Slack, creating GitHub issues).
📖 Complete Example: Browser MCP
Let's watch MCP in action for automated testing:
Task: Test login flow on your web app
Tool: Browser MCP connected
You: "Open http://localhost:3000 in browser, click the login button, fill in test@example.com and password123, submit, and verify we're redirected to /dashboard"
Claude: Uses Browser MCP to:
1. Open the URL
2. Find and click login button
3. Fill form fields
4. Submit form
5. Check resulting URL
6. Report: "✓ Login successful, redirected to /dashboard"
Result: Automated test without manual clicking
You: Manually open browser, click login, type credentials, verify redirect
Time: 2 minutes per test
Problem: Can't automate, prone to human error
✅ The Difference
MCP turned a manual 2-minute task into a 5-second automated command. Run it 20 times during development? That's 40 minutes saved.
🎯 When to Use MCPs
Use MCPs when you need to:
- Interact with external systems repeatedly (databases, APIs)
- Automate workflows that involve multiple tools
- Access data Claude can't reach through file system
- Build tools that integrate with your existing stack
Skip MCPs for:
- One-off tasks (manual is faster than setup)
- Simple file-based projects
- Learning the basics (MCPs add complexity)
- Systems you don't have API access to
🔒 Security Considerations
⚠️ MCPs Have Access
When you connect an MCP, Claude can use that tool. Database MCP? Claude can query your database. Slack MCP? Claude can post messages. Be intentional about what access you grant.
MCP Security Checklist
🛠️ Building Your Own MCP
MCPs are open-source. You can build custom ones for your specific needs:
When to build custom MCPs:
- You have internal APIs/tools Claude should access
- Existing MCPs don't cover your use case
- You want to standardize team workflows
- You need specific data transformations
⚡ Pro Tip: Start Simple
Your first custom MCP should do ONE thing really well. Don't try to build a swiss-army-knife MCP. Specialized tools are easier to maintain.
🔄 MCP in the Compound Loop
MCPs enhance each step:
MCPs + The 4-Step Loop
📚 Available MCPs (Growing List)
As of late 2024/early 2025, available MCPs include:
- @modelcontextprotocol/server-puppeteer - Browser automation
- @modelcontextprotocol/server-postgres - PostgreSQL access
- @modelcontextprotocol/server-sqlite - SQLite access
- @modelcontextprotocol/server-filesystem - Enhanced file operations
- Community MCPs - GitHub, Slack, Figma, and more
Check github.com/modelcontextprotocol for the latest.
📚 Resources & Further Learning
- Model Context Protocol (GitHub) Official MCP specs and examples
- Anthropic Documentation MCP integration guides
- NPM: MCP Packages Available MCP implementations
💭 Pause & Reflect
Before moving on, take a moment to consider:
- What external tools do you use regularly that Claude could interact with?
- What repetitive tasks involve both code and external systems?
- Would browser automation help your testing workflow?
🎯 MCP Skills Acquired
You can now extend Claude beyond the file system. Next: Scaling your workflow with parallel development.
Topic 5.4 Complete • Up Next: 5.5 – Parallel Workflows & Optimization