DEV Community: Muhammad Afzal

10 MCP Servers Every Developer Should Be Using in 2026

Muhammad Afzal — Sat, 28 Mar 2026 21:36:38 +0000

If you're using Claude or Cursor and haven't set up MCP servers yet, you're leaving a massive amount of productivity on the table.

What is MCP and Why Should You Care?

Model Context Protocol (MCP) is an open standard created by Anthropic that lets AI assistants like Claude connect to real-world tools and systems. Instead of copy-pasting code snippets in and out of your AI chat, MCP lets Claude directly read your files, query your database, push to GitHub, search the web and run terminal commands — all within a single conversation.

Think of it as giving your AI assistant hands.

Before MCP, every AI integration was a custom one-off build. Now there's one standard protocol that works across Claude Desktop, Cursor, Cline, Zed and any other MCP-compatible client. Build a server once, use it everywhere.

The ecosystem has exploded. There are now over 1000 MCP servers covering everything from database management to browser automation to Stripe payments. Finding the good ones used to mean scrolling through a flat GitHub README. That's why I built MCPCMD — a curated directory of 1000+ MCP servers organized by category with install commands and config snippets on every page.

But enough about that. Here are the 10 servers I actually use and recommend.

1. GitHub MCP

Category: Version Control
Install: npx @github/mcp-server

The official GitHub MCP server is the one that made me a true believer. You can ask Claude to search your repos, read any file from any public repo, create issues, open pull requests, manage branches and review GitHub Actions runs — all from a conversation.

The killer use case: paste a bug report into Claude and say "find the relevant code in my repo and open a draft PR with a fix." It does it. The whole thing.

It works as both a local server (using a Personal Access Token) and a remote server (via OAuth), so you can share it across machines without managing credentials manually.

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

2. Supabase MCP

Category: Databases
Install: npx @supabase/mcp-server-supabase

If you use Supabase, this one is a no-brainer. The official Supabase MCP server lets Claude query your database, manage auth, inspect your schema and even deploy edge functions — all with natural language.

Instead of jumping between the Supabase dashboard, your SQL editor and your codebase, you can stay in one place and ask things like "show me all users who signed up in the last 7 days and haven't completed onboarding."

The server respects your Supabase user permissions, so it's not giving Claude access to anything it shouldn't have.

3. Playwright MCP

Category: Browser Automation
Install: npx @playwright/mcp

This is the one that feels like magic the first time you use it. Playwright MCP gives Claude control of a real browser. You can ask it to navigate to a URL, fill out a form, click elements, take screenshots and extract content from pages — all programmatically.

Practical uses I've actually done with this:

"Go to this competitor's pricing page and summarize their tiers"
"Fill out this form with these test values and screenshot the result"
"Scrape the last 20 posts from this public forum and give me a summary"

It runs a real Chromium instance so it handles JavaScript-heavy sites that simple fetch-based scrapers miss.

4. Context7 MCP

Category: Developer Tools
Install: npx @upstash/context7-mcp

One of the most underrated servers on this list. Context7 solves a specific and painful problem: AI assistants get confused by outdated library documentation because their training data has a cutoff.

Context7 pulls live, up-to-date documentation for thousands of libraries and injects the relevant parts into your Claude conversation. So when you ask "how do I set up streaming with the latest version of the Vercel AI SDK?", Claude answers based on the actual current docs, not something from 18 months ago.

If you do a lot of coding with Claude, install this one immediately. It dramatically reduces hallucinated API calls.

5. Firecrawl MCP

Category: Browser Automation
Install: npx firecrawl-mcp

Firecrawl is the best web scraping and crawling server in the ecosystem right now. It goes beyond simple page fetching — it can crawl entire sites, handle JavaScript rendering, clean up the output into structured markdown and even extract specific data patterns.

Use cases:

Research tasks where you need to pull content from multiple pages
Turning any website into a knowledge base Claude can reason over
Competitive analysis at scale
Content migration projects

It requires a Firecrawl API key (free tier available) but the quality of the output is significantly better than basic fetch-based alternatives.

6. MCP Filesystem

