DEV Community: Deepak Pant

Top 5 MCP Servers Every Developer Should Have in VS Code

Deepak Pant — Tue, 18 Aug 2026 14:45:45 +0000

The Model Context Protocol (MCP), open-sourced by Anthropic, has transformed how we interact with AI in our development workflows. Instead of treating your AI coding assistant as an isolated text generator in VS Code (via extensions like Cline, Roo Code, GitHub Copilot, Continue, or Claude Dev), MCP turns it into an agentic powerhouse that can interact directly with your files, browsers, issue trackers, and internal knowledge bases.

If you're already using MCP-compatible extensions in VS Code, your next step is choosing the right servers to supercharge your daily productivity.

Here are the Top 5 MCP servers every developer should configure in VS Code today.

1. 📄 MarkItDown MCP Server (Token-Saver for Documents)

What it is

Developed around Microsoft's open-source markitdown utility, this MCP server seamlessly converts binary and rich document formats—including PDFs, Word documents (.docx), Excel spreadsheets (.xlsx), PowerPoint slides (.pptx), and audio transcripts—into clean, structured Markdown.

Why every developer needs it

LLMs are text engines. When you feed a 40-page technical specification PDF or architecture document into an LLM context window:

PDFs and complex docs consume massive token volumes due to raw formatting and OCR overhead.
Models often get distracted or hallucinate due to poorly parsed layout artifacts.
You burn through your API budget rapidly.

MarkItDown solves this: It strips away the layout bloat and produces pristine GitHub-flavored Markdown. Your AI assistant parses the distilled text instantly using a fraction of the original token footprint.

Typical Use Cases

Feeding API spec PDFs or vendor datasheets into your coding prompt.
Parsing product requirement documents (PRDs) stored in .docx format into actionable task lists.
Reading legacy business logic tables from Excel spreadsheets directly into code.

Example Config (`mcp.json`)

{
  "microsoft/markdown": {
    "type": "stdio",
    "command": "uvx",
    "args": [
      "markdown-mcp@0.1a4"
    ],
    "gallery": "https://api.mcp.github.com",
    "version": "1.0.0"
  }
}

2. 🌐 Playwright MCP Server (Headless Browser & Web Automation)

What it is

The Playwright MCP Server (or Puppeteer MCP equivalent) equips your AI assistant with a full headless/headed Chromium browser engine. It gives the model the ability to visit URLs, take screenshots, click buttons, fill out forms, and scrape dynamic single-page applications (SPAs).

Why every developer needs it

Static web fetchers (curl / fetch) fail on modern client-rendered web applications (React, Angular, Vue). When debugging frontend issues, testing authentication flows, or checking the latest documentation for an unindexed library, your AI needs real browser execution.

With Playwright MCP:

