Muhammad Hamid Raza

Posted on Mar 19

What is MCP and How to Use It in VS Code (With a Simple Example)

#webdev #ai #mcp #vscode

🚀 Your AI Tools Are Finally Getting a Superpower

Okay, real talk — how many times have you wished your AI assistant could just do stuff instead of only telling you stuff?

Like, you're in the middle of coding, you ask your AI tool a question, and it gives you a great answer — but you still have to manually open the browser, copy the result, paste it into your editor, run the command yourself… You know the drill. It's like having a really smart friend who gives great advice but refuses to touch the keyboard.

That's exactly the problem MCP — Model Context Protocol — was built to fix.

If you've been hearing this term thrown around in AI and developer communities lately and thought, "What on earth is MCP?" — don't worry. By the end of this post, you'll not only understand what it is but also know exactly how to set it up in VS Code with a simple, working example. No fluff, no PhD required. Let's go. 🎯

🤔 What Is MCP (Model Context Protocol)?

Think of MCP like a USB standard for AI tools.

Before USB, every device needed its own special cable and port. It was chaos. Then USB came along and said, "Let's make one standard that works for everything." Plug in your mouse, keyboard, phone, hard drive — same port, different devices, zero headaches.

MCP does the same thing, but for connecting AI models to external tools, data sources, and services.

Officially: MCP is an open protocol developed by Anthropic that defines a standard way for AI models (like Claude) to communicate with external tools — things like file systems, databases, APIs, browsers, and custom services.

In plain English: MCP lets your AI assistant actually reach out and interact with tools on your computer or the web — not just talk about them. It's like giving your AI a pair of hands instead of just a voice.

Before MCP, if you wanted an AI to read a file, call an API, or query a database, you had to build a completely custom integration for each one. Every AI tool had its own way of doing it. It was messy, inconsistent, and a nightmare to maintain.

With MCP, there's one standard protocol. Build a tool once, and any MCP-compatible AI can use it. It's as easy as unlocking your phone once you know the password. 🔓

🌍 Why MCP Matters for Developers (Especially in VS Code)

Here's a question worth thinking about: What if your AI coding assistant could actually read your project files, run your tests, check your database, and browse documentation — all without you lifting a finger?

That's not sci-fi anymore. That's MCP.

VS Code has become the editor of choice for millions of developers. And with GitHub Copilot, Codeium, and other AI tools baked right in, it's already a powerful environment. MCP takes it to the next level by letting those AI tools connect to real context — your actual files, your actual terminal, your actual APIs.

Here's why this matters in daily dev life:

Context is everything. An AI that can read your codebase gives 10x better answers than one that can't.
Less copy-paste, more flow. Instead of manually feeding your AI information, it fetches what it needs.
Standardization means ecosystems. As MCP gets adopted, there'll be a growing library of ready-made MCP servers for everything — GitHub, Jira, Postgres, Slack, you name it.

The developer community is already calling MCP the missing layer between AI models and the real world. And VS Code is one of the best places to experience it firsthand.

✅ Benefits of MCP — With Real-Life Dev Examples

Here's what MCP actually unlocks for you as a developer:

🗂️ File System Access — Your AI can read and write files directly. Imagine asking, "Summarize all the TODO comments in my project" and getting an actual answer instead of a blank stare.
🌐 Live API Calls — Connect your AI to live endpoints. Ask it to fetch your latest GitHub issues, and it actually does it — not a hallucinated answer.
🗄️ Database Queries — Hook up a Postgres or SQLite MCP server and your AI can query your data. "How many users signed up this week?" — answered instantly.
🧪 Run Commands — With the right MCP server, your AI can run terminal commands, execute tests, and report back results.
🔁 Consistent Protocol — Once you learn MCP, every tool that uses it works the same way. One learning curve, endless tools.
🔌 Community Ecosystem — There's already a growing library of open-source MCP servers. You don't have to build everything from scratch.

Real-world example: A developer working on a SaaS app used an MCP server connected to their database. Instead of writing queries manually to debug a production issue, they just asked their AI assistant in VS Code — and it fetched the relevant records, analyzed them, and suggested the bug fix. What would've taken 20 minutes took 2.

⚖️ MCP vs Traditional AI Integrations — Pros and Cons

	MCP	Traditional Custom Integrations
Setup complexity	Moderate (once you learn it)	High (custom per tool)
Reusability	✅ One server, many AI clients	❌ Rebuild for every AI tool
Standardization	✅ Open protocol	❌ Varies wildly
Community support	✅ Growing fast	❌ You're on your own
Flexibility	✅ Any tool, any service	✅ Fully custom
Maintenance	✅ Lower long-term	❌ Higher long-term

Bottom line: If you're building something quick and dirty just for yourself, a custom integration might be faster initially. But if you want something scalable, shareable, and future-proof — MCP wins. No contest.

💡 How to Use MCP in VS Code — A Simple, Working Example

