Ten Must-Know MCP Servers for Every Developer and how to add them in Code Editors

MCP is still a hot topic in the developer community, and I would say it is definitely worth learning. Some might say it is just a function calling with a protocol called MCP, but the real benefits go far beyond traditional tool or function calling.

MCP Servers are easy to integrate with AI tools and code editors. You don’t have to build everything from scratch, just pick a prebuilt MCP Server, plug it into AI System, and you are ready to go.

You can also build and host them remotely, so others can connect without local setup. They also support OAuth, which means you can build secure, production-ready integrations. MCP is slowly becoming the foundation for how we build with large language models. And honestly, it is just getting started.

I have written a few articles on MCP already, so feel free to check them out if you want to understand it better.

• How to build your own MCP Server?

• How to host your MCP Server?

• How to build an MCP Client?

I use some MCP servers almost daily, and they help me get things done faster. I thought it is worth sharing them with you all.

This is not just a random list from the internet. These are servers I actually use and find it useful in my day-to-day work.

MCP Servers That Make a Real Difference

1. Filesystem MCP Server

2. GitHub MCP Server

3. Gmail + Google Calendar MCP Server

4. Docker MCP Server

5. Playwright MCP Server

6. Slack MCP Server

7. PostgreSQL MCP Server

8. Netlify MCP Server

9. Notion MCP Server

10. Figma MCP Server

1. Filesystem MCP Server

Many of you might be using tools like Cursor or other AI code editors with a $20 subscription. And on top of that, maybe you are also paying another $20 for Claude Desktop or ChatGPT for general use, right?

I combined both into a single setup. I turned Claude Desktop into my AI code editor, thanks to the Filesystem MCP Server. One interface now does it all, it works as my code assistant and also as a general-purpose chat tool.

With the Filesystem MCP Server configured, Claude Desktop can access my local files like an AI editor. It can understand existing projects or build new ones just by giving prompts, since it has direct read/write access to the filesystem.

Here is the Filesystem MCP Server config you can use with Claude, Cursor, or any other AI editor.

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

I have explained how to add MCP servers to code editor later in this blog.

If you want to see how I set it up for Claude Desktop, check this blog post.

I built a portfolio page using just Claude Desktop and the Filesystem MCP Server, no separate AI editor involved. Claude created the whole project in the folder it could access, using the Filesystem MCP Server.

2. GitHub MCP Server

GitHub is where most of our code lives. It handles code, pull requests, CI/CD pipelines, and deployments. Now imagine, working on GitHub, directly from the Code Editor or Claude, without switching tabs or leaving your dev workflow.

Below is the GitHub MCP config.

"github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your_github_token"
      }
    },

With both Filesystem and the GitHub MCP Server in place, I can fork a project, clone it locally, explore the codebase, make changes, and push updates, all without leaving the editor.

3. Gmail + Google Calendar MCP Server

This one was built by me for my own purpose, and it saves me a lot of time. Because of my nature of work, I need to check emails often. But I do not always want to switch away from what I’m coding.

Now, while in the mid of coding, I can just ask, "What’s the latest email I got?"
And it shows up right there in the chat. If I need to reply to that email, I can. If I need to send a calendar invite, that’s doable too. All without leaving the editor. If you want to know how I built this Gmail, GCalendar MCP Server, please check my other MCP Server blog.

Custom MCP Servers like this are very helpful. They are still not widely adopted and not yet part of everyday developer tools. But once you start using them, they really improve your workflow and save time.

4. Docker MCP Server

I build a lot of SaaS products, both for personal use and as part of my work. Once the code is ready, I usually containerize the application so I can run it easily and consistently across different environments.

If you are new to Docker, it’s a tool that lets you package your application along with all its dependencies into a lightweight container. That means you can run your app anywhere without worrying about system setup or config mismatches.

With the Docker MCP Server, I can interact with my containers directly through chat. I can check which containers are running, start or stop them, and even run commands inside them, just from the code editor or Claude desktop.

Here’s the Docker MCP config. This is actually local Docker, you can also connect to remote Docker over SSH.

 "mcp-server-docker": {
      "command": "uvx",
      "args": [
        "mcp-server-docker"
      ]
    } 