Category: File System
Install: npx @modelcontextprotocol/server-filesystem ~/your-directory

This is the official reference implementation from Anthropic and the one most people install first. It gives Claude secure, sandboxed access to read, write, search and manage files in directories you explicitly specify.

You control exactly which folders are accessible. Claude cannot touch anything outside those paths.

Everyday uses:

"Read all the markdown files in my notes folder and give me a weekly summary"
"Find all TODO comments in my src directory"
"Rename all files in this folder to follow kebab-case"
"Create a new component file following the pattern of these existing ones"

It's simple but it removes one of the most annoying parts of working with AI: constantly copy-pasting file contents in and out of the chat.

7. Notion MCP

Category: Productivity
Install: npx @notionhq/notion-mcp-server

The official Notion server lets Claude search, read and manage your Notion workspace. If Notion is your second brain, this makes Claude a genuine extension of it.

Useful patterns:

"Find my notes on authentication from last month and summarize the key decisions"
"Create a new page in my Projects database with this spec"
"What meetings do I have documented in my work log from this week?"

Requires a Notion integration token which takes about 2 minutes to set up through the Notion developer portal.

8. Chrome DevTools MCP

Category: Developer Tools
Install: npx @chrome-devtools/mcp

This one is particularly interesting for web developers. Chrome DevTools MCP lets AI agents connect to a live Chrome browser session and interact with it programmatically — inspecting the DOM, reading console logs, monitoring network requests and debugging JavaScript.

Imagine asking Claude "look at this page I have open and tell me why the layout is breaking on mobile" and having it actually inspect the live DOM rather than guessing from a screenshot. That's what this enables.

Still relatively new but the potential for debugging workflows is enormous.

9. Neon MCP

Category: Databases
Install: npx @neondatabase/mcp-server-neon

If you use Neon for serverless PostgreSQL, this is the official server from the Neon team. It lets Claude create and manage databases, run queries, handle branching and work with your schema — all through natural language.

The branching feature is particularly clever. You can ask Claude to "create a branch, run this migration, verify the results and then merge it back" as a single operation. That's a database workflow that normally takes 10 minutes compressed into one prompt.

10. Brave Search MCP

Category: APIs & Integrations
Install: npx @modelcontextprotocol/server-brave-search

The simplest one on this list but one of the most useful. Brave Search MCP gives Claude access to real-time web search so it can look things up during a conversation without you having to switch tabs and paste content in manually.

Ask it anything that requires current information — recent library releases, news, prices, documentation that might have changed. It uses Brave's search API (free tier: 2000 queries/month) and returns clean results Claude can reason over immediately.

How to Install Any of These

Every server on this list follows the same pattern:

1. Make sure you have Node.js 18+ installed

node --version

2. Open your Claude Desktop config file

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

3. Add the server config inside mcpServers

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/you/Documents"]
    },
    "brave-search": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
      "env": {
        "BRAVE_API_KEY": "your-key-here"
      }
    }
  }
}

4. Restart Claude Desktop

That's it. The tools appear automatically in your next conversation.

Where to Find More

This list barely scratches the surface. There are 1000+ MCP servers covering databases, cloud platforms, communication tools, finance APIs, monitoring and a lot more.

If you want to browse them all in one place, check out MCPCMD — it's a curated directory with install commands and config snippets on every page, organized across 20 categories.

If you've built an MCP server yourself, you can submit it for free. The directory is updated daily.

What Are You Using?

Drop a comment with the MCP servers you're finding most useful. I'm especially curious about anything in the AI & ML and Cloud & DevOps categories — those move fast and there are probably gems I haven't found yet.

Tags: ai productivity claude llm developer-tools

Beyond Swag: Unveiling the Profound Impact of Community Engagement on My Journey to Authorship

Muhammad Afzal — Tue, 16 Jan 2024 05:52:48 +0000

When I was in school, I struggled to find a balance between my strong passion for science projects and my tendency to become bored owing to the lack of lab equipment. 2004 was the year when I made the transition to computer science and began coding. Fast forward to my time spent in college, where I and my friends started working as freelancers, although the level of community involvement was limited.