Alright, here comes the part you've been waiting for. Let's set up MCP in VS Code with a simple filesystem MCP server that lets your AI read files from your project. This is the "Hello World" of MCP. 🌍

What You'll Need

VS Code installed (obviously 😄)
Node.js (v18+) installed
GitHub Copilot or another MCP-compatible AI extension in VS Code
Basic comfort with the terminal

Step 1 — Install the MCP Filesystem Server

Open your terminal and run:

npm install -g @modelcontextprotocol/server-filesystem

This installs the official MCP filesystem server — a ready-made server that lets AI tools read and list files on your machine.

Step 2 — Configure MCP in VS Code

VS Code (with recent GitHub Copilot updates) supports MCP configuration via a .vscode/mcp.json file in your project.

Create a folder called .vscode in your project root (if it doesn't exist), then create a file called mcp.json inside it:

{
  "servers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "@modelcontextprotocol/server-filesystem",
        "/path/to/your/project"
      ]
    }
  }
}

Replace /path/to/your/project with the actual path to your project folder. On Windows it might look like C:/Users/YourName/myproject. On Mac/Linux, something like /Users/yourname/myproject.

Step 3 — Reload VS Code

Close and reopen VS Code (or use Ctrl+Shift+P → Reload Window). VS Code will detect your MCP configuration and spin up the filesystem server in the background.

Step 4 — Ask Your AI Something That Requires File Access

Open GitHub Copilot Chat (or your MCP-compatible AI tool) and try asking:

"List all the JavaScript files in my project and tell me which ones are the largest."

Or:

"Read my README.md file and give me a summary."

Your AI assistant will now use the MCP filesystem server to actually read those files and give you a grounded, accurate answer — not a guessed one. 🎉

That's it. You've just connected your AI to your actual file system using MCP. Welcome to the future of AI-assisted development.

🛠️ Best Tips — MCP Do's and Don'ts

✅ Do's

Start with community servers. There are already MCP servers for GitHub, Postgres, Slack, Brave Search, and more. Check the official MCP servers repo before building your own.
Use MCP for repetitive context tasks. Anything you find yourself copy-pasting into your AI chat repeatedly is a great MCP candidate.
Scope your file system access. Only give the MCP server access to the directories it actually needs. Security first.
Keep your mcp.json in version control. It helps teammates use the same MCP setup with zero extra configuration.
Test your MCP server independently before connecting it to your AI tool. Most servers have built-in CLI testing.

❌ Don'ts

Don't give MCP access to your entire hard drive. That's just asking for trouble. Scope it to your project folder.
Don't build a custom MCP server if an existing one does the job. Seriously, check the community first.
Don't skip error handling in custom MCP servers. If your server crashes silently, your AI will just stop responding and you'll spend an hour debugging a non-code problem.
Don't use MCP for tasks that don't need it. If you just need a quick code suggestion, you don't need to route it through an MCP server. Use the right tool for the right job.

⚠️ Common Mistakes Developers Make with MCP

1. Confusing MCP servers with AI models. MCP servers are tools — they don't think or generate responses. They just expose capabilities that AI models can use. Don't expect a filesystem server to write code for you.

2. Forgetting to restart VS Code after adding mcp.json. This trips up almost everyone the first time. The MCP config is read at startup, so changes don't apply until you reload.

3. Wrong file paths in the config. Especially on Windows — make sure you're using forward slashes or properly escaped backslashes. A small path typo means your server silently fails to start.

4. Giving too-broad permissions. Giving your MCP server access to your root directory (or worse, your home folder) is a bad idea. You wouldn't hand a stranger your house key; don't hand MCP your entire filesystem.

5. Expecting MCP to be plug-and-play on day one. It's close, but there's still a bit of setup involved. Give yourself 20-30 minutes the first time. After that, it's smooth sailing.

6. Not reading MCP server logs. When something goes wrong, the logs are your best friend. Most MCP servers output helpful error messages — check your VS Code Output panel (look for the MCP server name in the dropdown).

🏁 Conclusion — MCP Is the Bridge Between AI and the Real World

If there's one thing to take away from this post, it's this: MCP is the missing piece that turns AI assistants from smart chatbots into actual dev tools that work with your environment.

It's open, it's standardized, and it's already being adopted fast. The earlier you get comfortable with it, the better positioned you'll be as AI tooling continues to evolve.

Start small — set up the filesystem server, try a few prompts, see what your AI can do when it actually knows your codebase. Then explore community MCP servers for GitHub, databases, or whatever you use daily. You'll quickly wonder how you managed without it.

Want more practical dev content like this? 👇

Head over to hamidrazadev.com for more tutorials on VS Code, AI tooling, web development, and developer productivity — written by a developer, for developers. No fluff, no filler, just real stuff that helps.

And if this post saved you some time (or saved you from a debugging session), share it with a dev friend who's still manually copy-pasting into ChatGPT. They'll thank you. 😄

DEV Community