Skip to content

DEV Community

RoyserVillanueva

Posted on Jul 8

MCP Servers: The Bridge Connecting Your AI to the Real World

#mcp #ai #development

Imagine being able to ask your AI assistant to review your code on GitHub, query a database, or draft a report in your favorite productivity tool, all from a single conversation. That's exactly what the Model Context Protocol (MCP) makes possible.

An MCP Server acts as a universal translator. It allows your AI client (like Claude, VSCode, or Cursor) to communicate in a standardized way with external data sources and tools. It transforms your AI from an "isolated chat" into an assistant that can actually execute tasks in your working environment.

The Power of Connection: Clients and Servers

The beauty of MCP lies in its flexibility. A single MCP server can connect to multiple clients. This means you can set up your server once and use it across different platforms.
According to the official documentation, you can install and connect MCP servers to popular clients like:

Claude Desktop & Claude Code: For conversational and command-line interactions
VS Code & Cursor: For seamless integration with your development environment
GitHub Copilot CLI: To extend your coding assistant's capabilities
Zed, Gemini CLI, Goose, and many more: The list keeps growing, demonstrating widespread adoption of the protocol ## How to Configure It: A Quick Look Configuration is usually straightforward and relies on JSON files. For many clients, you just need to specify the command to run your server. For example, to add a filesystem server to a VSCode project, you'd create a .vscode/mcp.json file with content like this:

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

This file tells VSCode how to start the server. Configuration can be at the project level (to share with your team) or global (for personal use across all your projects).

Your First Server: A Practical Example

Building your own MCP server is more accessible than it might seem. The official TypeScript/JavaScript SDK lets you create a server with custom tools, resources, and prompts.
Here's a simple but complete "Echo Server" example demonstrating the three fundamental concepts:

import { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";
import { z } from "zod";

const server = new McpServer({
  name: "Echo",
  version: "1.0.0"
});

// 1. RESOURCE: Provides access to structured data
server.resource(
  "echo",
  new ResourceTemplate("echo://{message}", { list: undefined }),
  async (uri, { message }) => ({
    contents: [{
      uri: uri.href,
      text: `Resource echo: ${message}`
    }]
  })
);

// 2. TOOL: Allows executing actions or functions
server.tool(
  "echo",
  { message: z.string() },
  async ({ message }) => ({
    content: [{ type: "text", text: `Tool echo: ${message}` }]
  })
);

// 3. PROMPT: Reusable instruction templates
server.prompt(
  "echo",
  { message: z.string() },
  ({ message }) => ({
    messages: [{
      role: "user",
      content: {
        type: "text",
        text: `Please process this message: ${message}`
      }
    }]
  })
);

Resources: Like files or data that the client can read
Tools: Functions the AI can execute to perform actions (like querying an API, reading a file, etc.)
Prompts: Message templates that help guide user interactions

A more complex example would be a server connecting to SQLite to run database queries. The querytool below allows the AI to execute SQL and get results in JSON format:

server.tool(
  "query",
  { sql: z.string() },
  async ({ sql }) => {
    const db = getDb();
    try {
      const results = await db.all(sql);
      return {
        content: [{
          type: "text",
          text: JSON.stringify(results, null, 2)
        }]
      };
    } catch (err: unknown) {
      // ... error handling
    }
  }
);

Security and Final Considerations

When implementing an MCP server, security is crucial. This protocol grants AI access to your systems, so best practices are essential:

Principle of Least Privilege: Configure your API keys and access tokens with only the minimum permissions needed. For example, when using a GitHub server, don't grant admin permissions if it only needs to read issues
Local Environment: In development environments, ensure your server isn't exposed to the internet. The connection between client and server is typically local, minimizing risks
Be Careful with Command Execution: If your server allows executing system commands (like a Shell server), the risk is high. Isolate it in a controlled environment or Docker container

Example Repository

RoyserVillanueva / mcp-server

🚀 Mi MCP Server

Un servidor del Model Context Protocol (MCP) construido con TypeScript que se conecta con cualquier cliente MCP como Claude, VS Code, Cursor y más

📋 Tabla de Contenidos

✨ Características

✅ Herramientas (Tools): Funciones que la IA puede ejecutar
✅ Recursos (Resources): Datos estructurados que la IA puede leer
✅ Prompts: Plantillas de instrucciones reutilizables
✅ Compatible con múltiples clientes: VS Code, Claude Desktop, Cursor y más
✅ TypeScript: Código tipado y moderno
✅ Fácil de extender: Añade tus propias herramientas en minutos

🛠️ Herramientas Disponibles

Herramienta	Descripción	Ejemplo
`echo`	Devuelve el mensaje que recibe	`echo("Hola mundo")` → "Echo: Hola mundo"
`sum`	Suma dos números	`sum(5, 3)` → "5

…

Conclusion

The Model Context Protocol is positioned to become the standard integration layer for AI. It allows you to build assistants that don't just converse, but take action.

Whether you're a developer looking to extend your AI capabilities, or a tech enthusiast curious about the future of AI integration, MCP offers a powerful and accessible way to connect AI with your digital world.

Top comments (0)

Subscribe