Getting Started with (MCP) Model Context Protocol for AI-Powered Development

Note: This post was built to introduce the features and usage of the Model Context Protocol (MCP) for developers integrating Large Language Models (LLMs) into their tools and workflows.

MCP is an open protocol that standardizes how applications provide context to LLMs—bringing structure to your AI interactions.

What is MCP?

MCP (Model Context Protocol) defines a standard for communication between tools, servers, and LLM agents. It enables structured data and commands to be exchanged between your development environment and an LLM interface (like a chat agent), enhancing tool interoperability and developer productivity.

MCP was designed to reduce friction when integrating new tools with LLMs and is already supported by various SDKs and IDEs.

Benefits of Using MCP

• 🔌 Plug-and-play integration with tools like VS Code.
• 📦 Custom tool creation using SDKs.
• 💬 Direct communication with AI agents via terminal/stdio.
• 🌐 Cross-model support (works with Claude, GPT, and others).
• 🚀 Boost productivity in AI-assisted development.

How to Start: Building with MCP

Here’s a practical step-by-step guide to get your first MCP server up and running.

1. Install the TypeScript SDK

npm install @modelcontextprotocol/sdk

2. Set Up Your MCP Server

Example server in TypeScript:

import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import z from "zod";

// 1️⃣ MCP Server Configuration
// ----------------------------
// Core setup for the MCP server instance
// Metadata will be visible to connected clients (like VS Code)
const server = new McpServer({
  name: "Weather Server", // Service name shown in IDEs
  version: "1.0.0", // Semantic versioning (critical for compatibility)
});

// 2️⃣ MCP Tool: Weather API Integration
// ------------------------------------
// Registers a tool that can be called from AI agents/IDEs
server.tool(
  "get-weather", // Unique command identifier
  "Fetches current weather for a city", // Description shown in tooltips
  {
    // Input validation using Zod:
    city: z.string().describe("City name for weather lookup"),
  },
  async ({ city }) => {
    // Handler implementation
    // 3️⃣ Geocoding API Call
    // ---------------------
    // Convert city name to coordinates (required by weather API)
    const geoResponse = await fetch(
      `https://geocoding-api.open-meteo.com/v1/search?name=${city}&count=1&language=en&format=json`,
    );

    // 4️⃣ Error Handling
    if (!geoResponse.ok) {
      return formatError(`Failed to geocode city: ${city}`);
    }

    const geoData = await geoResponse.json();
    if (!geoData.results?.length) {
      return formatError(`City not found: ${city}`);
    }

    // 5️⃣ Weather API Call
    // -------------------
    const { latitude, longitude } = geoData.results[0];
    const weatherResponse = await fetch(
      `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&hourly=temperature_2m`,
    );
    const weatherData = await weatherResponse.json();

    // 6️⃣ Structured Response
    // ----------------------
    // MCP requires specific response format for AI agents
    return {
      content: [
        {
          type: "text",
          text: `Weather in ${city}:\n${JSON.stringify(weatherData.hourly, null, 2)}`,
        },
      ],
    };
  },
);

// Helper function for error formatting
function formatError(message: string) {
  return {
    content: [
      {
        type: "text",
        text: `❌ ${message}`,
      },
    ],
  };
}

// 7️⃣ Transport Layer
// ------------------
// Enables communication via stdin/stdout (common for CLI tools)
const transport = new StdioServerTransport();
await server.connect(transport);

To run:

npx -y tsx main.ts

3. Add MCP Server to VS Code Copilot

VS Code supports MCP through the MCP Inspector extension. To connect:

1. Open Command Palette (Cmd + Shift + P).
2. Search for MCP: Add Server.
3. Select transport type: Command (stdio).
4. Add your server command (e.g., npx -y tsx main.ts).
5. Assign a workspace-specific name (creates a .vscode config).

4. Use Your MCP Tools in Chat

To use the tool:

• Open chat inside VS Code.
• Click Agent → Tools.
• Select your MCP tool (e.g., MCP-server: weather).
• Use the tool in natural conversation with the agent.

Tip: A maximum of 120 tools can be active—uncheck others if needed.

Bonus: Tools, Inspector, and Examples

• 🔎 Inspector: To visually inspect your MCP tools, run:

npx -y @modelcontextprotocol/inspector

• 🧠 MCP + Claude/OpenAI: You can pair MCP tools with agents like Claude or GPT.

• 📁 GitHub examples: Explore projects like Microsoft’s MCP Examples.

Final Thoughts

MCP is a game-changer in the LLM-powered development ecosystem. It allows developers to build and share tools that can be directly used in AI-enhanced workflows. With strong IDE support and an open ecosystem, the possibilities are just beginning.