Docker MCP Server has many tools like below.

Here’s how it works. I can start or stop any container, or run any of the listed Docker tools, all from the chat interface.

5. Playwright MCP Server

After we build our products, it’s important to test the UI and make sure everything works as expected.

I use the Playwright MCP Server to quickly run end-to-end tests without leaving my editor or terminal. I just give a prompt like "Run Playwright tests", and it takes care of the rest.

Playwright MCP Server config detail is below. Check the playwright page for more details on how to connect with other Editors.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

It saves a lot of time, especially when I’m in the middle of development and want to validate UI changes without going through manual steps. This server is helpful when you want to keep testing in your chat interface or code editor without leaving it.

In the video below, you can see how the Playwright MCP Server fills out the form in UI, checks each field, and validates the whole flow automatically.

6. Slack MCP Server

Slack is where most of our team conversations happen like dev updates and quick standups. But jumping between Slack and your editor all the time breaks the flow.

With the Slack MCP Server, I can stay in the Editor and still stay updated with my slack messages. I can just ask things like "Check unread messages in #devops" or "Send a message to #release" all from within the same interface where I’m coding.

Here is the slack MCP Server config details.

"slack-mcp-server": {
                "type": "stdio",
                "command": "npx",
                "args": [
                    "-y",
                    "@modelcontextprotocol/server-slack"
                ],
                "env": {
                    "SLACK_BOT_TOKEN": "XXXX",
                    "SLACK_TEAM_ID": "TXXXX",
                    "SLACK_CHANNEL_IDS": "CXXXX"
                }
            },

To find your Slack team ID, channel ID, or set up the bot token, just check this page. It walks you through everything you need to get started.

Here’s a quick example how I used the editor to send a code snippet to the slack channel. It’s all done right from the editor, no need to copy, switch windows, or break focus.

7. PostgreSQL MCP Server

PostgreSQL is my local database for most of my SaaS products. Depending on the project, the database may vary. You can always build your own custom MCP Server for any database you work with.

The default PostgreSQL MCP Server provides read-only access to the database. If you need write access or other operations, you can extend it by adding more tools to the server.

Here’s the PostgreSQL MCP Server configuration.

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-postgres",
        "postgresql://localhost/mydb"
      ]
    }
  }
}

With this setup, I no longer need to open PGAdmin or any other PostgreSQL client. I can just ask Claude to query the database, explore tables, or summarize the schema, all within the same chat environment.

Things to Keep in Mind When Using PostgreSQL MCP Server with Enterprise Data

Use parameterized queries

Always use parameterized queries in MCP Server, when writing to the database. It avoids SQL injection and keeps things safe by making sure only valid data is passed.

Keep the server in the same region

If your org has data residency rules, host MCP Server in the same region as your database. It helps ensure your data stays compliant and doesn’t cross regions.

Limit access

Don’t give full access to the database. Use a read-only role and only expose the tables you need. This keeps the rest of your data safe.

Use OAuth for Remote Servers

If you are hosting the server remotely, enable OAuth. It adds secure access control and is becoming a common practice in MCP setups.

You can also implement network firewalls, audit logging, and connection limits to ensure data security and privacy.

8. Netlify MCP Server

Once the code is ready, the next step is usually to deploy it. And for many of my quick projects, Netlify is my go-to. By integrating Netlify MCP Server with my code editor, I don’t even need to open the Netlify dashboard. I just give a prompt like, deploy the app and it is done.

Below is the Netlify MCP Server config details to be added with AI editors or Claude Desktop.

"netlify": {
                "command": "npx",
                "args": ["-y", "@netlify/mcp"],
                "env": {
                "NETLIFY_PERSONAL_ACCESS_TOKEN": "XXXX"
      }
    }

9. Notion MCP Server

I use Notion to keep track of all my tasks and project updates.

With the help of Notion MCP Server, I can query my task list or check project notes directly from the editor, without opening Notion. Check the Notion MCP Server page to see what setup needs to be done inside Notion, to get this server working.

Below is the Notion MCP Server Config.