Gaining an Understanding of the Power of Communities:
My exploration into the Internet of Things began in 2015, when I discovered Hackster.io, where I began publishing articles and winning competitions. I learned from this experience that communities are not simply about giving away free stuff (swag); rather, they are about learning, sharing, and working together.

AWS Community Builder Program: In 2021, I became a member of the AWS Community Builder program where my outlook was altered. Learning, practicing, asking questions, and sharing experiences were all stressed throughout the process. Through the use of LinkedIn as a venue for distributing my content, Packt Acquisition became interested in my work.

An unanticipated book opportunity presented itself when Packt came us to express their interest in working together on a book titled "Arduino IoT Cloud for Developers." This was a surprise, but it was also exciting. The process of writing the book took a year, but it was satisfying.

In conclusion, participating in communities is about more than just getting free stuff; it's also about building a network, honing talents, and finding chances that you would not have anticipated. Every stage of my path, from working as a sole coder to writing a book, has given me the opportunity to witness the transformational power of community involvement. The lesson is that even seemingly insignificant occurrences of learning, sharing, and working together can result in spectacular consequences. The journey is truly remarkable because it is not just about the concrete rewards; it is also about the intangible rewards.

AWS for WordPress: Getting starting with Light Sail, Cloud-front and Route 53 : Part-3

Muhammad Afzal — Tue, 05 Dec 2023 16:36:29 +0000

Hello guys,

Welcome back to the third and last episode of this series. In this article, we will setup the Lightsail distribution, which is actually a world-wide CDN service specially designed for web apps to provide a faster experience to website visitors. After distribution setup, we will update our domain records for Lightsail distribution.

Click on the "Network" menu.

And now click on the "Create Distribution" button. Remember, before moving towards distribution setup, it's mandatory to assign static IP to your LightSail instance, as we did in Part 2.

Select origin from the drop-down menu as shown in the below screenshot, which means selecting your Lightsail instance.

By default, cache behavior is set to WordPress, so you don't need to do anything, but if you are using any other app on Lightsail instead of WordPress, then choose this option wisely.

Now it's time to select the distribution plan. Well, I am choosing the 50GB/month plan for testing purposes, and it's also free for one year, but you can choose the plan according to your traffic.

In the final step, you need to assign the name for your distribution and click on the "Create Distribution" button. It will take a little bit of time to create the distribution; just sit back and take a sip of coffee.

After the successful creation of distribution, it's time to generate SSL certificates for distribution. Click on the "Custom Domains" tab, and then click on "Create certificate**" It will show you the pop-up where you need to enter your certificate name and domain name. I added my domain, including www.iotsnacks.com and iotsnacks.com.

It will take some time, and later it will show you a validation error. Click on "Validation Details," and it will guide you to add CNAME records to your domain. So in our case, we are using Route 53, and we will add these verification CNAME records to Route 53. Later on, it will automatically verify the records.

After domain verification, it will show you the "Attach certificate" option. Just click on that and attach the certificates to your distribution.

Now, in the final step, we need to route our domain traffic to this distribution. On the same page, at the end, you will see the URL of that distribution. Just copy the URL and navigate to Route 53.

In Route 53, click on "Hosted Zones" and select your domain, then click on "Create Record," and you will see the page just like below. Follow the instructions as per the below image, and you are good to go with the record addition.

Congratulations! You have successfully deployed your WordPress website on AWS using Route 53+ Lightsail and Lightsail Distribution, also known as Cloud Front.

AWS for WordPress: Getting starting with Light Sail, Cloud-front and Route 53 : Part-2

Muhammad Afzal — Sun, 03 Dec 2023 19:35:16 +0000

Welcome back, guys, to Part #2. In this post, we will set up a Lightsail instance for WordPress. Type the Lightsial into the AWS console search bar and select the Lightsail, as shown in the below screenshot.

You will see the new page on a separate tab. Just click on the "Create instance"

Now you will see the long configuration page for Lightsail. There are different options available, which I marked with numbers.

1# Select the region where you want to deploy your instance. I am choosing Virginia, Zone A.
2# Select the OS, for WordPress Linux OS is the best option, but you can choose Windows according to your requirements. In my case, I am choosing Linux.
3# Select the application from the collection, but I am going to choose WordPress.

