Getting Started with MCP: Your Local AI Context Server

#programming #ai #mcp #node

Hey dev.to community! 👋 Today, I want to introduce you to the Model Context Protocol (MCP) and show you how to set up your very own local MCP server to enhance your development workflow.

What is MCP?

At its core, MCP is an open protocol that enables AI models to interact with various data sources and tools, providing them with richer, more relevant context. Think of it as a bridge that allows your AI to "see" and "understand" your local environment, making its suggestions and assistance much more powerful and tailored to your needs.

In this quick guide, we'll connect a filesystem MCP server to Copilot within VS Code, allowing it to understand the files on your desktop.

Let's get your local MCP server up and running!

1. Verify Node.js and NPX Installation

First, ensure you have Node.js and NPX installed globally. Open your terminal and run:

Bash

node --version
npx --version

If you don't have them, you can download Node.js from nodejs.org. NPX comes bundled with npm (Node Package Manager).

2. Get the Filesystem MCP Server

We'll use npx to fetch and run the filesystem MCP server directly from GitHub. This is a convenient way to get started without a full installation.

The server's repository is located here

3. Enable Copilot Agent Mode in VS Code

Open VS Code. Go to Settings (File > Preferences > Settings on Windows/Linux, Code > Settings > Settings on macOS) and search for "Copilot agent mode." Make sure it's enabled.

4. Open User Settings (JSON)

Now, open your VS Code settings in JSON format. Use the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and search for "Open User Settings (JSON)".

5. Paste the MCP Server Configuration

Inside your settings.json file, paste the following configuration. Remember to replace /home/my-user/Desktop with the actual path to the directory you want to grant Copilot access to (e.g., your project folder, or your Desktop for this example).
JSON

Save the settings.json file.

6. Select the MCP Server in Copilot Chat

Open the Copilot Chat panel in VS Code. In the bottom right corner of the chat window, you'll see a small tools icon. Click it, and you should see "MCP server: filesystem" listed. Ensure it is selected. If not, click on it to enable it.

7. Start the Conversation!

You're all set! Now you can start asking Copilot questions about the files in the directory you specified. For example, try asking:

"What files do I have on my desktop?"

Copilot, powered by the MCP filesystem server, should now be able to list the files in that directory!

I hope this brief introduction helps you understand the power of MCP and how easily you can integrate it into your development environment. This is just the beginning of how AI can become even more context-aware and helpful.

Useful Resources: