AI coding assistants have fundamentally changed how we build and deploy web applications. But here's the thing—these assistants are only as powerful as the tools and context you give them. That's where the Model Context Protocol (MCP) comes in.
MCP is an open standard from Anthropic that lets AI models like Claude connect to external tools, data sources, and services through a standardised interface. Think of it as a universal language that allows your AI assistant to actually do things—from managing your GitHub repositories to querying databases and automating browser tasks.
With thousands of MCP servers now available, figuring out where to start can feel overwhelming. In this guide, we'll walk through the six MCP servers we consider essential for web developers, freelancers, and agencies—along with practical installation instructions and real-world use cases.
These servers work with Claude Desktop, Claude Code, Cursor, Windsurf, and most other AI coding tools that support MCP.
Let's dive in.
What Makes a Great MCP Server?
Before we get into specific recommendations, let's establish what separates a must-have MCP server from the rest:
- Trusted and maintained — Comes from a verified source with active development and security updates
- Real productivity gains — Solves actual problems in your workflow, not just novelty features
- Easy integration — Works seamlessly with popular AI tools like Claude Desktop, Claude Code, Cursor, and Windsurf
- Clear documentation — You can get up and running quickly without extensive troubleshooting
With those criteria in mind, here are the six MCP servers every web developer should know about.
1. GitHub MCP Server — Repository Management Made Easy
What it is
The official GitHub MCP server allows your AI assistant to interact directly with GitHub repositories. It can read issues, review pull requests, check commit history, manage branches, and even create new files—all through natural language commands.
Why you need it
GitHub is at the centre of most development workflows. Instead of context-switching between your terminal, browser, and IDE, you can ask your AI assistant to handle repository tasks directly. Need to check if that bug is already documented? Ask Claude. Want to review the changes in a PR before merging? Just ask.
Installation
For Claude Desktop (also works for Cursor and Windsurf — add the same JSON to your MCP settings):
Edit your claude_desktop_config.json file:
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - Windows:
%APPDATA%\Claude\claude_desktop_config.json
Add the following configuration:
{
"mcpServers": {
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
}
}
}
}
For Claude Code:
claude mcp add github --scope user -- npx -y @modelcontextprotocol/server-github
Then set your token as an environment variable:
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here
Example usage
Show me all open issues in the deployhq/app repository
What changed in the last 5 commits on the main branch?
Create a new issue titled 'Update deployment documentation' with a description
2. Context7 — Up-to-Date Documentation for AI Coding
What it is
Context7 is specifically designed to make AI assistants better at writing code. It injects up-to-date, version-specific documentation and code examples directly into the prompt context, ensuring your AI uses accurate information from actual libraries rather than potentially outdated training data.
Why you need it
We've all experienced the frustration of an AI assistant generating code with deprecated methods or incorrect syntax for the library version you're using. Context7 solves this hallucination
problem by giving Claude real-time access to current documentation for thousands of libraries.
Installation
For Claude Desktop / Cursor / Windsurf:
{
"mcpServers": {
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp@latest"]
}
}
}
For Claude Code:
claude mcp add context7 -- npx -y @upstash/context7-mcp@latest
Example usage
Using the latest Rails 7.1 documentation, show me how to set up Active Storage with S3
What's the correct way to configure Tailwind CSS 4.0 with Vite?
Show me the current Next.js 15 API for server components
3. Filesystem MCP Server — Local File Access for Your AI
What it is
The Filesystem MCP server gives your AI assistant controlled access to read, create, edit, and organise files on your local machine. You specify which directories it can access, maintaining security while enabling powerful file management capabilities.
Why you need it
Whether you're organising project files, searching through logs, or having Claude help refactor code across multiple files, local file access is fundamental. This server turns your AI assistant into a capable file manager that understands context and can make intelligent decisions about file operations.
Installation
For Claude Desktop / Cursor / Windsurf:
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"/Users/yourname/Projects",
"/Users/yourname/Documents"
]
}
}
}
For Claude Code:
claude mcp add filesystem -s user -- npx -y @modelcontextprotocol/server-filesystem ~/Projects ~/Documents ~/Desktop
Example usage
Find all Ruby files in my project that reference the User model
Create a new directory structure for a Rails API project
Read the README and summarise the setup instructions
4. Puppeteer MCP Server — Browser Automation and Testing
What it is
The Puppeteer MCP server allows your AI assistant to control a headless Chrome browser. It can navigate websites, interact with page elements, take screenshots, generate PDFs, fill out forms, and run automated tests.
Why you need it
For web developers, the ability to automate browser tasks is invaluable. You can use it for scraping documentation, testing your deployed applications, generating visual regression screenshots, or automating repetitive web-based workflows. Particularly useful for agencies managing multiple client sites.
Installation
For Claude Desktop / Cursor / Windsurf:
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-puppeteer"]
}
}
}
For Claude Code:
claude mcp add puppeteer -s user -- npx -y @modelcontextprotocol/server-puppeteer
Example usage
Navigate to our staging site and take a screenshot of the homepage
Fill out the contact form on example.com and submit it
Check if the login page loads correctly and capture any console errors
5. PostgreSQL/Database MCP Server — Direct Database Access
What it is
Database MCP servers (like those from Supabase or Bytebase) allow your AI assistant to connect directly to your databases. It can explore schemas, write and execute SQL queries, manage records, and help you understand your data structure.
Why you need it
Instead of writing SQL queries manually or switching to a database client, you can ask Claude to query your data in natural language. This is especially powerful for debugging, data exploration, and generating reports. The AI can understand your schema and write optimised queries based on what you're trying to accomplish.
Installation
For Claude Code (using Bytebase DBHub):
claude mcp add db --transport stdio -- npx -y @bytebase/dbhub \
--dsn "postgresql://user:password@localhost:5432/myapp_development"
For Claude Desktop / Cursor / Windsurf:
{
"mcpServers": {
"database": {
"command": "npx",
"args": [
"-y",
"@bytebase/dbhub",
"--dsn",
"postgresql://user:password@localhost:5432/myapp_development"
]
}
}
}
Example usage
Show me the schema for the deployments table
Find all users who signed up in the last 30 days but haven't completed a deployment
What are the most common error types in the deployment_logs table?
6. Brave Search MCP Server — Web Search for Your AI
What it is
The Brave Search MCP server gives your AI assistant the ability to search the web in real time. It uses Brave's privacy-focused search API to find current information, documentation, and answers without relying on training data alone.
Why you need it
AI assistants are limited by their training data cutoff. When you need current information — the latest security advisory, a new library release, today's deployment best practices — your AI can't answer from memory alone. Brave Search bridges this gap, letting your assistant look up live information and incorporate it into its responses.
This is especially valuable for:
- Researching errors: Searching for specific error messages and finding recent solutions
- Staying current: Looking up the latest versions, changelogs, and migration guides
- Competitive research: Finding documentation and examples from other projects
- Fact-checking: Verifying that generated code uses current APIs and patterns
Installation
First, get a free API key from Brave Search API.
For Claude Desktop / Cursor / Windsurf:
{
"mcpServers": {
"brave-search": {
"command": "npx",
"args": ["-y", "@anthropic-ai/mcp-server-brave-search"],
"env": {
"BRAVE_API_KEY": "your_brave_api_key_here"
}
}
}
}
For Claude Code:
claude mcp add brave-search -- npx -y @anthropic-ai/mcp-server-brave-search
Then set your API key:
export BRAVE_API_KEY=your_brave_api_key_here
Example usage
Search for the latest Node.js LTS release and security patches
Find the official migration guide for upgrading from React 18 to React 19
Look up how to fix 'ECDH not supported' errors in recent OpenSSL versions
Getting Started: Prerequisites
Before installing any MCP servers, make sure you have:
- Node.js installed (LTS version recommended) — Download here
- Claude Desktop, Claude Code, Cursor, or Windsurf installed
- npx available in your PATH (comes with Node.js)
To verify your installation:
node --version
npx --version
After adding servers to your configuration, restart your AI tool for the changes to take effect.
Security Considerations
MCP servers are powerful tools that can access sensitive data and systems. Keep these best practices in mind:
- Limit file access — Only grant access to directories you actually need
- Use read-only database connections when possible
- Rotate API tokens regularly and never commit them to version control
- Review server sources — Stick to official and well-maintained servers
- Be cautious with network access — Understand what external connections a server might make
Coming Soon: DeployHQ MCP Server
We're building a DeployHQ MCP server to bring AI-powered deployment automation directly to your coding workflow. You'll be able to tell Claude:
Deploy the main branch to staging
Show me the deployment history for the production server
Roll back the last deployment on the client-project server
What's the status of the current deployment?
We're aiming for a beta release in 2026. Sign up at DeployHQ to be notified when it's available.
Start Building Your MCP Stack
The MCP servers we've covered here represent just the beginning of what's possible when you connect AI assistants to real-world tools. Whether you start with GitHub integration for repository management or Context7 for better code generation, each server you add multiplies the capabilities of your AI assistant.
The key is to start small — pick one or two servers that address your biggest pain points, get comfortable with them, and then expand from there.
The developers who embrace these tools now will have a significant productivity advantage as AI-assisted development becomes the norm. The question isn't whether to start using MCP servers — it's which ones you'll implement first.
Resources
- Model Context Protocol Documentation
- Official MCP Servers Repository
- Claude Desktop Download
- Claude Code Documentation
- DeployHQ — Automated deployments from your Git repositories
Have questions about MCP servers or deployment automation? Reach out at support@deployhq.com or find us on X/Twitter.