Next, scroll down the page, and it's time to select the instance type according to price or compute power depending upon your requirements.

4# If you don't know the processing load, then I will recommend you choose the USD 5 instance, which offers 1GB of RAM, 2 V CPUs, including a 40 GB SSD, and 2 TB of bandwidth.
5# Assign the name to the instance. It's a good option to assign your instance name according to your domain name.
6# Finally, click on the "Create instance" button.

Now it's time to take some coffee, as AWS takes a little time to create and make your instance live. Congratulations! Your instance is live after a few minutes, and now it's time to assign a static IP to your Lightsail instance, as it's required for cloudfront. Click on the "Networking" link, which is marked in the below picture.

Click on the "Create static IP" button, as shown in the below screenshot.

On this page, as shown in the below screenshot, you can select your IP location, but I didn't change it. Next, you need to select your Lightsail instance to allot a static IP address, and in the last, assign the name to your static IP address. And in the end, click on "Create," and you are good to go.

Congratulations! A static IP has been assigned to the Lightsail instance, as shown in the below screenshot.

Once again, congratulations, guys. Your AWS Lightsail instance for WordPress is up and running, and we also assigned the static IP to that instance. In the next post, we will set up the cloudfront and distribution for our instance.

In the next post you will learn how to setup the distribution for Lightsail instance. Click here to read Part#3.

AWS for WordPress: Getting starting with Light Sail, Cloud-front and Route 53 : Part-1

Muhammad Afzal — Sun, 03 Dec 2023 19:34:46 +0000

Hey everyone,

I hope you all are fine. Sorry, I was busy writing my book. That's why I was unable to write some posts for my AWS community. But now I am free, and it's time to calibrate my free time with my AWS community. Oh, oops, if you are curious about my book, then just type "Arduino IoT Cloud for Developers" at Amazon and you will find the details.

So coming to the point, on the coming Sunday, which will be the 10th of December 2023, I have my talk at WordCamp Lahore, where I am going to demonstrate how to use AWS for WordPress websites and e-commerce stores. That's why I made plans to write these articles that will help the event audience and lame excuse to talk to my community.

Are you guys ready?

So let's get started with the journey. OK, I have divided the content into three different posts to make the articles easier and more flexible for everyone.

Part 1: In this post (current), we will set up Route 53 for our domain.
Part 2: In the second part, we will setup the AWS Lightsail instance for WordPress.
Part 3: In the third part, we will setup the AWS Lightsail Distribution/Cloud Front and configure the routing records at Route 53.

Before starting the tutorial here, you need to understand why we need Route 53. Actually, Route 53 is a managed DNS service for domain names. You can directly use Lightsail with your custom DNS service provider, but I will recommend you use Route 53 as it will help you in the future if you want to add more AWS services for your organization under the same domain. which will make it easy for everyone to manage all the stuff under one roof.

Login to the AWS Console, type Route 53 in the console search, and select the Route 53 service. Now click on the "Hosted Zones," which are marked in the picture and located at the left side bar.

After reaching the Hosted Zones page, click on the "Create hosted zone"

Here you need to provide a domain name, and we are good to go and click on the "Create hosted zone" button.

Congratulations! nameservers have been successfully created for your domain, and it is time to point your domain to these nameservers.

Below, I just updated my domain nameservers to Route 53 nameservers. You guys can update your domain nameservers by logging into your domain registrar panel.

In the next part of the post, we will set up the Lightsail instance for WordPress. Click here to read Part 2.

Welcome to Google Analytics 4

Muhammad Afzal — Wed, 03 Aug 2022 17:35:00 +0000

Hello everyone welcome to my new article which is totally different from other articles that mean i am not going to talk about any development but going to talk about an awesome tool which will guide you in your development & growth. so guys ready for article? lets go :)

In this digital world we have lot of different products and services which work in combination but due to job trades we left or we put the stuff on others shoulders. well in this article i am going to talk about a very fantastic tool "Google Analytics" .