{
  "mcpServers": {
    "notionApi": {
      "command": "npx",
      "args": ["-y", "@notionhq/notion-mcp-server"],
      "env": {
        "OPENAPI_MCP_HEADERS": "{\"Authorization\": \"Bearer ntn_****\", \"Notion-Version\": \"2022-06-28\" }"
      }
    }
  }
}

Below is a quick snapshot from my editor. I just asked for my Notion tasks, and Copilot pulled them right into the chat.

10. Figma MCP Server

Being a developer, I often use Figma, for UI/UX design. But I don’t always want to open the Figma just to inspect a layout or check what colors and fonts are used.

With the Figma MCP Server in place, I can query Figma files directly from my editor or Claude Desktop.

Here’s the Figma MCP Server config you can add in Claude, VS Code, or Cursor.

If you are a first-time user and not sure how to generate your Figma API key, I have linked a page. It walks you through step by step from generating the token to using it in your MCP config.

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Here’s a quick example where I asked my editor to list the fill colors used in the design. The Figma MCP Server worked, and the results came right into the chat.

While prompting, you need to refer to the Figma file ID, you can either paste the full Figma URL or just use the file ID from the URL. Both will work.

How to add MCP Servers with AI Editors

Let’s talk about integrating MCP Servers with different AI editors. I have tested them with Cursor, VS Code, and Windsurf to see how each editor handles MCP Server integration.

And yes, some pre-built servers are easy to integrate. Custom servers need a bit of manual setup. But identifying the right MCP servers and integrating with your code Editor once, is definitely worth doing it. Because it will save lot of your time in the long run.

MCP Server Integration with cursor:

1. Check this page for pre-built MCP servers. Click Add to Cursor, that brings up the popup in Cursor, where you can connect to that MCP Server.

   

2. If the MCP Server you are looking for, is not listed in this page, no worries, you can add it manually. Just open mcp.json file and paste MCP server config in this file.

   C:\Users\your-username\.cursor\mcp.json

3. Another Option is, paste the MCP Server config in this link, and copy deep link or web link. Open the deep link a new tab. It will launch Cursor and ask if you want to add the server.

   

4. If you are adding a custom MCP Server, you can either update the same mcp.json file directly or go to Cursor settings → MCP Tools → Add MCP Server and paste the config there.

Here is a look at the servers and tools currently loaded in my Cursor setup. You will notice a warning about tool limits. It is best to keep it under 42 tools, as loading too many may not be supported by the models.

Tools and servers are not the same thing. A tool is just a function inside an MCP Server that does the actual work. One MCP Server can expose multiple tools. For example, the Filesystem MCP Server includes tools like read_file, write_file, and more.

MCP Server Integration with windsurf

1. Add pre-built MCP servers to windsurf with just few clicks like below.

   

2. To add custom MCP servers, edit the mcp_config.json file with custom MCP server configuration.

   C:\Users\user_name\.codeium\windsurf\mcp_config.json

Once added, we can see these tools appear in Windsurf under the configured plugins.

MCP Server Integration with VSCode

VS Code also supports MCP, though it's not enabled by default.

1. Press Ctrl + Shift + P and open settings.

2. Search for chat.mcp.enabled and turn it on.

   

3. Now Switch to Agent Mode, go to Add Tools, and choose Add MCP Server,

   

   

   

4. You can add both local and remote MCP Servers here. These entries are saved in your settings.json file. Once added, your tools will show up in the MCP tools list.

5. If you prefer not to go through the UI, you can directly open the settings.json file at "C:\Users\xxxx\AppData\Roaming\Code\User\settings.json"
   and manually add the MCP Server configurations there. VS Code will pick them up from that file.

Wrapping It Up

If you’ve made it this far, you probably get why I’m excited about MCP Servers.

They are not just some new protocol trend, they actually solve real problems. You don’t need to be a power user to get started. Pick one or two servers that match your workflow, maybe Filesystem or GitHub and try wiring them up with Claude, Cursor, or your favorite editor. You will see the difference.

And the best part? You can always build your own MCP Server. That’s where the real fun begins.

Happy Learning!