Your AI assistant can launch your local dev server (http://localhost:3000), inspect console logs, take visual screenshots of a broken UI component, and fix the CSS/JSX automatically.
It can read live web documentation even if the page requires JavaScript execution.

Typical Use Cases

Automated Visual Verification: Prompt: "Check my newly generated modal on http://localhost:5173, take a screenshot, and tell me if the dark theme padding looks right."
End-to-End Smoke Testing: Verifying user sign-up and login forms during refactoring.
Scraping dynamic docs: Extracting code snippets from dynamic single-page docs sites.

Example Config (`mcp.json`)

{
  "microsoft/playwright-mcp": {
    "type": "stdio",
    "command": "npx",
    "args": [
      "@playwright/mcp@latest"
    ],
    "gallery": "https://api.mcp.github.com",
    "version": "0.0.1-seed"
  }
}

3. 🐙 GitHub MCP Server (Official Repo & PR Management)

What it is

The official GitHub MCP server connects your LLM directly to GitHub's REST & GraphQL APIs and GitHub Copilot services.

Why every developer needs it

Developers spend a huge portion of their day switching between VS Code and the browser just to check open PR reviews, find issue numbers, reference code in remote repositories, or inspect CI/CD failure logs.

With the GitHub MCP server configured:

You can query, review, and comment on pull requests directly from your AI chat.
The assistant can create branches, commit code, open pull requests with detailed descriptions, and link issues automatically without you leaving VS Code.
It can search issues and remote repositories across your organization for existing solutions.

Typical Use Cases

Instant PR Generation: "Review my local branch changes against main, write a comprehensive summary, and open a draft Pull Request on GitHub."
Issue Triage: "Summarize issue #142 and propose a code change to fix the reported bug."
Remote Code Search: "Search our org's auth-service repo on GitHub to see how they handle JWT token rotation."

Example Config (`mcp.json`)

{
  "io.github.github/github-mcp-server": {
    "type": "http",
    "url": "https://api.githubcopilot.com/mcp/",
    "gallery": "https://api.mcp.github.com",
    "version": "1.9.0"
  }
}

4. 🏢 Atlassian Rovo MCP Server (Jira & Confluence Integration)

What it is

The Atlassian Rovo / Atlassian MCP server links your local AI agent to your company's Jira tracking and Confluence knowledge base systems via Atlassian's remote MCP endpoint.

Why every developer needs it

Almost every enterprise engineering team organizes work around Jira tickets and Confluence documentation. Before MCP, you had to manually copy acceptance criteria from Jira, paste them into your AI chat, copy the response, and switch back to update the status.

With the Atlassian MCP server:

You simply pass the Jira issue key (e.g., JIRA-4089). The AI reads the user story, acceptance criteria, edge cases, and attached comments in real time.
It searches company Confluence wikis to ground its responses in your team's internal architecture guidelines, design standards, and deployment runbooks.
With proper API permissions, it can update ticket statuses, log work notes, or create subtasks upon code completion.

Typical Use Cases

Requirement-Driven Coding: "Read Jira ticket BACK-2041, inspect our repository, and implement the requested endpoint with unit tests."
Internal Knowledge Grounding: "Search Confluence for our standard RBAC implementation guidelines and ensure my new middleware adheres to company policy."
Sprint Documentation: "Summarize the changes in my working directory and post an update comment on Jira ticket FE-892."

Example Config (`mcp.json`)

{
  "com.atlassian/atlassian-mcp-server": {
    "type": "http",
    "url": "https://mcp.atlassian.com/v1/mcp",
    "gallery": "https://api.mcp.github.com",
    "version": "1.1.3"
  }
}

5. 📊 Mermaid MCP Server (Architecture & Flow Diagramming)

What it is

The Mermaid MCP Server enables your AI assistant to generate, validate, and render complex diagrams (Flowcharts, Sequence diagrams, Entity Relationship (ER) diagrams, Class diagrams, and State charts) using Mermaid.js syntax directly in your IDE.

Why every developer needs it

Code architecture is inherently visual. Explaining complex asynchronous workflows, microservice boundaries, or database schemas with plain text often leads to misunderstandings.

With the Mermaid MCP server:

The AI creates accurate, syntax-validated Mermaid diagrams while drafting architecture proposals or READMEs.
It visualizes data flows and call sequences before you write a single line of implementation code.
It renders and exports diagrams directly in VS Code, allowing you to iterate on system design collaboratively with your AI.

Typical Use Cases

Sequence Diagram Generation: "Analyze this authentication middleware and render a Mermaid sequence diagram showing the token validation lifecycle."
Database ERDs: "Inspect my Prisma / TypeORM schema and generate an ER diagram for the database documentation."
Workflow Visualization: "Generate a flowchart explaining the retry and dead-letter queue mechanism in our event consumer."

Example Config (`mcp.json`)

{
  "modelcontextprotocol/server-mermaid": {
    "type": "stdio",
    "command": "npx",
    "args": [
      "@modelcontextprotocol/server-mermaid"
    ],
    "gallery": "https://api.mcp.github.com",
    "version": "0.1.0"
  }
}

📦 Complete `mcp.json` Configuration

Here is the full consolidated mcp.json you can add directly to your VS Code MCP configuration:

{
  "microsoft/markdown": {
    "type": "stdio",
    "command": "uvx",
    "args": [
      "markdown-mcp@0.1a4"
    ],
    "gallery": "https://api.mcp.github.com",
    "version": "1.0.0"
  },
  "com.atlassian/atlassian-mcp-server": {
    "type": "http",
    "url": "https://mcp.atlassian.com/v1/mcp",
    "gallery": "https://api.mcp.github.com",
    "version": "1.1.3"
  },
  "microsoft/playwright-mcp": {
    "type": "stdio",
    "command": "npx",
    "args": [
      "@playwright/mcp@latest"
    ],
    "gallery": "https://api.mcp.github.com",
    "version": "0.0.1-seed"
  },
  "io.github.github/github-mcp-server": {
    "type": "http",
    "url": "https://api.githubcopilot.com/mcp/",
    "gallery": "https://api.mcp.github.com",
    "version": "1.9.0"
  },
  "modelcontextprotocol/server-mermaid": {
    "type": "stdio",
    "command": "npx",
    "args": [
      "@modelcontextprotocol/server-mermaid"
    ],
    "gallery": "https://api.mcp.github.com",
    "version": "0.1.0"
  }
}

🚀 Summary Matrix: How They Work Together

MCP Server	Core Capability	Biggest Benefit
MarkItDown	Document to Markdown Converter	Massive token & cost savings; clean document ingestion
Playwright	Headless Browser Automation	Visual verification, dynamic SPA scraping & UI testing
GitHub	Official Repo & PR Management	In-editor PR creation, issue triage & remote repo search
Atlassian Rovo	Jira & Confluence Bridge	Direct access to acceptance criteria & internal wikis
Mermaid	Diagram Generator & Validator	Instant visual architecture, sequence & ER diagrams

💡 Quick Tips for Getting the Most Out of MCP in VS Code

Mind Your Secrets: Always use environment variables for sensitive API tokens (GitHub PAT, Atlassian API tokens) rather than hardcoding them in shared config files.
Selective Tool Activation: While it is tempting to enable dozens of MCP servers, activate only the tools you need for the current task to keep tool-definition tokens lean and avoid prompt clutter.
Combine Servers for Compound Workflows:
- Example: Have Atlassian Rovo pull requirements from Jira -> MarkItDown ingest the attached PDF spec -> write the code -> Mermaid generate the architecture flow -> GitHub create the PR with the diagram embedded!

💬 Over to You!

Which MCP servers have become essential in your daily coding setup? Have you built a custom MCP server for your team? Let's discuss in the comments below!

Expressly - Text Transformation App

Deepak Pant — Mon, 20 Jan 2025 10:50:12 +0000

Transform your text effortlessly with Expressly, a cutting-edge multi-agent AI application that adapts your content to perfectly match your desired format, tone, and target audience. Whether you're crafting professional LinkedIn posts, engaging Instagram captions, or technical documentation, Expressly has you covered.

What Makes Expressly Special?

Expressly leverages the power of CrewAI and advanced language models to understand and transform your text intelligently. The app shines with its versatility, offering a wide range of customization options:

Format Options

From tweets and blog posts to formal reports and product descriptions, Expressly adapts your content to fit any medium. Choose from multiple formats including posts, articles, emails, and more.

Tone Control

Express yourself exactly how you want with tone options ranging from professional and confident to friendly and inspirational. The app ensures your message maintains the perfect voice for your audience.

Target Audience Optimization

Whether you're writing for LinkedIn professionals, Instagram followers, or technical readers, Expressly tailors your content for maximum impact on your chosen platform.

Getting Started

Try Expressly today! Here's where you can find us:

Live Demo: Experience Expressly directly on Hugging Face Spaces
Docker Image: Deploy your own instance from Docker Hub
Source Code: Explore the technical details on our GitHub repository

Built for Everyone

Whether you're a content creator, professional communicator, or someone who wants to improve their writing, Expressly makes text transformation accessible and efficient. The intuitive interface allows you to input your text and receive perfectly formatted output in seconds.

Our AI-powered engine understands context and nuance, ensuring that your message isn't just reformatted, but thoughtfully transformed to maintain its essence while meeting your specific requirements.

Want to learn more about how Expressly can transform your content creation process? Visit our GitHub repository for comprehensive documentation, or try it yourself on Hugging Face Spaces. For deployment options, check out our Docker image on Docker Hub.

Transform your text today with Expressly - where AI meets creativity to power your communication needs.

Note: This is a living project, continuously evolving with new features and improvements. Stay updated by following our GitHub repository.

Agent.ai Agent - LinkedIn Profile Optimizer

Deepak Pant — Thu, 16 Jan 2025 10:19:05 +0000

This is a submission for the Agent.ai Challenge: Productivity-Pro Agent (See Details)

What I Built

I developed an AI agent designed to analyze LinkedIn profiles and provide actionable insights for optimization. The agent works by taking a LinkedIn profile URL, analyzing its content, and delivering personalized suggestions to enhance the profile's appeal and visibility. It also generates an optimized LinkedIn profile template, offering users a practical guide to implement improvements.

This agent focuses on:

Crafting compelling summaries.
Highlighting relevant skills and achievements.
Improving keyword optimization for better searchability.

The result is a well-rounded, professional LinkedIn profile that helps users stand out in their field.

Demo

You can experience the AI agent in action by visiting this URL: LinkedIn Profile Optimizer Agent. Test it yourself and see how it transforms a standard LinkedIn profile into an optimized version.

For a step-by-step walkthrough, check out the demo video on YouTube: Watch the Demo.

Agent.ai Experience

My experience with Agent.ai has been phenomenal. The platform makes it incredibly easy to build AI agents, even for individuals with minimal technical expertise. Here’s what stood out for me:

Ease of Use: The intuitive interface ensures that anyone can start building AI agents quickly, without needing advanced coding skills.
Built-in Plugins: Agent.ai provides a wide range of pre-built plugins, allowing users to define workflows and integrate solutions seamlessly.
Customizability: Despite its simplicity, the platform offers flexibility to tailor agents according to specific requirements.
Support and Documentation: Comprehensive documentation and responsive support make the development process smooth and efficient.

Agent.ai’s tools empowered me to focus on problem-solving rather than getting bogged down by technical complexities. It’s a game-changer for anyone looking to build intelligent, functional AI agents effortlessly.

In conclusion, while building AI agents can present challenges, leveraging user-friendly platforms like Agent.ai can significantly streamline the process. With the right tools and mindset, creating impactful AI solutions becomes an achievable goal for everyone.

Unlocking the Power of GitHub Copilot: Your AI Pair Programmer

Deepak Pant — Wed, 15 Jan 2025 06:40:21 +0000

In the ever-evolving world of software development, having a reliable, intelligent assistant can transform how developers write and optimize code. GitHub Copilot, branded as your "AI pair programmer," is designed to do just that. Powered by advanced AI models like OpenAI's GPT-4 and Anthropic's Claude, GitHub Copilot assists with everything from generating code snippets to reviewing scripts. Let’s dive into what makes GitHub Copilot an invaluable tool and how it can enhance your development workflow.

What is GitHub Copilot?

GitHub Copilot is an AI-driven code assistant that integrates seamlessly into popular code editors like Visual Studio Code (VS Code). It assists developers in real-time, offering contextually relevant code suggestions, generating test cases, reviewing existing code, and even debugging. Whether you’re a seasoned developer or a beginner, Copilot empowers you to write cleaner, more efficient code faster.

How to Install GitHub Copilot

1. Install the Copilot Extension for VS Code
Download and install the GitHub Copilot extension for VS Code by visiting the Marketplace.

2. Add Copilot Chats
For an enhanced experience, install the GitHub Copilot Chat extension. This allows for interactive conversations with Copilot directly within your editor.

3. Explore More Extensions
Check out a variety of other extensions available on GitHub Marketplace, or create your own custom Copilot extension tailored to your project needs.

Features and Capabilities

GitHub Copilot isn’t just a basic code generator. It provides a suite of features designed to streamline every phase of software development. Here are some highlights:

1. Intelligent Code Suggestions
Copilot offers relevant code suggestions based on your current context. Whether you're starting a new project or refining an existing one, Copilot's AI-powered recommendations save you time and effort.

2. Generate Unit Tests
Use the @workspace /tests command to automatically generate unit tests for your code. This ensures better test coverage with minimal manual effort.

3. Fix and Optimize Code
Identify issues in your code and receive fixes using the /fix command. Copilot doesn't just point out problems – it suggests actionable solutions.

4. Code Documentation
Generate documentation for your codebase to improve readability and maintainability. With Copilot, even large projects can stay well-documented with minimal overhead.

5. Multi-File Editing
Copilot’s multi-file editing feature allows you to apply changes or add functions across multiple files simultaneously. This is especially useful for refactoring or introducing new features consistently.

How GitHub Copilot Agents Work

GitHub Copilot incorporates specialized agents to assist with tasks in your workspace, editor, terminal, and GitHub itself. These agents understand the context of your current task and provide actionable assistance, making your development process smoother and more efficient.

1. Workspace Agent (`@workspace`)

The workspace agent helps you interact with your codebase effectively. It can explain, fix, and enhance the code you’re working on, as well as set up new projects and files.

Available Commands:

/explain: Explains how the code in your active editor works, making it easier to understand complex logic or unfamiliar sections.
/tests: Automatically generates unit tests for the selected code, saving time and ensuring robust test coverage.
/fix: Analyzes the code in your editor, identifies issues, and proposes fixes.
/new: Scaffolds code for a new file or project in your workspace.
/newNotebook: Creates a new Jupyter Notebook within your workspace for data science and machine learning projects.
/fixTestFailure: Proposes a solution for a failing test.
/setupTests (Experimental): Sets up tests in your project.

2. VS Code Agent (`@vscode`)

The VS Code agent is tailored for enhancing your experience within Visual Studio Code. It supports navigation, debugging, and workspace queries.

Available Commands:

/search: Generates query parameters for workspace searches, helping you locate files or functions quickly.
/startDebugging (Experimental): Automatically generates a launch configuration and initiates debugging, streamlining the debugging process.

3. Terminal Agent (`@terminal`)

The terminal agent supports terminal-based tasks, providing explanations for commands or outputs.

Available Commands:

/explain: Explains terminal commands or outputs, helping you understand cryptic responses or errors.

4. GitHub Agent (`@github`)

The GitHub agent connects to GitHub’s vast resources, such as web searches, code repositories, and enterprise knowledge bases.

Available Commands:

/search: Searches through your repository or GitHub resources for relevant documentation, code snippets, or issues.

Using Contextual Variables

To improve the accuracy of Copilot’s responses, you can provide the following variables for additional context:

#editor: The visible source code in the active editor.
#selection: The current selection in the active editor.
#terminalLastCommand: The last command run in the active terminal.
#terminalSelection: The current selection in the active terminal.
#file: Select a specific file in the workspace.

Customizing GitHub Copilot

For tailored assistance, you can create a .github/copilot-instructions.md file in your repository. Here, you can define specific guidelines to align Copilot with your project standards. For example:

We use Bazel for managing our Java dependencies, not Maven, so when talking about Java packages, always give me instructions and code samples that use Bazel.

We always write JavaScript with double quotes and tabs for indentation, so when your responses include JavaScript code, please follow those conventions.

Why Should Developers Use GitHub Copilot?

1. Save Time and Boost Productivity

Reduce the time spent on repetitive coding tasks and focus on solving complex problems.

2. Improve Code Quality

Generate test cases, review your code, and maintain high-quality standards effortlessly.

3. Learn as You Code

For beginners, Copilot acts as a mentor, providing explanations and best practices.

4. Collaborative Programming

Think of Copilot as an always-available teammate offering feedback, suggestions, and solutions.

Conclusion

GitHub Copilot is revolutionizing software development by providing developers with an AI-powered assistant that adapts to their needs. Whether you’re writing your first line of code or managing a large-scale enterprise project, Copilot ensures you work smarter, not harder. By leveraging its capabilities, you can enhance productivity, reduce errors, and learn new techniques – all from within your editor.

Learn More

Explore more about GitHub Copilot and its features:

Ready to take your coding skills to the next level? Start using GitHub Copilot today and experience the future of development!

DEV Community: Deepak Pant

Top 5 MCP Servers Every Developer Should Have in VS Code

1. 📄 MarkItDown MCP Server (Token-Saver for Documents)

What it is

Why every developer needs it

Typical Use Cases

Example Config (mcp.json)

2. 🌐 Playwright MCP Server (Headless Browser & Web Automation)

What it is

Why every developer needs it

Typical Use Cases

Example Config (mcp.json)

3. 🐙 GitHub MCP Server (Official Repo & PR Management)

What it is

Why every developer needs it

Typical Use Cases

Example Config (mcp.json)

4. 🏢 Atlassian Rovo MCP Server (Jira & Confluence Integration)

What it is

Why every developer needs it

Typical Use Cases

Example Config (mcp.json)

5. 📊 Mermaid MCP Server (Architecture & Flow Diagramming)

What it is

Why every developer needs it

Typical Use Cases

Example Config (mcp.json)

📦 Complete mcp.json Configuration

🚀 Summary Matrix: How They Work Together

💡 Quick Tips for Getting the Most Out of MCP in VS Code

💬 Over to You!

Expressly - Text Transformation App

What Makes Expressly Special?

Format Options

Tone Control

Target Audience Optimization

Getting Started

Built for Everyone

Agent.ai Agent - LinkedIn Profile Optimizer

What I Built

Demo

Agent.ai Experience

Unlocking the Power of GitHub Copilot: Your AI Pair Programmer

What is GitHub Copilot?

How to Install GitHub Copilot

Features and Capabilities

How GitHub Copilot Agents Work

1. Workspace Agent (@workspace)

2. VS Code Agent (@vscode)

3. Terminal Agent (@terminal)

4. GitHub Agent (@github)

Using Contextual Variables

Customizing GitHub Copilot

Why Should Developers Use GitHub Copilot?

Conclusion

Learn More

Example Config (`mcp.json`)

Example Config (`mcp.json`)

Example Config (`mcp.json`)

Example Config (`mcp.json`)

Example Config (`mcp.json`)

📦 Complete `mcp.json` Configuration

1. Workspace Agent (`@workspace`)

2. VS Code Agent (`@vscode`)

3. Terminal Agent (`@terminal`)

4. GitHub Agent (`@github`)