There is a myth that Google Analytics is only used by Digital Marketers which is totally wrong actually this is the tool which is for everyone if you have your online presence like your personal website/ business website/ or e-commerce store and etc.

So Let's come to the Point what is Google Analytics?

Google Analytics is a service by integrating into your website you can get data about your visitors, their explorations on website, their session duration, which technology they are using, from which region country/state/city they are coming and lot of other stuff. so these things are very important for digital marketers with respect to marketing point of view but it's also important for main stake holders to learn about Google Analytics to get an idea about their visitors demands and trends as well as if you are an early stage startup founder then defiantly it's your main eye to get succeed in this digital world which will help you to take decisions according to your visitors requirements.

What's new in Google Analytics 4?

Totally New interface as compared to Universal Analytics.
In GA4 all the things are considered as Event instead of considering different stuff like Page View, Users and etc.
New style of View Reports
Compact E-Commerce tracking Reports
Cross Platform Tracking with different data streams which simplified to monitor the traffic of different platforms at one place.
Support of BigQuery to fetch data according to requirements.
Debugging is an awesome feature in GA4 which enables you to debug your events,visit very professionally.
Advance SPAM data prevention options.
Advance Reporting as well us their is option to create custom reports.

How to use Google Analytics in website?
1-It's very simple just navigate to Google Analytics

2-Signup to Google analytics with you google account.

3-Next it will take you to your website setup where you need to just put your website name. after that it will show you JavaScript code snippet.

4-Copy that JavaScript Code Snippet which is provided by Google Analytics and put into your website head. If you are using WordPress then use "Insert Header & Footer Plugin".

If you want to learn more in depth about Google Analytics 4 & GTM then this Udemy course is for you Master Google Analytics 4 (GA4) & GTM in 2022.

Note: This post includes affiliate links; I may receive compensation if you purchase products or services from the links provided in this article.

Getting started with Bootstrap 5

Muhammad Afzal — Tue, 02 Aug 2022 17:40:00 +0000

What is Responsive Design & Bootstrap?

In early days we have very basic infrastructure of website services and for development HTML is enough but with the passage of time demand of web services increased and step by step different technologies came into existence to fulfill the growing need such as CSS, JavaScript and dynamic languages such as PHP, ASP.Net, Java and etc.

But the real evolution begins with the advancement of mobile technology, then the demand of responsive web design grows instantly. At that time CSS media queries are introduced to handle the different screen size issues but front end development becomes very complex as every person have it's own nature to write the code and have it's own set of screens for testing. Then Bootstrap come into ground with revolutionary responsive model which is called grid system.

Bootstrap is an opensource CSS & JS Framework for responsive website development. Bootstrap works on the model of grid system and they have defined generic breakpoints with respect to different screen sizes such as Extra Small, Small, Medium, Large, Extra Large, Extra Extra Large, Framework is packed with custom CSS classes which provides very fast and effective working model. Developers are required to just remember the classes and get rid of long CSS properties.

Bootstrap saves the time & cost in development of responsive website design as well as provide very beautiful responsive components such as Navigation Bar, Cards, Carousal, Forms and much more.

What's new in Bootstrap 5?

Initially Bootstrap has been launched in Aug, 2011 with version 1.x and later they released different versions like 2.x, 3.x and 4.x is a version which is mostly used by developers. Recently they launched the new version of Bootstrap which is Bootstrap 5 and contains new classes for advance responsive website design.

In bootstrap 5 they have updated the logo, New Offcanvas Component, New accordion and they have created very awesome experience for forms such as floating labels, validations, Simplified Layouts and etc.

Previous versions of Bootstrap didn't support RTL(Right-to-Left) Content which is very important features for Arabic,Urdu, Persian websites. Now developers can easily build websites for those languages which are RTL based.

In Boostrap 5 they added many classes and removed some old classes of version 4 so it's recommend to study the documentation of Version 5 before migrating your older version to newest version. complete upgrade documentation is available at https://blog.getbootstrap.com/2021/05/05/bootstrap-5/

Learn Bootstrap 5

Bootstrap is famous due to it's simplicity, easy working style, extensibility but this is all due to well documentation, strong community. so if you are new to responsive website design then get started with there documentation and i also created very detailed course at Udemy Mastering Bootstrap 5 - Complete Guide Step by Step 2022

Note: This post includes affiliate links; I may receive compensation if you purchase products or services from the links provided in this article.

Setting up Static Website on AWS S3

Muhammad Afzal — Mon, 28 Mar 2022 19:19:13 +0000

Hello Geeks,

You gotta an overview of article by the title. It's 2022 and world is using CMS System for their websites or custom developed dynamic websites but still there are lot of geeks who have static websites and i am one of them. Back in 2018 i develeoped a javascript enabled web based MQTT Client for MQTT Broker testing and debugging. For the hosting of http://mqtt.run i used lot of different web hosting services but after becoming AWS Community Builder i started reviewing the services related to cloud storage, Already i am using AWS Lightsail and CloudFront for my E-Commerce & Tutorial website https://phpdocs.com but this time when i studied about S3 i made a plan to host one of my static website on S3 to get the taste of cloud for static website.

So if we generally talk about AWS S3 it's a storage services to host docs, images, videos or what ever you want to host on it. S3 is a reasonable and good solution in terms of Space, Bandwidth and region availability, so they are also providing option to host static website. Right now i am going to explore how to host static website on S3 but in future articles i will share how to host video content on S3 for educational website.
**

Firstly login into your AWS Console https://aws.amazon.com/
Step#1

After login type S3 in the search and click on S3 Service.

Step#2
Click on Create Bucket Button.

Step#3

After clicking on Bucket you will see a very long tail form but you don't need to worry as all are simple options.

1-Firstly enter the full domain name under bucket name in my scenario i have www.mqtt.run domain name.

2-Select the region which is nearest to you, it will give awesome browsing experience to your users. i am choosing Singapore as it's near to my region.

3-if you want to Copy settings from existing bucket then choose the bucket else don't touch it.

4-Choose ACL Disabled Under "Object Ownership".

5- Uncheck the "Block all public access" Under "Block Public Access settings for this bucket" and click on checkbox "I acknowledge that the current settings might result in this bucket and the objects within becoming public."

6-Leave the other configurations as it is and click on "Create Bucket" Button

7-after that you will see your buckets like that. now click on bucket for further configuration.

8-Under Objects tabs click on Upload and upload your files and folders. don't upload zip file as there is no option to extract the zip files. you need to upload files and folder manually. the good thing is that just select the folder and it will take care of all files and folder inside the selected folder.

9-After that click on Properties tab and scroll down the page to bottom and find the section "Static website hosting" and click on Edit as we need to enable website feature on our S3 Bucket.

10-Select Enable under Static website hosting and Select "Host a static website" under Hosting type. provide Index document which is usually "index.html" or "default.html" but in my case it's "index.html".

11- After selecting all these options just save the changes.

12- After Changes you will see the URL of your static website.

But when you click on that url you will get the file permission error as because we didn't set any permission policy on our bucket.

13- Click on "Permission" Tab, Scroll the page and find "Bucket policy" and click on "Edit"

14-Copy the below Policy just write your bucket name instead of www.example.com and click on save changes.

{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::www.example.com/*" } ] }

Again open the URL and it will work fine Hurry Congrats. Next you need to point Your domain to S3 Bucket URL. Either you can point your domain cname records to S3 Static website URL or you can use AWS Route 53 to setup nameservers for your domain.

Well i am asuming that you don't have access to create cname records in your domain panel.

Step#4

1- Click on Top search bar and type Route 53 and click on Route 53 below from the suggestions.

2- Click on Hosted Zone.

3- Click on "Create Hosted Zone".

4-Enter Domain name and leave the other settings.

5- Click on "Create Hosted Zone"

After that you will get your zone listed.
6- Click on your Domain.

7- Copy Nameservers and set to domain in domain panel.

8- After setting your domain Nameservers click on "Create Record"
Here select CNAME under Record Type and Enter S3 Website URL under Value textarea and click on "Create Record" Button.

It will take some time to propagate the DNS Settings, later you can browse your website by directly type URL instead of long S3 URL.