DEV Community

Cover image for Getting Started with MCP: Connecting Clients & 10 Essential MCPs you should try
Jefree Sujit
Jefree Sujit

Posted on

Getting Started with MCP: Connecting Clients & 10 Essential MCPs you should try

#mcp #beginners #llm #tutorial

If you’re a developer using Cursor, Windsurf, or Claude, or you frequently build things that mix code, docs, tasks, and design — you’re probably itching to connect more of your tools directly into your workflow. That’s where MCP (Model Context Protocol) comes in: it lets your tools (MCP servers) talk to your agent client in a standardized way, giving the agent access to context it wouldn’t otherwise have.

This article is second of a three-part series where we go deeper into MCP. In the first part of this series, we explored what the Model Context Protocol (MCP) is, its underlying concepts and the "why" behind it. If you haven’t checked it yet, you can read it here

In this article, we’ll cover:

  • How to add an MCP to client (like Cursor, Windsurf, or Claude Desktop).
  • How to configure mcp.json.
  • Commonly used popular MCP servers (Notion, Linear, GitHub, Figma, Supabase).
  • Sample system prompts you can try with each MCP.

By the end, you’ll be able to connect to MCPs from your IDE and start making them part of your everyday workflow.

How to Add an MCP Client & Configuration

Now, let’s get practical. To connect MCP servers (tools like Notion, Linear, Supabase, etc.) to your client, it basically requires two things:

  • Enabling MCP client support in your tool (Cursor/Windsurf/Claude).
  • Writing a config (usually mcp.json or similar), pointing to MCP servers with correct auth.

Here’s how to set up your environment with sample configuration and where to put the file.

1. Create a new config file

Make a file named mcp.json in your project (or in a global config location).

Here’s a generic template:

