The Model Context Protocol (MCP) Explained in 5 Minutes

Welcome to this publication. In this article, we'll explore the Model Context Protocol (MCP), an open-source, standardized protocol designed to provide essential context to Large Language Models (LLMs) like GPT and Claude. We will break down how MCP works and demonstrate its practical applications.

Understanding the Core Components of MCP

The Model Context Protocol is built upon three fundamental components that work in tandem:

1. Host: The environment where the development tools run. Examples include Visual Studio Code or the Windows operating system itself.
2. Client: The application that leverages the LLM and requires context. A prime example is GitHub Copilot.
3. Server: A service that provides the specific context. For instance, the GitHub MCP Server offers context related to repositories, issues, and more.

These three elements—Host, Client, and Server—form the complete MCP framework.

A Closer Look at the MCP Server

An MCP server is composed of several key parts that enable it to deliver rich, contextual information:

• Tools: These are specific functions the server can execute, such as performing a search or retrieving a DB record.
• Resources: These are the data sources the server can access, including files, database records, and other API services.
• Prompts: These define the types of tasks the server can handle, such as Q&A from documentation, script summarization, or processing JSON files.

MCP Architecture in Action

The MCP architecture facilitates a seamless flow of information. It starts with a Host (like VS Code) running an MCP Client (like Copilot). This client can then connect to numerous MCP servers, such as those provided by GitHub, Playwright, or Figma.

Each MCP server connects to its own dedicated data sources or interacts with external APIs to gather the necessary context for the LLM. Within the Microsoft ecosystem, this architecture involves components like Entra ID for authentication, various MCP clients (VS Code, Windows Copilot), and a wide range of tool registries and remote MCP servers.

Setting Up MCP Servers in Visual Studio Code

You can discover a comprehensive list of MCP servers available for VS Code by visiting the official page at code.visualstudio.com/mcp. Today, numerous popular technologies, from Asana to Zapier, offer MCP servers to integrate their services directly into your development workflow.

Step-by-Step Setup Guide

Here’s how to configure MCP servers for a project in VS Code.

Step 1: Create a Project Folder

First, create a new directory for your project and open it in Visual Studio Code.

mkdir mcp-demo
cd mcp-demo
code .

Step 2: Install MCP Servers

Next, you'll need to install the MCP servers that provide the context you need. For this demonstration, we will install three powerful servers:

• GitHub MCP Server: Used to access repositories, create issues, manage pull requests, and integrate with other GitHub APIs.
• Playwright MCP Server: Enables automated testing and interaction with web browsers.
• Context7 Server: A valuable tool for reading documentation and code examples from various libraries and frameworks.

Installation is typically handled by following the instructions on the MCP marketplace page for each server.

Step 3: Verify Installation

After installation, you can confirm that the servers are correctly configured by checking the mcp-user-configuration.json file in your VS Code settings. It should contain entries for the servers you added.

{
  "servers": [
    { "name": "github" },
    { "name": "playwright" },
    { "name": "context7" }
  ]
}

Interacting with MCP Servers Using an LLM

With the servers configured, you can open an LLM client, such as Copilot in agent mode. The client will automatically detect the mcp-user-configuration.json file and leverage the listed servers to understand the context of your requests.

Example 1: Listing GitHub Repositories

Let's start by asking the LLM to fetch a list of public repositories from a GitHub account.

Prompt:

"Give me a list of all the public repos from this account."

The LLM will use the GitHub MCP server to handle this request. It may first trigger an OAuth authentication flow to get the necessary permissions. Once authorized, it will access the GitHub API and return a list of the public repositories.

Note: If you have too many tools or servers enabled, the request might fail. In that case, you may need to temporarily disable some of them in your settings to narrow the context.

Example 2: Automating a Login Test with Playwright

Next, let's use the Playwright MCP server to automate a browser task. Imagine we have a web application and want to test its login functionality.

Prompt:

"I have a question. Please test the login with this password."

Upon receiving this command, the LLM will activate the Playwright server. You will see a browser window open automatically, where it will perform the following actions: 1. Navigate to the login page. 2. Enter the provided email and password into the form fields. 3. Click the login button to submit the form.

This demonstrates how MCP can translate a natural language command into a complex, automated browser interaction, providing the LLM with the context it needs to perform the test accurately. This powerful protocol streamlines how developers can integrate contextual data into their AI-driven workflows, making development faster and more intuitive.