{
  "mcpServers": {
    "notion": {
      "url": "https://mcp.notion.com/mcp",
      "auth": {
        "type": "oauth",
        "token": "YOUR_NOTION_OAUTH_TOKEN_HERE"
      }
    },
    "linear": {
      "url": "https://mcp.linear.com",
      "auth": {
        "type": "apiKey",
        "key": "YOUR_LINEAR_API_KEY_HERE"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

You’ll replace the placeholder strings with your real tokens or keys, and ensure the URLs are correct.

2. Client-specific Setup

Here are the instructions for some of the common clients on where to put the config file and how to enable MCP support.

Cursor

  • Place the file in your project root as .cursor/mcp.json.
  • If you want it globally, you can also put it in ~/.cursor/mcp.json so it applies to all projects.
  • In Cursor → Settings → Context / MCP, toggle “Enable MCP servers” if it’s not already.
  • Sometimes you may need to restart Cursor or refresh in Settings for the new MCP servers to show up.

Windsurf

  • Add mcp.json in the root of your workspace/project directory.
  • In Windsurf → Plugins or Integrations → *“Add external MCP server” * (or equivalent settings panel) — paste the URL or enter the command/config.
  • If the server is remote, provide auth credentials in the config. If local, ensure the command/args are provided if required.

Claude Desktop

  • On macOS: edit ~/Library/Application Support/Claude/claude_desktop_config.json (or the equivalent config file path).
  • On Windows/Linux: similar config paths (check Claude’s docs).
  • Insert your mcpServers entries into that config file.
  • Make sure MCP is enabled in Claude’s settings. Sometimes permissions (for local servers or filesystem access) must be granted.

Popular MCP Servers You Can Try Now

Here are some of the most useful MCPs you can start with.

1. Notion

Notion isn’t just a note-taking tool — it’s where a lot of devs keep documentation, plans, and even databases. Notion MCP gives your agent secure access to your Notion workspace: docs, databases, comments, etc. Great for pulling in specs, PRDs, knowledge base content without manual export.

Config:

{
  "mcpServers": {
    "notionMCP": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.notion.com/mcp"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Try this prompt:

“Fetch the product requirements spec from Notion for Project Alpha and give me a bullet-list summary of action items.”
Enter fullscreen mode Exit fullscreen mode

👉 Reference: Notion MCP GitHub

2. GitHub

GitHub is where your code lives. The GitHub MCP enables your agent to access repos, pull requests, issues. Helpful for code review, fetching code context, auto-generating changelogs etc.

Config:

{
  "mcpServers": {
    "github": {
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer YOUR_GITHUB_PAT"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Try this prompt:

“List open PRs in repo/backend, identify failing ones, and draft a summary of required changes.”
Enter fullscreen mode Exit fullscreen mode

👉 Reference: GitHub MCP

3. Linear

Linear is popular for issue and project tracking. With Linear MCP, your agent can fetch ticket info, read acceptance criteria, update statuses, etc. Good for managing dev workflows.

Config:

{
  "mcpServers": {
    "linear": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.linear.app/sse"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Try this prompt:

“Get the Linear ticket with ID LNR-123, read its content and acceptance criteria, then generate a implementation plan.”
Enter fullscreen mode Exit fullscreen mode

👉 Reference: Linear MCP

4. Figma

Design files often hold important context. For designers or front-end folks, the Figma MCP lets you query design docs or pull specs directly.

Config:

{
   "mcpServers": {
     "figmaRemoteMcp": {
       "url": "https://mcp.figma.com/mcp"
     }
   }
 }
Enter fullscreen mode Exit fullscreen mode

Try this prompt:

"Fetch the latest login screen design from Figma and generate a React component scaffold with styles.”
Enter fullscreen mode Exit fullscreen mode

👉 Reference: Figma MCP

5. Supabase

Supabase is a backend-as-a-service. With the Supabase MCP, you can query your DB directly through your client. It gives your agent access to database schema, table data, and allows queries. Useful for backend dev, data workflows, etc.

Config:

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server-supabase",
        "--read-only",
        "--project-ref=<project-ref>"
      ],
      "env": {
        "SUPABASE_ACCESS_TOKEN": "<access-token>"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Try this prompt:

“Fetch the users table schema from Supabase, generate TypeScript types, and suggest indexes for queries on created_at.”
Enter fullscreen mode Exit fullscreen mode

👉 Reference: Supabase MCP

6. Slack

Slack has become a goto communication channel for most startups and developer community. Slack MCP could pull messages, notifications, status checks, send messages, etc. Slack MCP also helps link communication data into your agent workflows.

Config:

{
  "mcpServers": {
    "slack": {
      "command": "npx",
      "args": [
        "-y",
        "slack-mcp-server@latest",
        "--transport",
        "stdio"
      ],
      "env": {
        "SLACK_MCP_XOXP_TOKEN": "xoxp-..."
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Try this prompt:

“Pull messages from #dev channel in Slack for the past week, and summarize top blockers mentioned by team; then suggest issues I should prioritize.”
Enter fullscreen mode Exit fullscreen mode

👉 Reference: Slack MCP

7. File System

Sometimes you just need your agent to access your local files. The File System MCP lets your agent access your local files — code, configs, markdown documentation, etc. Great when you want the agent to search your project or read local docs.

Config:

{
  "mcpServers": {
    "filezop": {
      "type": "stdio",
      "command": "npx",
      "args": ["filezop", "start"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Try this prompt:

“Search for files in directory that has instances of TODO and give me a quick task list on what all have to be done.”
Enter fullscreen mode Exit fullscreen mode

👉 Reference: File System MCP

8. Playwright

Playwright is great for browser automation and testing. The Playwright MCP can spin up browser sessions and test flows and your agents can navigate web pages, fetch data, fill forms, test UIs automatically

Config:

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

Try this prompt:

“Use Playwright MCP to check whether my website’s signup form is broken: navigate to signup page, simulate signup, report any JS errors.”
Enter fullscreen mode Exit fullscreen mode

👉 Reference: Playwright MCP

9. Postman

For developers working with APIs, Postman MCP enables your agent to access API collections in Postman, see endpoints, test APIs, environments. Useful for testing, automating API tasks.

Config:

"mcpServers": {
  "postman_mcp_server": {
    "url": "https://mcp.postman.com/minimal",
    "headers": {
      "Authorization": "Bearer YOUR_API_KEY"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Try this prompt:

“From my Postman collection ‘User Management’, list all endpoints tagged ‘admin’ and show their required parameters.”
Enter fullscreen mode Exit fullscreen mode

👉 Reference: Postman MCP

10. Peekaboo

Peekaboo is useful for visual debugging or workflows that need UI context. It's macOS-only MCP server captures screenshots or application usage, letting AI agents see your UI or screen content. Peekaboo MCP is handy for security and observability — scanning or monitoring systems via your client.

Config:

{
  "mcpServers": {
    "peekaboo": {
      "command": "npx",
      "args": ["-y", "@steipete/peekaboo-mcp@beta"],
      "env": {
        "PEEKABOO_AI_PROVIDERS": "openai/gpt-4.1,ollama/llava:latest",
        "OPENAI_API_KEY": "your-openai-api-key-here"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Try this prompt:

"Run a quick security scan on the UI application. Take a screenshot of my dashboard, highlight all buttons with duplicate labels, and list them.”
Enter fullscreen mode Exit fullscreen mode

👉 Reference: Peekaboo MCP

Why MCPs Matter in Development

MCPs do more than reduce context switching. They let your editor, your agent, your workflow become aware of your tools and resources. Instead of pulling in docs manually, copying text, switching tabs, you ask your agent and it goes to the source—Notion, Linear, Supabase, GitHub, etc.

MCPs let your agents work smarter, faster, and more integrated:

  • Faster ramp-up on new projects because the agent already has your workspace context.
  • Less friction — less jumping between tools.
  • More consistency: your agent can operate with up-to-date info, avoiding stale docs or manual copy errors.
  • Scalability: as you add more tools, your agent can pull them in without extra glue code.

That's it! You’ve learned how to connect MCP clients like Claude, Cursor, and Windsurf to different MCP servers, set up the right configs, and experiment with popular MCPs like Notion, GitHub, Linear, Supabase, Postman, and more.

In the next part (Building your own MCPs), we’ll go beyond using existing MCPs and dive into how to build your own MCP server, so you can integrate your custom tools and workflows.

Top comments (0)